diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 750cea4b16e..87e2a341d56 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -2,7 +2,7 @@ # https://help.github.com/en/articles/about-github-actions # https://help.github.com/en/articles/workflow-syntax-for-github-actions -name: Install Dependencies, Lint +name: Validate Docs on: [pull_request] @@ -13,22 +13,30 @@ jobs: strategy: matrix: node_version: [20] + # Build processes work differently across operating systems, so the + # checks run on each one to make sure anyone can contribute to the + # docs. os: [windows-latest, macOS-latest] steps: - - uses: actions/checkout@v4 - - name: Use Node.js ${{ matrix.node_version }} - uses: actions/setup-node@v4 + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: ⚙️ Use Node.js ${{ matrix.node_version }} + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: node-version: ${{ matrix.node_version }} - - name: Install Dependencies + - name: 🕸️ Install Dependencies run: npm ci --legacy-peer-deps - - name: Lint + - name: 🖌️ Lint run: npm run lint - - name: Spell Check + - name: Test + run: npm run test + - name: 🔤 Spell Check run: npm run spellcheck + - uses: ./.github/workflows/actions/check-translations # Lint and spell check changes should be pushed # to the branch before the branch is merge eligible. - - name: Check Diff + # + # The translation keys check should not produce any changes. + - name: 🔍 Check Diff run: git diff --exit-code shell: bash diff --git a/.github/workflows/actions/check-translations/action.yml b/.github/workflows/actions/check-translations/action.yml new file mode 100644 index 00000000000..3e53a643597 --- /dev/null +++ b/.github/workflows/actions/check-translations/action.yml @@ -0,0 +1,20 @@ +name: 'Check Translations' +description: 'Validates the translated locales without building them' +runs: + using: 'composite' + steps: + # Surfaces failures unique to a translated locale, such as duplicate + # translation keys, while the changes are still in review. Previews only + # build the default locale, so translated locale issues would not surface + # until after merging into main. + # + # The sidebars reference the native and CLI docs, which are generated rather + # than committed, so those have to exist before the translations can be + # extracted. + - name: 🇯🇵 Extract Translations + shell: bash + run: | + trap 'rm -rf i18n' EXIT + node scripts/native.mjs + node scripts/cli.mjs + npx docusaurus write-translations --locale ja diff --git a/.prettierignore b/.prettierignore index c750d314e8a..1c90550de8f 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,5 +1,14 @@ -src/theme/DocItem -src/theme/DocRoot +# Ejected components keep upstream's formatting so they stay diffable against +# @docusaurus/theme-classic. Refer to `src/theme/README.md`. +# Wrapped components are our own code, so they follow the repo's formatting. +src/theme/DocItem/Layout/index.tsx +src/theme/EditMetaRow/index.tsx +src/theme/Icon/Edit/index.tsx +src/theme/Icon/Language/index.tsx +src/theme/Layout/index.tsx +src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +src/theme/prism-include-languages.ts + legacy-stencil-components scripts/bak @@ -7,7 +16,16 @@ docs/api docs/native versioned_docs/version-v*/native docs/cli/commands +# Each definition in these files is one line of prose inside a JSX
. +# Prettier's mdx parser reflows those children and moves link text onto its own +# line, which MDX then wraps in a paragraph, rendering invalid HTML such as +#

Android SDK

. Formatting these files reintroduces that markup. docs/reference/glossary.md +versioned_docs/version-v*/reference/glossary.md + +# Archived versions +versioned_docs/version-v5 +versioned_docs/version-v6 static/code/stackblitz diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6f589964046..534db3dd80a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -19,6 +19,7 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check - [Reporting Issues](#reporting-issues) - [Pull Request Guidelines](#pull-request-guidelines) - [Deploying](#deploying) + - [Archiving a Version](#archiving-a-version) - [License](#license) --- @@ -34,6 +35,42 @@ npm install npm start ``` +#### GitHub Token + +The documentation build requires a GitHub Personal Access Token to fetch Ionic Framework release notes. The build will still work locally without it (release notes will be empty), but it's required for Vercel preview and production builds. + +**Local Development:** + +1. Create a [fine-grained Personal Access Token](https://github.com/settings/personal-access-tokens/new) with: + + - **Repository access**: Public repositories (read-only) + - **Expiration**: 366 days (update annually) + +2. Add the token to your shell profile (`~/.zshrc`, `~/.bashrc`, etc.): + + ```sh + export GITHUB_TOKEN=github_pat_... + ``` + +3. Reload your shell or run `source ~/.zshrc` (or equivalent) + +**Vercel:** + +1. Create a [fine-grained Personal Access Token](https://github.com/settings/personal-access-tokens/new) with the same settings as above, but with: + + - **Owner**: ionic-team organization (not your personal account) + +2. Add the token to Vercel project settings: + + - Go to your project on Vercel + - Navigate to **Settings → Environment Variables** + - Add `GITHUB_TOKEN` with the token value + - Select Production and Preview environments + +3. Redeploy the project for the token to take effect + +Without the token, the build will fail with an error message indicating the token is missing. + ### Linting Documentation This repository uses [Prettier](https://prettier.io/), an opinionated code formatter, in order to keep consistent formatting throughout the documentation. Run the following command to automatically fix all formatting, and then push any changes: @@ -175,6 +212,33 @@ When submitting pull requests, please keep the scope of your change contained to The Ionic documentation's `main` branch is deployed automatically and separately from the [Ionic site](https://github.com/ionic-team/ionic-site) itself. The Ionic site then uses a proxy for paths under `/docs` to request the deployed documentation. +### Archiving a Version + +Archived versions are served from a frozen Vercel deployment instead of being rebuilt on every `main` deploy, which keeps build times and memory usage low. Two files control this: + +- [`versions.json`](./versions.json): lists the versions Docusaurus rebuilds on every deploy. +- [`versionsArchived.json`](./versionsArchived.json): maps each archived version to the frozen deployment URL the version picker links to. + +The archived URL has to point at a build that _included_ the version, so you build it first, then move it to `versionsArchived.json`: + +1. **Build the version.** Make sure it is in `versions.json`. If you are refreshing an already-archived version, move it out of `versionsArchived.json` and back into `versions.json`. Commit, push and let Vercel deploy. +2. **Promote the deployment.** In the Vercel dashboard, open that deployment and **Promote to Production** so it does not get cleaned up. Wait for the build to finish before pushing again, or it may get canceled. +3. **Copy its URL.** Use the deployment's unique `ionic-docs--ionic1.vercel.app` URL, not the branch or production alias. +4. **Archive it.** Remove the version from `versions.json`, then add it to `versionsArchived.json` with `/docs/` appended and no trailing slash (a trailing slash causes a brief 404 flash): + + ```json + { + "v6": "https://ionic-docs--ionic1.vercel.app/docs/v6" + } + ``` + +5. **Open a PR.** Once merged, the version picker links to the archive and `main` stops building that version. + +Removed versions keep their `versioned_docs/` and `versioned_sidebars/` content, so they can be rebuilt anytime by adding them back to `versions.json`. + +> [!NOTE] +> Ionic v3 and v4 use other build tools and are not managed here. + --- ## License diff --git a/_templates/README.md b/_templates/README.md index 60a3ebef83d..7f5e1fe828a 100644 --- a/_templates/README.md +++ b/_templates/README.md @@ -26,7 +26,7 @@ Once you've generated your playground, you need to add it to the main markdown f ``` ## Feature -import Feature from '@site/static/usage/v8/button/feature/index.md'; +import Feature from '@site/static/usage/v9/button/feature/index.md'; ``` diff --git a/_templates/playground/new/angular_example_component_ts.md.ejs.t b/_templates/playground/new/angular_example_component_ts.md.ejs.t index 548a45dd57b..348bbb0b8df 100644 --- a/_templates/playground/new/angular_example_component_ts.md.ejs.t +++ b/_templates/playground/new/angular_example_component_ts.md.ejs.t @@ -4,7 +4,7 @@ to: "<%= `static/usage/v${version}/${name}/${path}/angular/example_component_ts. --- ```ts import { Component } from '@angular/core'; -import { <%= pascalComponent %> } from '@ionic/angular/standalone'; +import { <%= pascalComponent %> } from '@ionic/angular'; @Component({ selector: 'app-example', diff --git a/_templates/playground/new/index.js b/_templates/playground/new/index.js index c6f9fb53b6c..c69d04db737 100644 --- a/_templates/playground/new/index.js +++ b/_templates/playground/new/index.js @@ -54,8 +54,8 @@ module.exports = { type: 'select', name: 'version', message: 'Select the Ionic Framework version for the playground', - initial: '8', - choices: ['6', '7', '8'], + initial: '9', + choices: ['6', '7', '8', '9'], }, { type: 'toggle', diff --git a/_templates/playground/new/vue.md.ejs.t b/_templates/playground/new/vue.md.ejs.t index 1a13f8b8dcc..5867eb38b95 100644 --- a/_templates/playground/new/vue.md.ejs.t +++ b/_templates/playground/new/vue.md.ejs.t @@ -2,7 +2,7 @@ arbitrary: <% pascalComponent = h.changeCase.pascal(component) %> to: "<%= `static/usage/v${version}/${name}/${path}/vue.md` %>" --- -```html +```vue diff --git a/babel.config.js b/babel.config.js deleted file mode 100644 index e00595dae7d..00000000000 --- a/babel.config.js +++ /dev/null @@ -1,3 +0,0 @@ -module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], -}; diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index 873b109548d..7080739c57c 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -14,7 +14,7 @@ Vetur Wistia WCAG CDK - +browserslistrc actionsheet fabs datetime @@ -26,17 +26,20 @@ searchbars sidemenu textarea textareas - +ionicframework appstore authed autogrow automations autoplay Callout +codemods comparewith composables engageable flexbox +fontawesome +fortawesome frontmatter fullscreen geolocation @@ -58,11 +61,15 @@ preconfigured preflighted proxying quickstart +remixicon retargeted runtimes scroller subcomponent subcomponents +subpath +subpaths +svgs swipeable templating transpiling @@ -83,6 +90,3 @@ msallowfullscreen oallowfullscreen webkitallowfullscreen webnative - -browserslistrc -ionicframework diff --git a/cspell.json b/cspell.json index 972166aa24f..ab8b25ef41b 100644 --- a/cspell.json +++ b/cspell.json @@ -18,6 +18,8 @@ "versioned_docs/**/api", "versioned_docs/**/cli", "versioned_docs/**/native", + "versioned_docs/version-v5", + "versioned_docs/version-v6", "node_modules", "src/translate" ], diff --git a/docs/angular/add-to-existing.md b/docs/angular/add-to-existing.md index d9a41e4e1a1..8a551abfd4e 100644 --- a/docs/angular/add-to-existing.md +++ b/docs/angular/add-to-existing.md @@ -85,22 +85,19 @@ While `core.css` is required, `normalize.css`, `structure.css`, and `typography. Update `src/app/app.config.ts` to include `provideIonicAngular`: ```typescript title="src/app/app.config.ts" -import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; +import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core'; import { provideRouter } from '@angular/router'; import { routes } from './app.routes'; -import { provideIonicAngular } from '@ionic/angular/standalone'; +import { provideIonicAngular } from '@ionic/angular'; export const appConfig: ApplicationConfig = { - providers: [ - provideBrowserGlobalErrorListeners(), - provideZoneChangeDetection({ eventCoalescing: true }), - provideRouter(routes), - provideIonicAngular({}), - ], + providers: [provideBrowserGlobalErrorListeners(), provideRouter(routes), provideIonicAngular({})], }; ``` +This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.md) for details. + ## Using Individual Components After completing the setup above, you can start using Ionic components in your existing Angular app. Here's an example of how to use them: @@ -115,7 +112,7 @@ Then, import the components in `src/app/app.ts`: ```ts title="src/app/app.ts" import { Component } from '@angular/core'; -import { IonButton, IonDatetime } from '@ionic/angular/standalone'; +import { IonButton, IonDatetime } from '@ionic/angular'; @Component({ selector: 'app-root', @@ -210,7 +207,7 @@ Then, update `src/app/app.ts` to include the component imports: ```ts title="src/app/app.ts" import { Component } from '@angular/core'; -import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; +import { IonApp, IonRouterOutlet } from '@ionic/angular'; @Component({ selector: 'app-root', @@ -253,7 +250,7 @@ Then, create `src/app/home/home.ts` with the following: ```ts title="src/app/home/home.ts" import { Component } from '@angular/core'; -import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ selector: 'app-home', diff --git a/docs/angular/build-options.md b/docs/angular/build-options.md index 630864d1621..ada6153483b 100644 --- a/docs/angular/build-options.md +++ b/docs/angular/build-options.md @@ -5,7 +5,7 @@ import TabItem from '@theme/TabItem'; Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach. -While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach. +The Standalone approach uses modern Angular APIs and is the recommended way to build Ionic applications. The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. New projects should use the Standalone approach. Existing apps will continue to work but should plan to migrate. Refer to [Migrating from Modules to Standalone](#migrating-from-modules-to-standalone) for migration guidance. ## Standalone @@ -17,7 +17,7 @@ Ionic UI components as Angular standalone components is supported starting in Io Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based. -See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components. +Ionic のスタンドアロンコンポーネントを利用するために、Ionic アプリを更新する方法については、[スタンドアロン移行ガイド](#migrating-from-modules-to-standalone)を参照してください。 **Benefits** @@ -29,10 +29,14 @@ See the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for 1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up. +:::info[Code splitting] +Ionic ships standalone components from a single entry point (`@ionic/angular`). Bundlers such as Webpack and esbuild cannot split code from a single entry point across separate chunks, so the Ionic components you import are included in the main bundle rather than in the chunk for the route or component where they are used. Unused components are still tree-shaken out of the build. +::: + ### Usage with Standalone-based Applications :::warning -All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. ::: **Bootstrapping and Configuration** @@ -43,7 +47,7 @@ Ionic Angular needs to be configured when the Angular application calls `bootstr import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; -import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; +import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; @@ -59,11 +63,11 @@ bootstrapApplication(AppComponent, { **Components** -In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. ```typescript title="home.page.ts" import { Component } from '@angular/core'; -import { IonButton, IonContent } from '@ionic/angular/standalone'; +import { IonButton, IonContent } from '@ionic/angular'; @Component({ selector: 'app-home', @@ -87,7 +91,7 @@ For developers using Ionicons 7.2 or newer, passing only the SVG data will cause ```typescript title="home.page.ts" import { Component } from '@angular/core'; -import { IonIcon } from '@ionic/angular/standalone'; +import { IonIcon } from '@ionic/angular'; import { addIcons } from 'ionicons'; import { logoIonic } from 'ionicons/icons'; @@ -153,7 +157,7 @@ Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on ```typescript title="home.page.ts" import { Component } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { IonButton, IonRouterLink } from '@ionic/angular'; @Component({ selector: 'app-home', @@ -199,7 +203,7 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us ### Usage with NgModule-based Applications :::warning -All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +All Ionic imports should be imported from the `@ionic/angular` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular/lazy` may pull in lazy loaded Ionic code which can interfere with treeshaking. ::: **Bootstrapping and Configuration** @@ -211,7 +215,7 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; -import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; @@ -227,11 +231,11 @@ export class AppModule {} **Components** -In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. ```typescript title="home.module.ts" import { NgModule } from '@angular/core'; -import { IonButton, IonContent } from '@ionic/angular/standalone'; +import { IonButton, IonContent } from '@ionic/angular'; import { HomePage } from './home.page'; import { HomePageRoutingModule } from './home-routing.module'; @@ -315,7 +319,7 @@ Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on ```typescript title="home.module.ts" import { NgModule } from '@angular/core'; import { RouterLink } from '@angular/router'; -import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { IonButton, IonRouterLink } from '@ionic/angular'; import { HomePage } from './home.page'; import { HomePageRoutingModule } from './home-routing.module'; @@ -361,6 +365,10 @@ Ionic Angular's standalone components use ES Modules. As a result, developers us ## Modules +:::warning[Deprecation Notice] +The Modules approach, including `IonicModule`, is **deprecated** and will be removed in a future major release. Existing applications will continue to work during the deprecation period but should migrate using the [Standalone migration guide](#migrating-from-modules-to-standalone). New applications should use the [Standalone](#standalone) approach. +::: + ### Overview Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime. @@ -382,7 +390,7 @@ In the example below, we are using `IonicModule` to create a lazily loaded versi import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; -import { IonicModule } from '@ionic/angular'; +import { IonicModule } from '@ionic/angular/lazy'; import { AppComponent } from './app.component'; @@ -399,7 +407,7 @@ export class AppModule {} :::tip Try our automated utility for migrating to standalone! -See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. +Refer to the [standalone migration codemods](https://github.com/ionic-team/ionic-angular-standalone-codemods) for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. ::: The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. @@ -416,14 +424,14 @@ Follow these steps if your Angular application is already using the standalone a 2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. -3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. +3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. ```diff title="main.ts" import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; -- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; -+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular/lazy'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; @@ -446,18 +454,18 @@ bootstrapApplication(AppComponent, { 4. Remove any references to `IonicModule` found elsewhere in your application. -5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. +5. Update any existing imports from `@ionic/angular/lazy` to import from `@ionic/angular` instead. ```diff -- import { Platform } from '@ionic/angular'; -+ import { Platform } from '@ionic/angular/standalone'; +- import { Platform } from '@ionic/angular/lazy'; ++ import { Platform } from '@ionic/angular'; ``` 6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component. ```diff title="app.component.ts" import { Component } from '@angular/core'; -+ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; ++ import { IonApp, IonRouterOutlet } from '@ionic/angular'; @Component({ selector: 'app-root', @@ -475,7 +483,7 @@ export class AppComponent { ```diff title="test.component.ts" import { Component } from '@angular/core'; -+ import { IonIcon } from '@ionic/angular/standalone'; ++ import { IonIcon } from '@ionic/angular'; + import { addIcons } from 'ionicons'; + import { alarm, logoIonic } from 'ionicons/icons'; @@ -507,8 +515,8 @@ export class TestComponent { ```diff title="test.component.ts" import { Component } from '@angular/core'; -- import { IonButton } from '@ionic/angular/standalone'; -+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +- import { IonButton } from '@ionic/angular'; ++ import { IonButton, IonRouterLink } from '@ionic/angular'; @Component({ selector: 'app-root', @@ -523,11 +531,11 @@ import { Component } from '@angular/core'; export class TestComponent {} ``` -10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular/lazy` module specifiers for import recommendations. ```json title=".vscode/settings.json" { - "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/lazy"] } ``` @@ -539,14 +547,14 @@ Follow these steps if your Angular application is still using the NgModule archi 2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. -3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. +3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. ```diff title="app.module.ts" import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; -- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; -+ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular/lazy'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; @@ -572,11 +580,11 @@ export class AppModule {} 4. Remove any references to `IonicModule` found elsewhere in your application. -5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. +5. Update any existing imports from `@ionic/angular/lazy` to import from `@ionic/angular` instead. ```diff -- import { Platform } from '@ionic/angular'; -+ import { Platform } from '@ionic/angular/standalone'; +- import { Platform } from '@ionic/angular/lazy'; ++ import { Platform } from '@ionic/angular'; ``` 6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module. @@ -585,8 +593,8 @@ export class AppModule {} import { enableProdMode, importProvidersFrom } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { RouteReuseStrategy, provideRouter } from '@angular/router'; -- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; -+ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; +- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular'; import { routes } from './app/app.routes'; import { AppComponent } from './app/app.component'; @@ -614,7 +622,7 @@ import { HomePage } from './home.page'; import { HomePageRoutingModule } from './home-routing.module'; -+ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; ++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; @NgModule({ imports: [ @@ -653,7 +661,7 @@ export class TestComponent { ```diff title="test.module.ts" import { NgModule } from '@angular/core'; import { TestComponent } from './test.component'; -+ import { IonIcon } from '@ionic/angular/standalone'; ++ import { IonIcon } from '@ionic/angular'; @NgModule({ imports: [ @@ -679,8 +687,8 @@ export class TestComponentModule {} ```diff title="test.module.ts" import { NgModule } from '@angular/core'; import { TestComponent } from './test.component'; -- import { IonButton } from '@ionic/angular/standalone'; -+ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +- import { IonButton } from '@ionic/angular'; ++ import { IonButton, IonRouterLink } from '@ionic/angular'; @NgModule({ imports: [ @@ -691,10 +699,10 @@ import { TestComponent } from './test.component'; }) ``` -10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular/lazy` module specifiers for import recommendations. ```json title=".vscode/settings.json" { - "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/lazy"] } ``` diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md index c7c775fd69c..2367036ab74 100644 --- a/docs/angular/injection-tokens.md +++ b/docs/angular/injection-tokens.md @@ -34,7 +34,7 @@ To use the `IonModalToken`, inject it into your component's constructor: ```tsx import { Component, inject } from '@angular/core'; -import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ selector: 'app-modal', @@ -66,7 +66,7 @@ You can use the injected modal reference to listen to modal lifecycle events: ```tsx import { Component, inject, OnInit } from '@angular/core'; -import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ selector: 'app-modal', @@ -108,7 +108,7 @@ The injected modal reference provides access to all modal properties and methods ```tsx import { Component, inject, OnInit } from '@angular/core'; -import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ selector: 'app-modal', @@ -149,7 +149,7 @@ When opening a modal that uses the injection token, you can pass the component d ```tsx import { Component, inject } from '@angular/core'; -import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone'; +import { IonContent, IonButton, ModalController } from '@ionic/angular'; import { ModalComponent } from './modal.component'; @Component({ diff --git a/docs/angular/lifecycle.md b/docs/angular/lifecycle.md index 85a76955693..34c8fafba64 100644 --- a/docs/angular/lifecycle.md +++ b/docs/angular/lifecycle.md @@ -15,26 +15,26 @@ sidebar_label: ライフサイクル ![Flowchart illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png 'Ionic Lifecycle Diagram') -## Angular の Life Cycle Events +## Angular のライフサイクルイベント -Ionic は Angular が提供する Life Cycle Events を取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。 +Ionic は Angular が提供するライフサイクルイベントを取り入れています。最もよく使う 2 つの Angular イベントは次のとおりです。 -| Event Name | Description | +| イベント名 | 説明 | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | `ngOnInit` | コンポーネントの初期化中に発生します。このイベントを使用して、ローカルメンバーを初期化し、一度だけ実行する必要がある Service を呼び出すことができます。 | | `ngOnDestroy` | Angular がビューを破棄する直前に発生します。 observables の unsubscribe などのクリーンアップに役立ちます。 | -Angular の Component Life Cycle イベントの詳細については、それらの [component lifecycle docs](https://angular.jp/guide/lifecycle-hooks) をご覧ください。 +Angular のコンポーネントライフサイクルイベントの詳細については、[コンポーネントライフサイクルのドキュメント](https://angular.jp/guide/lifecycle-hooks)をご覧ください。 :::note `ion-nav` または `ion-router-outlet` を使用するコンポーネントは、 `OnPush` 変更検出方式を使用しないでください。そうすることで、 `ngOnInit` などのライフサイクル・フックが起動するのを防ぐことができます。また、非同期状態の変更は正しくレンダリングされない場合があります。 ::: -## Ionic の Page Events +## Ionic のページイベント -Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります: +Angular のライフサイクルイベントに加えて、Ionic Angular には、使用可能ないくつかの追加イベントがあります: -| Event Name | Description | +| イベント名 | 説明 | | ------------------ | ------------------------------------------------------------------------ | | `ionViewWillEnter` | コンポーネントが表示されるアニメーションがはじまる時に発火します。 | | `ionViewDidEnter` | コンポーネントが表示されるアニメーションが **終了した時に** 発火します。 | @@ -49,7 +49,7 @@ Angular の Life Cycle Events に加えて、Ionic Angular には、使用可能 ![Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation') -## Ionic が Page の Life をどのように処理するか +## Ionic がページのライフサイクルを処理する仕組み Ionic は `` という router outlet を持っています。この outlet が Angular の `` を継承し、さらに拡張して、モバイルデバイスのためのより良い体験を可能にしました。 @@ -91,13 +91,13 @@ export class AuthGuard implements CanActivate { ルートガードの使い方の詳細については、Angular の [router documentation](https://angular.jp/guide/router) を参照してください。 -## Life Cycle メソッドのガイダンス +## ライフサイクルメソッドのガイダンス -以下は、life cycle events ごとのユースケースに関するヒントです。 +以下は、ライフサイクルイベントごとのユースケースに関するヒントです。 -- `ngOnInit` - コンポーネントを初期化し、Service からアクセスごとに更新する必要がないデータをロードします。 -- `ionViewWillEnter` - `ionViewWillEnter` は View がナビゲートされる度に呼び出されるので（初期化されているかどうかにかかわらず）、Service からデータをロードするのに適したメソッドです。ただし、アニメーション中にデータがを取得すると、大量の DOM 操作が開始される可能性があります。これにより、ぎこちないアニメーションが発生する可能性があります。 -- `ionViewDidEnter` - `ionViewWillEnter` を使ってデータを取得していてパフォーマンスに問題がある時は、`ionViewDidEnter` を代わりに使うことができます。ただし、Page がユーザーに表示されるまではこのイベントは発火しません。そのため、ロードインジケータまたはスケルトン画面を使用することをお勧めします。これにより、遷移が完了した後にコンテンツが不自然に点滅することはありません。 -- `ionViewWillLeave` - observables の unsubscribing のように、クリーンアップで利用します。 `ngOnDestroy` はあなたが現在のページから遷移する時には発火しない可能性がありますので、画面が表示されていない時にアクティブにしたくない場合はここでクリーンアップの処理を行います。 -- `ionViewDidLeave` - このイベントが発生すると、新しいページへと完全に遷移したことがわかります。そのため、ビューが表示されているときに通常は行わない可能性があるロジックはすべてここに移動できます。 -- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページのクリーンアップロジックはここにおいてください。 +- `ngOnInit` - コンポーネントを初期化し、各訪問時に更新が不要なサービスからデータを読み込みます。 +- `ionViewWillEnter` - `ionViewWillEnter` はビューがナビゲートされるたびに（初期化されているかどうかに関係なく）呼ばれるため、サービスからデータをロードするのに適したメソッドです。ただし、アニメーション中にデータが返ってくると、多くの DOM 操作が開始され、アニメーションがぎこちなくなることがあります。 +- `ionViewDidEnter` - データをロードするときに `ionViewWillEnter` を使用してパフォーマンスに問題が生じる場合は、代わりに `ionViewDidEnter` でデータ呼び出しを行うことができます。ただし、このイベントはページがユーザーに表示されてから発火するため、コンテンツが遷移完了後に不自然にフラッシュしないよう、ローディングインジケーターやスケルトンスクリーンを使用することを検討してください。 +- `ionViewWillLeave` - Observable の購読解除のようなクリーンアップに使用できます。`ngOnDestroy` は現在のページからナビゲートしたときに発火しない可能性があるため、スクリーンが表示されていない間にアクティブにしたくない場合は、ここにクリーンアップコードを置いてください。 +- `ionViewDidLeave` - このイベントが発火すると、新しいページが完全に遷移したことがわかるので、通常ビューが表示されているときには行わないロジックをここで実行できます。 +- `ngOnDestroy` - `ionViewWillLeave` でクリーンアップしたくないページ用のクリーンアップロジック。 diff --git a/docs/angular/navigation.md b/docs/angular/navigation.md index 96576a1b061..230a9b36f69 100644 --- a/docs/angular/navigation.md +++ b/docs/angular/navigation.md @@ -6,20 +6,20 @@ sidebar_label: ナビゲーション/ルーティング import useBaseUrl from '@docusaurus/useBaseUrl'; - Angular Navigation: How Routing & Redirects Work in Angular Apps + Angular ナビゲーション: Angular アプリのルーティングとリダイレクト このガイドでは、Ionic と Angular を使用して構築されたアプリでのルーティングのしくみについて説明します。 -Angular Router は、Angular アプリケーションで最も重要なライブラリの 1 つです。これがなければ、アプリはシングルビュー/シングルコンテキストアプリになるか、ブラウザのリロード時にナビゲーションのステートを維持できなくなります。Angular Router を使用すると、リンク可能でリッチなアニメーションを持つリッチなアプリを作成できます（もちろん、Ionic と組み合わせると！）。Angular Router の基本と、それを Ionic アプリケーション用に設定する方法を見てみましょう。 +Angular Router は、Angular アプリケーションにおいて最も重要なライブラリの一つです。これがなければ、アプリは単一ビュー/単一コンテキストのアプリになったり、ブラウザをリロードしたときにナビゲーション状態を維持できなくなります。Angular Router を使えば、リンク可能でリッチなアニメーションを持つアプリを作成することができます（もちろん Ionic と組み合わせた場合）。ここでは、Angular Router の基本と、Ionic アプリ向けにどのように設定できるかを順を追って見ていきましょう。 -## シンプルな Route +## シンプルなルート -ほとんどのアプリでは、some sort of route を持つことがしばしば必要になります。最も基本的な設定はこのようになります： +ほとんどのアプリでは、何らかのルートが必要になります。最も基本的な設定は次のようになります。 ```tsx @@ -70,7 +70,7 @@ URL path と Component の組み合わせを確認する最も簡単な方法は `/route1/route2/route3` と `/route1/route2/route4` の両方を読み込んだとおき, どちらの場合もリダイレクトします。 `pathMatch: 'prefix'` によって、一部でも一致したら該当するからです。 -## routes へのナビゲーション +## routes へのナビゲーション {/* #navigating-to-different-routes */} routes について説明してきましたが、それではどのようにしてそのルートにナビゲーションしたらいいのでしょうか。これには、 `routerLink` directive を利用します。先ほどの簡単な router 設定でこれを確認してみましょう: @@ -120,17 +120,17 @@ export class LoginComponent { ### LocationStrategy.historyGo を使ったナビゲーション -Angular Router には [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) メソッドがあり、アプリケーションの履歴を進んだり戻ったりすることができます。例を見てみましょう。 +Angular Router には、開発者がアプリケーションの履歴を前後に移動できる[LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo)メソッドがあります。例を見てみましょう。 次のようなアプリケーションの履歴があるとします： -`/ページA` --> `/ページB` --> `/ページC`。 +`/pageA` --> `/pageB` --> `/pageC`。 もし `/pageC` で `LocationStrategy.historyGo(-2)` を呼び出すと、 `/pageA` に戻る。その後、 `LocationStrategy.historyGo(2)` を呼び出すと、 `/pageC` に戻る。 -`LocationStrategy.historyGo()` の主な特徴は、アプリケーションの履歴が線形であることを想定していることです。つまり、`LocationStrategy.historyGo()` は非線形のルーティングを使用するアプリケーションでは使用すべきではありません。詳しくは [リニアルーティング対非リニアルーティング](#linear-routing-versus-non-linear-routing) を参照してください。 +`LocationStrategy.historyGo()`の重要な特徴の一つは、アプリケーションの履歴が線形であることを期待する点です。つまり、`LocationStrategy.historyGo()`は非線形ルーティングを使用するアプリケーションでは使用すべきではありません。詳細は[線形ルーティングと非線形ルーティング](#linear-routing-versus-non-linear-routing)を参照してください。 -## Lazy loading routes +## ルートの遅延読み込み {/* #lazy-loading-routes */} 現在のルート設定では、すべての Component が、ルートとなる `app.module` と同じ `chunk` に含まれているので理想的ではありません。代わりに、ルータにはコンポーネントを独自の `chunk` に分離できるように設定されています。 @@ -201,7 +201,9 @@ To get started with standalone components [visit Angular's official docs](https: ## Live Example -If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz. +import NavigationPlayground from '@site/static/usage/v9/navigation/index.md'; + + ## Linear Routing versus Non-Linear Routing @@ -263,9 +265,9 @@ We recommend keeping your application as simple as possible until you need to ad The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases. -For more on tabs, please see [Working with Tabs](#working-with-tabs). +タブの詳細については、[タブの操作](#working-with-tabs)を参照してください。 -For more on nested router outlets, please see [Nested Routes](#nested-routes). +ネストされたルーターアウトレットの詳細については、[ネストされたルート](#nested-routes)を参照してください。 ## Shared URLs versus Nested Routes @@ -319,13 +321,13 @@ The above routes are nested because they are in the `children` array of the pare Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url. -Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, you will see `ion-tab-bar` and `ion-tabs` components rendered in the first `ion-router-outlet`. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab. +ネストされたルートは、アウトレット A でコンテンツを表示しつつ、ネストされたアウトレット B 内にサブコンテンツを表示したい場合に使用するべきです。最も一般的な使用例はタブです。タブの Ionic スターターアプリケーションをロードすると、最初の`ion-router-outlet`が`ion-tab-bar`と`ion-tabs`コンポーネントをレンダリングします。`ion-tabs`コンポーネントは別の`ion-router-outlet`をレンダリングし、各タブの内容を表示する役割を持っています。 There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing. ## Working with Tabs -タブを使用すると、Angular Router にどのコンポーネントをロードする必要があるかを知るためのメカニズムを Ionic が提供しますが、タブコンポーネントでは複雑な作業が行われます。簡単な例を見てみましょう。 +タブを使用すると、Angular Router は Ionic にどのコンポーネントを読み込むべきかを知る仕組みを提供しますが、実際の重い作業はタブコンポーネントによって行われます。簡単な例を見てみましょう。 ```ts const routes: Routes = [ @@ -378,7 +380,7 @@ Each tab in Ionic is treated as an individual navigation stack. This means if yo This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack. -Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations you have seen in other UI libraries. Read on to learn more about some of these differences. +Ionic は開発者がモバイルアプリを構築するのを支援することに重点を置いているため、Ionic のタブはネイティブモバイルのタブにできるだけ近づくように設計されています。その結果、Ionic のタブには他の UI ライブラリのタブ実装とは異なる挙動が見られる場合があります。これらの違いのいくつかについて詳しく知るには、続きを読んでください。 ### Child Routes within Tabs @@ -442,7 +444,7 @@ Since each tab is its own navigation stack, it is important to note that these n A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa. -Let's take a look at a couple common mistakes that are made with tabs. +タブでよくあるいくつかの間違いについて見ていきましょう。 **A Settings Tab That Multiple Tabs Reference** diff --git a/docs/angular/overlays.md b/docs/angular/overlays.md index 2e4335effcd..b79dc72451b 100644 --- a/docs/angular/overlays.md +++ b/docs/angular/overlays.md @@ -19,7 +19,7 @@ Overlays can be created programmatically using their respective controllers: ```typescript import { Component } from '@angular/core'; -import { ModalController } from '@ionic/angular/standalone'; +import { ModalController } from '@ionic/angular'; import { MyModalComponent } from './my-modal.component'; @Component({ @@ -61,7 +61,7 @@ To use a custom injector, pass it to the `create()` method: ```typescript import { Component, Injector } from '@angular/core'; -import { ModalController } from '@ionic/angular/standalone'; +import { ModalController } from '@ionic/angular'; import { MyModalComponent } from './my-modal.component'; import { MyRouteService } from './my-route.service'; @@ -104,7 +104,7 @@ You can also create a custom injector with specific providers: ```typescript import { Component, Injector } from '@angular/core'; -import { ModalController } from '@ionic/angular/standalone'; +import { ModalController } from '@ionic/angular'; import { MyModalComponent } from './my-modal.component'; import { MyService } from './my.service'; @@ -140,7 +140,7 @@ A common use case is providing the Angular CDK `Dir` directive to overlays for b ```typescript import { Component, Injector } from '@angular/core'; import { Dir } from '@angular/cdk/bidi'; -import { ModalController } from '@ionic/angular/standalone'; +import { ModalController } from '@ionic/angular'; import { MyModalComponent } from './my-modal.component'; @Component({ @@ -166,7 +166,7 @@ The `PopoverController` supports the same `injector` option: ```typescript import { Component, Injector } from '@angular/core'; -import { PopoverController } from '@ionic/angular/standalone'; +import { PopoverController } from '@ionic/angular'; import { MyPopoverComponent } from './my-popover.component'; @Component({ @@ -194,15 +194,15 @@ Ionic Angular exports its own `ModalOptions` and `PopoverOptions` types that ext - `ModalOptions` - Extends core `ModalOptions` with the `injector` property - `PopoverOptions` - Extends core `PopoverOptions` with the `injector` property -These types are exported from `@ionic/angular` and `@ionic/angular/standalone`: +These types are exported from `@ionic/angular` and `@ionic/angular/lazy`: ```typescript -import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone'; +import type { ModalOptions, PopoverOptions } from '@ionic/angular'; ``` ## Docs for Overlays in Ionic -For full docs and to see usage examples, visit the docs page for each of the overlays in Ionic: +完全なドキュメントと使用例については、Ionic の各オーバーレイのドキュメントページを参照してください: - [Action Sheet](https://ionicframework.com/docs/api/action-sheet) - [Alert](https://ionicframework.com/docs/api/alert) diff --git a/docs/angular/overview.md b/docs/angular/overview.md index ce6a51b7f5b..28cf45be826 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular バージョンサポート -Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v9 は Angular バージョン 18 から 22 をサポートしています。サポートされているバージョンおよびサポートポリシーの詳細については、[Ionic Angular サポートポリシー](/docs/reference/support#ionic-angular)を参照してください。 ## Angular Tooling diff --git a/docs/angular/performance.md b/docs/angular/performance.md index d2c78341765..1706e98f47f 100644 --- a/docs/angular/performance.md +++ b/docs/angular/performance.md @@ -42,7 +42,7 @@ trackItems(index: number, itemObject: any) { In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. -For more information on how Angular manages change propagation with `ngFor` see https://angular.io/api/common/NgForOf#change-propagation. +詳細については、[Angular NgForOf の変更伝播に関するドキュメント](https://angular.io/api/common/NgForOf#change-propagation)を参照してください。 ## From the Ionic Team @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/docs/angular/platform.md b/docs/angular/platform.md index 5cb3546fc72..83ae8e8e545 100644 --- a/docs/angular/platform.md +++ b/docs/angular/platform.md @@ -28,7 +28,7 @@ import TabItem from '@theme/TabItem'; ```tsx -import { Platform } from '@ionic/angular'; +import { Platform } from '@ionic/angular/lazy'; @Component({...}) export class MyPage { @@ -42,7 +42,7 @@ export class MyPage { ```tsx -import { Platform } from '@ionic/angular/standalone'; +import { Platform } from '@ionic/angular'; @Component({...}) export class MyPage { @@ -95,8 +95,22 @@ export class MyPage { The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean. -```tsx -import { IonicModule } from '@ionic/angular'; + + + +```tsx title="app.module.ts" +/* + * IonicModule is deprecated and will be removed in a future major version. + * Refer to the "Angular (Standalone)" tab to use `provideIonicAngular()` instead. + */ +import { IonicModule } from '@ionic/angular/lazy'; @NgModule({ ... @@ -119,6 +133,33 @@ import { IonicModule } from '@ionic/angular'; }) ``` + + + +```ts title="main.ts" +import { provideIonicAngular } from '@ionic/angular'; + +bootstrapApplication(AppComponent, { + providers: [ + ..., + provideIonicAngular({ + platform: { + /** The default `desktop` function returns false for devices with a touchscreen. + * This is not always wanted, so this function tests the User Agent instead. + **/ + 'desktop': (win) => { + const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent); + return !isMobile; + } + }, + }) + ] +}) +``` + + + + ```ts type PlatformConfig = { android?: ((win: Window) => boolean) | undefined; diff --git a/docs/angular/pwa.md b/docs/angular/pwa.md index 684c150c457..4eede3ec334 100644 --- a/docs/angular/pwa.md +++ b/docs/angular/pwa.md @@ -60,7 +60,7 @@ After `@angular/pwa` has been added, a new `ngsw-config.json` file will be creat } ``` -There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team.](https://angular.io/guide/service-worker-config) +ここには 2 つのセクションがあります。1 つはアプリ固有のリソース（JS、CSS、HTML）用、もう 1 つはアプリが必要に応じて読み込むアセット用です。アプリによっては、これらのオプションをカスタマイズできます。より詳細なガイドについては、[Angular チームによる公式ガイド](https://angular.io/guide/service-worker-config)をお読みください。 ## Deploying @@ -149,7 +149,7 @@ The last thing needed is to make sure caching headers are being set correctly. T } ``` -For more information about the `firebase.json` properties, see the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). +`firebase.json`のプロパティに関する詳細については、[Firebase ドキュメント](https://firebase.google.com/docs/hosting/full-config#section-firebase-json)を参照してください。 Next, build an optimized version of the app by running: diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md index 08ae4926861..dff5cfe1c36 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.md @@ -16,7 +16,7 @@ import DocsCards from '@components/global/DocsCards'; ようこそ！このガイドでは、Ionic Angular 開発の基本を説明します。開発環境のセットアップ、シンプルなプロジェクトの生成、プロジェクト構造の探索、Ionic コンポーネントの動作方法を学びます。最初の実際のアプリを構築する前に Ionic Angular に慣れるのに最適です。 -Ionic Angular とは何か、Angular エコシステムにどのように適合するかの高レベルの概要をお探しの場合は、[Ionic Angular の概要](overview)を参照してください。 +Ionic Angular が何であるか、そして Angular エコシステムにどのように適合するかの概要について知りたい場合は、[Ionic Angular 概要](overview)を参照してください。 ## 前提条件 @@ -28,7 +28,7 @@ node -v npm -v ``` -Node.js と npm がない場合は、[こちらから Node.js をダウンロード](https://nodejs.org/en/download)してください（npm が含まれています）。 +もし Node.js と npm を持っていない場合は、[Node.js をダウンロードしてください](https://nodejs.org/en/download)（npm を含みます）。 ## Ionic CLI でプロジェクトを作成 @@ -83,7 +83,7 @@ The root of your app is defined in `app.component.ts`: ```ts title="src/app/app.component.ts" import { Component } from '@angular/core'; -import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; +import { IonApp, IonRouterOutlet } from '@ionic/angular'; @Component({ selector: 'app-root', @@ -133,7 +133,7 @@ The Home page component, defined in `home.page.ts`, imports the Ionic components ```ts title="src/app/home/home.page.ts" import { Component } from '@angular/core'; -import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular'; @Component({ selector: 'app-home', @@ -172,10 +172,10 @@ And the template, in the `home.page.html` file, uses those components: ``` -これにより、ヘッダーとスクロール可能なコンテンツ領域を持つページが作成されます。2 番目のヘッダーは、コンテンツの上部にあるときに表示される[折りたたみ可能な大きなタイトル](/docs/api/title.md#collapsible-large-titles)を示し、スクロールダウンすると最初のヘッダーの小さなタイトルを表示するために縮小されます。 +これにより、ヘッダーとスクロール可能なコンテンツエリアを持つページが作成されます。2 つ目のヘッダーは、コンテンツの先頭にあるときに iOS デバイスで表示される[折りたたみ可能な大きなタイトル](/docs/api/title.md#collapsible-large-titles)を示し、その後スクロールすると最初のヘッダーに小さいタイトルを表示するように縮小されます。 -:::tip 詳細情報 -Ionic レイアウトコンポーネントの詳細については、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、[Content](/docs/api/content.md)のドキュメントを参照してください。 +:::tip[詳細を学ぶ] +Ionic のレイアウトコンポーネントに関する詳細情報は、[Header](/docs/api/header.md)、[Toolbar](/docs/api/toolbar.md)、[Title](/docs/api/title.md)、および[Content](/docs/api/content.md)のドキュメントを参照してください。 ::: ## Ionic コンポーネントを追加 @@ -193,7 +193,7 @@ Ionic レイアウトコンポーネントの詳細については、[Header](/d Then, import the `IonButton` component in `home.page.ts`: ```ts title="src/app/home/home.page.ts" -import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ // ...existing config... @@ -227,7 +227,7 @@ In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the And import `IonBackButton` and `IonButtons` in `new.page.ts`: ```ts title="src/app/new/new.page.ts" -import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; @Component({ // ...existing config... @@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router'; ``` :::info -Angular の Router サービスを使用してナビゲーションを実行することもできます。詳細については、[Angular Navigation ドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照してください。 +ナビゲーションは、Angular の Router サービスを使用して行うこともできます。詳細については、[Angular ナビゲーションのドキュメント](/docs/angular/navigation.md#navigating-to-different-routes)を参照してください。 ::: ## 新しいページにアイコンを追加 @@ -277,7 +277,7 @@ You'll also need to import and register these icons in `new.page.ts`: ```ts title="src/app/new/new.page.ts" // ...existing imports... -import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular'; import { addIcons } from 'ionicons'; import { heart, logoIonic } from 'ionicons/icons'; @@ -301,7 +301,7 @@ export class NewPage implements OnInit { または、`app.component.ts`でアイコンを登録して、アプリ全体で使用することもできます。 -詳細については、[Icon ドキュメント](/docs/api/icon.md)と[Ionicons ドキュメント](https://ionic.io/ionicons/)を参照してください。 +詳細については、[Icon のドキュメント](/docs/api/icon.md)および[Ionicons のドキュメント](https://ionic.io/ionicons/)を参照してください。 ## コンポーネントメソッドを呼び出す @@ -346,7 +346,7 @@ import { IonLabel, IonTitle, IonToolbar, -} from '@ionic/angular/standalone'; +} from '@ionic/angular'; import { addIcons } from 'ionicons'; import { heart, logoIonic } from 'ionicons/icons'; @@ -406,7 +406,7 @@ ionic cap open ios ionic cap open android ``` -詳細については、[Capacitor の Getting Started ガイド](https://capacitorjs.com/docs/getting-started/with-ionic)を参照してください。 +詳細については、[Capacitor の入門ガイド](https://capacitorjs.com/docs/getting-started/with-ionic)を参照してください。 ## さらに探索 diff --git a/docs/angular/slides.md b/docs/angular/slides.md index 836b717114a..d1c8d4a05a6 100644 --- a/docs/angular/slides.md +++ b/docs/angular/slides.md @@ -13,8 +13,8 @@ import TabItem from '@theme/TabItem'; /> -:::warning Looking for `ion-slides`? -`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. +:::warning[`ion-slides`を探していますか？] +`ion-slides`は v6.0.0 で非推奨となり、v7.0.0 で削除されました。Swiper.js ライブラリを直接使用することをお勧めします。移行プロセスは以下に詳しく説明されています。 ::: We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. @@ -71,7 +71,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. -If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version. +追加モジュールを自動的に含まないコア版を使いたい場合は、Swiper のコアバージョンおよびモジュールのドキュメントを参照してください。この移行ガイドの残りは、あなたがバンドル版を使用していることを前提としています。 ## Swiping with Style @@ -93,7 +93,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions. +追加のカスタム CSS では、Swiper Element が Shadow DOM カプセル化を使用しているため、スタイルを Shadow DOM スコープに注入する必要があります。手順はSwiper のスタイル注入ガイドを参照してください。 ### Additional `ion-slides` Styles @@ -155,7 +155,7 @@ We can install the `IonicSlides` module by importing and passing it to the `modu ```typescript // home.page.ts -import { IonicSlides } from '@ionic/angular'; +import { IonicSlides } from '@ionic/angular/lazy'; @Component({ ... @@ -171,7 +171,7 @@ export class HomePage { ```typescript // home.page.ts -import { IonicSlides } from '@ionic/angular/standalone'; +import { IonicSlides } from '@ionic/angular'; @Component({ ... @@ -227,7 +227,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. +Swiper Element で利用可能なすべてのプロパティは、Swiper API パラメータドキュメントに記載されています。 ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `swiperinit` | :::note -All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events and should be lowercased and prefixed with the word `swiper`. +Swiper Element で利用可能なすべてのイベントはSwiper API イベントドキュメントで確認でき、小文字で「`swiper`」という言葉を接頭辞で付けてください。 ::: ## Methods @@ -328,7 +328,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. +Swiper インスタンスで利用可能なすべてのメソッドとプロパティは、Swiper API のメソッドおよびプロパティドキュメントで確認できます。 ::: ## Effects @@ -340,7 +340,7 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect. +Swiper のエフェクトについての詳細は、Swiper API フェードエフェクトドキュメントをご参照ください。 ::: ## Wrap Up @@ -359,8 +359,8 @@ If you are running into issues with the migration, please create a post on the [ ### Where do I file bug reports? -Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. +課題を開く前に、Swiper ディスカッションボードまたはIonic フォーラムに投稿して、コミュニティによって問題が解決できるか確認することを検討してください。 -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues +Swiper ライブラリで問題が発生している場合、新しいバグはSwiper のイシュートラッカーに報告してください。 -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues +`IonicSlides`モジュールで問題が発生している場合、新しいバグはIonic Framework のイシュートラッカーに報告してください。 diff --git a/docs/angular/testing.md b/docs/angular/testing.md index 095c38c8061..f5e178310ba 100644 --- a/docs/angular/testing.md +++ b/docs/angular/testing.md @@ -109,7 +109,35 @@ describe('TabsPage', () => { コンポーネントクラスのテストを行う場合、コンポーネントオブジェクトは `component=fixture.componentInstance;` によって定義されたコンポーネントオブジェクトを使用してアクセスされます。これはコンポーネントクラスのインスタンスです。DOM テストを行う際には、`fixture.nativeElement` プロパティが使用されます。これはコンポーネントの実際の `HTMLElement`であり、テストで DOM を調べるために `HTMLElement.querySelector` などの標準の HTML API メソッドを使うことを可能にします。 -## Service +### コンポーネントの待機 + +Ionic コンポーネントをテストする際は、`@ionic/core`からエクスポートされる`componentOnReady`ヘルパーを使用し、直接`el.componentOnReady()`を呼び出さないでください。`el.componentOnReady()`メソッドは遅延読み込みされた要素にのみ存在し、カスタム要素ビルド（スタンドアロンプロジェクトで使用される）で直接呼び出すとエラーが発生します。ヘルパーは両方を処理します。要素自身の`componentOnReady()`プロミスが存在する場合はそれを待機します。存在しない場合は 1 フレームのアニメーションを待機し、コンポーネントの内部コンテンツがレンダリングされる機会を与えます。レンダリングされた DOM に対してアサーションを行う前またはアクセシビリティテストを実行する前に、コールバックが完了するのを待ってください。 + +```tsx +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { componentOnReady } from '@ionic/core'; +import { HomePage } from './home.page'; + +describe('HomePage', () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomePage], + }).compileComponents(); + fixture = TestBed.createComponent(HomePage); + fixture.detectChanges(); + }); + + it('renders the submit button', async () => { + const button = fixture.nativeElement.querySelector('ion-button'); + await new Promise((resolve) => componentOnReady(button, () => resolve())); + expect(button.textContent).toContain('Submit'); + }); +}); +``` + +## Services Service は、多くの場合、計算やその他の操作を実行するユーティリティの service と、主に HTTP 操作やデータ操作を実行するデータの service の 2 つの大まかなカテゴリーのいずれかに分類されます。 @@ -180,7 +208,7 @@ describe('PayrolService', () => { #### HTTP データ Service のテスト -HTTP 操作を実行するほとんどの service は、それらの操作を実行するために Angular の HttpClient service を使用します。そのようなテストには、Angular の `HttpClientTestingModule` を使うことが推奨されています。このモジュールの詳細なドキュメントは Angular の HTTP リクエストをテストする のガイドを参照してください。 +ほとんどの HTTP 操作を実行するサービスは、これらの操作を行うために Angular の HttpClient サービスを使用します。そのようなテストには、Angular の`HttpClientTestingModule`を使用することが推奨されています。このモジュールの詳細なドキュメントについては、Angular のAngular の HTTP リクエストテストガイドを参照してください。 このようなテストの基本的な設定は次のようになります: @@ -229,11 +257,11 @@ describe('IssTrackingDataService', () => { }); ``` -### Pipe +### Pipes pipe は、特別に定義されたインタフェースを持つ service のようなものです。このクラスには、入力値(およびその他のオプションの引数)を操作してページにレンダリングされる出力を作成するための public メソッド `transform` が含まれています。パイプをテストするには、パイプをインスタンス化し、transform メソッドを呼び出して結果を検証します。 -簡単な例として、`Person` オブジェクトを受け取り、名前をフォーマットする pipe を見てみましょう。簡単にするために、`Person` は `id`、`firstName`、`lastName`、`middleInitial` で構成されるとします。パイプの要件は、名・姓・ミドルネームのいずれかが存在しない場合に、名前を「性、名 M(ミドルネーム)。」として出力することです。このようなテストは次のようになります: +簡単な例として、`Person`オブジェクトを受け取り名前をフォーマットするパイプを考えてみましょう。簡単のために、`Person`は`id`、`firstName`、`lastName`、および`middleInitial`で構成されているとします。このパイプの要件は、名前が存在しない場合でも「姓, 名 M.」の形式で名前を表示することです。例えば、このようなテストは以下のようになります: ```tsx import { NamePipe } from './name.pipe'; diff --git a/docs/angular/virtual-scroll.md b/docs/angular/virtual-scroll.md index 3e239956e27..a77513f9c1e 100644 --- a/docs/angular/virtual-scroll.md +++ b/docs/angular/virtual-scroll.md @@ -1,6 +1,6 @@ # 仮想スクロール -:::warning Looking for `ion-virtual-scroll`? +:::warning[`ion-virtual-scroll`をお探しですか？] `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. @@ -19,7 +19,7 @@ This provides a collection of different utilities, but we'll focus on `Scrolling When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file. ```diff - import { IonicModule } from '@ionic/angular'; + import { IonicModule } from '@ionic/angular/lazy'; import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; @@ -130,4 +130,4 @@ For example: ## Further Reading -This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please see the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). +これは CDK バーチャルスクローラが可能な機能のほんの一部に過ぎません。詳細については、[Angular CDK バーチャルスクロールのドキュメント](https://material.angular.io/cdk/scrolling/overview)を参照してください。 diff --git a/docs/angular/your-first-app.md b/docs/angular/your-first-app.md index e72e878738b..85a151a58a8 100644 --- a/docs/angular/your-first-app.md +++ b/docs/angular/your-first-app.md @@ -25,7 +25,7 @@ Ionic の素晴らしいところは、1 つのコードベースで、使い慣 > :::note -Ionic 4 と Cordova をカバーしたこのガイドの以前のバージョンを探していますか？[こちらを参照してください。](../developer-resources/guides/first-app-v4/intro.md) +Ionic 4 および Cordova をカバーした前のバージョンのガイドをお探しですか？[Ionic 4 および Cordova ガイド](../developer-resources/guides/first-app-v4/intro.md)を参照してください。 ::: ## 構築するもの @@ -44,11 +44,11 @@ Ionic 4 と Cordova をカバーしたこのガイドの以前のバージョン 最適な Ionic 開発体験を確保するために、以下をすぐにダウンロードしてインストールしてください： -- **Node.js** - Ionic エコシステムと対話するため。[LTS バージョンをこちらからダウンロード](https://nodejs.org/en/)。 -- **コードエディタ** - コードを書くため！[Visual Studio Code](https://code.visualstudio.com/)をお勧めします。 -- **コマンドラインインターフェース/ターミナル（CLI）**： - - **Windows**ユーザー：最適な Ionic 体験のために、管理者モードで実行される組み込みコマンドライン（cmd）または Powershell CLI をお勧めします。 - - **Mac/Linux**ユーザー：事実上、どのターミナルでも動作します。 +- **Ionic エコシステムとやり取りするための Node.js**。[LTS 版をダウンロード](https://nodejs.org/en/)。 +- **コードを書くためのコードエディタ**！私たちは [Visual Studio Code](https://code.visualstudio.com/) のファンです。 +- **コマンドラインインターフェイス/ターミナル (CLI)**： + - **Windows** ユーザー：最高の Ionic 体験のために、組み込みのコマンドライン (cmd) または管理者モードで実行する Powershell CLI を推奨します。 + - **Mac/Linux** ユーザー：ほぼすべてのターミナルで動作します。 ## Ionic ツールのインストール @@ -65,7 +65,7 @@ npm install -g @ionic/cli native-run cordova-res :::note `-g`オプションは*グローバルにインストール*を意味します。パッケージをグローバルにインストールすると、`EACCES`権限エラーが発生する可能性があります。 -昇格された権限なしで npm をグローバルに操作するように設定することを検討してください。詳細については、[権限エラーの解決](../developing/tips.md#resolving-permission-errors)を参照してください。 +npm を管理者権限なしでグローバルに操作できるように設定することを検討してください。詳細は [権限エラーの解決](../developing/tips.md#resolving-permission-errors) を参照してください。 ::: ## アプリの作成 @@ -78,7 +78,7 @@ ionic start photo-gallery tabs --type=angular :::note -`NgModules` と `Standalone` のどちらかを選択するプロンプトが表示されたら、このチュートリアルは `NgModules` のアプローチに従っているので、`NgModules` を選択する。 +`NgModules` と `Standalone` のどちらかを選択するプロンプトが表示されたら、このチュートリアルではスタンドアロンコンポーネントのアプローチを採用しているため、`Standalone` を選択します。 ::: @@ -109,20 +109,28 @@ npm install @ionic/pwa-elements Next, import `@ionic/pwa-elements` by editing `src/main.ts`. ```ts -import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; -import { AppModule } from './app/app.module'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular'; // CHANGE: Add the following import import { defineCustomElements } from '@ionic/pwa-elements/loader'; -// CHANGE: Call the element loader before the `bootstrapModule` call +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +// CHANGE: Call the element loader before the `bootstrapApplication` call defineCustomElements(window); -platformBrowserDynamic() - .bootstrapModule(AppModule) - .catch((err) => console.log(err)); +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular(), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}).catch((err) => console.error(err)); ``` -これで完了です！それでは、楽しい部分 - アプリの動作を見てみましょう。 +それで終わりです！さあ、楽しい部分です - アプリを実行してみましょう。 ## アプリを起動 @@ -140,7 +148,7 @@ ionic serve ![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App') -`/src/app/tab2/tab2.page.html`を開きます。次のようになっています： +`/src/app/tab2/tab2.page.html`を開きます。それには以下が含まれています: ```html diff --git a/docs/angular/your-first-app/2-taking-photos.md b/docs/angular/your-first-app/2-taking-photos.md index 072d0058da2..8766aed10bf 100644 --- a/docs/angular/your-first-app/2-taking-photos.md +++ b/docs/angular/your-first-app/2-taking-photos.md @@ -61,7 +61,23 @@ Notice the magic here: there's no platform-specific code (web, iOS, or Android)! Next, in `tab2.page.ts`, import the `PhotoService` class and add a method to call its `addNewToGallery` method. ```ts -import { Component } from '@angular/core'; +import { Component, inject } from '@angular/core'; +// CHANGE: Import the Ionic standalone components used on this page +import { + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonGrid, + IonRow, + IonCol, + IonFab, + IonFabButton, + IonIcon, +} from '@ionic/angular'; +// CHANGE: Register the camera icon used by the FAB +import { addIcons } from 'ionicons'; +import { camera } from 'ionicons/icons'; // CHANGE: Import the PhotoService import { PhotoService } from '../services/photo.service'; @@ -69,19 +85,29 @@ import { PhotoService } from '../services/photo.service'; selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'], - standalone: false, + // CHANGE: Add the standalone component imports + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonFab, IonFabButton, IonIcon], }) export class Tab2Page { - // CHANGE: Update constructor to include `photoService` - constructor(public photoService: PhotoService) {} + // CHANGE: Inject the PhotoService + public photoService = inject(PhotoService); - // CHANGE: Add `addNewToGallery()` method + constructor() { + // CHANGE: Register the icons this page uses + addIcons({ camera }); + } + + // CHANGE: Add `addPhotoToGallery()` method addPhotoToGallery() { this.photoService.addNewToGallery(); } } ``` +:::note +In a standalone app there is no global icon registry, so each icon you reference by name (like `camera`) must be registered with `addIcons`. Import the specific Ionic components a page uses from `@ionic/angular` and list them in the component's `imports` array. +::: + Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the FAB is tapped/clicked: ```html @@ -131,12 +157,12 @@ export interface UserPhoto { } ``` -Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera. +Above the `addNewToGallery()` method, define a [signal](https://angular.dev/guide/signals) that holds an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera. A signal is used so that the gallery view updates automatically when photos change - important in a zoneless app, where mutating a plain array would not trigger a re-render. ```ts export class PhotoService { - // CHANGE: Add the `photos` array - public photos: UserPhoto[] = []; + // CHANGE: Add the `photos` signal + public photos = signal([]); public async addNewToGallery() { // ...existing code... @@ -144,7 +170,7 @@ export class PhotoService { } ``` -Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array. +Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` signal. Reading and updating a signal is done by calling it: `this.photos()` returns the current value, and `this.photos.update()` sets a new one. ```ts // CHANGE: Update `addNewToGallery()` method @@ -156,25 +182,28 @@ public async addNewToGallery() { quality: 100 }); - // CHANGE: Add the new photo to the photos array - this.photos.unshift({ - filepath: "soon...", - webviewPath: capturedPhoto.webPath! - }); + // CHANGE: Add the new photo to the front of the photos signal + this.photos.update((photos) => [ + { + filepath: 'soon...', + webviewPath: capturedPhoto.webPath!, + }, + ...photos, + ]); } ``` `photo.service.ts` should now look like this: ```ts -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; @Injectable({ providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); public async addNewToGallery() { // Take a photo @@ -184,10 +213,13 @@ export class PhotoService { quality: 100, }); - this.photos.unshift({ - filepath: 'soon...', - webviewPath: capturedPhoto.webPath!, - }); + this.photos.update((photos) => [ + { + filepath: 'soon...', + webviewPath: capturedPhoto.webPath!, + }, + ...photos, + ]); } } @@ -197,7 +229,7 @@ export interface UserPhoto { } ``` -Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path. +Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) so the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` signal with the built-in [`@for`](https://angular.dev/guide/templates/control-flow#for-block-repeaters) block - calling `photoService.photos()` reads the signal's current value. For each item, add an `` element and set its `src` property to the photo's path. ```html @@ -216,10 +248,12 @@ Next, switch to `tab2.page.html` to display the images. We'll add a [Grid compon - - - + + @for (photo of photoService.photos(); track photo.filepath; let position = $index) { + + + } diff --git a/docs/angular/your-first-app/3-saving-photos.md b/docs/angular/your-first-app/3-saving-photos.md index 9b6fffcaf70..56d42e45f2d 100644 --- a/docs/angular/your-first-app/3-saving-photos.md +++ b/docs/angular/your-first-app/3-saving-photos.md @@ -46,14 +46,14 @@ export interface UserPhoto { We can use this new method immediately in `addNewToGallery()`. ```ts -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; @Injectable({ providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); // CHANGE: Update the `addNewToGallery()` method public async addNewToGallery() { @@ -68,8 +68,8 @@ export class PhotoService { // Save the picture and add it to photo collection const savedImageFile = await this.savePicture(capturedPhoto); - // CHANGE: Update argument to unshift array method - this.photos.unshift(savedImageFile); + // CHANGE: Add the saved photo to the front of the photos signal + this.photos.update((photos) => [savedImageFile, ...photos]); } private async savePicture(photo: Photo) { @@ -150,7 +150,7 @@ export interface UserPhoto { `photo.service.ts` should now look like this: ```ts -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -159,7 +159,7 @@ import { Filesystem, Directory } from '@capacitor/filesystem'; providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); public async addNewToGallery() { // Take a photo @@ -172,7 +172,7 @@ export class PhotoService { // Save the picture and add it to photo collection const savedImageFile = await this.savePicture(capturedPhoto); - this.photos.unshift(savedImageFile); + this.photos.update((photos) => [savedImageFile, ...photos]); } private async savePicture(photo: Photo) { diff --git a/docs/angular/your-first-app/4-loading-photos.md b/docs/angular/your-first-app/4-loading-photos.md index 26d8371524d..2cd5f5ea77b 100644 --- a/docs/angular/your-first-app/4-loading-photos.md +++ b/docs/angular/your-first-app/4-loading-photos.md @@ -21,7 +21,7 @@ Open `photo.service.ts` and begin by defining a new property in the `PhotoServic ```ts export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); // CHANGE: Add a key for photo storage private PHOTO_STORAGE: string = 'photos'; @@ -57,12 +57,12 @@ export class PhotoService { const savedImageFile = await this.savePicture(capturedPhoto); - this.photos.unshift(savedImageFile); + this.photos.update((photos) => [savedImageFile, ...photos]); // CHANGE: Add method to cache all photo data for future retrieval Preferences.set({ key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos), + value: JSON.stringify(this.photos()), }); } @@ -85,7 +85,7 @@ export class PhotoService { public async loadSaved() { // Retrieve cached photo array data const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + this.photos.set((photoList ? JSON.parse(photoList) : []) as UserPhoto[]); } } ``` @@ -100,10 +100,10 @@ export class PhotoService { public async loadSaved() { // Retrieve cached photo array data const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; // CHANGE: Display the photo by reading into base64 format - for (let photo of this.photos) { + for (const photo of photos) { // Read each saved photo's data from the Filesystem const readFile = await Filesystem.readFile({ path: photo.filepath, @@ -113,6 +113,9 @@ export class PhotoService { // Web platform only: Load the photo as base64 data photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; } + + // CHANGE: Set the signal so the gallery view updates + this.photos.set(photos); } } ``` @@ -120,7 +123,7 @@ export class PhotoService { `photo.service.ts` should now look like this: ```ts -import { Injectable } from '@angular/core'; +import { Injectable, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -130,7 +133,7 @@ import { Preferences } from '@capacitor/preferences'; providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); private PHOTO_STORAGE: string = 'photos'; @@ -145,11 +148,11 @@ export class PhotoService { // Save the picture and add it to photo collection const savedImageFile = await this.savePicture(capturedPhoto); - this.photos.unshift(savedImageFile); + this.photos.update((photos) => [savedImageFile, ...photos]); Preferences.set({ key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos), + value: JSON.stringify(this.photos()), }); } @@ -189,9 +192,9 @@ export class PhotoService { public async loadSaved() { // Retrieve cached photo array data const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; - for (let photo of this.photos) { + for (const photo of photos) { // Read each saved photo's data from the Filesystem const readFile = await Filesystem.readFile({ path: photo.filepath, @@ -201,6 +204,8 @@ export class PhotoService { // Web platform only: Load the photo as base64 data photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; } + + this.photos.set(photos); } } @@ -215,17 +220,35 @@ Our `PhotoService` can now load the saved images, but we'll need to update `tab2 Update `tab2.page.ts` to look like the following: ```ts -import { Component } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; +import { + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonGrid, + IonRow, + IonCol, + IonFab, + IonFabButton, + IonIcon, +} from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { camera } from 'ionicons/icons'; import { PhotoService } from '../services/photo.service'; @Component({ selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'], - standalone: false, + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonFab, IonFabButton, IonIcon], }) -export class Tab2Page { - constructor(public photoService: PhotoService) {} +export class Tab2Page implements OnInit { + public photoService = inject(PhotoService); + + constructor() { + addIcons({ camera }); + } // CHANGE: Add call to `loadSaved()` when navigating to the Photos tab async ngOnInit() { @@ -239,9 +262,9 @@ export class Tab2Page { ``` :::note -If you're seeing broken image links or missing photos after following these steps, you may need to open your browser's dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb). +これらの手順を実行した後に画像リンクが壊れたり写真が表示されなかったりする場合は、ブラウザの開発者ツールを開き、[localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) と [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb) の両方を消去する必要があります。 -In localStorage, look for domain `http://localhost:8100` and key `CapacitorStorage.photos`. In IndexedDB, find a store called "FileStorage". Your photos will have a key like `/DATA/123456789012.jpeg`. +localStorage ではドメイン `http://localhost:8100` とキー `CapacitorStorage.photos` を探します。IndexedDB では「FileStorage」というストアを探します。写真には `/DATA/123456789012.jpeg` のようなキーが設定されています。 ::: -That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! +これで完了です！Web で動作する完全なフォトギャラリー機能を Ionic アプリに構築できました。次は、iOS と Android 向けのモバイルアプリに変換します。 diff --git a/docs/angular/your-first-app/5-adding-mobile.md b/docs/angular/your-first-app/5-adding-mobile.md index 9a33d3745ee..ecf2947add9 100644 --- a/docs/angular/your-first-app/5-adding-mobile.md +++ b/docs/angular/your-first-app/5-adding-mobile.md @@ -22,7 +22,7 @@ Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which i Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform. ```ts -import { Injectable } from '@angular/core'; +import { Injectable, inject, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -34,17 +34,12 @@ import { Platform } from '@ionic/angular'; providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); private PHOTO_STORAGE: string = 'photos'; - // CHANGE: Add a property to track the app's running platform - private platform: Platform; - - // CHANGE: Update constructor to set `platform` - constructor(platform: Platform) { - this.platform = platform; - } + // CHANGE: Inject the Platform API to track the app's running platform + private platform = inject(Platform); // ...existing code... } @@ -96,7 +91,7 @@ private async savePicture(photo: Photo) { When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`. ```ts -import { Injectable } from '@angular/core'; +import { Injectable, inject, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -159,12 +154,12 @@ Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can dire // CHANGE: Update `loadSaved()` method public async loadSaved() { const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; // CHANGE: Add platform check // If running on the web... if (!this.platform.is('hybrid')) { - for (let photo of this.photos) { + for (const photo of photos) { const readFile = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data @@ -174,6 +169,9 @@ public async loadSaved() { photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; } } + + // CHANGE: Set the signal so the gallery view updates + this.photos.set(photos); } ``` @@ -182,7 +180,7 @@ Our Photo Gallery now consists of one codebase that runs on the web, Android, an `photos.service.ts` should now look like this: ```ts -import { Injectable } from '@angular/core'; +import { Injectable, inject, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -194,15 +192,11 @@ import { Capacitor } from '@capacitor/core'; providedIn: 'root', }) export class PhotoService { - public photos: UserPhoto[] = []; + public photos = signal([]); private PHOTO_STORAGE: string = 'photos'; - private platform: Platform; - - constructor(platform: Platform) { - this.platform = platform; - } + private platform = inject(Platform); public async addNewToGallery() { // Take a photo @@ -214,11 +208,11 @@ export class PhotoService { const savedImageFile = await this.savePicture(capturedPhoto); - this.photos.unshift(savedImageFile); + this.photos.update((photos) => [savedImageFile, ...photos]); Preferences.set({ key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos), + value: JSON.stringify(this.photos()), }); } @@ -279,11 +273,11 @@ export class PhotoService { public async loadSaved() { // Retrieve cached photo array data const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); - this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + const photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; // If running on the web... if (!this.platform.is('hybrid')) { - for (let photo of this.photos) { + for (const photo of photos) { const readFile = await Filesystem.readFile({ path: photo.filepath, directory: Directory.Data, @@ -292,6 +286,8 @@ export class PhotoService { photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; } } + + this.photos.set(photos); } } diff --git a/docs/angular/your-first-app/6-deploying-mobile.md b/docs/angular/your-first-app/6-deploying-mobile.md index 06638c9c34d..def40f6c384 100644 --- a/docs/angular/your-first-app/6-deploying-mobile.md +++ b/docs/angular/your-first-app/6-deploying-mobile.md @@ -15,7 +15,7 @@ Since we added Capacitor to our project when it was first created, there’s onl ## Capacitor Setup -Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the differences [here](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). +Capacitor は Ionic の公式アプリランタイムで、Web アプリを iOS、Android などのネイティブプラットフォームに簡単にデプロイできるようにします。過去に Cordova を使用したことがある場合は、Capacitor と Cordova の[違い](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova)についてさらに読むことを検討してください。 If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports: @@ -58,7 +58,7 @@ First, run the Capacitor `open` command, which opens the native iOS project in X ionic cap open ios ``` -In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details here](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." +一部のネイティブプラグインを動作させるためには、ユーザーの権限設定が必要です。私たちのフォトギャラリーアプリでは、これにはカメラプラグインが含まれます：iOS では、`Camera.getPhoto()` が最初に呼び出された後、自動的にモーダルダイアログが表示され、ユーザーにアプリによるカメラの使用許可を求めます。この権限は「プライバシー - カメラ使用」と表示されます。設定するには、`Info.plist` ファイルを修正する必要があります（[iOS 構成の詳細](https://capacitorjs.com/docs/ios/configuration)）。アクセスするには、「Info」をクリックし、「カスタム iOS ターゲットのプロパティ」を展開します。 ![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration') diff --git a/docs/angular/your-first-app/7-live-reload.md b/docs/angular/your-first-app/7-live-reload.md index a0bd1b578d1..d8b48c80e56 100644 --- a/docs/angular/your-first-app/7-live-reload.md +++ b/docs/angular/your-first-app/7-live-reload.md @@ -11,7 +11,7 @@ sidebar_label: ライブリロード /> -So far, we’ve seen how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? +ここまでで、どこでも動作するクロスプラットフォームアプリを簡単に開発できることがわかりました。開発の速度はかなり速いですが、もっと速くできる方法があると言ったらどう思いますか？ We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. @@ -38,7 +38,7 @@ With Live Reload running and the app open on your device, let’s implement phot In `photo.service.ts`, add the `deletePhoto()` method. The selected photo is removed from the `photos` array first. Then, we use the Capacitor Preferences API to update the cached version of the `photos` array. Finally, we delete the actual photo file itself using the Filesystem API. ```ts -import { Injectable } from '@angular/core'; +import { Injectable, inject, signal } from '@angular/core'; import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; import type { Photo } from '@capacitor/camera'; import { Filesystem, Directory } from '@capacitor/filesystem'; @@ -54,13 +54,13 @@ export class PhotoService { // CHANGE: Add `deletePhoto()` method public async deletePhoto(photo: UserPhoto, position: number) { - // Remove this photo from the Photos reference data array - this.photos.splice(position, 1); + // Remove this photo from the photos signal + this.photos.update((photos) => photos.filter((_, index) => index !== position)); // Update photos array cache by overwriting the existing photo array Preferences.set({ key: this.PHOTO_STORAGE, - value: JSON.stringify(this.photos), + value: JSON.stringify(this.photos()), }); // Delete photo file from filesystem @@ -82,24 +82,51 @@ export interface UserPhoto { Next, in `tab2.page.ts`, implement the `showActionSheet()` method. We're adding two options: "Delete", which calls `PhotoService.deletePhoto()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role. ```ts -import { Component } from '@angular/core'; +import { Component, OnInit, inject } from '@angular/core'; +import { + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonGrid, + IonRow, + IonCol, + IonFab, + IonFabButton, + IonIcon, + // CHANGE: Add import + ActionSheetController, +} from '@ionic/angular'; +import { addIcons } from 'ionicons'; +// CHANGE: Register the `trash` and `close` icons used by the action sheet +import { camera, trash, close } from 'ionicons/icons'; // Change: Add import import type { UserPhoto } from '../services/photo.service'; import { PhotoService } from '../services/photo.service'; -// CHANGE: Add import -import { ActionSheetController } from '@ionic/angular'; @Component({ selector: 'app-tab2', templateUrl: 'tab2.page.html', styleUrls: ['tab2.page.scss'], - standalone: false, + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonGrid, IonRow, IonCol, IonFab, IonFabButton, IonIcon], }) -export class Tab2Page { - // CHANGE: Update constructor - constructor(public photoService: PhotoService, public actionSheetController: ActionSheetController) {} +export class Tab2Page implements OnInit { + public photoService = inject(PhotoService); + // CHANGE: Inject the ActionSheetController + private actionSheetController = inject(ActionSheetController); + + constructor() { + // CHANGE: Register the icons this page uses + addIcons({ camera, trash, close }); + } - // ...existing code... + async ngOnInit() { + await this.photoService.loadSaved(); + } + + addPhotoToGallery() { + this.photoService.addNewToGallery(); + } // CHANGE: Add `showActionSheet()` method public async showActionSheet(photo: UserPhoto, position: number) { @@ -129,7 +156,7 @@ export class Tab2Page { } ``` -Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog. +Open `tab2.page.html` and wrap each image in a ` + } @@ -162,10 +193,31 @@ Open `tab2.page.html` and add a new click handler to each `` element. W ``` +Add the following CSS to `tab2.page.scss` to style the gallery buttons and images: + +```css +ion-col > button { + display: block; + width: 100%; + background: none; + border: none; + padding: 0; + margin: 0; + cursor: pointer; + font: inherit; +} + +button img { + display: block; + width: 100%; + height: auto; +} +``` + Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪 :::note -Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/photo-gallery-capacitor-ng). +このアプリの[完全なソースコード](https://github.com/ionic-team/tutorial-photo-gallery-angular)は GitHub で確認できます。 ::: In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/docs/angular/your-first-app/8-distribute.md b/docs/angular/your-first-app/8-distribute.md index bf495f68421..86858a17a6d 100644 --- a/docs/angular/your-first-app/8-distribute.md +++ b/docs/angular/your-first-app/8-distribute.md @@ -11,7 +11,7 @@ sidebar_label: Distribute /> -Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart). +最初のアプリを作成したので、皆が使えるように配布したくなるでしょう。アプリケーションのビルドとデプロイの仕組みはかなり面倒な場合があります。そこで[Appflow](https://ionic.io/docs/appflow/)の出番です。Appflow を使うと、ウェブおよびネイティブビルドの生成、ライブアプリの更新のプッシュ、アプリストアへの公開、そしてこのプロセス全体の自動化を効果的に行うことができます。[Appflow クイックスタートガイド](https://ionic.io/docs/appflow/quickstart)を参照してください。 Below we will run through an overview of the steps. @@ -46,7 +46,7 @@ git commit -m "added appflow sdk" # commit staged changes git push origin main # push the changes from the main branch to your git host ``` -After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. +プッシュが行われると、コミットは Appflow ダッシュボードの`Commits`タブに表示されます。詳細については、Appflow ドキュメントの[コミットのプッシュ](https://ionic.io/docs/appflow/quickstart/push)セクションを参照してください。 ## Deploy a Live Update @@ -62,7 +62,7 @@ To receive this live update, you will need to run the app on a device or an emul ionic cap run [ios | android] [options] ``` -Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied! +アプリがデプロイしたチャンネルを正しくリッスンするように設定されている場合、セットアップ時に自動更新方法を選択していれば、起動時にアプリは即座に更新されるはずです。バックグラウンド更新方法を選択した場合は、更新がダウンロードされたことを確認するために、アプリ内に約 30 秒間滞在してください。その後、アプリケーションを閉じて再度開くと、更新が適用されます。 To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs. @@ -78,7 +78,7 @@ Further information regarding building native binaries can be found inside of th [Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. -For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. +詳細については、Appflow ドキュメント内の[自動化の作成](https://ionic.io/docs/appflow/quickstart/automation)セクションを参照してください。そのセクションでは、単一の自動化の作成について説明しています。ただし、異なるブランチやワークフロー用に複数の自動化を作成し、ニーズに合わせてカスタマイズすることも可能です。重要な注意点として、自動化を作成する機能は[ベーシックプラン](https://ionic.io/pricing)以上のユーザーが利用できる機能です。 ## Create an Environment diff --git a/docs/angular/zoneless.md b/docs/angular/zoneless.md new file mode 100644 index 00000000000..bbcb5031ab5 --- /dev/null +++ b/docs/angular/zoneless.md @@ -0,0 +1,154 @@ +--- +title: Zoneless Change Detection +sidebar_label: Zoneless +--- + + + Zoneless Change Detection with Ionic and Angular + + + +Angular 21 made [zoneless change detection](https://angular.dev/guide/zoneless) the default, removing the dependency on Zone.js. This guide covers what you need to know to run an Ionic Angular app without Zone.js. + +With Zone.js, Angular automatically re-renders after almost any asynchronous task. Without it, Angular only re-renders when you explicitly tell it the view is out of date. Most of your app keeps working unchanged, but a few patterns that relied on Zone.js need a small adjustment. + +## What keeps working automatically + +You do not need to change these. Angular schedules change detection for them in a zoneless app: + +- Template event bindings: `(click)`, `(ionChange)`, `(ionInput)`, and every other `(event)` handler. +- Host listeners (`@HostListener`), including the ones Ionic's form value accessors use, so `[(ngModel)]` and reactive forms stay in sync. +- Signal updates that are read in a template. +- The `async` pipe. +- Ionic page lifecycle hooks (`ionViewWillEnter`, `ionViewDidEnter`, `ionViewWillLeave`, `ionViewDidLeave`) that set state synchronously. Ionic notifies Angular after each hook runs. +- Navigation, route transitions, and tab switching. + +:::note[Angular 22] +Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. For the migration path, refer to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#onpush-change-detection-on-angular-22). +::: + +## What needs a notification + +When you update component state from an asynchronous callback that Angular did not wrap, nothing schedules a re-render. The state changes, but the view does not update. This applies to any Angular code, not only Ionic, and the common sources in an Ionic app are: + +- Awaiting an overlay result, such as `await modal.onWillDismiss()` or `loading.onDidDismiss().then(...)`. +- Asynchronous work started inside a lifecycle hook, for example a `setTimeout` or `fetch` in `ionViewWillEnter`. +- `Platform` event subscriptions (`backButton`, `resize`, `pause`, `resume`, keyboard events) and `Platform.ready()`. +- Any `setTimeout`, `setInterval`, or RxJS subscription that assigns to a component field. + +You can notify Angular in two ways: write to a [signal](https://angular.dev/guide/signals) that the template reads, or inject `ChangeDetectorRef` and call `markForCheck()` after the update. We recommend signals because they work the same with or without Zone.js. + +### Signals (recommended) + +Writing a signal that a template reads schedules change detection automatically, so there is nothing extra to remember after the update. + +```ts +import { Component, inject, signal } from '@angular/core'; +import { ModalController } from '@ionic/angular'; +import { PickerModal } from './picker.modal'; + +@Component({ + selector: 'app-home', + template: ` + Pick a value +

Selected: {{ selected() }}

+ `, +}) +export class HomePage { + private modalCtrl = inject(ModalController); + readonly selected = signal(undefined); + + async pick() { + const modal = await this.modalCtrl.create({ component: PickerModal }); + await modal.present(); + + const { data } = await modal.onWillDismiss(); + // Writing the signal updates the view automatically. + this.selected.set(data); + } +} +``` + +### `ChangeDetectorRef.markForCheck()` + +If you are not using signals for a particular piece of state, inject `ChangeDetectorRef` and call `markForCheck()` after the asynchronous update. It is a no-op-or-better under Zone.js, so it is safe to leave in place if you later re-enable zones. + +```ts +import { ChangeDetectorRef, Component, inject } from '@angular/core'; + +@Component({ + selector: 'app-list', + template: `@for (item of items; track item) { {{ item }} }`, +}) +export class ListPage { + private cdr = inject(ChangeDetectorRef); + items: string[] = []; + + ionViewWillEnter() { + // Asynchronous work inside a lifecycle hook still needs a notification. + setTimeout(() => { + this.items = ['A', 'B', 'C']; + this.cdr.markForCheck(); + }, 1000); + } +} +``` + +## Common Ionic patterns + +These apply the two approaches above to patterns you are likely to hit in an Ionic app. + +### Inline overlays with dynamic content + +Content projected into an inline `ion-modal` or `ion-popover` follows the same rule. If you populate it asynchronously, update a signal or call `markForCheck()`: + +```ts +@Component({ + selector: 'app-inline', + template: ` + + + + @for (item of items(); track item) { + {{ item }} + } + + + + `, +}) +export class InlinePage { + readonly items = signal([]); + + open(popover: IonPopover) { + popover.present(); + setTimeout(() => this.items.set(['A', 'B', 'C', 'D']), 1000); + } +} +``` + +Inline overlays also expose their events as outputs (for example `ionModalDidDismiss`), which you can convert to a signal with [`toSignal`](https://angular.dev/api/core/rxjs-interop/toSignal) if you prefer a reactive style. + +### Platform events + +`Platform` exposes its events as RxJS subjects. Update a signal inside the subscription so the view reflects the change: + +```ts +export class AppComponent { + private platform = inject(Platform); + readonly isLandscape = signal(false); + + constructor() { + this.platform.resize.subscribe(() => { + this.isLandscape.set(this.platform.isLandscape()); + }); + } +} +``` + +## Staying on Zone.js + +If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.md#keeping-zonejs) for the exact configuration. diff --git a/docs/api/accordion-group.md b/docs/api/accordion-group.md index be0d80eba1b..72944a63391 100644 --- a/docs/api/accordion-group.md +++ b/docs/api/accordion-group.md @@ -1,12 +1,12 @@ --- title: "ion-accordion-group" --- -import Props from '@ionic-internal/component-api/v8/accordion-group/props.md'; -import Events from '@ionic-internal/component-api/v8/accordion-group/events.md'; -import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md'; -import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md'; +import Props from '@ionic-internal/component-api/v9/accordion-group/props.md'; +import Events from '@ionic-internal/component-api/v9/accordion-group/events.md'; +import Methods from '@ionic-internal/component-api/v9/accordion-group/methods.md'; +import Parts from '@ionic-internal/component-api/v9/accordion-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/accordion-group/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/accordion-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -14,8 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アコーディオン・グループは、アコーディオンインスタンスのためのコンテナです。これは、アコーディオンの状態を管理し、キーボードナビゲーションを提供します。 -より詳細な情報や使用方法については、 [Accordion](./accordion) を参照ください。 - +詳細については、[アコーディオン](./accordion)のドキュメントを参照してください。 ## Interfaces @@ -38,8 +37,6 @@ interface AccordionGroupCustomEvent extends CustomEvent { } ``` - - ## プロパティ diff --git a/docs/api/accordion.md b/docs/api/accordion.md index a60f352a68b..2307f0b90ca 100644 --- a/docs/api/accordion.md +++ b/docs/api/accordion.md @@ -1,16 +1,16 @@ --- title: "ion-accordion" --- -import Props from '@ionic-internal/component-api/v8/accordion/props.md'; -import Events from '@ionic-internal/component-api/v8/accordion/events.md'; -import Methods from '@ionic-internal/component-api/v8/accordion/methods.md'; -import Parts from '@ionic-internal/component-api/v8/accordion/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/accordion/slots.md'; +import Props from '@ionic-internal/component-api/v9/accordion/props.md'; +import Events from '@ionic-internal/component-api/v9/accordion/events.md'; +import Methods from '@ionic-internal/component-api/v9/accordion/methods.md'; +import Parts from '@ionic-internal/component-api/v9/accordion/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/accordion/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/accordion/slots.md'; - ion-accordion: Accordion Components: How to Build & Examples - + ion-accordion: アコーディオンコンポーネント: 作り方と例 + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/accordion/basic/index.md'; +import Basic from '@site/static/usage/v9/accordion/basic/index.md'; @@ -30,7 +30,7 @@ import Basic from '@site/static/usage/v8/accordion/basic/index.md'; どのアコーディオンを開くかは、`ion-accordion-group` の `value` プロパティを設定することで制御できます。このプロパティを設定することで、開発者はプログラムによって特定のアコーディオンを展開したり折りたたんだりすることができます。 -import Toggle from '@site/static/usage/v8/accordion/toggle/index.md'; +import Toggle from '@site/static/usage/v9/accordion/toggle/index.md'; @@ -44,7 +44,7 @@ import Toggle from '@site/static/usage/v8/accordion/toggle/index.md'; 開発者は `ionChange` イベントをリッスンして、アコーディオンが展開または折りたたまれたときに通知を受けることができます。 -import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md'; +import ListenChanges from '@site/static/usage/v9/accordion/listen-changes/index.md'; @@ -52,7 +52,7 @@ import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index. 開発者は `multiple` プロパティを使用して、複数のアコーディオンを一度に開くことができるようにすることができます。 -import Multiple from '@site/static/usage/v8/accordion/multiple/index.md'; +import Multiple from '@site/static/usage/v9/accordion/multiple/index.md'; @@ -62,7 +62,7 @@ import Multiple from '@site/static/usage/v8/accordion/multiple/index.md'; 個々のアコーディオンは、`ion-accordion` の `disabled` プロパティで無効にできます。 -import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md'; +import DisableIndividual from '@site/static/usage/v9/accordion/disable/individual/index.md'; @@ -70,17 +70,17 @@ import DisableIndividual from '@site/static/usage/v8/accordion/disable/individua アコーディオングループは、`ion-accordion-group` の `disabled` プロパティで無効にすることができます。 -import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md'; +import DisableGroup from '@site/static/usage/v9/accordion/disable/group/index.md'; ## 読み込み可能なアコーディオン -### 個別アコーディオン +### アコーディオンを無効にする 個々のアコーディオンは、`ion-accordion` の `readonly` プロパティで無効にできます。 -import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md'; +import ReadonlyIndividual from '@site/static/usage/v9/accordion/readonly/individual/index.md'; @@ -88,7 +88,7 @@ import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individ アコーディオングループは、`ion-accordion-group` の `readonly` プロパティで無効にできます。 -import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md'; +import ReadonlyGroup from '@site/static/usage/v9/accordion/readonly/group/index.md'; @@ -98,7 +98,7 @@ import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index. `header` slotは、アコーディオンを展開または折りたたむためのトグルとして使用されます。アクセシビリティとテーマ機能を利用するために、ここでは `ion-item` を使用することをお勧めします。 -`header` slotに `ion-item` を使用する場合、 `ion-item` の `button` プロパティは `true` に、 `detail` プロパティは `false` に設定されます。さらに、`ion-item` にはトグルアイコンも自動的に追加されます。このアイコンは、アコーディオンを展開したり折りたたんだりすると、自動的に回転するようになります。詳しくは、 [アイコンのカスタマイズ](#icons) を参照してください。 +`header`スロットで`ion-item`を使用する場合、`ion-item`の`button`プロパティは`true`に、`detail`プロパティは`false`に設定されます。さらに、`ion-item`にはトグルアイコンも自動的に追加されます。このアイコンはアコーディオンを展開または折りたたむ際に自動的に回転します。詳細については、[アイコンのカスタマイズ](#icons)を参照してください。 ### コンテンツ @@ -112,7 +112,7 @@ import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index. `expand="inset"` の場合、アコーディオングループにはborder radiusが与えられます。 `md` モードでは、アコーディオン全体を開くと下に移動します。 -import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md'; +import ExpansionStyles from '@site/static/usage/v9/accordion/customization/expansion-styles/index.md'; @@ -120,7 +120,7 @@ import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expan アコーディオンの状態に応じてスタイルを設定することで、展開の動作をカスタマイズすることができます。 `ion-accordion` には4つのステートクラスが適用されています。これらのクラスを使ってスタイリングすることで、高度な状態遷移を作成することができます。 -| Class Name | Description | +| クラス名 | 説明 | | ---------- |-----------------------------------| | `.accordion-expanding` | アコーディオンがアクティブに展開しているときに適用されます。 | | `.accordion-expanded` | アコーディオンが完全に展開されたときに適用されます。 | @@ -136,11 +136,11 @@ ion-accordion.accordion-expanded ion-item[slot="header"] { } ``` -import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md'; +import AdvancedExpansionStyles from '@site/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md'; -### アイコン +### アイコン {/* #icons */} `header` slot に `ion-item` を使用する場合、自動的に `ion-icon` が追加されます。使用するアイコンの種類は `toggleIcon` プロパティで制御でき、追加するスロットも `toggleIconSlot` プロパティで制御することができます。 @@ -148,7 +148,7 @@ import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customizati どのオプションを選択しても、アコーディオンを展開または折りたたむと、アイコンは自動的に回転します。 -import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md'; +import Icons from '@site/static/usage/v9/accordion/customization/icons/index.md'; @@ -156,7 +156,7 @@ import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md' `ion-accordion` はヘッダーとコンテンツ要素を囲むシェルとして機能するので、アコーディオンを簡単に好きなようにテーマ化することができます。ヘッダーのテーマは、スロットの `ion-item` をターゲットにすることで行うことができます。 `ion-item` を使用しているので、 [ion-item CSS Variables](./item#css-custom-properties) と [ion-item Shadow Parts](./item#css-shadow-parts) にもすべてアクセスすることができます。コンテンツのテイムも、`content` slotにある要素をターゲットにすることで簡単に実現できます。 -import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md'; +import Theming from '@site/static/usage/v9/accordion/customization/theming/index.md'; @@ -166,7 +166,7 @@ import Theming from '@site/static/usage/v8/accordion/customization/theming/index デフォルトでは、アコーディオン・アイテムを展開したり折りたたんだりする際にアニメーションが有効になります。アニメーションは `prefers-reduced-motion` メディアクエリがサポートされ、`reduce` に設定されると自動的に無効化されます。対応していないブラウザでは、Ionic Frameworkアプリで `animated` を設定することで、アニメーションを無効にすることができます。 -import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md'; +import AccessibilityAnimations from '@site/static/usage/v9/accordion/accessibility/animations/index.md'; @@ -190,11 +190,11 @@ import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibili アコーディオンアニメーションは、アニメーションを開始するときに `content` slotの高さを知ることによって動作します。アコーディオンは、この高さがアニメーションの間、一貫して保たれることを期待します。そのため、開発者はアニメーション中にコンテンツの高さを変更するような操作を行わないようにしなければなりません。 -例えば、[ion-img](./img) を使用すると、画像を遅延ロードするため、レイアウトのずれが生じることがあります。つまり、アニメーションを再生すると、 `ion-img` が画像データをロードし、ロードされた画像データを考慮して `ion-img` の寸法が変更されることになります。その結果、 `content` slotの高さが変化してしまうことがあります。これを避けるために、開発者にはいくつかのオプションがあります。 +例えば、画像の遅延読み込みは、読み込み時にレイアウトのずれを引き起こすことがあります。アニメーションの再生中に、遅延読み込みされる画像（`loading="lazy"` を指定したネイティブの `` など）がデータを読み込み、それに合わせて寸法が変化すると、`content` slot の高さも変わる可能性があります。これを避けるために、開発者には次の選択肢があります。 -1. 遅延読み込みを行わない `img` 要素を使用します。`ion-img` は常に遅延読み込みを使用しますが、`img` はデフォルトでは遅延読み込みを使用しません。これは最も単純なオプションで、遅延読み込みの恩恵をあまり受けない小さな画像を使用する場合に有効です。 +1. `loading="lazy"` を省略し、画像を即時に読み込みます。`` はデフォルトでは遅延読み込みを行わないため、アニメーション中ではなく事前に画像が読み込まれます。これは最も簡単な方法で、遅延読み込みの恩恵が小さい画像に適しています。 -2. `ion-img` に最小の幅と高さを設定します。遅延読み込みを使用する必要があり、前もって画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、CSS を使用して `ion-img` に最小限の幅または高さを設定することができます。これにより、開発者はレイアウトの崩れを防ぎつつ、遅延ロードの恩恵を受けることができます。これは、 `img` 要素を `loading="lazy"` と共に使用する場合にも有効です! +2. あらかじめ画像用の領域を確保します。遅延読み込みが必要で画像の寸法がわかっている場合（同じサイズのアイコンを読み込む場合など）、属性または CSS を使用して `` の幅と高さを設定します。これにより、レイアウトのずれを防ぎながら遅延読み込みを利用できます。 3. これらの解決方法を選択できない場合、開発者は [ion-accordion-group](./accordion-group) の `animated` プロパティを使用してアニメーションを完全に無効にすることを検討することができます。 diff --git a/docs/api/action-sheet.md b/docs/api/action-sheet.md index 441cda46e30..54c06671690 100644 --- a/docs/api/action-sheet.md +++ b/docs/api/action-sheet.md @@ -4,12 +4,12 @@ title: "ion-action-sheet" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/action-sheet/props.md'; -import Events from '@ionic-internal/component-api/v8/action-sheet/events.md'; -import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md'; -import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md'; +import Props from '@ionic-internal/component-api/v9/action-sheet/props.md'; +import Events from '@ionic-internal/component-api/v9/action-sheet/events.md'; +import Methods from '@ionic-internal/component-api/v9/action-sheet/methods.md'; +import Parts from '@ionic-internal/component-api/v9/action-sheet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/action-sheet/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/action-sheet/slots.md'; ion-action-sheet: Action Sheet Dialog for iOS and Android @@ -27,7 +27,7 @@ Action Sheetは複数の選択肢を表示するダイアログです。アプ `ion-action-sheet` は、テンプレートに直接コンポーネントを記述することで使用することができます。これにより、アクションシートを表示するために配線する必要があるハンドラの数を減らすことができます。 -import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md'; +import Trigger from '@site/static/usage/v9/action-sheet/inline/trigger/index.md'; @@ -37,7 +37,7 @@ import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md' `isOpen` は一方通行のデータバインディングを使用しているため、アクションシートが終了したときに自動的に `false` に設定されることはありません。開発者は `ionActionSheetDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` に設定する必要があります。この理由は、`ion-action-sheet` の内部がアプリケーションの状態と密接に結合するのを防ぐためです。一方通行のデータバインディングでは、アクションシートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、アクションシートは、ブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md'; +import IsOpen from '@site/static/usage/v9/action-sheet/inline/isOpen/index.md'; @@ -45,7 +45,7 @@ import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md'; アクションシートの表示・非表示をより細かく制御したい場合は、`actionSheetController`を使用することができます。 -import Controller from '@site/static/usage/v8/action-sheet/controller/index.md'; +import Controller from '@site/static/usage/v9/action-sheet/controller/index.md'; @@ -59,7 +59,7 @@ Buttonは `ActionSheetButton` の `data` プロパティを介してデータを `didDismiss` イベントが発生すると、イベント詳細の `data` と `role` フィールドを使用して、アクションシートがどのように却下されたかについての情報を収集することができます。 -import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md'; +import RoleInfo from '@site/static/usage/v9/action-sheet/role-info-on-dismiss/index.md'; @@ -83,7 +83,7 @@ import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/in } ``` -import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md'; +import Styling from '@site/static/usage/v9/action-sheet/theming/styling/index.md'; @@ -91,7 +91,7 @@ import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md [CSSカスタムプロパティ](#css-custom-properties-1) は、個々の要素を対象とすることなく、アクションシートのスタイルに使用することができます。 -import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md'; +import CssCustomProperties from '@site/static/usage/v9/action-sheet/theming/css-properties/index.md'; diff --git a/docs/api/alert.md b/docs/api/alert.md index 934733ece62..b3fb4e7d806 100644 --- a/docs/api/alert.md +++ b/docs/api/alert.md @@ -4,12 +4,12 @@ title: "ion-alert" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/alert/props.md'; -import Events from '@ionic-internal/component-api/v8/alert/events.md'; -import Methods from '@ionic-internal/component-api/v8/alert/methods.md'; -import Parts from '@ionic-internal/component-api/v8/alert/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/alert/slots.md'; +import Props from '@ionic-internal/component-api/v9/alert/props.md'; +import Events from '@ionic-internal/component-api/v9/alert/events.md'; +import Methods from '@ionic-internal/component-api/v9/alert/methods.md'; +import Parts from '@ionic-internal/component-api/v9/alert/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/alert/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/alert/slots.md'; ion-alert: Ionic Alert Buttons with Custom Message Prompts @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-alert` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、アラートを表示するために必要なハンドラの数を減らすことができます。 -import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md'; +import Trigger from '@site/static/usage/v9/alert/presenting/trigger/index.md'; @@ -36,7 +36,7 @@ import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md'; `isOpen` は一方通行のデータバインディングを使用しているため、アラートが解除されたときに自動的に `false` に設定されることはありません。開発者は `ionAlertDidDismiss` または `didDismiss` イベントを待ち、`isOpen` を `false` に設定する必要があります。この理由は、`ion-alert` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、アラートはリアクティブ変数が提供するブーリアン値だけを気にすればよい。双方向のデータバインディングでは、アラートはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にする可能性があります。 -import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md'; +import IsOpen from '@site/static/usage/v9/alert/presenting/isOpen/index.md'; @@ -44,7 +44,7 @@ import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md'; `alertController`は、アラートを表示するタイミングや解除するタイミングをより細かく制御する必要がある場合に使用することができます。 -import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md'; +import Controller from '@site/static/usage/v9/alert/presenting/controller/index.md'; @@ -54,7 +54,7 @@ import Controller from '@site/static/usage/v8/alert/presenting/controller/index. オプションで、`cancel`のような `role` プロパティをボタンに追加することができます。もし `cancel` ロールがボタンのいずれかに設定されている場合、バックドロップをタップしてアラートが解除されると、キャンセルロールを持つボタンから handler が起動されます。 -import Buttons from '@site/static/usage/v8/alert/buttons/index.md'; +import Buttons from '@site/static/usage/v9/alert/buttons/index.md'; @@ -65,13 +65,13 @@ Alertには、複数の異なるInputを含めることもでき、そのデー ### Text Inputs Example -import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md'; +import TextInputs from '@site/static/usage/v9/alert/inputs/text-inputs/index.md'; ### Radio Example -import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md'; +import Radios from '@site/static/usage/v9/alert/inputs/radios/index.md'; @@ -101,7 +101,7 @@ Alertはscopedによるカプセル化を使用しており、実行時に各ス } ``` -import Customization from '@site/static/usage/v8/alert/customization/index.md'; +import Customization from '@site/static/usage/v9/alert/customization/index.md'; diff --git a/docs/api/app.md b/docs/api/app.md index 3898c496557..18c70328a75 100644 --- a/docs/api/app.md +++ b/docs/api/app.md @@ -1,12 +1,12 @@ --- title: "ion-app" --- -import Props from '@ionic-internal/component-api/v8/app/props.md'; -import Events from '@ionic-internal/component-api/v8/app/events.md'; -import Methods from '@ionic-internal/component-api/v8/app/methods.md'; -import Parts from '@ionic-internal/component-api/v8/app/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/app/slots.md'; +import Props from '@ionic-internal/component-api/v9/app/props.md'; +import Events from '@ionic-internal/component-api/v9/app/events.md'; +import Methods from '@ionic-internal/component-api/v9/app/methods.md'; +import Parts from '@ionic-internal/component-api/v9/app/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/app/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/app/slots.md'; ion-app: Container Element for an Ionic Application @@ -30,7 +30,7 @@ AppはIonicアプリケーションのコンテナ要素です。1つのプロ Ionicは、`ion-focusable`クラスを持つコンポーネント用のフォーカスユーティリティを提供します。これらのユーティリティは、Tabなどの特定のキーボードキーが押されたときに、コンポーネントのフォーカスを自動的に管理します。コンポーネントは、`ion-app`の`setFocus`メソッドを使用して、ユーザーのアクションに応じてプログラムでフォーカスを設定することもできます。 -import SetFocus from '@site/static/usage/v8/app/set-focus/index.md'; +import SetFocus from '@site/static/usage/v9/app/set-focus/index.md'; diff --git a/docs/api/avatar.md b/docs/api/avatar.md index 9a3577b416b..16b36bdba66 100644 --- a/docs/api/avatar.md +++ b/docs/api/avatar.md @@ -2,12 +2,12 @@ title: "ion-avatar" --- -import Props from '@ionic-internal/component-api/v8/avatar/props.md'; -import Events from '@ionic-internal/component-api/v8/avatar/events.md'; -import Methods from '@ionic-internal/component-api/v8/avatar/methods.md'; -import Parts from '@ionic-internal/component-api/v8/avatar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/avatar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/avatar/slots.md'; +import Props from '@ionic-internal/component-api/v9/avatar/props.md'; +import Events from '@ionic-internal/component-api/v9/avatar/events.md'; +import Methods from '@ionic-internal/component-api/v9/avatar/methods.md'; +import Parts from '@ionic-internal/component-api/v9/avatar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/avatar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/avatar/slots.md'; ion-avatar: Circular Application Avatar Icon Component @@ -24,19 +24,19 @@ Avatarは、単独で使用することも、任意の要素の内部で使用 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/avatar/basic/index.md'; +import Basic from '@site/static/usage/v9/avatar/basic/index.md'; ## Chip Avatar -import Chip from '@site/static/usage/v8/avatar/chip/index.md'; +import Chip from '@site/static/usage/v9/avatar/chip/index.md'; ## Item Avatar -import Item from '@site/static/usage/v8/avatar/item/index.md'; +import Item from '@site/static/usage/v9/avatar/item/index.md'; @@ -44,7 +44,7 @@ import Item from '@site/static/usage/v8/avatar/item/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/avatar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/avatar/theming/css-properties/index.md'; diff --git a/docs/api/back-button.md b/docs/api/back-button.md index a3b9e954761..529349e7585 100644 --- a/docs/api/back-button.md +++ b/docs/api/back-button.md @@ -1,12 +1,12 @@ --- title: "ion-back-button" --- -import Props from '@ionic-internal/component-api/v8/back-button/props.md'; -import Events from '@ionic-internal/component-api/v8/back-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/back-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/back-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/back-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/back-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/back-button/props.md'; +import Events from '@ionic-internal/component-api/v9/back-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/back-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/back-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/back-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/back-button/slots.md'; ion-back-button: Custom Menu Back Button for Applications @@ -17,24 +17,23 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Back Buttonは、クリックされるとアプリの履歴に戻るようにナビゲートします。このボタンは、ナビゲーションスタックに履歴があるときのみ表示されます。ただし、 [`defaultHref`](#default-back-history) が設定されている場合は除きます。戻るボタンはモードに応じて異なるテキストとアイコンを表示しますが、これはカスタマイズすることができます。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/back-button/basic/index.md'; +import Basic from '@site/static/usage/v9/back-button/basic/index.md'; ## カスタムのBack Button -デフォルトでは、Back Buttonはテキスト `"Back"` と共に、`ios` では `"chevron-back"` アイコン、`md` では `"arrow-back-sharp"` アイコンを表示します。これは、`icon`または`text`プロパティを設定することで、戻るボタンコンポーネントごとにカスタマイズすることができます。また、グローバル設定の `backButtonIcon` または `backButtonText` プロパティを使用して、グローバルに設定することもできます。詳しくは、[Config docs](../developing/config) を参照してください。 +デフォルトでは、戻るボタンは`ios`では`"chevron-back"`アイコン付きで`"Back"`のテキストを表示し、`md`では`"arrow-back-sharp"`アイコンを表示します。これは、各戻るボタンコンポーネントごとに`icon`または`text`プロパティを設定することでカスタマイズ可能です。あるいは、グローバル設定で`backButtonIcon`または`backButtonText`プロパティを使用してグローバルに設定することもできます。詳細は[Configドキュメント](../developing/config)を参照してください。 -import Custom from '@site/static/usage/v8/back-button/custom/index.md'; +import Custom from '@site/static/usage/v9/back-button/custom/index.md'; -## デフォルトのBack履歴 +## デフォルトのBack履歴 {/* #default-back-history */} 時折、アプリが履歴がないときに戻るボタンを表示し、ナビゲートする必要がある場合があります。この場合、戻るボタンの `defaultHref` をパスに設定することで実現できます。 `defaultHref` を使用するには、アプリにパスが設定されたルーターが含まれている必要があります。 diff --git a/docs/api/backdrop.md b/docs/api/backdrop.md index 3ac77c97296..aa32a838cfe 100644 --- a/docs/api/backdrop.md +++ b/docs/api/backdrop.md @@ -1,12 +1,12 @@ --- title: "ion-backdrop" --- -import Props from '@ionic-internal/component-api/v8/backdrop/props.md'; -import Events from '@ionic-internal/component-api/v8/backdrop/events.md'; -import Methods from '@ionic-internal/component-api/v8/backdrop/methods.md'; -import Parts from '@ionic-internal/component-api/v8/backdrop/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/backdrop/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/backdrop/slots.md'; +import Props from '@ionic-internal/component-api/v9/backdrop/props.md'; +import Events from '@ionic-internal/component-api/v9/backdrop/events.md'; +import Methods from '@ionic-internal/component-api/v9/backdrop/methods.md'; +import Parts from '@ionic-internal/component-api/v9/backdrop/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/backdrop/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/backdrop/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -18,7 +18,7 @@ Backdropは、他のコンポーネントをオーバーレイするためフル Backdropは、その後ろのコンテンツをクリックしたりタップしたりするのを防ぎます。デフォルトでは透明なので、下のデモではCSSで見えるようにしています。 -import Basic from '@site/static/usage/v8/backdrop/basic/index.md'; +import Basic from '@site/static/usage/v9/backdrop/basic/index.md'; @@ -28,7 +28,7 @@ import Basic from '@site/static/usage/v8/backdrop/basic/index.md'; コンテンツに `z-index` を設定し、背景よりも高い位置に表示させることができます（デフォルトは `2` です）。 -import Styling from '@site/static/usage/v8/backdrop/styling/index.md'; +import Styling from '@site/static/usage/v9/backdrop/styling/index.md'; diff --git a/docs/api/badge.md b/docs/api/badge.md index 77e7cc731f4..fb9b8e72f9f 100644 --- a/docs/api/badge.md +++ b/docs/api/badge.md @@ -1,12 +1,12 @@ --- title: "ion-badge" --- -import Props from '@ionic-internal/component-api/v8/badge/props.md'; -import Events from '@ionic-internal/component-api/v8/badge/events.md'; -import Methods from '@ionic-internal/component-api/v8/badge/methods.md'; -import Parts from '@ionic-internal/component-api/v8/badge/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/badge/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/badge/slots.md'; +import Props from '@ionic-internal/component-api/v9/badge/props.md'; +import Events from '@ionic-internal/component-api/v9/badge/events.md'; +import Methods from '@ionic-internal/component-api/v9/badge/methods.md'; +import Parts from '@ionic-internal/component-api/v9/badge/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/badge/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/badge/slots.md'; ion-badge: iOS & Android App Notification Badge Icons @@ -21,7 +21,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/badge/basic/index.md'; +import Basic from '@site/static/usage/v9/badge/basic/index.md'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v8/badge/basic/index.md'; 空のバッジは`md`モードでのみ利用可能です。 ::: -import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; +import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md'; @@ -41,13 +41,13 @@ import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; ### Colors -import Colors from '@site/static/usage/v8/badge/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/badge/theming/colors/index.md'; ### CSS Properties -import CSSProps from '@site/static/usage/v8/badge/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/badge/theming/css-properties/index.md'; diff --git a/docs/api/breadcrumb.md b/docs/api/breadcrumb.md index e0e8c137690..6059a274cf9 100644 --- a/docs/api/breadcrumb.md +++ b/docs/api/breadcrumb.md @@ -1,21 +1,20 @@ --- title: "ion-breadcrumb" --- -import Props from '@ionic-internal/component-api/v8/breadcrumb/props.md'; -import Events from '@ionic-internal/component-api/v8/breadcrumb/events.md'; -import Methods from '@ionic-internal/component-api/v8/breadcrumb/methods.md'; -import Parts from '@ionic-internal/component-api/v8/breadcrumb/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/breadcrumb/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/breadcrumb/slots.md'; +import Props from '@ionic-internal/component-api/v9/breadcrumb/props.md'; +import Events from '@ionic-internal/component-api/v9/breadcrumb/events.md'; +import Methods from '@ionic-internal/component-api/v9/breadcrumb/methods.md'; +import Parts from '@ionic-internal/component-api/v9/breadcrumb/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/breadcrumb/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/breadcrumb/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Breadcrumbは、Breadcrumbsコンポーネントの子であり、単一のナビゲーションアイテムです。Breadcrumbは、アプリ内の他の場所にリンクすることも、プレーンテキストにすることもできます。Breadcrumbsは、次のBreadcrumbとの間にセパレータを持ち、オプションでアイコンを含むことができます。 -詳しい説明は [Breadcrumbs](./breadcrumbs) を参照ください。 +詳細は[Breadcrumbs](./breadcrumbs)のドキュメントを参照してください。 ## Interfaces @@ -38,9 +37,6 @@ interface BreadcrumbCustomEvent extends CustomEvent { } ``` - - - ## プロパティ diff --git a/docs/api/breadcrumbs.md b/docs/api/breadcrumbs.md index b00f98cd337..548b65f97bc 100644 --- a/docs/api/breadcrumbs.md +++ b/docs/api/breadcrumbs.md @@ -1,12 +1,12 @@ --- title: "ion-breadcrumbs" --- -import Props from '@ionic-internal/component-api/v8/breadcrumbs/props.md'; -import Events from '@ionic-internal/component-api/v8/breadcrumbs/events.md'; -import Methods from '@ionic-internal/component-api/v8/breadcrumbs/methods.md'; -import Parts from '@ionic-internal/component-api/v8/breadcrumbs/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/breadcrumbs/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/breadcrumbs/slots.md'; +import Props from '@ionic-internal/component-api/v9/breadcrumbs/props.md'; +import Events from '@ionic-internal/component-api/v9/breadcrumbs/events.md'; +import Methods from '@ionic-internal/component-api/v9/breadcrumbs/methods.md'; +import Parts from '@ionic-internal/component-api/v9/breadcrumbs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/breadcrumbs/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/breadcrumbs/slots.md'; @@ -18,7 +18,7 @@ Breadcrumbsは、ユーザーがアプリやサイトのどこにいるのかを ## 基本的な使い方 -import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md'; +import Basic from '@site/static/usage/v9/breadcrumbs/basic/index.md'; @@ -26,13 +26,13 @@ import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md'; ### アイテムでのアイコン -import IconsOnItems from '@site/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md'; +import IconsOnItems from '@site/static/usage/v9/breadcrumbs/icons/icons-on-items/index.md'; ### Custom Separators -import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-separators/index.md'; +import CustomSeparators from '@site/static/usage/v9/breadcrumbs/icons/custom-separators/index.md'; @@ -42,7 +42,7 @@ import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-sep `maxItems` の値よりも多くのアイテムがある場合、breadcrumbsは折りたたまれます。デフォルトでは、最初と最後のアイテムのみが表示されます。 -import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md'; +import MaxItems from '@site/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.md'; @@ -50,7 +50,7 @@ import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-ite アイテムが折りたたまれた後、表示するアイテムの数は `itemsBeforeCollapse` と `itemsAfterCollapse` プロパティで制御することができます。 -import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md'; +import ItemsBeforeAfter from '@site/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.md'; @@ -58,7 +58,7 @@ import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items インジケータをクリックすると、`ionCollapsedClick` イベントが発生します。これは、例えば、breadcrumbsを展開するために使うことができます。 -import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md'; +import ExpandOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.md'; @@ -66,7 +66,7 @@ import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/ex また、`ionCollapsedClick` イベントは、隠されたパンくずを表示するオーバーレイ（この場合は `ion-popover` ）を提示するために使用することができます。 -import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md'; +import PopoverOnClick from '@site/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.md'; @@ -74,13 +74,13 @@ import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/p ### Colors -import Colors from '@site/static/usage/v8/breadcrumbs/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/breadcrumbs/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/breadcrumbs/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/breadcrumbs/theming/css-properties/index.md'; diff --git a/docs/api/button.md b/docs/api/button.md index 5490dc07c4c..b5ed47b86aa 100644 --- a/docs/api/button.md +++ b/docs/api/button.md @@ -1,12 +1,12 @@ --- title: "ion-button" --- -import Props from '@ionic-internal/component-api/v8/button/props.md'; -import Events from '@ionic-internal/component-api/v8/button/events.md'; -import Methods from '@ionic-internal/component-api/v8/button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/button/slots.md'; +import Props from '@ionic-internal/component-api/v9/button/props.md'; +import Events from '@ionic-internal/component-api/v9/button/events.md'; +import Methods from '@ionic-internal/component-api/v9/button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/button/slots.md'; ion-button: Style Buttons with Custom CSS Properties @@ -21,7 +21,7 @@ Buttonはクリック可能な要素を提供し、Form内や、標準の単機 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/button/basic/index.md'; +import Basic from '@site/static/usage/v9/button/basic/index.md'; @@ -29,7 +29,7 @@ import Basic from '@site/static/usage/v8/button/basic/index.md'; このプロパティでは、ボタンの幅を指定することができます。デフォルトでは、ボタンは `display: inline-block` を持ちますが、このプロパティを設定すると、ボタンは `display: block` を持つ全角要素に変更されます。 -import Expand from '@site/static/usage/v8/button/expand/index.md'; +import Expand from '@site/static/usage/v9/button/expand/index.md'; @@ -37,7 +37,7 @@ import Expand from '@site/static/usage/v8/button/expand/index.md'; このプロパティは、ボタンの形状を指定することができます。デフォルトでは、ボタンは小さなボーダー半径を持つ長方形ですが、これを `"round"` に設定すると、ボタンは丸みを帯びた要素に変更されます。 -import Shape from '@site/static/usage/v8/button/shape/index.md'; +import Shape from '@site/static/usage/v9/button/shape/index.md'; @@ -46,7 +46,7 @@ import Shape from '@site/static/usage/v8/button/shape/index.md'; この属性は、Buttonのbackgroundとborder-colorを設定します。デフォルトでは、Buttonはtoolbar内にない限り、backgroundは塗りつぶされます。toolbar内にある場合は、backgroundは透明になります。 -import Fill from '@site/static/usage/v8/button/fill/index.md'; +import Fill from '@site/static/usage/v9/button/fill/index.md'; @@ -54,13 +54,13 @@ import Fill from '@site/static/usage/v8/button/fill/index.md'; この属性は、Buttonのサイズを指定します。この属性を設定すると、Buttonの高さとpaddingが変更されます -import Size from '@site/static/usage/v8/button/size/index.md'; +import Size from '@site/static/usage/v9/button/size/index.md'; ## Icons -import Icons from '@site/static/usage/v8/button/icons/index.md'; +import Icons from '@site/static/usage/v9/button/icons/index.md'; @@ -68,13 +68,13 @@ import Icons from '@site/static/usage/v8/button/icons/index.md'; ### Colors -import Colors from '@site/static/usage/v8/button/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/button/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/button/theming/css-properties/index.md'; @@ -92,7 +92,7 @@ import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index. max-width`スタイルは、デモのためだけに下のボタンに設定されています。テキストラッピングは動的なボタン幅で動作します。 ::: -import TextWrapping from '@site/static/usage/v8/button/text-wrapping/index.md'; +import TextWrapping from '@site/static/usage/v9/button/text-wrapping/index.md'; diff --git a/docs/api/buttons.md b/docs/api/buttons.md index d9698da934e..d3e61b10f1b 100644 --- a/docs/api/buttons.md +++ b/docs/api/buttons.md @@ -1,12 +1,12 @@ --- title: "ion-buttons" --- -import Props from '@ionic-internal/component-api/v8/buttons/props.md'; -import Events from '@ionic-internal/component-api/v8/buttons/events.md'; -import Methods from '@ionic-internal/component-api/v8/buttons/methods.md'; -import Parts from '@ionic-internal/component-api/v8/buttons/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/buttons/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/buttons/slots.md'; +import Props from '@ionic-internal/component-api/v9/buttons/props.md'; +import Events from '@ionic-internal/component-api/v9/buttons/events.md'; +import Methods from '@ionic-internal/component-api/v9/buttons/methods.md'; +import Parts from '@ionic-internal/component-api/v9/buttons/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/buttons/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/buttons/slots.md'; ion-buttons: Toolbar Element with Named Slots for Buttons @@ -17,16 +17,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Buttonsコンポーネントは、コンテナ要素です。 [ツールバー](./toolbar) の内部で使用し、標準の[ボタン](./button)、[メニューボタン](./menu-button)、[戻るボタン](./back-button)を含むいくつかのタイプのボタンを含めることができる。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/buttons/basic/index.md'; +import Basic from '@site/static/usage/v9/buttons/basic/index.md'; - ## Buttons Placement ツールバー内のボタンは、スロットという名前を使って配置することができます。下図は各スロットの説明です。 @@ -38,23 +36,21 @@ import Basic from '@site/static/usage/v8/buttons/basic/index.md'; | `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | | `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | -import Placement from '@site/static/usage/v8/buttons/placement/index.md'; +import Placement from '@site/static/usage/v9/buttons/placement/index.md'; - ## Buttonsのタイプ -ツールバーのボタンは、デフォルトでは透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例で [バックボタン](./back-button) と [メニューボタン](./menu-button) に含まれるプロパティは表示目的であり、正しい使用方法はそれぞれのドキュメントをご覧ください。 +ツールバー内のボタンはデフォルトでクリアスタイルに設定されていますが、ボタンの[`fill`](./button#fill)プロパティを使用して変更することができます。この例で[戻るボタン](./back-button)および[メニューボタン](./menu-button)に含まれるプロパティは表示目的のためのものであり、正しい使用方法についてはそれぞれのドキュメントを参照してください。 -import Types from '@site/static/usage/v8/buttons/types/index.md'; +import Types from '@site/static/usage/v9/buttons/types/index.md'; +## 折りたたみ可能なボタン -## Collapsible Buttons - -ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[collapsible large titles](./title#collapsible-large-titles) と共に使用します。 +ボタンに `collapse` プロパティを設定すると、ヘッダーが折りたたまれたときにボタンが折りたたまれます。これは通常、[折りたたみ可能な大きなタイトル](./title#collapsible-large-titles)と共に使用します。 :::info @@ -62,12 +58,11 @@ import Types from '@site/static/usage/v8/buttons/types/index.md'; ::: - -import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; +{/* Reuse the playground from the Title directory */} +import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.md'; - ## プロパティ diff --git a/docs/api/card-content.md b/docs/api/card-content.md index dc7e3181313..08062b468d7 100644 --- a/docs/api/card-content.md +++ b/docs/api/card-content.md @@ -1,20 +1,18 @@ --- title: "ion-card-content" --- -import Props from '@ionic-internal/component-api/v8/card-content/props.md'; -import Events from '@ionic-internal/component-api/v8/card-content/events.md'; -import Methods from '@ionic-internal/component-api/v8/card-content/methods.md'; -import Parts from '@ionic-internal/component-api/v8/card-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/card-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/card-content/slots.md'; +import Props from '@ionic-internal/component-api/v9/card-content/props.md'; +import Events from '@ionic-internal/component-api/v9/card-content/events.md'; +import Methods from '@ionic-internal/component-api/v9/card-content/methods.md'; +import Parts from '@ionic-internal/component-api/v9/card-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/card-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/card-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - カードコンテンツは、カードの子コンポーネントで、そのコンテンツの周りにパディングを追加します。カードのテキストコンテンツは、カードコンテンツの中に配置することが推奨されます。 -詳しくは、[Card](./card)のドキュメントを参照してください。 - +詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/card-header.md b/docs/api/card-header.md index 90768d9116d..1d8120ab65c 100644 --- a/docs/api/card-header.md +++ b/docs/api/card-header.md @@ -1,22 +1,20 @@ --- title: "ion-card-header" --- -import Props from '@ionic-internal/component-api/v8/card-header/props.md'; -import Events from '@ionic-internal/component-api/v8/card-header/events.md'; -import Methods from '@ionic-internal/component-api/v8/card-header/methods.md'; -import Parts from '@ionic-internal/component-api/v8/card-header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/card-header/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/card-header/slots.md'; +import Props from '@ionic-internal/component-api/v9/card-header/props.md'; +import Events from '@ionic-internal/component-api/v9/card-header/events.md'; +import Methods from '@ionic-internal/component-api/v9/card-header/methods.md'; +import Parts from '@ionic-internal/component-api/v9/card-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/card-header/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/card-header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; +カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。[カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。 -カードヘッダは、カードの子コンポーネントで、カードコンテンツの前に配置する必要があります。カードタイトル](./card-title)と[カードサブタイトル](./card-subtitle)を含むことができます。 - -詳しくは、[Card](./card)のドキュメントを参照してください。 - +詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/card-subtitle.md b/docs/api/card-subtitle.md index d22b0bd85b0..ec049b10d9f 100644 --- a/docs/api/card-subtitle.md +++ b/docs/api/card-subtitle.md @@ -1,22 +1,20 @@ --- title: "ion-card-subtitle" --- -import Props from '@ionic-internal/component-api/v8/card-subtitle/props.md'; -import Events from '@ionic-internal/component-api/v8/card-subtitle/events.md'; -import Methods from '@ionic-internal/component-api/v8/card-subtitle/methods.md'; -import Parts from '@ionic-internal/component-api/v8/card-subtitle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/card-subtitle/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/card-subtitle/slots.md'; +import Props from '@ionic-internal/component-api/v9/card-subtitle/props.md'; +import Events from '@ionic-internal/component-api/v9/card-subtitle/events.md'; +import Methods from '@ionic-internal/component-api/v9/card-subtitle/methods.md'; +import Parts from '@ionic-internal/component-api/v9/card-subtitle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/card-subtitle/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/card-subtitle/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - カードサブタイトルは、[カードヘッダ](./card-header)の内側に配置されるべき、cardの子コンポーネントです。 -詳しくは、[Card](./card)のドキュメントを参照してください。 - +詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/card-title.md b/docs/api/card-title.md index 2f78daca981..832f703f618 100644 --- a/docs/api/card-title.md +++ b/docs/api/card-title.md @@ -1,12 +1,12 @@ --- title: "ion-card-title" --- -import Props from '@ionic-internal/component-api/v8/card-title/props.md'; -import Events from '@ionic-internal/component-api/v8/card-title/events.md'; -import Methods from '@ionic-internal/component-api/v8/card-title/methods.md'; -import Parts from '@ionic-internal/component-api/v8/card-title/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/card-title/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/card-title/slots.md'; +import Props from '@ionic-internal/component-api/v9/card-title/props.md'; +import Events from '@ionic-internal/component-api/v9/card-title/events.md'; +import Methods from '@ionic-internal/component-api/v9/card-title/methods.md'; +import Parts from '@ionic-internal/component-api/v9/card-title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/card-title/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/card-title/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Card titleはcardの子コンポーネントで、[card header](./card-header)の内側に配置する必要があります。 -詳しくは、[Card](./card)のドキュメントを参照してください。 - +詳細は[Card](./card)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/card.md b/docs/api/card.md index aa14648067b..23b0ba8f7ed 100644 --- a/docs/api/card.md +++ b/docs/api/card.md @@ -1,12 +1,12 @@ --- title: "ion-card" --- -import Props from '@ionic-internal/component-api/v8/card/props.md'; -import Events from '@ionic-internal/component-api/v8/card/events.md'; -import Methods from '@ionic-internal/component-api/v8/card/methods.md'; -import Parts from '@ionic-internal/component-api/v8/card/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/card/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/card/slots.md'; +import Props from '@ionic-internal/component-api/v9/card/props.md'; +import Events from '@ionic-internal/component-api/v9/card/events.md'; +import Methods from '@ionic-internal/component-api/v9/card/methods.md'; +import Parts from '@ionic-internal/component-api/v9/card/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/card/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/card/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -27,28 +27,28 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/card/basic/index.md'; +import Basic from '@site/static/usage/v9/card/basic/index.md'; ## Media Cards -import Media from '@site/static/usage/v8/card/media/index.md'; +import Media from '@site/static/usage/v9/card/media/index.md'; ## Card Buttons -import Buttons from '@site/static/usage/v8/card/buttons/index.md'; +import Buttons from '@site/static/usage/v9/card/buttons/index.md'; ## List Card -import List from '@site/static/usage/v8/card/list/index.md'; +import List from '@site/static/usage/v9/card/list/index.md'; @@ -57,13 +57,13 @@ import List from '@site/static/usage/v8/card/list/index.md'; ### Colors -import Colors from '@site/static/usage/v8/card/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/card/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/card/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/card/theming/css-properties/index.md'; diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md index 0ad1a059fdc..1af3580c781 100644 --- a/docs/api/checkbox.md +++ b/docs/api/checkbox.md @@ -2,12 +2,12 @@ title: "ion-checkbox" --- -import Props from '@ionic-internal/component-api/v8/checkbox/props.md'; -import Events from '@ionic-internal/component-api/v8/checkbox/events.md'; -import Methods from '@ionic-internal/component-api/v8/checkbox/methods.md'; -import Parts from '@ionic-internal/component-api/v8/checkbox/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/checkbox/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/checkbox/slots.md'; +import Props from '@ionic-internal/component-api/v9/checkbox/props.md'; +import Events from '@ionic-internal/component-api/v9/checkbox/events.md'; +import Methods from '@ionic-internal/component-api/v9/checkbox/methods.md'; +import Parts from '@ionic-internal/component-api/v9/checkbox/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/checkbox/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/checkbox/slots.md'; ion-checkbox: Ionic App Checkbox to Select Multiple Options @@ -23,7 +23,7 @@ Checkboxを使用すると、一連のオプションから複数のオプショ ## 基本的な使い方 -import Basic from '@site/static/usage/v8/checkbox/basic/index.md'; +import Basic from '@site/static/usage/v9/checkbox/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/checkbox/basic/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 -import LabelPlacement from '@site/static/usage/v8/checkbox/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/checkbox/label-placement/index.md'; @@ -43,7 +43,7 @@ Developers can use the `alignment` property to control how the label and control Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. ::: -import Alignment from '@site/static/usage/v8/checkbox/alignment/index.md'; +import Alignment from '@site/static/usage/v9/checkbox/alignment/index.md'; @@ -51,7 +51,7 @@ import Alignment from '@site/static/usage/v8/checkbox/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 -import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; +import Justify from '@site/static/usage/v9/checkbox/justify/index.md'; @@ -62,7 +62,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; ## Indeterminate Checkboxes -import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v9/checkbox/indeterminate/index.md'; @@ -70,7 +70,7 @@ import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. -import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md'; +import LabelLink from '@site/static/usage/v9/checkbox/label-link/index.md'; @@ -80,7 +80,7 @@ Helper and error text can be used inside of a checkbox with the `helperText` and In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. -import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/checkbox/helper-error/index.md'; @@ -88,7 +88,7 @@ import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/checkbox/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/checkbox/theming/css-properties/index.md'; diff --git a/docs/api/chip.md b/docs/api/chip.md index 43f9f6b7726..04f60f19de7 100644 --- a/docs/api/chip.md +++ b/docs/api/chip.md @@ -1,12 +1,12 @@ --- title: "ion-chip" --- -import Props from '@ionic-internal/component-api/v8/chip/props.md'; -import Events from '@ionic-internal/component-api/v8/chip/events.md'; -import Methods from '@ionic-internal/component-api/v8/chip/methods.md'; -import Parts from '@ionic-internal/component-api/v8/chip/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/chip/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/chip/slots.md'; +import Props from '@ionic-internal/component-api/v9/chip/props.md'; +import Events from '@ionic-internal/component-api/v9/chip/events.md'; +import Methods from '@ionic-internal/component-api/v9/chip/methods.md'; +import Parts from '@ionic-internal/component-api/v9/chip/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/chip/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/chip/slots.md'; ion-chip: Text, Icon and Avatar for Ionic Framework Apps @@ -21,13 +21,13 @@ Chipは連絡先などを複数の小さなエンティティで表示します ## 基本的な使い方 -import Basic from '@site/static/usage/v8/chip/basic/index.md'; +import Basic from '@site/static/usage/v9/chip/basic/index.md'; ## Slotting Components and Icons -import SlotExample from '@site/static/usage/v8/chip/slots/index.md'; +import SlotExample from '@site/static/usage/v9/chip/slots/index.md'; @@ -35,13 +35,13 @@ import SlotExample from '@site/static/usage/v8/chip/slots/index.md'; ### Colors -import Colors from '@site/static/usage/v8/chip/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/chip/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/chip/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/chip/theming/css-properties/index.md'; diff --git a/docs/api/col.md b/docs/api/col.md index 9254ce927e0..817c7716465 100644 --- a/docs/api/col.md +++ b/docs/api/col.md @@ -1,12 +1,12 @@ --- title: "ion-col" --- -import Props from '@ionic-internal/component-api/v8/col/props.md'; -import Events from '@ionic-internal/component-api/v8/col/events.md'; -import Methods from '@ionic-internal/component-api/v8/col/methods.md'; -import Parts from '@ionic-internal/component-api/v8/col/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/col/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/col/slots.md'; +import Props from '@ionic-internal/component-api/v9/col/props.md'; +import Events from '@ionic-internal/component-api/v9/col/events.md'; +import Methods from '@ionic-internal/component-api/v9/col/methods.md'; +import Parts from '@ionic-internal/component-api/v9/col/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/col/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/col/slots.md'; ion-col: Column Component Padding and Other Properties @@ -17,19 +17,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Columnは、[Grid](./grid) システムのセルラーコンポーネントで、[row](./row)の内部に配置されます。列は行を埋めるように拡張されます。グリッド内のすべてのコンテンツは、カラムの内部に配置する必要があります。 -詳しくは、[grid](./grid)のドキュメントを参照してください。 - +詳細は[grid](./grid)のドキュメントを参照してください。 ## Column Alignment デフォルトでは、カラムは行の高さ全体を埋めるように引き伸ばされます。カラムは[フレックスアイテム](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item)なので、この動作をカスタマイズするために、カラムに適用できるいくつかの[CSSクラス](/docs/layout/css-utilities#flex-item-properties) があります。 - - - ## プロパティ diff --git a/docs/api/content.md b/docs/api/content.md index 6782dfcce50..1f387f6288a 100644 --- a/docs/api/content.md +++ b/docs/api/content.md @@ -1,12 +1,12 @@ --- title: "ion-content" --- -import Props from '@ionic-internal/component-api/v8/content/props.md'; -import Events from '@ionic-internal/component-api/v8/content/events.md'; -import Methods from '@ionic-internal/component-api/v8/content/methods.md'; -import Parts from '@ionic-internal/component-api/v8/content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/content/slots.md'; +import Props from '@ionic-internal/component-api/v9/content/props.md'; +import Events from '@ionic-internal/component-api/v9/content/events.md'; +import Methods from '@ionic-internal/component-api/v9/content/methods.md'; +import Parts from '@ionic-internal/component-api/v9/content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/content/slots.md'; ion-content: Scrollable Component for Ionic App Content @@ -27,7 +27,7 @@ Contentは、他の多くのIonicコンポーネントと同様に、 [CSS Utili ## 基本的な使い方 -import Basic from '@site/static/usage/v8/content/basic/index.md'; +import Basic from '@site/static/usage/v9/content/basic/index.md'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v8/content/basic/index.md'; コンテンツは、ページ内の唯一のトップレベル・コンポーネントとすることも、[ヘッダー](./header)、[フッター](./footer)、またはその両方と一緒に使用することも可能です。ヘッダーやフッターと一緒に使用すると、残りの高さを埋めるようにサイズが調整されます。 -import HeaderFooter from '@site/static/usage/v8/content/header-footer/index.md'; +import HeaderFooter from '@site/static/usage/v9/content/header-footer/index.md'; @@ -45,7 +45,7 @@ import HeaderFooter from '@site/static/usage/v8/content/header-footer/index.md'; デフォルトでは、コンテンツは [ヘッダー](./header)と [フッター](./footer)の間のスペースを埋めますが、それらの背景にまわることはありません。例えば、ヘッダーとフッターのどちらかに `translucent` プロパティを設定した場合や、ツールバーに `opacity` を設定した場合など、特定のケースでは、コンテンツをヘッダーとフッターの後ろにスクロールさせることが望まれるかもしれない。これは、コンテンツの `fullscreen` プロパティを `true` に設定することで実現することができます。 -import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; +import Fullscreen from '@site/static/usage/v9/content/fullscreen/index.md'; @@ -56,7 +56,7 @@ import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. -import Fixed from '@site/static/usage/v8/content/fixed/index.md'; +import Fixed from '@site/static/usage/v9/content/fixed/index.md'; @@ -64,7 +64,7 @@ import Fixed from '@site/static/usage/v8/content/fixed/index.md'; コンテンツには [メソッド](#methods) が用意されており、これを呼び出すことでコンテンツを下、上、または特定のポイントにスクロールさせることができます。これらのメソッドには `duration` を渡すことができ、瞬時に位置を変更するのではなく、スムーズに移行することができます。 -import ScrollMethods from '@site/static/usage/v8/content/scroll-methods/index.md'; +import ScrollMethods from '@site/static/usage/v9/content/scroll-methods/index.md'; @@ -72,29 +72,28 @@ import ScrollMethods from '@site/static/usage/v8/content/scroll-methods/index.md スクロールイベントは、パフォーマンス上、コンテンツに対してデフォルトで無効化されています。しかし、`scrollEvents` を `true` に設定することで、有効にすることができます。これは、 スクロール [イベント](#events) を聞く前に必要です。 -import ScrollEvents from '@site/static/usage/v8/content/scroll-events/index.md'; +import ScrollEvents from '@site/static/usage/v9/content/scroll-events/index.md'; -Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). ## テーマ ### Colors -import Colors from '@site/static/usage/v8/content/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/content/theming/colors/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v8/content/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/content/theming/css-shadow-parts/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/content/theming/css-properties/index.md'; @@ -118,7 +117,7 @@ ion-content::part(scroll) { } ``` -import SafeArea from '@site/static/usage/v8/content/theming/safe-area/index.md'; +import SafeArea from '@site/static/usage/v9/content/theming/safe-area/index.md'; @@ -162,7 +161,6 @@ interface ScrollCustomEvent extends ScrollBaseCustomEvent { } ``` -### ScrollCustomEvent ## プロパティ diff --git a/docs/api/datetime-button.md b/docs/api/datetime-button.md index a9fcb17433c..02c9c307cf8 100644 --- a/docs/api/datetime-button.md +++ b/docs/api/datetime-button.md @@ -1,12 +1,12 @@ --- title: "ion-datetime-button" --- -import Props from '@ionic-internal/component-api/v8/datetime-button/props.md'; -import Events from '@ionic-internal/component-api/v8/datetime-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/datetime-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/datetime-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/datetime-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/datetime-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/datetime-button/props.md'; +import Events from '@ionic-internal/component-api/v9/datetime-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/datetime-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/datetime-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/datetime-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/datetime-button/slots.md'; ion-datetime-button: Ionic Input for Datetime Picker @@ -23,23 +23,23 @@ Datetimeボタンは、[Datetime](./datetime) コンポーネントとリンク Datetimeボタンは、スペースに制約がある場合に使用する必要があります。このコンポーネントは、現在の日付と時刻の値を表示するボタンを表示します。ボタンがタップされると、日付や時刻のピッカーがオーバーレイで表示されます。 -Angular、React、VueなどのJavaScriptフレームワークでDatetime Buttonを使用する場合は、 [ion-modalのkeepContentsMountedプロパティ](./modal#keepcontentsmounted) または [ion-popover](./popover#keepcontentsmounted) を使用していることを確認してください。これにより、オーバーレイがまだ表示されていない場合でも、リンクされたdatetimeインスタンスがマウントされるようになります。 +Angular、React、Vue などの JavaScript フレームワークで Datetime Button を使用する場合は、[ion-modal の keepContentsMounted プロパティ](./modal#prop-keep-contents-mounted)または [ion-popover の keepContentsMounted プロパティ](./popover#prop-keep-contents-mounted)を使用してください。これにより、オーバーレイがまだ表示されていない場合でも、関連付けられた datetime インスタンスがマウントされます。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/datetime-button/basic/index.md'; +import Basic from '@site/static/usage/v9/datetime-button/basic/index.md'; ## ローカライゼーション -`ion-datetime-button` のローカライズされたテキストは、関連する `ion-datetime` インスタンスの `locale` プロパティによって決まります。詳しくは、[Datetime Localization](./datetime#localization) を参照してください。 +`ion-datetime-button`上のローカライズされたテキストは、関連する`ion-datetime`インスタンスの`locale`プロパティによって決まります。詳細は[日時ローカライゼーション](./datetime#localization)を参照してください。 ## Format Options -Datetimeインスタンスに`formatOptions`を指定することで、Datetime Buttonの日付と時刻の書式をカスタマイズすることができます。詳細は[Datetime Format Options](./datetime#format-options)を参照してください。 +Datetime ボタンの日時の形式は、関連する Datetime インスタンスで `formatOptions` を指定することでカスタマイズできます。詳細は [Datetime フォーマットオプション](./datetime#format-options) を参照してください。 -import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/index.md'; +import FormatOptions from '@site/static/usage/v9/datetime-button/format-options/index.md'; @@ -47,20 +47,6 @@ import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/ `ion-datetime-button` は、マウントされた `ion-datetime` インスタンスと関連付ける必要があります。そのため、[Inline Modals](./modal#inline-modals-recommended) と [Inline Popovers](./popover#inline-popovers) は `keepContentsMounted` プロパティを `true` に設定して使用しなければなりません。 - - ## プロパティ diff --git a/docs/api/datetime.md b/docs/api/datetime.md index 38b55921cab..cf4575b72cf 100644 --- a/docs/api/datetime.md +++ b/docs/api/datetime.md @@ -1,97 +1,99 @@ --- -title: "ion-datetime" +title: 'ion-datetime' --- -import Props from '@ionic-internal/component-api/v8/datetime/props.md'; -import Events from '@ionic-internal/component-api/v8/datetime/events.md'; -import Methods from '@ionic-internal/component-api/v8/datetime/methods.md'; -import Parts from '@ionic-internal/component-api/v8/datetime/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/datetime/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/datetime/slots.md'; +import Props from '@ionic-internal/component-api/v9/datetime/props.md'; +import Events from '@ionic-internal/component-api/v9/datetime/events.md'; +import Methods from '@ionic-internal/component-api/v9/datetime/methods.md'; +import Parts from '@ionic-internal/component-api/v9/datetime/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/datetime/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/datetime/slots.md'; -import Basic from '@site/static/usage/v8/datetime/basic/index.md'; +import Basic from '@site/static/usage/v9/datetime/basic/index.md'; -import MaxMin from '@site/static/usage/v8/datetime/date-constraints/max-min/index.md'; -import Values from '@site/static/usage/v8/datetime/date-constraints/values/index.md'; -import Advanced from '@site/static/usage/v8/datetime/date-constraints/advanced/index.md'; +import MaxMin from '@site/static/usage/v9/datetime/date-constraints/max-min/index.md'; +import Values from '@site/static/usage/v9/datetime/date-constraints/values/index.md'; +import Advanced from '@site/static/usage/v9/datetime/date-constraints/advanced/index.md'; -import FormatOptions from '@site/static/usage/v8/datetime/format-options/index.md'; +import FormatOptions from '@site/static/usage/v9/datetime/format-options/index.md'; -import CustomLocale from '@site/static/usage/v8/datetime/localization/custom-locale/index.md'; -import HourCycle from '@site/static/usage/v8/datetime/localization/hour-cycle/index.md'; -import FirstDayOfWeek from '@site/static/usage/v8/datetime/localization/first-day-of-week/index.md'; -import LocaleExtensionTags from '@site/static/usage/v8/datetime/localization/locale-extension-tags/index.md'; -import TimeLabel from '@site/static/usage/v8/datetime/localization/time-label/index.md'; +import CustomLocale from '@site/static/usage/v9/datetime/localization/custom-locale/index.md'; +import HourCycle from '@site/static/usage/v9/datetime/localization/hour-cycle/index.md'; +import FirstDayOfWeek from '@site/static/usage/v9/datetime/localization/first-day-of-week/index.md'; +import LocaleExtensionTags from '@site/static/usage/v9/datetime/localization/locale-extension-tags/index.md'; +import TimeLabel from '@site/static/usage/v9/datetime/localization/time-label/index.md'; -import MonthAndYear from '@site/static/usage/v8/datetime/presentation/month-and-year/index.md'; -import Time from '@site/static/usage/v8/datetime/presentation/time/index.md'; -import Date from '@site/static/usage/v8/datetime/presentation/date/index.md'; +import MonthAndYear from '@site/static/usage/v9/datetime/presentation/month-and-year/index.md'; +import Time from '@site/static/usage/v9/datetime/presentation/time/index.md'; +import Date from '@site/static/usage/v9/datetime/presentation/date/index.md'; -import ShowingDefaultTitle from '@site/static/usage/v8/datetime/title/showing-default-title/index.md'; -import CustomizingTitle from '@site/static/usage/v8/datetime/title/customizing-title/index.md'; +import ShowingDefaultTitle from '@site/static/usage/v9/datetime/title/showing-default-title/index.md'; +import CustomizingTitle from '@site/static/usage/v9/datetime/title/customizing-title/index.md'; -import ShowingConfirmationButtons from '@site/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md'; -import CustomizingButtons from '@site/static/usage/v8/datetime/buttons/customizing-buttons/index.md'; -import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/customizing-button-texts/index.md'; +import ShowingConfirmationButtons from '@site/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.md'; +import CustomizingButtons from '@site/static/usage/v9/datetime/buttons/customizing-buttons/index.md'; +import CustomizingButtonTexts from '@site/static/usage/v9/datetime/buttons/customizing-button-texts/index.md'; -import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md'; -import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md'; +import HighlightedDatesArray from '@site/static/usage/v9/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v9/datetime/highlightedDates/callback/index.md'; -import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md'; +import ShowAdjacentDays from '@site/static/usage/v9/datetime/show-adjacent-days/index.md'; -import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md'; +import MultipleDateSelection from '@site/static/usage/v9/datetime/multiple/index.md'; -import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md'; -import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md'; -import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md'; -import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md'; -import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md'; +import GlobalTheming from '@site/static/usage/v9/datetime/styling/global-theming/index.md'; +import CalendarHeaderStyling from '@site/static/usage/v9/datetime/styling/calendar-header/index.md'; +import CalendarDaysStyling from '@site/static/usage/v9/datetime/styling/calendar-days/index.md'; +import DatetimeHeaderStyling from '@site/static/usage/v9/datetime/styling/datetime-header/index.md'; +import WheelStyling from '@site/static/usage/v9/datetime/styling/wheel-styling/index.md'; ion-datetime: Ionic API Input for Datetime Format Picker - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Datetimeはカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetimeはネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic FrameworkのDatetimeコンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetimeの値を管理することが簡単にできます。 +Datetime はカレンダーとタイムホイールのインターフェイスを表示し、ユーザーが簡単に日付と時刻を選択できるようにします。Datetime はネイティブの `datetime-local` の `input` 要素と似ていますが、Ionic Framework の Datetime コンポーネントを使用すると、好みのフォーマットで日付と時刻を表示したり、datetime の値を管理することが簡単にできます。 -## 概要 +## 概要 -これまで、JavaScriptやHTMLの入力でdatetimeの値を扱うことは、常に困難でした。 +これまで、JavaScript や HTML の入力で datetime の値を扱うことは、常に困難でした。 入力でさえも、常に課題でした。 -特に、JavaScriptの `Date` オブジェクトは、datetime文字列を正しく解析したり、datetime値をフォーマットしたりするのが難しいことで有名です。 -さらに悪いことに、ブラウザやJavaScriptのバージョンによって、 -特にロケールごとに様々なdatetime文字列の解析が異なるのです。 +特に、JavaScript の `Date` オブジェクトは、datetime 文字列を正しく解析したり、datetime 値をフォーマットしたりするのが難しいことで有名です。 +さらに悪いことに、ブラウザや JavaScript のバージョンによって、 +特にロケールごとに様々な datetime 文字列の解析が異なるのです。 -Ionic Frameworkのdatetimeは、開発者が一般的な落とし穴を回避できるように設計されており、 -開発者は簡単にdatetime値を操作し、ユーザーにシンプルなdatetimeピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。 +Ionic Framework の datetime は、開発者が一般的な落とし穴を回避できるように設計されており、 +開発者は簡単に datetime 値を操作し、ユーザーにシンプルな datetime ピッカーを提供し、素晴らしいユーザーエクスペリエンスを提供することができます。 -### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` +### ISO 8601 日時形式: `YYYY-MM-DDTHH:mmZ` -Ionic Frameworkでは、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。 -この値は、JavaScriptの `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。 -ISO datetimeフォーマットを使用することで、 -JSONオブジェクトやデータベース内でのシリアライズやパースが容易になります。 +Ionic Framework では、[ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を値として使用します。 +この値は、JavaScript の `Date` オブジェクトを使用するのではなく、単純に文字列として使用されます。 +ISO datetime フォーマットを使用することで、 +JSON オブジェクトやデータベース内でのシリアライズやパースが容易になります。 以下は、 `ion-datetime` で使用できる ISO 8601 フォーマットの例です: -| Description | Format | Datetime Value Example | -| -------------------- | ------------------------ | ------------------------------ | -| Year | `YYYY` | `1994` | -| Year and Month | `YYYY-MM` | `1994-12` | -| Complete Date | `YYYY-MM-DD` | `1994-12-15` | -| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | -| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | -| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | -| Hour and Minute | `HH:mm` | `13:47` | - -年号は常に4桁、ミリ秒は（加算される場合は）常に3桁、その他は常に2桁であることに注意してください。 -ミリ秒は3桁、その他は2桁である。 -ですから、1月を表す数字には 1月を表す数字には常に先頭のゼロ、例えば`01`が付きます。 -また、時刻は常に24時間表示で、 -12時間表示の時計では「00」は「午前12時」、「13」は「午後1時」、「23」は「午後3時」を意味します。 +| 説明 | 形式 | 日時値の例 | +| ---------------------- | ------------------------ | --------------------------- | +| 年 | `YYYY` | `1994` | +| 年と月 | `YYYY-MM` | `1994-12` | +| 完全な日付 | `YYYY-MM-DD` | `1994-12-15` | +| 日付と時刻 | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | +| UTC タイムゾーン | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | +| タイムゾーンオフセット | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | +| 時と分 | `HH:mm` | `13:47` | + +年は常に 4 桁、ミリ秒は（指定する場合）常に 3 桁、その他は常に 2 桁であることに注意してください。 +そのため、1 月を表す数字には `01` のように必ず先頭にゼロが付きます。 +また、時刻は常に 24 時間表示で、 +12 時間表示の時計では「00」は「午前 12 時」、「13」は「午後 1 時」、「23」は「午後 11 時」を意味します。 :::note 秒、ミリ秒、タイムゾーンは ISO 8601 datetime フォーマットで指定できますが、 `ion-datetime` は秒、ミリ秒、タイムゾーンを選択するためのインターフェイスを提供しません。秒、ミリ秒、タイムゾーンの値を指定しても無視されます。 @@ -107,15 +109,15 @@ JSONオブジェクトやデータベース内でのシリアライズやパー ## 非同期に値を設定する -すでにdatetimeが作成された後にプログラムで`value`が更新されると、datetimeは自動的に新しい日付にジャンプします。しかし、ユーザーがdatetimeを操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetimeの`value`が非同期処理で読み込まれる場合、値の更新が終わるまでCSSでdatetimeを非表示にすることをお勧めします。 +すでに datetime が作成された後にプログラムで`value`が更新されると、datetime は自動的に新しい日付にジャンプします。しかし、ユーザーが datetime を操作しているときに、この方法で`value`を更新することは避けることをお勧めします。例えば、datetime の`value`が非同期処理で読み込まれる場合、値の更新が終わるまで CSS で datetime を非表示にすることをお勧めします。 ## 日付コンテナ ### 日付の最小値と最大値 -日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ IS0 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。 +日付の最小値と最大値をカスタマイズするには、 `min` と `max` コンポーネントプロパティを使用します。上の表にあるのと同じ ISO 8601 フォーマットに従って、各コンポーネントはユーザーが選択できる日付を制限することができます。 -以下の例では、日付の選択を2022年3月から2022年5月のみに制限しています。 +以下の例では、日付の選択を 2022 年 3 月から 2022 年 5 月のみに制限しています。 @@ -123,22 +125,22 @@ JSONオブジェクトやデータベース内でのシリアライズやパー `min` と `max` プロパティでは、日付の選択をある範囲に制限することができますが、 `monthValues`, `dayValues`, `yearValues`, `hourValues`, `minuteValues` プロパティでは、ユーザーが選択できる特定の日や時刻を選択することが可能です。 -次の例では、15分単位で分を選択することができます。また、日付を5刻みで選択することができます。 +次の例では、15 分単位で分を選択することができます。また、日付を 5 刻みで選択することができます。 ### 高度な日付制限 -`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用して、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にすることができる。 -isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付ける。この関数は、レンダリングされた各日付、前月、当月、翌月に対して呼び出されます。カスタムの実装では、ジャンクを避けるためにパフォーマンスを最適化する必要があります。 +`isDateEnabled` プロパティを使用すると、開発者は `ion-datetime` をカスタマイズして、ISO 8601 の日付文字列を使用し、特定の日、日付の範囲、週末、または任意のカスタムルールを無効にできます。 +`isDateEnabled` プロパティは、日付が有効かどうかを示すブール値を返す関数を受け付けます。この関数は、表示されている各日付と、その前月および翌月の日付に対して呼び出されます。カスタム実装では、画面のカクつきを避けるためにパフォーマンスを最適化する必要があります。 次の例では、週末の日付をすべて無効にする方法を示しています。より高度な日付操作を行うには、 `date-fns` のような日付ユーティリティを使用することをお勧めします。 -## ローカライゼーション +## ローカライゼーション {/* #localization */} -Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web APIを利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。 +Ionic Framework では、[Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API を利用して、ユーザーの端末に設定されている言語や地域に応じて、月名と曜日名を自動的にローカライズすることが可能です。 ### カスタムロケール @@ -149,66 +151,65 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U :::note -時刻の表記は、自動的にローカライズされません。詳しくは [Time Label](#time-label) を参照してください。 +時間ラベルは自動的にローカライズされません。詳細は [時間ラベル](#time-label) を参照してください。 ::: ### 時間サイクル -`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は12時間のサイクルを使用します。 +`ion-datetime` は、デフォルトで `locale` プロパティで指定された時間サイクルを使用します。例えば、 `locale` が `en-US` に設定されている場合、 `ion-datetime` は 12 時間のサイクルを使用します。 -時間サイクルには4つのタイプがあります。 +時間サイクルには 4 つのタイプがあります。 -| Hour cycle type | Description | -| --------------- | ------------------------------------------------------------ | -| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | -| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | -| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | -| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | +| 時間サイクルの種類 | 説明 | +| ------------------ | ----------------------------------------------------------------------------- | +| `'h12'` | 1〜12 を使用する時間方式。パターンの `h` に対応し、午前 12:00 から始まります。 | +| `'h23'` | 0〜23 を使用する時間方式。パターンの `H` に対応し、0:00 から始まります。 | +| `'h11'` | 0〜11 を使用する時間方式。パターンの `K` に対応し、午前 0:00 から始まります。 | +| `'h24'` | 1〜24 を使用する時間方式。パターンの `k` に対応し、24:00 から始まります。 | :::note - ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle +ソース: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle ::: - どの時間のサイクルを使用するか、もっとコントロールする必要があるシナリオがあるかもしれません。このような場合には、 `hourCycle` プロパティが役に立ちます。 -次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に12時間周期を使用するように強制することができます。 +次の例では、 `hourCycle` プロパティを使用して、ロケールが `en-GB` であるにもかかわらず、 `ion-datetime` に 12 時間周期を使用するように強制することができます。 ### 週初めの日 -`ion-datetime`の場合、週初めの曜日はデフォルトで日曜日です。2022年現在、Ionicがデバイスのロケールに基づいて自動的に週の最初の曜日を決定するためのブラウザAPIはありませんが、これに関する作業は進行中です（参照: [TC39 GitHub](https://github.com/tc39/ecma402/issues/6) )． +`ion-datetime` の場合、デフォルトの週の最初の日は日曜日です。2022 年時点では、Ionic がデバイスのロケールに基づいて週の最初の日を自動的に判定するブラウザ API はありませんが、これに関する作業は進行中です（[TC39 GitHub](https://github.com/tc39/ecma402/issues/6) を参照）。 -### 時刻表記 +### 時刻表記 {/* #time-label */} -時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionicでは `time-label` スロットで簡単にカスタムのローカライズを提供することができます。 +時刻表記は自動的にローカライズされるわけではありません。幸いなことに、Ionic では `time-label` スロットで簡単にカスタムのローカライズを提供することができます。 ### ロケールエクステンションタグ -`ion-datetime` は、 `Intl.Locale` API の一部として [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。 +`ion-datetime` は、`Intl.Locale` API の一部として[ロケール拡張タグ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale)もサポートしています。これらのタグを使用すると、ロケールに関する情報をロケール文字列自体にエンコードすることができます。開発者は、アプリの中で [`Intl.Locale` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) を使っている場合、拡張タグのアプローチを使うことを好むかもしれません。 たとえば、 `en-GB` ロケールで 12 時間周期を使用したい場合は、 `locale` と `hourCycle` の両方のプロパティを使用するのではなく、拡張タグを使用します。 :::note -アプリで使用する前に、 `Intl.Locale` の [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) を必ず確認してください。 +アプリで使用する前に、`Intl.Locale` の[ブラウザー互換性表](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility)を必ず確認してください。 ::: ## プレゼンテーション デフォルトでは、 `ion-datetime` は日付と時刻の両方を選択することができる。さらに、ユーザは特定の月、年、時間、分を選択することができます。 -ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーはtimeピッカーの後に表示されます。 +ユースケースによっては、日付だけを選択したり、時間だけを選択したりすることもできます。 `presentation` プロパティでは、表示するピッカーとその順番を指定することができます。例えば、 `date-time` を設定すると、カレンダーピッカーがタイムピッカーよりも先に表示されます。 `time-date` を設定すると、カレンダーピッカーは time ピッカーの後に表示されます。 ### 月と年の選択 -月と年の選択は、 `presentation` プロパティに `month-year` , `month` , または `year` を渡すことで行うことができます。 +月と年の選択は、 `presentation` プロパティに `month-year` , `month` , または `year` を渡すことで行うことができます。 この例では、 `month-year` を設定した datetime を示しています。 @@ -226,29 +227,29 @@ Ionic Frameworkでは、[Intl.DatetimeFormat](https://developer.mozilla.org/en-U 時刻の選択は、 `presentation` プロパティに `date-time`, `time-date`, または `date` を渡すことで行うことで有効になります。 -この例では、`date`の設定でdatetimeを指定しています。 +この例では、`date`の設定で datetime を指定しています。 ### ピッカーのホイールスタイル -デフォルトでは、Ionicは `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。preferWheel` が `true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。 +デフォルトでは、Ionic は `presentation` を使用する場合、グリッドスタイルのレイアウトを優先して表示します。しかし、`preferWheel` プロパティを使用すると、ホイールスタイルを表示することができます。`preferWheel`が`true` の場合、Ionic は可能な限りホイールスタイルのレイアウトを優先して表示します。 特定の `presentation` オプションには、グリッドとホイールの両方のスタイルがあり、開発者は `preferWheel` プロパティで選択することができます。その他の `presentation` の値はホイールスタイルのみを持ち、グリッドスタイルは決して表示されません。下の表は、どの `presentation` の値がグリッドスタイルとホイールスタイルを持つかを示しています。 -| `presentation` | グリッドシステム | ホイールシステム | -| -------------- | --------------- | ---------------- | -| `date` | Yes | Yes | -| `date-time` | Yes | Yes | -| `month` | No | Yes | -| `month-year` | No | Yes | -| `time` | No | Yes | -| `time-date` | Yes | Yes | -| `year` | No | Yes | +| `presentation` | グリッドシステム | ホイールシステム | +| -------------- | ---------------- | ---------------- | +| `date` | あり | あり | +| `date-time` | あり | あり | +| `month` | なし | あり | +| `month-year` | なし | あり | +| `time` | なし | あり | +| `time-date` | あり | あり | +| `year` | なし | あり | 以下の例では、ホイールピッカーに `presentation="date-time"` を指定しています。 -import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md'; +import Wheel from '@site/static/usage/v9/datetime/presentation/wheel/index.md'; @@ -256,10 +257,10 @@ import Wheel from '@site/static/usage/v8/datetime/presentation/wheel/index.md'; `showAdjacentDays` プロパティが `true` に設定されている場合、カレンダービューに前月と翌月の日が表示され、月の初めや終わりの空白を埋めることができます。ユーザーが有効な隣接日をクリックすると、カレンダーはその月のビューを表示するようにスムーズにアニメーションします。 -`showAdjacentDays`が有効な場合、カレンダービューは常に6行表示されるため、グリッドを埋めるために必要に応じて前月または翌月の日が表示されます。例えば、ある月が週の初日に始まり、5行目で終わるとしても、6行目を完成させるために翌月の日が最後に表示されます。 +`showAdjacentDays`が有効な場合、カレンダービューは常に 6 行表示されるため、グリッドを埋めるために必要に応じて前月または翌月の日が表示されます。例えば、ある月が週の初日に始まり、5 行目で終わるとしても、6 行目を完成させるために翌月の日が最後に表示されます。 :::note -This property is only supported when using `presentation="date"` and `preferWheel="false"`. +このプロパティは、`presentation="date"` かつ `preferWheel="false"` の場合にのみサポートされます。 ::: @@ -269,7 +270,7 @@ This property is only supported when using `presentation="date"` and `preferWhee `multiple`プロパティが`true`に設定されている場合、カレンダーピッカーから複数の日付を選択することができます。選択した日付をクリックすると選択が解除されます。 :::note -This property is only supported when using `presentation="date"` and `preferWheel="false"`. +このプロパティは、`presentation="date"` かつ `preferWheel="false"` の場合にのみサポートされます。 ::: @@ -286,9 +287,9 @@ This property is only supported when using `presentation="date"` and `preferWhee -## フォーマットオプション +## フォーマットオプション {/* #format-options */} -`formatOptions`を指定することで、Datetimeコンポーネントのヘッダーテキスト内の日付と時刻ボタン内の時刻の書式をカスタマイズすることができます。`formatOptions`プロパティ内の `date` と `time` はそれぞれ [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) オブジェクトでなければなりません。もし `formatOptions` が指定されなかった場合、日付と時刻にはデフォルトのフォーマットが使用されます。 +`formatOptions`を指定することで、Datetime コンポーネントのヘッダーテキスト内の日付と時刻ボタン内の時刻の書式をカスタマイズすることができます。`formatOptions`プロパティ内の `date` と `time` はそれぞれ [`Intl.DateTimeFormatOptions`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/DateTimeFormat#options) オブジェクトでなければなりません。もし `formatOptions` が指定されなかった場合、日付と時刻にはデフォルトのフォーマットが使用されます。 Datetime はタイムゾーンを [操作したり設定したりしません](#time-zones)。もし `timeZone` や `timeZoneName` が指定された場合、それらは無視され、タイムゾーンは UTC に設定される。これにより、表示される値がユーザーの現在のタイムゾーンに変換されるのではなく、選択された値と一致するようになります。 @@ -298,11 +299,11 @@ Datetime はタイムゾーンを [操作したり設定したりしません](# ## ボタン -デフォルトでは、新しい日付が選択されると、新しいdatetimeの値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。 +デフォルトでは、新しい日付が選択されると、新しい datetime の値で `ionChange` が発行されます。 `ionChange` を発行する前にユーザの確認を必要とする場合は、 `showDefaultButtons` プロパティを `true` に設定するか、 `buttons` スロットでカスタム確認ボタンを渡すことができます。カスタムボタンを渡す場合、 `ionChange` を発生させるために、確認ボタンは `ion-datetime` の `confirm` メソッドを呼び出す必要があります。 ### 確認ボタンの表示 -デフォルトのDoneボタンとCancelボタンは、それぞれ [`confirm`](#confirm) と [`cancel`](#cancel) メソッドを呼び出すように予め設定されています。 +デフォルトの「完了」と「キャンセル」ボタンは、それぞれ既に [`confirm`](#method-confirm) と [`cancel`](#method-cancel) メソッドを呼び出すように事前設定されています。 @@ -324,12 +325,12 @@ Datetime はタイムゾーンを [操作したり設定したりしません](# `highlightedDates`プロパティを使用すると、開発者は特定の日付をカスタムテキストや背景色でスタイル設定することができます。このプロパティは、日付とその色の配列として定義するか、ISO 文字列を受け取って使用する色を返すコールバックとして定義することができます。 -色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16進コード、`rgba` 、[color variables](../theming/colors) などが含まれます。 +色を指定する場合は、有効な CSS カラーフォーマットを使用できます。これには、16 進コード、赤・緑・青・透明度を指定する関数、[カラーバリエーション](../theming/colors)などが含まれます。 一貫したユーザーエクスペリエンスを維持するため、選択された日付のスタイルは常にカスタムハイライトよりも優先されます。 :::note -This property is only supported when `preferWheel="false"`, and using a `presentation` of either `"date"`, `"date-time"`, or `"time-date"`. +このプロパティは、`preferWheel="false"` かつ `presentation` が `"date"`、`"date-time"`、`"time-date"` のいずれかの場合にのみサポートされます。 ::: ### 配列を利用 @@ -338,7 +339,7 @@ This property is only supported when `preferWheel="false"`, and using a `present -### Callbackを利用 +### Callback を利用 誕生日や定期的なミーティングなど、ハイライトされた日付が繰り返される場合は、コールバックを使用した方がよいでしょう。 @@ -348,7 +349,7 @@ This property is only supported when `preferWheel="false"`, and using a `present ### グローバルテーマ -Ionicの強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。 +Ionic の強力なテーマシステムを使用すると、特定のテーマに合わせてアプリ全体を簡単に変更することができます。この例では、[Color Creator](../theming/colors#new-color-creator) と [Stepped Color Generator](../theming/themes#stepped-color-generator) を使用して、 `ion-datetime` で使用できるローズ色のパレットを作成しました。 この方法の利点は、`ion-datetime`だけでなく、すべてのコンポーネントが自動的にこのテーマを利用できることです。 @@ -359,12 +360,12 @@ Ionicの強力なテーマシステムを使用すると、特定のテーマに The datetime header manages the content for the `title` slot and the selected date. :::note -The selected date will not render if `preferWheel` is set to `true`. +`preferWheel` が `true` の場合、選択した日付は表示されません。 ::: -### Calender Header +### カレンダーヘッダー The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout. @@ -384,17 +385,17 @@ The example below selects the day 2 days ago, unless that day is in the previous ### Wheel Pickers -`ion-datetime`で使用するホイールは、シャドウパーツとCSS変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルのdatetimeのカラムにも、グリッドスタイルのdatetimeの月/年のピッカーにも適用されます。 +`ion-datetime`で使用するホイールは、シャドウパーツと CSS 変数を組み合わせてスタイルを設定することができます。これは、ホイールスタイルの datetime のカラムにも、グリッドスタイルの datetime の月/年のピッカーにも適用されます。 -## タイムゾーン +## タイムゾーン {/* #time-zones */} -Ionicの `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetimeコントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。 +Ionic の `ion-datetime` は、[datetime-local](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local) の動作に従い、datetime コントロールの内部でタイムゾーンを操作・設定することはありません。つまり、「07:00」という時刻の値は、異なるタイムゾーンに応じて調整されることはありません。 -[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetimeの値を希望するタイムゾーンに変換することをお勧めします。 +[date-fns-tz](https://github.com/marnusw/date-fns-tz) のようなライブラリを使用して、datetime の値を希望するタイムゾーンに変換することをお勧めします。 -以下は、ISO-8601文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。 +以下は、ISO-8601 文字列をユーザーのデバイスに設定されたタイムゾーンで表示するためのフォーマット例です。 ```typescript import { format, utcToZonedTime } from 'date-fns-tz'; @@ -435,18 +436,17 @@ console.log(formattedString); // Jun 4, 2021 See https://date-fns.org/docs/format for a list of all the valid format tokens. - ## 高度な日時の検証および操作 datetime ピッカーは、正確なフォーマットを選択するシンプルさを提供し、 標準化された [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) を使用して、 datetime 値を文字列として持続させることができます。 -しかし、 `ion-datetime` は、datetimeの値を検証したり操作したりするときに、 +しかし、 `ion-datetime` は、datetime の値を検証したり操作したりするときに、 すべての状況を解決しようとするわけではないことに注意することが重要です。 -もし、datetimeの値を特定のフォーマットからパースしたり、 -操作したり(例えば、日付に5日足したり、30分を引いたり)、 +もし、datetime の値を特定のフォーマットからパースしたり、 +操作したり(例えば、日付に 5 日足したり、30 分を引いたり)、 あるいは、特定のロケールにデータをフォーマットする必要があるなら、 -JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。 +JavaScript で日付を扱うために [date-fns](https://date-fns.org) を使うことを強くお勧めします。 ## アクセシビリティ @@ -477,7 +477,7 @@ JavaScriptで日付を扱うために [date-fns](https://date-fns.org) を使う #### 時刻、月、年のホイール -Datetimeのホイールピッカーは、内部的に [Picker](./picker) を使用しています。ホイールピッカーのアクセシビリティ機能の詳細については、 [ピッカー アクセシビリティ](./picker#accessibility) を参照してください。 +Datetime のホイールピッカーは内部で [Picker](./picker) を使用しています。ホイールピッカーのアクセシビリティ機能の詳細は [Picker アクセシビリティ](./picker#accessibility) を参照してください。 ## Interfaces @@ -512,7 +512,7 @@ interface DatetimeCustomEvent extends CustomEvent { ## CSS Shadow Parts -## CSSカスタムプロパティ +## CSS カスタムプロパティ ## Slots diff --git a/docs/api/fab-button.md b/docs/api/fab-button.md index f103c2a10c0..07e3746cb26 100644 --- a/docs/api/fab-button.md +++ b/docs/api/fab-button.md @@ -1,12 +1,12 @@ --- title: "ion-fab-button" --- -import Props from '@ionic-internal/component-api/v8/fab-button/props.md'; -import Events from '@ionic-internal/component-api/v8/fab-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/fab-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/fab-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/fab-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/fab-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/fab-button/props.md'; +import Events from '@ionic-internal/component-api/v9/fab-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/fab-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/fab-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/fab-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/fab-button/slots.md'; ion-fab-button: Ionic FAB Button Icon for Primary Action @@ -17,12 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - フローティングアクションボタン（FAB）は、アプリケーションの主要なアクションを表します。デフォルトでは、円形の形をしています。ボタンが押されると、関連するアクションがさらに開かれることもあります。 その名が示すように、FABは一般的に固定された位置でコンテンツの上に浮かんでいます。これは、FABボタンを[fab](./fab)コンポーネントで包むことで実現されます。もしボタンがfabで包まれていない場合は、コンテンツと一緒にスクロールします。 -使用例については、[fab documentation](./fab)を参照してください。 +使用例については、[fab ドキュメント](./fab) を参照してください。 ## プロパティ @@ -39,5 +38,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/fab-list.md b/docs/api/fab-list.md index 0d695a34503..46222032c07 100644 --- a/docs/api/fab-list.md +++ b/docs/api/fab-list.md @@ -1,12 +1,12 @@ --- title: "ion-fab-list" --- -import Props from '@ionic-internal/component-api/v8/fab-list/props.md'; -import Events from '@ionic-internal/component-api/v8/fab-list/events.md'; -import Methods from '@ionic-internal/component-api/v8/fab-list/methods.md'; -import Parts from '@ionic-internal/component-api/v8/fab-list/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/fab-list/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/fab-list/slots.md'; +import Props from '@ionic-internal/component-api/v9/fab-list/props.md'; +import Events from '@ionic-internal/component-api/v9/fab-list/events.md'; +import Methods from '@ionic-internal/component-api/v9/fab-list/methods.md'; +import Parts from '@ionic-internal/component-api/v9/fab-list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/fab-list/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/fab-list/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -14,7 +14,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-fab-list` 要素は、複数のfab buttonのコンテナです。この一連のfab buttonには、メインのfab buttonに関連するアクションが含まれ、メインのfab buttonをクリックすると表示されます。ボタンを表示する方向を指定するためには、 `side` プロパティを'start', 'end', 'top', 'bottom' に設定します。 -使用例については、[fab documentation](./fab)を参照してください。 +使用例については、[fab ドキュメント](./fab) を参照してください。 ## プロパティ @@ -31,5 +31,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/fab.md b/docs/api/fab.md index f16fdaed4a2..e0e789941be 100644 --- a/docs/api/fab.md +++ b/docs/api/fab.md @@ -1,12 +1,12 @@ --- title: "ion-fab" --- -import Props from '@ionic-internal/component-api/v8/fab/props.md'; -import Events from '@ionic-internal/component-api/v8/fab/events.md'; -import Methods from '@ionic-internal/component-api/v8/fab/methods.md'; -import Parts from '@ionic-internal/component-api/v8/fab/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/fab/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/fab/slots.md'; +import Props from '@ionic-internal/component-api/v9/fab/props.md'; +import Events from '@ionic-internal/component-api/v9/fab/events.md'; +import Methods from '@ionic-internal/component-api/v9/fab/methods.md'; +import Parts from '@ionic-internal/component-api/v9/fab/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/fab/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/fab/slots.md'; ion-fab: Ionic Floating Action Button for Android and iOS @@ -21,7 +21,7 @@ Fabは、1つ以上の[fabボタン](./fab-button)を含むコンテナ要素で ## 基本的な使い方 -import BasicUsage from '@site/static/usage/v8/fab/basic/index.md'; +import BasicUsage from '@site/static/usage/v9/fab/basic/index.md'; @@ -29,7 +29,7 @@ import BasicUsage from '@site/static/usage/v8/fab/basic/index.md'; [fabリスト](./fab-list)コンポーネントの`side`プロパティは、メインfabボタンと相対的に表示される場所を制御します。一つのfabは、`side`の値が全て異なる限り、複数のfabリストを持つことができます。 -import ListSide from '@site/static/usage/v8/fab/list-side/index.md'; +import ListSide from '@site/static/usage/v9/fab/list-side/index.md'; @@ -37,7 +37,7 @@ import ListSide from '@site/static/usage/v8/fab/list-side/index.md'; fabを固定位置に配置するためには、外側の [content](./content) コンポーネントの `fixed` スロットに割り当てる必要があります。vertical`とhorizontal`のプロップを使用して、ビューポートでのfabの配置を制御します。edge`プロップは、アプリのヘッダーやフッターにfabボタンが重なるようにします。 -import Positioning from '@site/static/usage/v8/fab/positioning/index.md'; +import Positioning from '@site/static/usage/v9/fab/positioning/index.md'; @@ -63,7 +63,7 @@ ion-fab { `ion-header` (`vertical` が `"top"` に設定されたファブの場合) または `ion-footer` (`vertical` が `"bottom"` に設定されたファブの場合) がある場合、ファブはヘッダまたはフッタからの相対位置に配置されるため、CSS の調整は必要ありません。 -import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; +import SafeArea from '@site/static/usage/v9/fab/safe-area/index.md'; @@ -73,7 +73,7 @@ import SafeArea from '@site/static/usage/v8/fab/safe-area/index.md'; [Content](./content)の `fixedSlotPlacement` プロパティを `before` に設定することで、FABはDOM内のメインコンテンツの前に配置されます。これにより、他のインタラクティブ要素がフォーカスを受ける前にFABがキーボードフォーカスを受けるようになり、ユーザがFABにアクセスしやすくなります。 -import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md'; +import BeforeContent from '@site/static/usage/v9/fab/before-content/index.md'; @@ -81,7 +81,7 @@ import BeforeContent from '@site/static/usage/v8/fab/before-content/index.md'; メインファブボタンの `size` プロパティを `"small"` に設定すると、ミニサイズで描画されます。なお、このプロパティは内側のファブボタンで使用した場合は効果がありません。 -import ButtonSizing from '@site/static/usage/v8/fab/button-sizing/index.md'; +import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.md'; @@ -89,19 +89,19 @@ import ButtonSizing from '@site/static/usage/v8/fab/button-sizing/index.md'; ### Colors -import Colors from '@site/static/usage/v8/fab/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/fab/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSCustomProperties from '@site/static/usage/v8/fab/theming/css-custom-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v9/fab/theming/css-custom-properties/index.md'; ### CSS Shadow Parts -import CSSShadowParts from '@site/static/usage/v8/fab/theming/css-shadow-parts/index.md'; +import CSSShadowParts from '@site/static/usage/v9/fab/theming/css-shadow-parts/index.md'; diff --git a/docs/api/footer.md b/docs/api/footer.md index 14e0ec0f592..79234c87962 100644 --- a/docs/api/footer.md +++ b/docs/api/footer.md @@ -1,12 +1,12 @@ --- title: "ion-footer" --- -import Props from '@ionic-internal/component-api/v8/footer/props.md'; -import Events from '@ionic-internal/component-api/v8/footer/events.md'; -import Methods from '@ionic-internal/component-api/v8/footer/methods.md'; -import Parts from '@ionic-internal/component-api/v8/footer/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/footer/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/footer/slots.md'; +import Props from '@ionic-internal/component-api/v9/footer/props.md'; +import Events from '@ionic-internal/component-api/v9/footer/events.md'; +import Methods from '@ionic-internal/component-api/v9/footer/methods.md'; +import Parts from '@ionic-internal/component-api/v9/footer/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/footer/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/footer/slots.md'; ion-footer: Page Footer | Ionic App Footer Root Component @@ -15,39 +15,35 @@ import Slots from '@ionic-internal/component-api/v8/footer/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - フッターは、ページの下部に配置されるページのルートコンポーネントです。1つ以上の [ツールバー](./toolbar) のラッパーとして使用することが推奨されますが、あらゆる要素をラップするために使用することができます。ツールバーがフッターの中で使用される場合、コンテンツは正しいサイズに調整され、フッターはデバイスセーフエリアを考慮したものになります。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/footer/basic/index.md'; +import Basic from '@site/static/usage/v9/footer/basic/index.md'; - ## 半透明のフッター -フッターは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。フッターの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。 +フッターは、`translucent`プロパティを設定することで、ネイティブiOSアプリケーションで見られる透明度に合わせることができます。コンテンツがフッターの背後でスクロールするようにするには、コンテンツに`fullscreen`プロパティを設定する必要があります。この効果は、モードが`"ios"`であり、デバイスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポートしている場合にのみ適用されます。 -import Translucent from '@site/static/usage/v8/footer/translucent/index.md'; +import Translucent from '@site/static/usage/v9/footer/translucent/index.md'; - ## フェードフッター 多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、フッターの `collapse` プロパティを `"fade"` に設定することで実現できます。コンテンツが最後までスクロールされると、フッターの背景とボーダーはフェードアウトします。この効果は、モードが `"ios"` のときだけ適用されます。 -import Fade from '@site/static/usage/v8/footer/fade/index.md'; +import Fade from '@site/static/usage/v9/footer/fade/index.md'; - ### 仮想スクロールでの使用方法 フェードフッターを正しく動作させるためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v8/footer/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/footer/custom-scroll-target/index.md'; @@ -55,11 +51,10 @@ import CustomScrollTarget from '@site/static/usage/v8/footer/custom-scroll-targe `"md"`モードでは、フッターは上部に `box-shadow` が表示されます。`"ios"`モードでは、上部に `border` が表示されます。これらは、フッターに `.ion-no-border` クラスを追加することで削除することができます。 -import NoBorder from '@site/static/usage/v8/footer/no-border/index.md'; +import NoBorder from '@site/static/usage/v9/footer/no-border/index.md'; - ## プロパティ diff --git a/docs/api/grid.md b/docs/api/grid.md index fa1aa126685..ee2b8e09496 100644 --- a/docs/api/grid.md +++ b/docs/api/grid.md @@ -1,12 +1,12 @@ --- -title: "ion-grid" +title: 'ion-grid' --- -import Props from '@ionic-internal/component-api/v8/grid/props.md'; -import Events from '@ionic-internal/component-api/v8/grid/events.md'; -import Methods from '@ionic-internal/component-api/v8/grid/methods.md'; -import Parts from '@ionic-internal/component-api/v8/grid/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/grid/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/grid/slots.md'; +import Props from '@ionic-internal/component-api/v9/grid/props.md'; +import Events from '@ionic-internal/component-api/v9/grid/events.md'; +import Methods from '@ionic-internal/component-api/v9/grid/methods.md'; +import Parts from '@ionic-internal/component-api/v9/grid/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/grid/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/grid/slots.md'; ion-grid: Display Grids for Mobile-First Custom App Layout @@ -18,28 +18,28 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の3つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ12列のレイアウトをベースにしています。カラムの数は、CSSを使ってカスタマイズすることができます。 +グリッドは、カスタムレイアウトを構築するための強力なモバイルファーストのフレックスボックスシステムです。グリッド、[row(s)](row.md)、 [column(s)](col.md) の 3 つのユニットで構成されています。カラムは行を埋めるように展開され、追加のカラムに合うようにサイズを変更します。これは、画面サイズに応じて異なるブレークポイントを持つ 12 列のレイアウトをベースにしています。カラムの数は、CSS を使ってカスタマイズすることができます。 ## 概要 -- グリッドは、すべての行と列のコンテナとして機能します。グリッドは、そのコンテナの幅を完全に占有します。 - が、`fixed`プロパティを追加すると、画面サイズに応じた幅が設定されます。後述の[Fixed Grid](#fixed-grid)を参照してください。 -- 行は、列を適切に並べるための水平方向のグループです。 -- コンテンツは列の中に配置されるべきで、列だけが行の直属の子になることができる。 -- `size`プロパティは、1行あたりデフォルトの12列のうち、使用する列の数を示します。 - つまり、`size="4"`をカラムに追加することで、グリッドの1/3、つまり12カラムのうち4カラムを占有することができます。 -- sizeに値を指定しないカラムは、自動的に等しい幅を持つようになります。例えば、4つのカラムは、それぞれ自動的に25％の幅になります。 -- カラムの幅はパーセンテージで設定されるため、常に流動的で親要素からの相対的なサイズになります。 -- 個々のカラムの間にはパディングがあります。しかし、パディングはグリッドから削除することができます。 - カラムを表示するには、グリッドに `ion-no-padding` クラスを追加します。グリッドに適用できるその他のスタイルについては、[CSS Utilities](../layout/css-utilities) を参照してください。 -- グリッドの階層は5つあり、レスポンシブ・ブレークポイントごとに1つずつ、すべてのブレークポイント（特小）、小、中、大、特大が用意されています。 -- グリッドの階層は最小幅を基準としており、その階層とそれよりも大きい階層に適用されます。 - (例: `size-sm="4"` は、小型、中型、大型、特大のデバイスに適用されます)。 -- グリッドはCSS変数でカスタマイズすることができます。 [グリッドのカスタマイズ](#customizing-the-grid) を参照してください。 - -## デフォルトのブレイキング・ポイント - -グリッドのデフォルトのブレークポイントとそれに対応するプロパティは、以下の表で定義されています。ブレイクポイントの値は、現時点ではカスタマイズすることができません。カスタマイズできない理由については、 [メディアクエリの変数](../theming/advanced#variables-in-media-queries) を参照してください。 +- グリッドは、すべての行と列を格納するコンテナとして機能します。グリッドはコンテナの全幅を占めますが、 + `fixed`プロパティを追加すると、画面サイズに基づいて幅が設定されます。詳細は下記の[固定グリッド](#fixed-grid)を参照してください。 +- 行は列を横方向に整列させる水平のグループです。 +- コンテンツは列内に配置する必要があり、行の直下に配置できるのは列のみです。 +- `size`プロパティは、1 行あたりのデフォルト 12 列のうち使用する列数を示します。 + したがって、`size="4"`を列に追加すると、グリッドの 3 分の 1、つまり 12 列のうち 4 列分を占めることができます。 +- サイズが設定されていない列は、自動的に等しい幅になります。例えば、4 列がある場合、それぞれ自動的に 25％の幅になります。 +- 列の幅はパーセンテージで設定されるため、常に可変であり、親要素に対して相対的にサイズが調整されます。 +- 個々の列の間にはパディングがあります。ただし、グリッドと列に`ion-no-padding`クラスを追加することで + パディングを削除することができます。グリッドに適用できるその他のスタイルについては、[CSS ユーティリティ](../layout/css-utilities)を参照してください。 +- グリッドには、5 つのグリッド階層があります。それぞれのレスポンシブブレークポイントに対応しています：すべてのブレークポイント（超小）、小、中、大、超大です。 +- グリッド階層は最小幅を基準にしており、その階層およびそれ以上の大きさの階層に適用されます + （例：`size-sm="4"`は小、中、大、超大のデバイスに適用されます）。 +- グリッドは CSS 変数を通じてカスタマイズできます。詳細は[グリッドのカスタマイズ](#customizing-the-grid)を参照してください。 + +## デフォルトのブレイキング・ポイント {/* #default-breakpoints */} + +グリッドのデフォルトのブレークポイントと、それに対応するプロパティは以下の表で定義されています。現時点ではブレークポイントの値をカスタマイズすることはできません。カスタマイズできない理由については、[メディアクエリの変数](../theming/advanced#variables-in-media-queries)を参照してください。 | Name | Value | Width Property | Offset Property | Push Property | Pull Property | Description | | ---- | ------ | -------------- | --------------- | ------------- | ------------- | ------------------------------------ | @@ -54,14 +54,14 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; デフォルトでは、すべてのデバイスと画面サイズにおいて、列は行の中で同じ幅を占めます。 -import Basic from '@site/static/usage/v8/grid/basic/index.md'; +import Basic from '@site/static/usage/v9/grid/basic/index.md'; -## グリッドの固定 +## グリッドの固定 {/* #fixed-grid */} -グリッドはコンテナの幅を100%占有します。グリッドに `fixed` プロパティを追加することで、画面サイズに応じた幅を設定することができます。各ブレイクポイントのグリッドの幅は以下の表に記載されていますが、カスタマイズすることも可能です。詳しくは、[グリッドのカスタマイズ](#customizing-the-grid) を参照してください。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化することを確認できます。 +グリッドはコンテナの幅の 100%を使用します。グリッドに`fixed`プロパティを追加することで、画面サイズに基づいて幅が設定されます。各ブレークポイントのグリッド幅は以下の表に示されていますが、カスタマイズすることも可能です。詳細については、[グリッドのカスタマイズ](#customizing-the-grid)を参照してください。以下の例を StackBlitz で開き、画面のサイズを変更してグリッド幅の変化を確認してください。 | Name | Value | Description | | ---- | ------ | ------------------------------------------------- | @@ -71,20 +71,20 @@ import Basic from '@site/static/usage/v8/grid/basic/index.md'; | lg | 960px | Set grid width to 960px when (min-width: 992px) | | xl | 1140px | Set grid width to 1140px when (min-width: 1200px) | -import Fixed from '@site/static/usage/v8/grid/fixed/index.md'; +import Fixed from '@site/static/usage/v9/grid/fixed/index.md'; ## カラムのサイズ -カラムは、全体のカラム数のうち特定の数を占めるように特定のサイズに設定したり、コンテンツに応じて幅を変更したりすることができます。デフォルトのカラム数は12ですが、これはカスタマイズ可能です。詳しくは、下記の [カラム数](#number-of-columns) の項を参照してください。 +カラムは特定のサイズに設定して、全カラム数のうち特定の数を占めるようにすることや、コンテンツに応じて幅を変更することができます。デフォルトのカラム数は 12 ですが、カスタマイズすることも可能です。詳細については、以下の[カラム数](#number-of-columns)のセクションを参照してください。 ### コンテンツベースサイズ `size`を`"auto"`に設定することで、カラムはコンテンツの自然な幅に基づいたサイズを設定することができます。これは、カラムを特定のピクセル数のような絶対的な幅に設定するときに必要です。自動幅のカラムの隣にあるカラムは、行を埋めるようにリサイズされます。 -import SizeAuto from '@site/static/usage/v8/grid/size-auto/index.md'; +import SizeAuto from '@site/static/usage/v9/grid/size-auto/index.md'; @@ -93,15 +93,15 @@ import SizeAuto from '@site/static/usage/v8/grid/size-auto/index.md'; カラムの `size` を設定すると、他のカラムは自動的にそのカラムの周りにリサイズされます。すべてのカラムにサイズが指定され、それがカラムの総数に満たない場合、カラムの後に空白ができます。 -import Size from '@site/static/usage/v8/grid/size/index.md'; +import Size from '@site/static/usage/v9/grid/size/index.md'; ### レスポンシブサイズ -`size`プロパティは、すべての [ブレークポイント](#default-breakpoints) の列幅を変更します。また、Columnでは、"size" の末尾にブレークポイント名を付加したいくつかのsizeプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムの幅を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムの幅が変化するのがわかります。 +`size`プロパティは、すべての[ブレークポイント](#default-breakpoints)でカラム幅を変更します。カラムはまた、ブレークポイント名が「size」の末尾に付加された複数のサイズプロパティを提供します。これらのプロパティを使用して、画面サイズに応じてカラムの幅を変更することができます。以下の例を StackBlitz で開き、画面のサイズを変更してカラム幅の変化を確認してください。 -import SizeResponsive from '@site/static/usage/v8/grid/size-responsive/index.md'; +import SizeResponsive from '@site/static/usage/v9/grid/size-responsive/index.md'; @@ -114,15 +114,15 @@ import SizeResponsive from '@site/static/usage/v8/grid/size-responsive/index.md' カラムは、`offset`プロパティを用いて右に移動させることができます。このプロパティは、カラムの左マージンを指定したカラムの数だけ増やします。また、その右側にカラムが存在する場合は、そのカラムを移動させます。 -import Offset from '@site/static/usage/v8/grid/offset/index.md'; +import Offset from '@site/static/usage/v9/grid/offset/index.md'; ### レスポンシブオフセット -`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの左マージンを変更します。また、カラムには、"offset"の末尾にブレークポイント名が付加されたいくつかのoffsetプロパティが用意されています。これらのプロパティは、画面サイズに応じてカラムのオフセットを変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、カラムのオフセットが変化するのを確認できます。 +`offset`プロパティは、すべての[ブレークポイント](#default-breakpoints)で列の左マージンを変更します。列には、ブレークポイント名を"offset"の末尾に付けた複数のオフセットプロパティもあります。これらのプロパティは、画面サイズに応じて列のオフセットを変更するために使用できます。以下の例を StackBlitz で開き、画面サイズを変更して列のオフセットがどのように変化するかを確認してください。 -import OffsetResponsive from '@site/static/usage/v8/grid/offset-responsive/index.md'; +import OffsetResponsive from '@site/static/usage/v9/grid/offset-responsive/index.md'; @@ -135,15 +135,15 @@ import OffsetResponsive from '@site/static/usage/v8/grid/offset-responsive/index `push`と`pull`のプロパティを追加することで、カラムの並び替えを行うことができます。これらのプロパティは、指定された列数だけ列の `left` と `right` を調整し、列の並び替えを簡単に行うことができます。この場合、他のカラムが配置されている場所にカラムを移動させると、カラムが重なることになります。 -import PushPull from '@site/static/usage/v8/grid/push-pull/index.md'; +import PushPull from '@site/static/usage/v9/grid/push-pull/index.md'; ### プッシュ＆プルのレスポンシブ対応 -`push`と`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)に対して、カラムの位置を変更します。また、カラムには、"push" / "pull "の末尾にブレークポイント名を付加した `push` と `pull` プロパティがいくつかあります。これらのプロパティは、画面サイズに応じてカラムの位置を変更するために使用することができます。以下の例をStackBlitzで開き、画面のサイズを変更すると、列の位置が変化するのがわかります。 +`push`および`pull`プロパティは、すべての[ブレークポイント](#default-breakpoints)で列の位置を変更します。列には、ブレークポイント名を"push" / "pull"の末尾に付けた複数の`push`および`pull`プロパティもあります。これらのプロパティは、画面サイズに応じて列の位置を変更するために使用できます。以下の例を StackBlitz で開き、画面サイズを変更して列の位置がどのように変化するかを確認してください。 -import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/index.md'; +import PushPullResponsive from '@site/static/usage/v9/grid/push-pull-responsive/index.md'; @@ -151,48 +151,48 @@ import PushPullResponsive from '@site/static/usage/v8/grid/push-pull-responsive/ ### 垂直方向のアライメント -行に異なるクラスを追加することで、すべての列を行の内側に垂直に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities#flex-container-properties) を参照してください。 +すべての列は、行に異なるクラスを追加することで垂直に整列させることができます。使用可能なクラスのリストは[CSS ユーティリティ](/layout/css-utilities#flex-container-properties)を参照してください。 -import VerticalAlignment from '@site/static/usage/v8/grid/vertical-alignment/index.md'; +import VerticalAlignment from '@site/static/usage/v9/grid/vertical-alignment/index.md'; ### 水平アライメント -行に異なるクラスを追加することで、すべての列を行の内側に水平に揃えることができます。利用可能なクラスの一覧は、[css utilities](/layout/css-utilities.md#flex-container-properties) を参照してください。 +すべての列は、行に異なるクラスを追加することで水平方向に整列させることができます。使用可能なクラスのリストは[CSS ユーティリティ](/layout/css-utilities.md#flex-container-properties)を参照してください。 -import HorizontalAlignment from '@site/static/usage/v8/grid/horizontal-alignment/index.md'; +import HorizontalAlignment from '@site/static/usage/v9/grid/horizontal-alignment/index.md'; -## グリッドのカスタマイズ +## グリッドのカスタマイズ {/* #customizing-the-grid */} -組み込みのCSS変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。 +組み込みの CSS 変数を使用することで、定義済みのグリッド属性をカスタマイズすることができます。パディングの値やカラム数などを変更することができます。 ### 固定幅 -固定グリッドの幅は、CSS変数 `--ion-grid-width` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS変数を使用します。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例をStackBlitzで開き、画面のサイズを変更すると、グリッドの幅が変化するのが確認できます。 +固定グリッドの幅は、すべてのブレークポイントに対して`--ion-grid-width` CSS 変数で設定できます。個別のブレークポイントを上書きするには、`--ion-grid-width-{breakpoint}` CSS 変数を使用してください。各ブレークポイントのデフォルト値は、[固定グリッド](#fixed-grid)セクションに記載されています。以下の例を StackBlitz で開き、画面サイズを変更してグリッド幅がどのように変化するかを確認してください。 -import Width from '@site/static/usage/v8/grid/customizing/width/index.md'; +import Width from '@site/static/usage/v9/grid/customizing/width/index.md'; -### 列数 +### 列数 {/* #number-of-columns */} -グリッドのカラム数は `--ion-grid-columns` というCSS変数で変更することができます。デフォルトでは12列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。 +グリッドのカラム数は `--ion-grid-columns` という CSS 変数で変更することができます。デフォルトでは 12 列ですが、これを任意の正の整数に変更し、各列の幅を計算するために使用することができます。 -import ColumnNumber from '@site/static/usage/v8/grid/customizing/column-number/index.md'; +import ColumnNumber from '@site/static/usage/v9/grid/customizing/column-number/index.md'; ### Padding -グリッドコンテナのpaddingは、CSS変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS変数を使用します。 +グリッドコンテナの padding は、CSS 変数 `--ion-grid-padding` を用いてすべてのブレイクポイントに対して設定することができます。個々のブレイクポイントを上書きするには、 `--ion-grid-padding-{breakpoint}` CSS 変数を使用します。 -列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS変数を使用します。 +列の padding は、CSS 変数 `--ion-grid-column-padding` ですべてのブレイクポイントに対して設定できます。個々のブレイクポイントを上書きするには、 `--ion-grid-column-padding-{breakpoint}` CSS 変数を使用します。 -import Padding from '@site/static/usage/v8/grid/customizing/padding/index.md'; +import Padding from '@site/static/usage/v9/grid/customizing/padding/index.md'; @@ -208,7 +208,7 @@ import Padding from '@site/static/usage/v8/grid/customizing/padding/index.md'; ## CSS Shadow Parts -## CSSカスタムプロパティ +## CSS カスタムプロパティ ## Slots diff --git a/docs/api/header.md b/docs/api/header.md index b8d328f0a5a..4a467ea4ea6 100644 --- a/docs/api/header.md +++ b/docs/api/header.md @@ -1,12 +1,12 @@ --- title: "ion-header" --- -import Props from '@ionic-internal/component-api/v8/header/props.md'; -import Events from '@ionic-internal/component-api/v8/header/events.md'; -import Methods from '@ionic-internal/component-api/v8/header/methods.md'; -import Parts from '@ionic-internal/component-api/v8/header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/header/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/header/slots.md'; +import Props from '@ionic-internal/component-api/v9/header/props.md'; +import Events from '@ionic-internal/component-api/v9/header/events.md'; +import Methods from '@ionic-internal/component-api/v9/header/methods.md'; +import Parts from '@ionic-internal/component-api/v9/header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/header/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/header/slots.md'; ion-header: Header Parent Component for Ionic Framework Apps @@ -15,64 +15,56 @@ import Slots from '@ionic-internal/component-api/v8/header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ヘッダーは、ページの上部に配置されるページのルートコンポーネントです。1つ以上の[ツールバー](./toolbar)のラッパーとして使用することが推奨されていますが、あらゆる要素をラップするために使用することができます。ツールバーがヘッダー内で使用される場合、コンテンツは正しいサイズになるように調整され、ヘッダーはデバイスセーフ領域を考慮します。 - ## 基本的な使い方 -import Basic from '@site/static/usage/v8/header/basic/index.md'; +import Basic from '@site/static/usage/v9/header/basic/index.md'; - ## 半透明のヘッダー -ヘッダーは、`translucent`プロパティを設定することで、ネイティブのiOSアプリケーションに見られるような透明度に合わせることができます。ヘッダーの後ろにスクロールするコンテンツを見るには、コンテンツに `fullscreen` プロパティを設定する必要があります。この効果は、モードが `"ios"` で、デバイスが [backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility) をサポートしている場合にのみ適用されます。 +ヘッダーは、`translucent`プロパティを設定することで、ネイティブiOSアプリケーションで見られる透明度と一致させることができます。コンテンツをヘッダーの背後にスクロールさせるには、コンテンツに`fullscreen`プロパティを設定する必要があります。この効果は、モードが`"ios"`であり、デバイスが[backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#browser_compatibility)をサポートしている場合にのみ適用されます。 -import Translucent from '@site/static/usage/v8/header/translucent/index.md'; +import Translucent from '@site/static/usage/v9/header/translucent/index.md'; - -## 折りたたみのヘッダー +## 折りたたみのヘッダー {/* #condensed-header */} Ionicでは、iOSネイティブアプリケーションで見られる、大きなツールバーのタイトルを表示し、スクロールすると小さなタイトルに折りたたむ機能を提供しています。これは、コンテンツの上に1つ、コンテンツの中に1つ、合計2つのヘッダーを追加し、コンテンツの中にあるヘッダーに `collapse` プロパティを `"condense"` に設定することで実現できます。この効果は、モードが "ios "のときのみ適用されます。 -import Condense from '@site/static/usage/v8/header/condense/index.md'; +import Condense from '@site/static/usage/v9/header/condense/index.md'; - ## フェードヘッダー 多くのネイティブiOSアプリケーションは、ツールバーにフェード効果を持たせています。これは、ヘッダーの `collapse` プロパティを `"fade"` に設定することで実現可能です。ページが最初に読み込まれたとき、ヘッダーの背景と境界線は非表示になります。コンテンツがスクロールされると、ヘッダーは再びフェードインします。この効果は、モードが「ios」のときだけ適用されます。 -この機能は、[Condensed Header](#condensed-header)と組み合わせることができます。collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用されるはずです。 +この機能は、[折りたたみヘッダー](#condensed-header)と組み合わせることができます。`collapse`プロパティに`"fade"`を設定した場合は、コンテンツの外側にあるヘッダーに適用する必要があります。 -import Fade from '@site/static/usage/v8/header/fade/index.md'; +import Fade from '@site/static/usage/v9/header/fade/index.md'; - ### 仮想スクロールの使用方法 フェードヘッダーが正しく動作するためには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを提供する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v8/header/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/header/custom-scroll-target/index.md'; - ## Borders `"md"`モードでは、ヘッダーの下部に `box-shadow` が表示されます。 `"ios"`モードでは、ヘッダの下部に `border` が表示されます。これらは、ヘッダーに `.ion-no-border` クラスを追加することで削除することができます。 -import NoBorder from '@site/static/usage/v8/header/no-border/index.md'; +import NoBorder from '@site/static/usage/v9/header/no-border/index.md'; - ## プロパティ diff --git a/docs/api/icon.md b/docs/api/icon.md index 06762a5c22b..787d80cecda 100644 --- a/docs/api/icon.md +++ b/docs/api/icon.md @@ -10,36 +10,70 @@ title: 'ion-icon' /> -Iconは、Ioniconsライブラリを通じて利用できるシンプルなコンポーネントで、すべてのIonic Frameworkアプリケーションにデフォルトでプリパッケージされています。Ioniconsのセットから任意のアイコン、またはカスタムSVGを表示するために使用することができます。また、サイズや色などのスタイリングもサポートされています。 +Icon は、アイコンを表示するための汎用コンテナです。Ionicons はすべての Ionic Framework アプリケーションにデフォルトで含まれていますが、このコンポーネントでは Ionicons、カスタム SVG、フォントベースのアイコンライブラリ、そのほかのアイコンシステムも表示できます。アイコンの提供元にかかわらず、一貫したスタイルとサイズを提供します。 -利用可能なアイコンのリストは ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page をご覧ください。 +Ionicons のドキュメントについては、ionic.io/ioniconsを参照してください。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/icon/basic/index.md'; +import Basic from '@site/static/usage/v9/icon/basic/index.md'; +## フォントアイコン + +Font Awesome、Bootstrap Icons、Remix Icons、Phosphor Icons などのフォントベースのアイコンは、Icon の slot に配置して表示できます。 + +import FontIcons from '@site/static/usage/v9/icon/font-icons/index.md'; + + + +## カスタム SVG + +Icon でカスタム SVG を表示する方法は 2 つあります。`src` プロパティを使用して外部 SVG ファイルを読み込むか、SVG コンテンツをコンポーネントの slot に直接配置します。 + +import CustomSVGs from '@site/static/usage/v9/icon/custom-svgs/index.md'; + + ## アクセシビリティ 純粋に装飾的なコンテンツであるアイコンは、aria-hidden="true"を持つべきです。これは、アイコンを視覚的に隠すことはできませんが、支援技術からその要素を隠すことができます。 ```html + -``` + + +``` アイコンがインタラクティブな場合は、aria-labelを追加することで代替テキストを定義する必要があります。 ```html + + + + + + ``` また、アイコンが説明する他の要素の中にある場合は、その要素に aria-label を付加し、 aria-hidden でアイコンを非表示とします。 ```html + + + + + + ``` diff --git a/docs/api/img.md b/docs/api/img.md index 069e17b344c..20af476da41 100644 --- a/docs/api/img.md +++ b/docs/api/img.md @@ -2,28 +2,31 @@ title: "ion-img" --- -import Props from '@ionic-internal/component-api/v8/img/props.md'; -import Events from '@ionic-internal/component-api/v8/img/events.md'; -import Methods from '@ionic-internal/component-api/v8/img/methods.md'; -import Parts from '@ionic-internal/component-api/v8/img/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/img/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/img/slots.md'; +import Props from '@ionic-internal/component-api/v9/img/props.md'; +import Events from '@ionic-internal/component-api/v9/img/events.md'; +import Methods from '@ionic-internal/component-api/v9/img/methods.md'; +import Parts from '@ionic-internal/component-api/v9/img/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/img/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/img/slots.md'; ion-img: Img Tag to Lazy Load Images in Viewport - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; +:::warning[Deprecated] +`ion-img` is deprecated and will be removed in Ionic 10. Use a native `` tag with [loading="lazy"](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) instead. Refer to the [migration guide](../updating/9-0.md#img) for details on replacing events and styling. +::: Img は、タグがビューポートに表示されているときに画像をLazy Loadするタグです。これは、画像が表示されているときにのみロードされるため、巨大なリストを生成する場合に非常に便利です。このコンポーネントは [Intersection Observer](https://caniuse.com/#feat=intersectionobserver) を内部的に使用します。Intersection Observerは、最近のほとんどのブラウザでサポートされていますが、サポートされていない場合は `setTimeout` で処理されます。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/img/basic/index.md'; +import Basic from '@site/static/usage/v9/img/basic/index.md'; @@ -43,4 +46,4 @@ import Basic from '@site/static/usage/v8/img/basic/index.md'; ## Slots - \ No newline at end of file + diff --git a/docs/api/infinite-scroll-content.md b/docs/api/infinite-scroll-content.md index 7f52e086588..58dff50dce6 100644 --- a/docs/api/infinite-scroll-content.md +++ b/docs/api/infinite-scroll-content.md @@ -2,18 +2,18 @@ title: "ion-infinite-scroll-content" --- -import Props from '@ionic-internal/component-api/v8/infinite-scroll-content/props.md'; -import Events from '@ionic-internal/component-api/v8/infinite-scroll-content/events.md'; -import Methods from '@ionic-internal/component-api/v8/infinite-scroll-content/methods.md'; -import Parts from '@ionic-internal/component-api/v8/infinite-scroll-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/infinite-scroll-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/infinite-scroll-content/slots.md'; +import Props from '@ionic-internal/component-api/v9/infinite-scroll-content/props.md'; +import Events from '@ionic-internal/component-api/v9/infinite-scroll-content/events.md'; +import Methods from '@ionic-internal/component-api/v9/infinite-scroll-content/methods.md'; +import Parts from '@ionic-internal/component-api/v9/infinite-scroll-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/infinite-scroll-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/infinite-scroll-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-infinite-scroll-content` コンポーネントは、`ion-infinite-scroll` で使用されるデフォルトの子コンポーネントです。無限スクロールのスピナーが表示されます。このスピナーはプラットフォームに応じて最適に表示され、無限スクロールの状態に応じて外観が変化します。`loadingSpinner` and `loadingText` プロパティを設定することにより、既定値のスピナーを変更したり、テキストを追加することができます。 -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.md#infinite-scroll-content). +詳細および使用方法については、[Infinite Scrollドキュメント](./infinite-scroll.md#infinite-scroll-content)を参照してください。 ## プロパティ @@ -30,5 +30,5 @@ For more information as well as usage, see the [Infinite Scroll Documentation](. ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/infinite-scroll.md b/docs/api/infinite-scroll.md index 598e8f295fa..568209429f2 100644 --- a/docs/api/infinite-scroll.md +++ b/docs/api/infinite-scroll.md @@ -2,12 +2,12 @@ title: "ion-infinite-scroll" --- -import Props from '@ionic-internal/component-api/v8/infinite-scroll/props.md'; -import Events from '@ionic-internal/component-api/v8/infinite-scroll/events.md'; -import Methods from '@ionic-internal/component-api/v8/infinite-scroll/methods.md'; -import Parts from '@ionic-internal/component-api/v8/infinite-scroll/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/infinite-scroll/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/infinite-scroll/slots.md'; +import Props from '@ionic-internal/component-api/v9/infinite-scroll/props.md'; +import Events from '@ionic-internal/component-api/v9/infinite-scroll/events.md'; +import Methods from '@ionic-internal/component-api/v9/infinite-scroll/methods.md'; +import Parts from '@ionic-internal/component-api/v9/infinite-scroll/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/infinite-scroll/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/infinite-scroll/slots.md'; ion-infinite-scroll: Infinite Scroller Action Component @@ -23,7 +23,7 @@ Infinite Scrollコンポーネントは、ユーザーがページの下部ま ## Basic Usage -import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md'; +import Basic from '@site/static/usage/v9/infinite-scroll/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/infinite-scroll/basic/index.md'; `ion-infinite-scroll`コンポーネントは、無限スクロールのロジックを持っています。コンテンツを表示するには、子コンポーネントが必要です。Ionicは、デフォルトでその `ion-infinite-scroll-content` コンポーネントを使用します。このコンポーネントは、無限スクロールを表示し、無限スクロールの状態に応じて外観を変更します。ユーザが使用しているプラットフォームに応じて最適なスピナーが表示されます。ただし、`ion-infinite-scroll-content` コンポーネントのプロパティを設定することにより、デフォルトのスピナーを変更したり、テキストを追加することができます。 -import InfiniteScrollContent from '@site/static/usage/v8/infinite-scroll/infinite-scroll-content/index.md'; +import InfiniteScrollContent from '@site/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md'; @@ -39,7 +39,7 @@ import InfiniteScrollContent from '@site/static/usage/v8/infinite-scroll/infinit `ion-infinite-scroll` と `ion-infinite-scroll-content` コンポーネントを分離することで、開発者は必要に応じて独自のコンテンツコンポーネントを作成できます。このコンテンツには、SVG要素から固有のCSSアニメーションを持つ要素まで、あらゆるものを含めることができます。 -import CustomContent from '@site/static/usage/v8/infinite-scroll/custom-infinite-scroll-content/index.md'; +import CustomContent from '@site/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md'; diff --git a/docs/api/input-otp.md b/docs/api/input-otp.md index 147fb408f71..2f8768553be 100644 --- a/docs/api/input-otp.md +++ b/docs/api/input-otp.md @@ -1,12 +1,12 @@ --- title: "ion-input-otp" --- -import Props from '@ionic-internal/component-api/v8/input-otp/props.md'; -import Events from '@ionic-internal/component-api/v8/input-otp/events.md'; -import Methods from '@ionic-internal/component-api/v8/input-otp/methods.md'; -import Parts from '@ionic-internal/component-api/v8/input-otp/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/input-otp/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/input-otp/slots.md'; +import Props from '@ionic-internal/component-api/v9/input-otp/props.md'; +import Events from '@ionic-internal/component-api/v9/input-otp/events.md'; +import Methods from '@ionic-internal/component-api/v9/input-otp/methods.md'; +import Parts from '@ionic-internal/component-api/v9/input-otp/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/input-otp/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/input-otp/slots.md'; ion-input-otp: ワンタイムパスワード入力コンポーネント @@ -23,7 +23,7 @@ Input OTP コンポーネントは、ワンタイムパスワード（OTP）入 このコンポーネントはデフォルトで4つの入力ボックスを提供します。入力ボックスの数は `length` プロパティを使用してカスタマイズすることができます。 -import Basic from '@site/static/usage/v8/input-otp/basic/index.md'; +import Basic from '@site/static/usage/v9/input-otp/basic/index.md'; @@ -39,9 +39,9 @@ import Basic from '@site/static/usage/v8/input-otp/basic/index.md'; - 標準のキーボードを表示するには `inputmode="text"` を設定します。 - `pattern="[\p{L}\p{N}]"` を設定し、英数字の入力を許可する。 -パターンの検証やカスタマイズの詳細については、[パターン](#pattern)のセクションを参照してください。 +パターンのバリデーションとカスタマイズの詳細については、[Pattern](#pattern)のセクションを参照してください。 -import Type from '@site/static/usage/v8/input-otp/type/index.md'; +import Type from '@site/static/usage/v9/input-otp/type/index.md'; @@ -49,7 +49,7 @@ import Type from '@site/static/usage/v8/input-otp/type/index.md'; `shape` プロパティは、入力ボックスのボーダー半径をコントロールし、丸みを帯びたコーナーやシャープなコーナーを作成します。 -import Shape from '@site/static/usage/v8/input-otp/shape/index.md'; +import Shape from '@site/static/usage/v9/input-otp/shape/index.md'; @@ -57,7 +57,7 @@ import Shape from '@site/static/usage/v8/input-otp/shape/index.md'; `fill` プロパティは入力ボックスの背景のスタイルをコントロールし、縁取りまたは塗りつぶしの背景を提供します。 -import Fill from '@site/static/usage/v8/input-otp/fill/index.md'; +import Fill from '@site/static/usage/v9/input-otp/fill/index.md'; @@ -65,7 +65,7 @@ import Fill from '@site/static/usage/v8/input-otp/fill/index.md'; `size`プロパティは入力ボックスに異なるサイズのオプションを提供します。 -import Size from '@site/static/usage/v8/input-otp/size/index.md'; +import Size from '@site/static/usage/v9/input-otp/size/index.md'; @@ -78,7 +78,7 @@ import Size from '@site/static/usage/v8/input-otp/size/index.md'; 数字はセパレータが表示されるべきインデックスを表します。例えば、`"1,3"` は1番目と3番目の入力ボックスの後にセパレータを表示します。これは、入力ボックスを視覚的に区別してグループ化するために使用できますが、それでも値は1つです。 -import Separators from '@site/static/usage/v8/input-otp/separators/index.md'; +import Separators from '@site/static/usage/v9/input-otp/separators/index.md'; @@ -92,7 +92,7 @@ import Separators from '@site/static/usage/v8/input-otp/separators/index.md'; - `onvalid` スタイルはタッチされたときのみ表示されます (`ion-touched`) - `ion-valid` スタイルはフォーカスされたときのみ表示されます (`has-focus`) -import States from '@site/static/usage/v8/input-otp/states/index.md'; +import States from '@site/static/usage/v9/input-otp/states/index.md'; @@ -110,7 +110,7 @@ import States from '@site/static/usage/v8/input-otp/states/index.md'; - 英数字キーボードを表示するには、文字を含むパターンには `type="text"` を使用します。 ::: -import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md'; +import Pattern from '@site/static/usage/v9/input-otp/pattern/index.md'; @@ -124,7 +124,7 @@ import Pattern from '@site/static/usage/v8/input-otp/pattern/index.md'; The `color` property does *not* change the text color of the input OTP. For that, use the [`--color` CSS property](#css-custom-properties-1). ::: -import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/input-otp/theming/colors/index.md'; @@ -132,7 +132,7 @@ import Colors from '@site/static/usage/v8/input-otp/theming/colors/index.md'; Input OTPはスコープされたカプセル化を使用しています。これは、実行時に各スタイルに追加のクラスを追加することで、CSSを自動的にスコープすることを意味します。CSSでスコープされたセレクタをオーバーライドするには、[より高い特異性](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。特定のスタイルが `fill` に基づいて適用されるため、`fill` のプロパティを個別にオーバーライドする必要があるかもしれません。 -import CSSProps from '@site/static/usage/v8/input-otp/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/input-otp/theming/css-properties/index.md'; diff --git a/docs/api/input-password-toggle.md b/docs/api/input-password-toggle.md index 7813203667a..51dbf429302 100644 --- a/docs/api/input-password-toggle.md +++ b/docs/api/input-password-toggle.md @@ -1,12 +1,12 @@ --- 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'; -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.mdx'; -import Slots from '@ionic-internal/component-api/v8/input-password-toggle/slots.md'; +import Props from '@ionic-internal/component-api/v9/input-password-toggle/props.md'; +import Events from '@ionic-internal/component-api/v9/input-password-toggle/events.md'; +import Methods from '@ionic-internal/component-api/v9/input-password-toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v9/input-password-toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/input-password-toggle/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/input-password-toggle/slots.md'; ion-input-password-toggle: Toggle the visibility of a password in Input @@ -29,7 +29,7 @@ Using any other `type` will cause a warning to be logged. ::: -import Basic from '@site/static/usage/v8/input-password-toggle/basic/index.md'; +import Basic from '@site/static/usage/v9/input-password-toggle/basic/index.md'; diff --git a/docs/api/input.md b/docs/api/input.md index 1346470a356..d6483a4571c 100644 --- a/docs/api/input.md +++ b/docs/api/input.md @@ -1,12 +1,12 @@ --- title: "ion-input" --- -import Props from '@ionic-internal/component-api/v8/input/props.md'; -import Events from '@ionic-internal/component-api/v8/input/events.md'; -import Methods from '@ionic-internal/component-api/v8/input/methods.md'; -import Parts from '@ionic-internal/component-api/v8/input/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/input/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/input/slots.md'; +import Props from '@ionic-internal/component-api/v9/input/props.md'; +import Events from '@ionic-internal/component-api/v9/input/events.md'; +import Methods from '@ionic-internal/component-api/v9/input/methods.md'; +import Parts from '@ionic-internal/component-api/v9/input/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/input/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/input/slots.md'; ion-input: Custom Input With Styling and CSS Properties @@ -17,22 +17,19 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - input コンポーネントは、HTML input 要素のラッパーで、カスタムスタイルと追加機能を備えています。HTML入力と同じプロパティのほとんどを受け入れ、モバイルデバイスのキーボードと統合します。 - ## 基本的な使い方 -import Basic from '@site/static/usage/v8/input/basic/index.md'; +import Basic from '@site/static/usage/v9/input/basic/index.md'; - ## Types input コンポーネントは、`"text"`, `"password"`, `"email"`, `"number"`, `"search"`, `"tel"`, `"url"` などのテキストタイプの入力のみを対象としています。また、`keyup`、`keydown`、`keypress`などの標準的なテキスト入力イベントをすべてサポートしています。デフォルトの `type` は `"text"` です。 -import Types from '@site/static/usage/v8/input/types/index.md'; +import Types from '@site/static/usage/v9/input/types/index.md'; @@ -48,7 +45,7 @@ import Types from '@site/static/usage/v8/input/types/index.md'; ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v8/input/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/input/label-placement/index.md'; @@ -58,7 +55,7 @@ import LabelPlacement from '@site/static/usage/v8/input/label-placement/index.md この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 -import LabelSlot from '@site/static/usage/v8/input/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/input/label-slot/index.md'; @@ -66,7 +63,7 @@ import LabelSlot from '@site/static/usage/v8/input/label-slot/index.md'; 表示するラベルが必要ない場合でも、開発者は `aria-label` を指定する必要があります。 -import NoVisibleLabel from '@site/static/usage/v8/input/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/input/no-visible-label/index.md'; @@ -74,11 +71,10 @@ import NoVisibleLabel from '@site/static/usage/v8/input/no-visible-label/index.m Inputsには、入力の操作方法に応じて、Inputをクリアするための2つのオプションがあります。最初の方法は `clearInput` プロパティを追加することで、Inputに `value` があるときにクリアボタンを表示します。2つ目の方法は `clearOnEdit` プロパティで、入力が編集削除された後、再度入力されるとクリアされます。 `type` が `"password"` に設定されているInputは、デフォルトで `clearOnEdit` が有効になっています。 -import Clear from '@site/static/usage/v8/input/clear/index.md'; +import Clear from '@site/static/usage/v9/input/clear/index.md'; - ## Filled Inputs Material Design では、Inputに塗りつぶしのスタイルが用意されています。Inputの `fill` プロパティは `"solid"` または `"outline"` のいずれかに設定することができます。 @@ -89,18 +85,17 @@ Filled inputs をiOSで使うためには、inputの `mode` を `md` に設定 コンポーネント間のスタイリングの競合のため、`fill`を使用する入力は`ion-item`内で使用すべきではありません。 ::: -import Fill from '@site/static/usage/v8/input/fill/index.md'; +import Fill from '@site/static/usage/v9/input/fill/index.md'; - ## Helper & Error Text ヘルパーテキストとエラーテキストは、`helperText` と `errorText` プロパティを使用して入力の内部で使用することができます。エラーテキストは、 `ion-invalid` クラスと `ion-touched` クラスが `ion-input` に追加されていない限り表示されない。これにより、ユーザがデータを入力する前にエラーが表示されることはありません。 Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v8/input/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/input/helper-error/index.md'; @@ -110,13 +105,13 @@ Input Counterは、Inputの下に表示されるテキストで、入力可能 `ion-item`の`counter`と`counterFormatter`プロパティは[Ionic 7で非推奨](/docs/api/input#using-the-modern-syntax)となり、代わりに`ion-input`で直接使用すべきです。 -import Counter from '@site/static/usage/v8/input/counter/index.md'; +import Counter from '@site/static/usage/v9/input/counter/index.md'; カウンター付きのInputは、Inputとカウンターの間にボーダーを追加するため、アイテムの下に追加のボーダーを追加する`ion-item`内に配置すべきではありません。`ion-padding-start`クラスを追加して、カウンターInputとアイテム内Inputを揃えることができます。 -import CounterAlignment from '@site/static/usage/v8/input/counter-alignment/index.md'; +import CounterAlignment from '@site/static/usage/v9/input/counter-alignment/index.md'; @@ -126,7 +121,7 @@ import CounterAlignment from '@site/static/usage/v8/input/counter-alignment/inde ステート変数に値を格納する場合、ステート変数と `ion-input` コンポーネントの値の両方を更新することを推奨します。これにより、状態変数と `ion-input` コンポーネントの値が確実に同期されます。 -import FilteringData from '@site/static/usage/v8/input/filtering/index.md'; +import FilteringData from '@site/static/usage/v9/input/filtering/index.md'; @@ -140,7 +135,7 @@ Maskitoを使い始めるには、ライブラリをインストールしてく npm install @maskito/core @maskito/{angular,react,vue} ``` -import Masking from '@site/static/usage/v8/input/mask/index.md'; +import Masking from '@site/static/usage/v9/input/mask/index.md'; @@ -157,12 +152,12 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https: この機能は [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots) のシミュレート版に依存しているため、実験的なものであることに注意してください。そのため、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 :::note -In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information. +ほとんどの場合、これらのスロットに配置された[Icon](./icon.md)コンポーネントは`aria-hidden="true"`を持つべきです。詳細については、[Iconアクセシビリティのドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照してください。 If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to. ::: -import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/input/start-end-slots/index.md'; @@ -176,7 +171,7 @@ import StartEndSlots from '@site/static/usage/v8/input/start-end-slots/index.md' The `color` property does *not* change the text color of the input. For that, use the [`--color` CSS property](#css-custom-properties-1). ::: -import Colors from '@site/static/usage/v8/input/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/input/theming/colors/index.md'; @@ -184,7 +179,7 @@ import Colors from '@site/static/usage/v8/input/theming/colors/index.md'; Inputはscoped encapsulationを採用しており、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。 -import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/input/theming/css-properties/index.md'; @@ -209,7 +204,6 @@ interface InputCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/item-divider.md b/docs/api/item-divider.md index 219e334be1d..20465da9c83 100644 --- a/docs/api/item-divider.md +++ b/docs/api/item-divider.md @@ -1,12 +1,12 @@ --- title: "ion-item-divider" --- -import Props from '@ionic-internal/component-api/v8/item-divider/props.md'; -import Events from '@ionic-internal/component-api/v8/item-divider/events.md'; -import Methods from '@ionic-internal/component-api/v8/item-divider/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item-divider/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item-divider/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item-divider/slots.md'; +import Props from '@ionic-internal/component-api/v9/item-divider/props.md'; +import Events from '@ionic-internal/component-api/v9/item-divider/events.md'; +import Methods from '@ionic-internal/component-api/v9/item-divider/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item-divider/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item-divider/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item-divider/slots.md'; ion-item-divider: Item Divider Block Element for Ionic Apps @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/item-divider/basic/index.md'; +import Basic from '@site/static/usage/v9/item-divider/basic/index.md'; @@ -32,14 +32,14 @@ import Basic from '@site/static/usage/v8/item-divider/basic/index.md'; ### 配色 -import Colors from '@site/static/usage/v8/item-divider/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/item-divider/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/item-divider/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/item-divider/theming/css-properties/index.md'; diff --git a/docs/api/item-group.md b/docs/api/item-group.md index 4e635e8220f..1b0e3f88d65 100644 --- a/docs/api/item-group.md +++ b/docs/api/item-group.md @@ -1,12 +1,12 @@ --- title: "ion-item-group" --- -import Props from '@ionic-internal/component-api/v8/item-group/props.md'; -import Events from '@ionic-internal/component-api/v8/item-group/events.md'; -import Methods from '@ionic-internal/component-api/v8/item-group/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item-group/slots.md'; +import Props from '@ionic-internal/component-api/v9/item-group/props.md'; +import Events from '@ionic-internal/component-api/v9/item-group/events.md'; +import Methods from '@ionic-internal/component-api/v9/item-group/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item-group/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item-group/slots.md'; ion-item-group: Group Items to Divide into Multiple Sections @@ -20,13 +20,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/item-group/basic/index.md'; +import Basic from '@site/static/usage/v9/item-group/basic/index.md'; ## Sliding Items -import SlidingItems from '@site/static/usage/v8/item-group/sliding-items/index.md'; +import SlidingItems from '@site/static/usage/v9/item-group/sliding-items/index.md'; diff --git a/docs/api/item-option.md b/docs/api/item-option.md index 13cac75f832..8dfd892e000 100644 --- a/docs/api/item-option.md +++ b/docs/api/item-option.md @@ -1,12 +1,12 @@ --- title: "ion-item-option" --- -import Props from '@ionic-internal/component-api/v8/item-option/props.md'; -import Events from '@ionic-internal/component-api/v8/item-option/events.md'; -import Methods from '@ionic-internal/component-api/v8/item-option/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item-option/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item-option/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item-option/slots.md'; +import Props from '@ionic-internal/component-api/v9/item-option/props.md'; +import Events from '@ionic-internal/component-api/v9/item-option/events.md'; +import Methods from '@ionic-internal/component-api/v9/item-option/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item-option/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item-option/slots.md'; ion-item-option: Option Button for Sliding Item in Ionic @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; +アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。[アイテムオプション](./item-options)の中に配置する必要があります。`ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。 -アイテムオプションコンポーネントは、スライドアイテムのためのボタンです。アイテムオプション](./item-options)の中に配置する必要があります。ionSwipe`イベントと `expandable` プロパティを組み合わせることで、アイテムの完全なスワイプアクションを作成することができます。 - -詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。 - +詳細については、[item sliding](./item-sliding)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/item-options.md b/docs/api/item-options.md index 7d4c557e8df..c6c17fa2953 100644 --- a/docs/api/item-options.md +++ b/docs/api/item-options.md @@ -1,12 +1,12 @@ --- title: "ion-item-options" --- -import Props from '@ionic-internal/component-api/v8/item-options/props.md'; -import Events from '@ionic-internal/component-api/v8/item-options/events.md'; -import Methods from '@ionic-internal/component-api/v8/item-options/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item-options/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item-options/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item-options/slots.md'; +import Props from '@ionic-internal/component-api/v9/item-options/props.md'; +import Events from '@ionic-internal/component-api/v9/item-options/events.md'; +import Methods from '@ionic-internal/component-api/v9/item-options/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item-options/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item-options/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item-options/slots.md'; ion-item-options: Option Button Components for Ionic Apps @@ -15,11 +15,9 @@ import Slots from '@ionic-internal/component-api/v8/item-options/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - アイテムオプションコンポーネントは、スライドアイテムの[アイテムオプション](./item-option)ボタンのためのコンテナです。これらのボタンは、[startまたはend](#side-description)のいずれかに配置することができます。 -詳しくは [item sliding](./item-sliding) のドキュメントを参照してください。 - +詳細については、[item sliding](./item-sliding)のドキュメントを参照してください。 ## Side Description @@ -28,9 +26,6 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; | `start` | To the `left` of the content in LTR, and to the `right` in RTL. | From `left` to `right` in LTR, and from `right` to `left` in RTL. | | `end` | To the `right` of the content in LTR, and to the `left` in RTL. | From `right` to `left` in LTR, and from `left` to `right` in RTL. | - - - ## プロパティ diff --git a/docs/api/item-sliding.md b/docs/api/item-sliding.md index 9d5970f9b76..f5f3407e16e 100644 --- a/docs/api/item-sliding.md +++ b/docs/api/item-sliding.md @@ -1,12 +1,12 @@ --- title: "ion-item-sliding" --- -import Props from '@ionic-internal/component-api/v8/item-sliding/props.md'; -import Events from '@ionic-internal/component-api/v8/item-sliding/events.md'; -import Methods from '@ionic-internal/component-api/v8/item-sliding/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item-sliding/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item-sliding/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item-sliding/slots.md'; +import Props from '@ionic-internal/component-api/v9/item-sliding/props.md'; +import Events from '@ionic-internal/component-api/v9/item-sliding/events.md'; +import Methods from '@ionic-internal/component-api/v9/item-sliding/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item-sliding/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item-sliding/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item-sliding/slots.md'; ion-item-sliding: Slide Buttons | Slide Right to Left @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; スライドアイテムのオプションは、デフォルトではアイテムの `"end"` 側に配置されます。つまり、LTRでは右から左へ、RTLでは左から右へスワイプすると、オプションが表示されます。反対側に配置し、反対方向にスワイプしたときに表示されるようにするには、 [item options](./item-options) 要素の side 属性を `"start"` に設定します。アイテムオプションは最大2つまで同時に使用することができ、スワイプの方向によって2つの異なるオプションを表示させることができます。 -import Basic from '@site/static/usage/v8/item-sliding/basic/index.md'; +import Basic from '@site/static/usage/v9/item-sliding/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v8/item-sliding/basic/index.md'; [アイテムオプション](./item-option) でアイコンをテキストと一緒に配置すると、デフォルトでテキストの上にアイコンを表示します。アイコンのスロットは、利用可能な [アイテムオプションスロット](./item-option#slots) に変更することで位置を変更することが可能です。 -import Icons from '@site/static/usage/v8/item-sliding/icons/index.md'; +import Icons from '@site/static/usage/v9/item-sliding/icons/index.md'; @@ -41,7 +41,7 @@ import Icons from '@site/static/usage/v8/item-sliding/icons/index.md'; オプションは、スワイプがあるポイントを超えると、親となる `ion-item` の幅いっぱいに展開されます。これは、[item options](./item-options) の `ionSwipe` イベントと組み合わせることで、アイテムが完全にスワイプされたときにメソッドを呼び出すことができます。 -import Expandable from '@site/static/usage/v8/item-sliding/expandable/index.md'; +import Expandable from '@site/static/usage/v9/item-sliding/expandable/index.md'; diff --git a/docs/api/item.md b/docs/api/item.md index 00adbba440c..2eb4d40a156 100644 --- a/docs/api/item.md +++ b/docs/api/item.md @@ -1,15 +1,17 @@ --- title: "ion-item" --- -import Props from '@ionic-internal/component-api/v8/item/props.md'; -import Events from '@ionic-internal/component-api/v8/item/events.md'; -import Methods from '@ionic-internal/component-api/v8/item/methods.md'; -import Parts from '@ionic-internal/component-api/v8/item/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/item/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/item/slots.md'; +import Props from '@ionic-internal/component-api/v9/item/props.md'; +import Events from '@ionic-internal/component-api/v9/item/events.md'; +import Methods from '@ionic-internal/component-api/v9/item/methods.md'; +import Parts from '@ionic-internal/component-api/v9/item/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/item/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/item/slots.md'; import useBaseUrl from '@docusaurus/useBaseUrl'; import BestPracticeFigure from '@components/global/BestPracticeFigure'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; ion-item: Input, Edit, or Delete iOS and Android Item Elements @@ -20,19 +22,19 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。 +アイテムは、テキスト、アイコン、アバター、画像、Input、その他のネイティブまたはカスタム要素を含むことができる要素です。アイテムは他のアイテムと一緒に[リスト](./list)の行としてのみ使用してください。アイテムはスワイプ、削除、並び替え、編集などができます。 ## 基本的な使い方 -アイテムはテキストを左寄せにし、テキストがアイテムより幅が広い場合は省略記号を追加しています。この動作は、Ionic Framework が提供する CSS Utilities を使って変更することができます。例えば、以下の例では `.ion-text-nowrap` を使っています。テキストを変換するためにアイテムに追加できる他のクラスについては、[CSS Utilities Documentation](/docs/layout/css-utilities) を参照してください。 +アイテムはテキストを左揃えにし、テキストがアイテムより広い場合は折り返されます。この動作は、Ionic Frameworkが提供するCSSユーティリティを使用して変更することができます。以下の例では`.ion-text-nowrap`を使用しています。アイテム内のテキストを変換するために追加できる他のクラスについては、[CSSユーティリティのドキュメント](/docs/layout/css-utilities)を参照してください。 -import Basic from '@site/static/usage/v8/item/basic/index.md'; +import Basic from '@site/static/usage/v9/item/basic/index.md'; -## コンテンツの種類 +## コンテンツの種類 {/* #content-types */} リスト内のアイテムは様々な形をとりますが、一般的にビジュアル、テキスト、メタデータ、アクション、コントロールの5つの異なるコンテンツタイプをサポートします。しかし、これらのコンテンツタイプをすべて同時に使うべきではありません。以下のガイドでは、異なるコンテンツタイプと、アプリケーションでの適切な利用方法を示します。 @@ -52,7 +54,7 @@ import Basic from '@site/static/usage/v8/item/basic/index.md'; 下の例では、ビジュアルをサポートする2つのリストを作成しています。最初のリストはアイコンを使い、2番目のリストはアバターを使います。ビジュアルは装飾的なものなので、すべて `aria-hidden="true"` を指定しています。さらに、これらは `start` スロットで一貫して表示されます。 -import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporting-visuals/index.md'; +import SupportingVisuals from '@site/static/usage/v9/item/content-types/supporting-visuals/index.md'; @@ -74,13 +76,13 @@ import SupportingVisuals from '@site/static/usage/v8/item/content-types/supporti そのリストの下には、 [Note](./note) の下に長いテキストを含むtextareaを含む別のリストがあります。textareaは、長いテキストが他のフィールドではなく、textareaに関連付けられていることを明らかにするために、それ自身のリストに配置されました。 -import Text from '@site/static/usage/v8/item/content-types/text/index.md'; +import Text from '@site/static/usage/v9/item/content-types/text/index.md'; ### メタデータ -メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。Badge](./badge)や[Note](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。 +メタデータは、ステータステキストやカウントのようなアイテムの追加コンテキストを提供します。[バッジ](./badge)や[注記](./note)のようなコンポーネントは、メタデータを表示する素晴らしい方法です。 -### アクション +### アクション {/* #actions */} アクションは、アクティブにすると何かをするインタラクティブな要素です。アイテムは1行に複数のアクションを表示することができます。しかし、開発者は、各アクションのタップターゲットが十分に大きいことを確認する必要があります。 @@ -122,7 +124,7 @@ import Metadata from '@site/static/usage/v8/item/content-types/metadata/index.md 下の例では、連絡先のリストを作成しています。各項目は、その項目の完全な連絡先ページに移動するためのスタブボタンです。各項目には、ユーザーが項目をスワイプすることで表示できる追加アクションがあります。 -import Actions from '@site/static/usage/v8/item/content-types/actions/index.md'; +import Actions from '@site/static/usage/v9/item/content-types/actions/index.md'; @@ -156,49 +158,135 @@ import Actions from '@site/static/usage/v8/item/content-types/actions/index.md'; 以下の例では、ToDoタスクのリストを作成しています。それぞれの項目にはチェックボックスと入力があります。チェックボックスはユーザーがタスクを完了としてマークできるようにし、入力はユーザーがタスクの名前を変更できるようにします。 -import Controls from '@site/static/usage/v8/item/content-types/controls/index.md'; +import Controls from '@site/static/usage/v9/item/content-types/controls/index.md'; ## クリック可能なItems -`href` か `button` プロパティが設定されている場合、itemは "clickable（クリック可能）" と見なされます。clickableなitemsには、インタラクティブに操作できることを示す視覚的な違いがいくつかあります。たとえば、clickableなitemは、`md` modeではrippleエフェクトを持ち、`ios` modeではハイライト表示され、`ios` modeでの [detail arrow](/#detail-arrows) が表示されます。 +`href`、`button`、`routerLink` のいずれかのプロパティが設定されている場合、item は「clickable（クリック可能）」と見なされます。clickable な item には、操作可能であることを示す視覚的な違いがいくつかあります。例えば、`md` mode では操作時に ripple エフェクトが適用され、`ios` mode では操作時にハイライトされ、デフォルトで [detail arrow](#detail-arrows) が表示されます。 -import Clickable from '@site/static/usage/v8/item/clickable/index.md'; +import Clickable from '@site/static/usage/v9/item/clickable/index.md'; -## Detail Arrows +## ルーティング -デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。 +Item は `routerLink` プロパティを使用したクライアントサイドナビゲーションをサポートします。`routerLink` を設定すると item はアンカーとしてレンダリングされ、タップしたときに指定したルートへ移動します。`routerDirection` プロパティは遷移アニメーションの方向を制御し、`routerAnimation` にはカスタムアニメーションビルダーを指定できます。 -import DetailArrows from '@site/static/usage/v8/item/detail-arrows/index.md'; + - + + +Angular では、`routerLink` は `@angular/router` が提供するディレクティブです。Ionic コンポーネントで使用する場合は、`routerDirection` と `routerAnimation` のサポートを有効にするため、`@ionic/angular` から `IonRouterLink` も import します。 + +```html + + + Go to Home + + + Go Back to Home + + +``` + +```typescript +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonRouterLink } from '@ionic/angular'; +import { RouterLink } from '@angular/router'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonItem, IonLabel, IonList, RouterLink, IonRouterLink], +}) +export class ExampleComponent {} +``` + + + + + +JavaScript では、`ion-item` に `router-link` 属性を設定し、[ion-router](./router) を使用して移動します。 + +```html + + + Go to Home + + + Go Back to Home + + +``` + + + + + +React では、`IonItem` の `routerLink` prop により、Ionic の React Router 統合を介したクライアントサイドナビゲーションが実行されます。 + +```tsx +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Go to Home + + + Go Back to Home + + + ); +} +export default Example; +``` + - + +## Detail Arrows + +デフォルトでは、[clickableなitems](/#clickable-items) は、`ios` modeで右矢印アイコンを表示します。clickableな要素の右矢印アイコンを非表示にするには、 `detail` プロパティを `false` に設定します。自動的に表示されない項目に右矢印アイコンを表示するには、`detail`プロパティを `true` に設定します。 + +import DetailArrows from '@site/static/usage/v9/item/detail-arrows/index.md'; + + ## Item Lines アイテムはデフォルトで下部のボーダーを挿入して表示します。ボーダーは左側にパディングを持ち、 `"start"` スロットにスロットされたコンテンツの下に表示されることはありません。 `lines` プロパティを `"full"` または `"none"` に変更すると、それぞれ全幅のボーダーが表示され、ボーダーを表示しないようになります。 -import Lines from '@site/static/usage/v8/item/lines/index.md'; +import Lines from '@site/static/usage/v9/item/lines/index.md'; @@ -206,13 +294,13 @@ import Lines from '@site/static/usage/v8/item/lines/index.md'; Buttonsは、アイテムの外側にあるときよりも、アイテムの内側にあるときの方が小さくスタイルされます。ボタンのサイズをアイテムの外側のボタンと同じにするには、`size`属性に`"default"`を設定します。 -import Buttons from '@site/static/usage/v8/item/buttons/index.md'; +import Buttons from '@site/static/usage/v9/item/buttons/index.md'; ## Item Inputs -import Inputs from '@site/static/usage/v8/item/inputs/index.md'; +import Inputs from '@site/static/usage/v9/item/inputs/index.md'; @@ -220,19 +308,19 @@ import Inputs from '@site/static/usage/v8/item/inputs/index.md'; ### Colors -import Colors from '@site/static/usage/v8/item/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/item/theming/colors/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v8/item/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/item/theming/css-shadow-parts/index.md'; -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} -import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/item/theming/css-properties/index.md'; @@ -243,7 +331,7 @@ import CSSProps from '@site/static/usage/v8/item/theming/css-properties/index.md 1. アイテムは [Lists](./list) の中だけで使用してください。 2. リスト内のアイテムは、一貫したフォーマットで表示されるべきです。例えば、アイテムに装飾的なアイコンを表示する場合、アイコンはアイテム間で同じように配置されるべきです。 3. アイテムは決して[入れ子になったインタラクティヴ](https://dequeuniversity.com/rules/axe/4.4/nested-interactive)をレンダリングすべきではありません。入れ子になったインタラクティブ要素が使用されている場合、スクリーンリーダーは正しいインタラクティブ要素を選択することができません。例えば、`button="true"`を持つ`ion-item`の中にボタンを置くことは避けてください。 -4. コンテントタイプ](#content-types)を正しく使用してください。Itemコンポーネントは、[List](./list)内の行として設計されており、汎用コンテナとして使用すべきではありません。 +4. [コンテンツタイプ](#content-types)を正しく使用してください。Item コンポーネントは、[リスト](./list)内の行として設計されており、汎用コンテナとして使用すべきではありません。 ## アクセシビリティ diff --git a/docs/api/label.md b/docs/api/label.md index 32f3b29362d..d0469bf383a 100644 --- a/docs/api/label.md +++ b/docs/api/label.md @@ -1,12 +1,12 @@ --- title: "ion-label" --- -import Props from '@ionic-internal/component-api/v8/label/props.md'; -import Events from '@ionic-internal/component-api/v8/label/events.md'; -import Methods from '@ionic-internal/component-api/v8/label/methods.md'; -import Parts from '@ionic-internal/component-api/v8/label/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/label/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/label/slots.md'; +import Props from '@ionic-internal/component-api/v9/label/props.md'; +import Events from '@ionic-internal/component-api/v9/label/events.md'; +import Methods from '@ionic-internal/component-api/v9/label/methods.md'; +import Parts from '@ionic-internal/component-api/v9/label/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/label/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/label/slots.md'; ion-label: Item Label Color and Properties for Applications @@ -23,13 +23,13 @@ Labelは、主に[Item](./item.md)コンポーネントにテキストコンテ ## 基本的な使い方 -import Basic from '@site/static/usage/v8/label/basic/index.md'; +import Basic from '@site/static/usage/v9/label/basic/index.md'; ## Item Labels -import Item from '@site/static/usage/v8/label/item/index.md'; +import Item from '@site/static/usage/v9/label/item/index.md'; @@ -37,7 +37,7 @@ import Item from '@site/static/usage/v8/label/item/index.md'; ### Colors -import Colors from '@site/static/usage/v8/label/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/label/theming/colors/index.md'; diff --git a/docs/api/list-header.md b/docs/api/list-header.md index e436b1c67e4..86fb0435945 100644 --- a/docs/api/list-header.md +++ b/docs/api/list-header.md @@ -1,12 +1,12 @@ --- title: "ion-list-header" --- -import Props from '@ionic-internal/component-api/v8/list-header/props.md'; -import Events from '@ionic-internal/component-api/v8/list-header/events.md'; -import Methods from '@ionic-internal/component-api/v8/list-header/methods.md'; -import Parts from '@ionic-internal/component-api/v8/list-header/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/list-header/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/list-header/slots.md'; +import Props from '@ionic-internal/component-api/v9/list-header/props.md'; +import Events from '@ionic-internal/component-api/v9/list-header/events.md'; +import Methods from '@ionic-internal/component-api/v9/list-header/methods.md'; +import Parts from '@ionic-internal/component-api/v9/list-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/list-header/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/list-header/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -17,7 +17,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/list-header/basic/index.md'; +import Basic from '@site/static/usage/v9/list-header/basic/index.md'; @@ -26,7 +26,7 @@ import Basic from '@site/static/usage/v8/list-header/basic/index.md'; リストのヘッダーに [button](./button) を配置すると、リストの一部を表示し、ボタンで全リストにリダイレクトするのに便利です。 -import Buttons from '@site/static/usage/v8/list-header/buttons/index.md'; +import Buttons from '@site/static/usage/v9/list-header/buttons/index.md'; @@ -35,7 +35,7 @@ import Buttons from '@site/static/usage/v8/list-header/buttons/index.md'; リストヘッダーは、デフォルトでは下部のボーダーが表示されません。 `lines` プロパティを `"full"` または `"inset"` に変更すると、それぞれ全幅のボーダーまたは左paddingを伴う挿入ボーダーが表示されます。 -import Lines from '@site/static/usage/v8/list-header/lines/index.md'; +import Lines from '@site/static/usage/v9/list-header/lines/index.md'; @@ -43,13 +43,13 @@ import Lines from '@site/static/usage/v8/list-header/lines/index.md'; ### Colors -import Colors from '@site/static/usage/v8/list-header/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/list-header/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/list-header/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/list-header/theming/css-properties/index.md'; diff --git a/docs/api/list.md b/docs/api/list.md index d612f673907..f373d6a267f 100644 --- a/docs/api/list.md +++ b/docs/api/list.md @@ -1,12 +1,12 @@ --- title: "ion-list" --- -import Props from '@ionic-internal/component-api/v8/list/props.md'; -import Events from '@ionic-internal/component-api/v8/list/events.md'; -import Methods from '@ionic-internal/component-api/v8/list/methods.md'; -import Parts from '@ionic-internal/component-api/v8/list/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/list/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/list/slots.md'; +import Props from '@ionic-internal/component-api/v9/list/props.md'; +import Events from '@ionic-internal/component-api/v9/list/events.md'; +import Methods from '@ionic-internal/component-api/v9/list/methods.md'; +import Parts from '@ionic-internal/component-api/v9/list/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/list/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/list/slots.md'; ion-list: Item List View Component for iOS and Android Apps @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/list/basic/index.md'; +import Basic from '@site/static/usage/v9/list/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v8/list/basic/index.md'; リストに `inset` プロパティを追加すると、リストの周囲にマージンが適用されます。また、`ios`モードでは、リストに角丸が追加されます。 -import Inset from '@site/static/usage/v8/list/inset/index.md'; +import Inset from '@site/static/usage/v9/list/inset/index.md'; @@ -41,7 +41,7 @@ import Inset from '@site/static/usage/v8/list/inset/index.md'; リストに `lines` プロパティを追加すると、リスト内のすべてのアイテムの下側のボーダーを調整することができます。 `"full"`に設定すると全幅のボーダーが表示され、`"inset"`に設定すると左paddingで調整されたボーダーが表示され、`none"`に設定するとボーダーが表示されません。リスト内のアイテムに `lines` プロパティが設定されている場合は、リスト上のプロパティよりもそちらが優先されます。 -import Lines from '@site/static/usage/v8/list/lines/index.md'; +import Lines from '@site/static/usage/v9/list/lines/index.md'; diff --git a/docs/api/loading.md b/docs/api/loading.md index 05c94846a7c..11a18dc2003 100644 --- a/docs/api/loading.md +++ b/docs/api/loading.md @@ -1,12 +1,12 @@ --- title: "ion-loading" --- -import Props from '@ionic-internal/component-api/v8/loading/props.md'; -import Events from '@ionic-internal/component-api/v8/loading/events.md'; -import Methods from '@ionic-internal/component-api/v8/loading/methods.md'; -import Parts from '@ionic-internal/component-api/v8/loading/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/loading/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/loading/slots.md'; +import Props from '@ionic-internal/component-api/v9/loading/props.md'; +import Events from '@ionic-internal/component-api/v9/loading/events.md'; +import Methods from '@ionic-internal/component-api/v9/loading/methods.md'; +import Parts from '@ionic-internal/component-api/v9/loading/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/loading/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/loading/slots.md'; ion-loading: Loading | Application Loading Indicator Overlay @@ -22,29 +22,29 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で `dismiss()` メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。 +一度表示されると、ロードインジケータはデフォルトで無期限に表示されます。開発者は、コンポーネント上で `dismiss()` メソッドを呼び出すことで、作成後にローディングインジケータを手動で解除することができます。`onDidDismiss` 関数を呼び出すと、ローディングインジケータが解除された後にアクションを実行することができます。 また、ロードオプションの `duration` に表示するミリ秒数を渡すことで、特定の時間が経過した後にロードインジケータを自動的に解除するよう設定することもできます。 ### インラインロード (推奨) -import Inline from '@site/static/usage/v8/loading/inline/index.md'; +import Inline from '@site/static/usage/v9/loading/inline/index.md'; ### Controller -import Controller from '@site/static/usage/v8/loading/controller/index.md'; +import Controller from '@site/static/usage/v9/loading/controller/index.md'; -## Customization +## カスタマイズ ### スピナー -使用するスピナーは `spinner` プロパティを使用してカスタマイズすることができます。オプションの完全なリストは [spinner property documentation](#spinner) を参照してください。 +使用するスピナーは `spinner` プロパティでカスタマイズできます。すべてのオプションについては、[`spinner` プロパティのドキュメント](#prop-spinner)を参照してください。 -import Spinners from '@site/static/usage/v8/loading/spinners/index.md'; +import Spinners from '@site/static/usage/v9/loading/spinners/index.md'; @@ -54,7 +54,7 @@ Loading は scoped encapsulation を使用しています。これは、実行 カスタムクラスを渡して、それを使ってホストと内部要素にカスタムスタイルを追加することをお勧めします。 -import Theming from '@site/static/usage/v8/loading/theming/index.md'; +import Theming from '@site/static/usage/v9/loading/theming/index.md'; diff --git a/docs/api/menu-button.md b/docs/api/menu-button.md index 09d26cc2c8c..41c618c66e4 100644 --- a/docs/api/menu-button.md +++ b/docs/api/menu-button.md @@ -1,12 +1,12 @@ --- title: "ion-menu-button" --- -import Props from '@ionic-internal/component-api/v8/menu-button/props.md'; -import Events from '@ionic-internal/component-api/v8/menu-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/menu-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/menu-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/menu-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/menu-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/menu-button/props.md'; +import Events from '@ionic-internal/component-api/v9/menu-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/menu-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/menu-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/menu-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/menu-button/slots.md'; ion-menu-button: Menu Button to Open an App Menu on a Page @@ -17,11 +17,9 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Menu Buttonコンポーネントは、アイコンを含み、クリックされるとメニューを開く機能を自動的に追加します。 -詳しくは、[menu](./menu)のドキュメントをご覧ください。 - +詳細については、[メニュー](./menu)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/menu-toggle.md b/docs/api/menu-toggle.md index c1d1aa25648..86f4aaee588 100644 --- a/docs/api/menu-toggle.md +++ b/docs/api/menu-toggle.md @@ -1,12 +1,12 @@ --- title: "ion-menu-toggle" --- -import Props from '@ionic-internal/component-api/v8/menu-toggle/props.md'; -import Events from '@ionic-internal/component-api/v8/menu-toggle/events.md'; -import Methods from '@ionic-internal/component-api/v8/menu-toggle/methods.md'; -import Parts from '@ionic-internal/component-api/v8/menu-toggle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/menu-toggle/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/menu-toggle/slots.md'; +import Props from '@ionic-internal/component-api/v9/menu-toggle/props.md'; +import Events from '@ionic-internal/component-api/v9/menu-toggle/events.md'; +import Methods from '@ionic-internal/component-api/v9/menu-toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v9/menu-toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/menu-toggle/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/menu-toggle/slots.md'; ion-menu-toggle: MenuToggle Component to Open/Close Menus @@ -17,13 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Menu Toggleコンポーネントは、メニューの開閉を切り替えるために使用することができます。 メニュートグルは、選択されたメニューが有効な場合にのみ表示されます。メニューが無効になっている場合や、分割ペインとして表示されている場合は、メニュートグルは非表示になります。常にメニュートグルを表示するには、`autoHide`プロパティを`false`に設定します。 -詳しくは、[menu](./menu#menu-toggle)のドキュメントを参照してください。 - +詳細については、[メニュー](./menu#menu-toggle)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/menu.md b/docs/api/menu.md index b085f700a3d..baa117a9668 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -1,12 +1,12 @@ --- title: "ion-menu" --- -import Props from '@ionic-internal/component-api/v8/menu/props.md'; -import Events from '@ionic-internal/component-api/v8/menu/events.md'; -import Methods from '@ionic-internal/component-api/v8/menu/methods.md'; -import Parts from '@ionic-internal/component-api/v8/menu/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/menu/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/menu/slots.md'; +import Props from '@ionic-internal/component-api/v9/menu/props.md'; +import Events from '@ionic-internal/component-api/v9/menu/events.md'; +import Methods from '@ionic-internal/component-api/v9/menu/methods.md'; +import Parts from '@ionic-internal/component-api/v9/menu/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/menu/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/menu/slots.md'; ion-menu: API Framework Docs for Types of Menu Components @@ -17,61 +17,55 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。 メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、`MenuController`を使用してプログラムで制御することができます。 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/menu/basic/index.md'; +import Basic from '@site/static/usage/v9/menu/basic/index.md'; - ## Menu Toggle [menu toggle](./menu-toggle) コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。 -import MenuToggle from '@site/static/usage/v8/menu/toggle/index.md'; +import MenuToggle from '@site/static/usage/v9/menu/toggle/index.md'; - ## Menu Types `type`プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。 -import MenuType from '@site/static/usage/v8/menu/type/index.md'; +import MenuType from '@site/static/usage/v9/menu/type/index.md'; - ## Menu Sides メニューはデフォルトでは`"start"`側に表示されます。左から右へ移動するアプリでは左側に、右から左へ移動するアプリでは右側に表示されます。メニューは`"start"`の反対側である`"end"`側に表示させることもできます。 -アプリ内で両サイドのメニューが必要な場合、 `MenuController` の `open` メソッドに `side` の値を渡すことでメニューを開くことができます。sideが指定されない場合は、`"start"`側のメニューが開かれる。MenuController` を使用した例については、下記の [複数メニュー](#multiple-menus) セクションを参照ください。 +アプリで両側にメニューが必要な場合は、`side`の値を`MenuController`の`open`メソッドに渡すことでメニューを開くことができます。サイドが指定されていない場合、`"start"`側のメニューが開きます。`MenuController`を使用した例については、以下の[複数のメニュー](#multiple-menus)セクションを参照してください。 -import Sides from '@site/static/usage/v8/menu/sides/index.md'; +import Sides from '@site/static/usage/v9/menu/sides/index.md'; - -## 複数メニュー +## 複数メニュー {/* #multiple-menus */} 同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。 -import Multiple from '@site/static/usage/v8/menu/multiple/index.md'; +import Multiple from '@site/static/usage/v9/menu/multiple/index.md'; - ## テーマ ### CSS Shadow Parts -import Theming from '@site/static/usage/v8/menu/theming/index.md'; +import Theming from '@site/static/usage/v9/menu/theming/index.md'; @@ -88,9 +82,6 @@ interface MenuCustomEvent extends CustomEvent { } ``` - - - ## プロパティ diff --git a/docs/api/modal.md b/docs/api/modal.md index 5e1618454a3..d3a8985cdec 100644 --- a/docs/api/modal.md +++ b/docs/api/modal.md @@ -1,12 +1,12 @@ --- title: "ion-modal" --- -import Props from '@ionic-internal/component-api/v8/modal/props.md'; -import Events from '@ionic-internal/component-api/v8/modal/events.md'; -import Methods from '@ionic-internal/component-api/v8/modal/methods.md'; -import Parts from '@ionic-internal/component-api/v8/modal/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/modal/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/modal/slots.md'; +import Props from '@ionic-internal/component-api/v9/modal/props.md'; +import Events from '@ionic-internal/component-api/v9/modal/events.md'; +import Methods from '@ionic-internal/component-api/v9/modal/methods.md'; +import Parts from '@ionic-internal/component-api/v9/modal/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/modal/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/modal/slots.md'; ion-modal: Ionic Mobile App Custom Modal API Component @@ -27,7 +27,7 @@ Modalは、アプリのコンテンツの上に表示されるダイアログで Angular、React、Vue で `ion-modal` を使用する場合、渡されたコンポーネントはモーダルが解除されると破棄されます。この機能は JavaScript フレームワークによって提供されるので、JavaScript フレームワークなしで `ion-modal` を使用しても、渡されたコンポーネントは破棄されません。この機能が必要な場合は、代わりに `modalController` を使用することをお勧めします。 -import InlineModalTriggerExample from '@site/static/usage/v8/modal/inline/basic/index.md'; +import InlineModalTriggerExample from '@site/static/usage/v9/modal/inline/basic/index.md'; @@ -37,7 +37,7 @@ import InlineModalTriggerExample from '@site/static/usage/v8/modal/inline/basic/ `isOpen` は一方向のデータバインディングを使用します。つまり、モーダルが解除されたときに自動的に `false` にセットされることはありません。開発者は `ionModalDidDismiss` または `didDismiss` イベントを監視して、 `isOpen` を `false` に設定する必要があります。この理由は、`ion-modal` の内部がアプリケーションの状態と密に結合するのを防ぐためである。一方通行のデータバインディングでは、モーダルはリアクティブ変数が提供するboolean値だけを気にすればいいです。双方向のデータバインディングでは、モーダルはboolean値とリアクティブ変数の存在の両方を考慮する必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import InlineModalIsOpenExample from '@site/static/usage/v8/modal/inline/is-open/index.md'; +import InlineModalIsOpenExample from '@site/static/usage/v9/modal/inline/is-open/index.md'; @@ -45,7 +45,7 @@ import InlineModalIsOpenExample from '@site/static/usage/v8/modal/inline/is-open `ModalController` を使用すると、開発者はプログラムによって `ion-modal` を表示させることができます。開発者は、モーダルの表示と非表示を完全に制御することができます。 -import ControllerExample from '@site/static/usage/v8/modal/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/modal/controller/index.md'; @@ -65,7 +65,7 @@ canDismiss`プロパティの使用方法には、boolean値の設定とコー boolean値を設定するのは、モーダルが終了する前に特定のアクションを実行する必要がある場合に使用する必要があります。たとえば、開発者がモーダルを閉じる前に "利用規約" チェックボックスをチェックすることを要求したい場合、最初は `canDismiss` を `false` に設定し、チェックボックスがチェックされたら `true` に更新することが可能です。 -import CanDismissBooleanExample from '@site/static/usage/v8/modal/can-dismiss/boolean/index.md'; +import CanDismissBooleanExample from '@site/static/usage/v9/modal/can-dismiss/boolean/index.md'; @@ -77,7 +77,7 @@ import CanDismissBooleanExample from '@site/static/usage/v8/modal/can-dismiss/bo コールバック関数を設定すると、カードまたはシートモーダルの使用時にスワイプジェスチャが中断されることに注意してください。これは、Ionicが、あなたのコールバック関数が何を解決するか事前に知らないためです。 -import CanDismissFunctionExample from '@site/static/usage/v8/modal/can-dismiss/function/index.md'; +import CanDismissFunctionExample from '@site/static/usage/v9/modal/can-dismiss/function/index.md'; @@ -85,7 +85,7 @@ import CanDismissFunctionExample from '@site/static/usage/v8/modal/can-dismiss/f 開発者は、ユーザがスワイプしてカードやシートのモーダルを閉じないようにしたい場合があります。これは `canDismiss` にコールバック関数を設定し、`role` が `gesture` でないかチェックすることで実現できます。 -import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v8/modal/can-dismiss/prevent-swipe-to-close/index.md'; +import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md'; @@ -97,7 +97,7 @@ import CanDismissPreventSwipeToCloseExample from '@site/static/usage/v8/modal/ca 以下は、子コンポーネントが親コンポーネントとどのように通信して `canDismiss` コールバックを変更できるかを示す簡単な例です： -import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss/child-state/index.md'; +import CanDismissChildStateExample from '@site/static/usage/v9/modal/can-dismiss/child-state/index.md'; @@ -113,7 +113,7 @@ import CanDismissChildStateExample from '@site/static/usage/v8/modal/can-dismiss The card display style is only available on iOS. ::: -import CardExample from '@site/static/usage/v8/modal/card/basic/index.md'; +import CardExample from '@site/static/usage/v9/modal/card/basic/index.md'; @@ -131,13 +131,13 @@ import CardExample from '@site/static/usage/v8/modal/card/basic/index.md'; `backdropBreakpoint` プロパティは、 `ion-backdrop` がフェードインし始めるポイントをカスタマイズするために使用することができます。これは、シートの下にインタラクティブなコンテンツがあるようなインタフェースを作成する際に便利です。よくある使用例としては、シートが完全に展開されるまでマップがインタラクティブになるような、マップをオーバーレイするシートモーダルです。 -import SheetExample from '@site/static/usage/v8/modal/sheet/basic/index.md'; +import SheetExample from '@site/static/usage/v9/modal/sheet/basic/index.md'; ### 背景コンテンツとのインタラクション -import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/background-content/index.md'; +import SheetBackgroundContentExample from '@site/static/usage/v9/modal/sheet/background-content/index.md'; @@ -147,7 +147,7 @@ import SheetBackgroundContentExample from '@site/static/usage/v8/modal/sheet/bac 次の例は、コンテンツに基づいて自動的にサイズ調整されるシートモーダルを取得する方法を示しています。最大ブレークポイントを`1`に保つことで、モーダル全体がビューポート内でアクセス可能であることを保証することに注意してください。 -import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-height/index.md'; +import SheetAutoHeightExample from '@site/static/usage/v9/modal/sheet/auto-height/index.md'; @@ -155,7 +155,7 @@ import SheetAutoHeightExample from '@site/static/usage/v8/modal/sheet/auto-heigh シートモーダルでは、ブレークポイント間でシートをドラッグするために使用されるハンドルインジケータをオプションでレンダリングすることができます。 `handleBehavior` プロパティは、ハンドルがユーザーによってアクティブにされたときの振る舞いを設定するために使用されます。 -import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle-behavior/index.md'; +import SheetHandleBehaviorExample from '@site/static/usage/v9/modal/sheet/handle-behavior/index.md'; @@ -163,7 +163,7 @@ import SheetHandleBehaviorExample from '@site/static/usage/v8/modal/sheet/handle シートモーダルは、すべてのブレークポイントでコンテンツのスクロールを許可するように設定でき、ビューポートより大きいコンテンツを表示するのに理想的です。`expandToScroll`プロパティを`false`に設定すると、コンテンツはすべてのブレークポイントでスクロール可能なままです。それ以外の場合、デフォルトでは、シートモーダルが完全に展開されている場合にのみスクロールが有効になります。 -import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expand-to-scroll/index.md'; +import SheetScrollingContentExample from '@site/static/usage/v9/modal/sheet/expand-to-scroll/index.md'; @@ -187,7 +187,7 @@ ion-modal.stack-modal { } ``` -import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.md'; +import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.md'; @@ -195,7 +195,7 @@ import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.md'; アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。 -import AnimationsExample from '@site/static/usage/v8/modal/styling/animations/index.md'; +import AnimationsExample from '@site/static/usage/v9/modal/styling/animations/index.md'; @@ -203,7 +203,7 @@ import AnimationsExample from '@site/static/usage/v8/modal/styling/animations/in `ion-modal`は、フルページビュー、カード、シートに使用されることが多いですが、カスタムダイアログに使用することも可能です。これは、[ion-alert](./alert)や[ion-loading](./loading)などのコンポーネントが提供するものより複雑なインターフェースを必要とする開発者に便利です。 -import CustomDialogs from '@site/static/usage/v8/modal/custom-dialogs/index.md'; +import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.md'; @@ -220,7 +220,7 @@ The `ionDragStart` event is emitted as soon as the user begins a dragging gestur The `ionDragEnd` event is emitted when the user completes the dragging gesture by releasing the modal. Like the move event, it includes the final [`ModalDragEventDetail`](#modaldrageventdetail) object. This event is commonly used to finalize state changes once the modal has come to a rest. -import DragStartEndEvents from '@site/static/usage/v8/modal/drag-start-end-events/index.md'; +import DragStartEndEvents from '@site/static/usage/v9/modal/drag-start-end-events/index.md'; @@ -228,7 +228,7 @@ import DragStartEndEvents from '@site/static/usage/v8/modal/drag-start-end-event The `ionDragMove` event is emitted continuously while the user is actively dragging the modal. This event provides a [`ModalDragEventDetail`](#modaldrageventdetail) object containing real-time data, essential for creating highly responsive UI updates that react instantly to the user's touch. For example, the `progress` value can be used to dynamically darken a header's opacity as the modal is dragged upward. -import DragMoveEvent from '@site/static/usage/v8/modal/drag-move-event/index.md'; +import DragMoveEvent from '@site/static/usage/v9/modal/drag-move-event/index.md'; @@ -323,6 +323,24 @@ interface ModalDragEventDetail { * snap to upon release. */ snapBreakpoint?: number; + /** + * Whether the modal is attempting to dismiss when the drag gesture + * ends. + * + * In a sheet modal, this is `true` when the modal will snap to a + * breakpoint of 0. In a card modal, it is `true` when the gesture + * passed the threshold required to close the modal. + * + * If a `canDismiss` callback is set, it can still cancel the dismiss + * after this event is emitted. Listen for `ionModalDidDismiss` to + * confirm that the modal closed. + * + * This property is only included on `ionDragEnd`. + * + * This can be used to react as soon as the user releases the modal, + * such as dismissing the keyboard while the modal animates away. + */ + isDismissing?: boolean; } ``` @@ -365,7 +383,7 @@ interface ModalDragEventDetail { インラインの `ion-modal` のコンテンツは、閉じられるとアンマウントされます。このコンテンツがレンダリングに時間がかかる場合、開発者は `keepContentsMounted` プロパティを使用して、モーダルがマウントされると同時にコンテンツをマウントすることができます。これにより、モーダルが開かれたときにインナー コンテンツがすでにマウントされているので、アプリケーションの応答性を最適化することができます。 -import Mount from '@site/static/usage/v8/modal/performance/mount/index.md'; +import Mount from '@site/static/usage/v9/modal/performance/mount/index.md'; diff --git a/docs/api/nav-link.md b/docs/api/nav-link.md index 781fb90c6aa..953b4f761c5 100644 --- a/docs/api/nav-link.md +++ b/docs/api/nav-link.md @@ -1,12 +1,12 @@ --- title: "ion-nav-link" --- -import Props from '@ionic-internal/component-api/v8/nav-link/props.md'; -import Events from '@ionic-internal/component-api/v8/nav-link/events.md'; -import Methods from '@ionic-internal/component-api/v8/nav-link/methods.md'; -import Parts from '@ionic-internal/component-api/v8/nav-link/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/nav-link/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/nav-link/slots.md'; +import Props from '@ionic-internal/component-api/v9/nav-link/props.md'; +import Events from '@ionic-internal/component-api/v9/nav-link/events.md'; +import Methods from '@ionic-internal/component-api/v9/nav-link/methods.md'; +import Parts from '@ionic-internal/component-api/v9/nav-link/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/nav-link/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/nav-link/slots.md'; ion-nav-link: Navigation Links to a Specified Component @@ -15,13 +15,11 @@ import Slots from '@ionic-internal/component-api/v8/nav-link/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - ナビゲーションリンクは指定されたコンポーネントに移動するために使用されます。コンポーネントは `forward`, `back` または `root` コンポーネントとして移動することができます。 これは、ナビゲーションコントローラの `push()`, `pop()`, `setRoot()` メソッドを呼び出すための要素形式となります。 -詳しくは[nav](./nav#using-navlink)のドキュメントを参照ください。 - +詳細については、[nav](./nav#using-navlink)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/nav.md b/docs/api/nav.md index 61e902f6b26..d5132e29be8 100644 --- a/docs/api/nav.md +++ b/docs/api/nav.md @@ -1,12 +1,12 @@ --- title: "ion-nav" --- -import Props from '@ionic-internal/component-api/v8/nav/props.md'; -import Events from '@ionic-internal/component-api/v8/nav/events.md'; -import Methods from '@ionic-internal/component-api/v8/nav/methods.md'; -import Parts from '@ionic-internal/component-api/v8/nav/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/nav/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/nav/slots.md'; +import Props from '@ionic-internal/component-api/v9/nav/props.md'; +import Events from '@ionic-internal/component-api/v9/nav/events.md'; +import Methods from '@ionic-internal/component-api/v9/nav/methods.md'; +import Parts from '@ionic-internal/component-api/v9/nav/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/nav/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/nav/slots.md'; ion-nav: Nav View Component for Ionic Framework Apps @@ -22,14 +22,14 @@ Navは、任意のコンポーネントをロードし、スタックに新し Router Outletとは異なり、Navは特定のルーターに縛られることはありません。つまり、Navコンポーネントをロードし、他のコンポーネントをスタックにプッシュしても、アプリ全体のルーターには影響しない。例えば、新しいコンポーネントを`ion-nav`にプッシュして、URLが更新されることを期待するべきではありません。これは、アプリのURLに関連付けずに、独自のサブナビゲーションが必要なモーダルがあるような使用例に適しています。 :::note -`ion-nav`はルーティングに使用するものではありません。 代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、[Vue](../vue/navigation)、またはバニラJavaScriptプロジェクト用の[`ion-router`](./router)のルーティングガイドを参照してください。 -::: +`ion-nav`はルーティングには使用されません。代わりに、[Angular](../angular/navigation)、[React](../react/navigation)、および[Vue](../vue/navigation)のルーティングガイド、または[`ion-router`](./router)のバニラJavaScriptプロジェクト用ガイドを参照してください。 -## NavLinkを利用する +{/* cspell:disable-next-line */} +## NavLinkを利用する {/* #using-navlink */} NavLinkは、Navと対話する際の簡素化されたAPIです。開発者はコンポーネントをカスタマイズしたり、コンポーネントのプロパティを渡したり、ルートアニメーションの方向を変更したり、ナビゲート時のカスタムアニメーションを定義したりすることができます。 -import NavLinkExample from '@site/static/usage/v8/nav/nav-link/index.md'; +import NavLinkExample from '@site/static/usage/v9/nav/nav-link/index.md'; @@ -43,7 +43,7 @@ Modal can use Nav to offer a linear navigation that is independent of the URL. ::: -import ModalNavigationExample from '@site/static/usage/v8/nav/modal-navigation/index.md'; +import ModalNavigationExample from '@site/static/usage/v9/nav/modal-navigation/index.md'; @@ -59,8 +59,6 @@ interface NavCustomEvent extends CustomEvent { } ``` - - ## プロパティ diff --git a/docs/api/note.md b/docs/api/note.md index e4b1c451d6f..08fae91844a 100644 --- a/docs/api/note.md +++ b/docs/api/note.md @@ -1,12 +1,12 @@ --- title: "ion-note" --- -import Props from '@ionic-internal/component-api/v8/note/props.md'; -import Events from '@ionic-internal/component-api/v8/note/events.md'; -import Methods from '@ionic-internal/component-api/v8/note/methods.md'; -import Parts from '@ionic-internal/component-api/v8/note/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/note/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/note/slots.md'; +import Props from '@ionic-internal/component-api/v9/note/props.md'; +import Events from '@ionic-internal/component-api/v9/note/events.md'; +import Methods from '@ionic-internal/component-api/v9/note/methods.md'; +import Parts from '@ionic-internal/component-api/v9/note/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/note/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/note/slots.md'; ion-note: Note Text Elements for iOS and Android Ionic Apps @@ -21,13 +21,13 @@ Noteは、一般的に詳細情報を提供するサブタイトルとして使 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/note/basic/index.md'; +import Basic from '@site/static/usage/v9/note/basic/index.md'; ## Item Notes -import Item from '@site/static/usage/v8/note/item/index.md'; +import Item from '@site/static/usage/v9/note/item/index.md'; @@ -35,13 +35,13 @@ import Item from '@site/static/usage/v8/note/item/index.md'; ### Colors -import Colors from '@site/static/usage/v8/note/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/note/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/note/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/note/theming/css-properties/index.md'; diff --git a/docs/api/picker-column-option.md b/docs/api/picker-column-option.md index ea1f428b45a..7a43a9d058e 100644 --- a/docs/api/picker-column-option.md +++ b/docs/api/picker-column-option.md @@ -1,12 +1,12 @@ --- title: "ion-picker-column-option" --- -import Props from '@ionic-internal/component-api/v8/picker-column-option/props.md'; -import Events from '@ionic-internal/component-api/v8/picker-column-option/events.md'; -import Methods from '@ionic-internal/component-api/v8/picker-column-option/methods.md'; -import Parts from '@ionic-internal/component-api/v8/picker-column-option/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/picker-column-option/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/picker-column-option/slots.md'; +import Props from '@ionic-internal/component-api/v9/picker-column-option/props.md'; +import Events from '@ionic-internal/component-api/v9/picker-column-option/events.md'; +import Methods from '@ionic-internal/component-api/v9/picker-column-option/methods.md'; +import Parts from '@ionic-internal/component-api/v9/picker-column-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/picker-column-option/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/picker-column-option/slots.md'; ion-picker-column-option: The individual options within a column in a picker. diff --git a/docs/api/picker-column.md b/docs/api/picker-column.md index 48280cdd380..51fc1740293 100644 --- a/docs/api/picker-column.md +++ b/docs/api/picker-column.md @@ -1,12 +1,12 @@ --- title: "ion-picker-column" --- -import Props from '@ionic-internal/component-api/v8/picker-column/props.md'; -import Events from '@ionic-internal/component-api/v8/picker-column/events.md'; -import Methods from '@ionic-internal/component-api/v8/picker-column/methods.md'; -import Parts from '@ionic-internal/component-api/v8/picker-column/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/picker-column/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/picker-column/slots.md'; +import Props from '@ionic-internal/component-api/v9/picker-column/props.md'; +import Events from '@ionic-internal/component-api/v9/picker-column/events.md'; +import Methods from '@ionic-internal/component-api/v9/picker-column/methods.md'; +import Parts from '@ionic-internal/component-api/v9/picker-column/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/picker-column/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/picker-column/slots.md'; ion-picker-column: Individual columns within a picker diff --git a/docs/api/picker.md b/docs/api/picker.md index 83debbd21c2..cd275a18392 100644 --- a/docs/api/picker.md +++ b/docs/api/picker.md @@ -1,12 +1,12 @@ --- title: "ion-picker" --- -import Props from '@ionic-internal/component-api/v8/picker/props.md'; -import Events from '@ionic-internal/component-api/v8/picker/events.md'; -import Methods from '@ionic-internal/component-api/v8/picker/methods.md'; -import Parts from '@ionic-internal/component-api/v8/picker/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/picker/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/picker/slots.md'; +import Props from '@ionic-internal/component-api/v9/picker/props.md'; +import Events from '@ionic-internal/component-api/v9/picker/events.md'; +import Methods from '@ionic-internal/component-api/v9/picker/methods.md'; +import Parts from '@ionic-internal/component-api/v9/picker/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/picker/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/picker/slots.md'; ion-picker: Display a list of options in columns @@ -19,7 +19,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ピッカーは、ユーザーが選択できるオプションを持つ1つまたは複数の列を表示します。 -import Basic from '@site/static/usage/v8/picker/basic/index.md'; +import Basic from '@site/static/usage/v9/picker/basic/index.md'; @@ -27,7 +27,7 @@ import Basic from '@site/static/usage/v8/picker/basic/index.md'; `prefix` スロットと `suffix` スロットを使用して、ピッカーに追加コンテンツを追加します。 -import PrefixSuffix from '@site/static/usage/v8/picker/prefix-suffix/index.md'; +import PrefixSuffix from '@site/static/usage/v9/picker/prefix-suffix/index.md'; @@ -37,7 +37,7 @@ import PrefixSuffix from '@site/static/usage/v8/picker/prefix-suffix/index.md'; ピッカーのハイライトとフェードは `ion-picker` の CSS 変数を使ってカスタマイズできる。開発者は、`ion-picker-column-options` を直接ターゲットにして、ホストレベルのスタイリングを使用することで、個々の外観をカスタマイズすることができます。 -import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/picker/theming/css-properties/index.md'; @@ -45,257 +45,9 @@ import CSSProps from '@site/static/usage/v8/picker/theming/css-properties/index. ピッカーは`ion-modal`のようなオーバーレイの中に表示することができ、確認ボタンやキャンセルボタンを使ってピッカー体験を作り出すことができる。 -import ModalExample from '@site/static/usage/v8/picker/modal/index.md'; +import ModalExample from '@site/static/usage/v9/picker/modal/index.md'; - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Navigation - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Function | -| ------------------ | ------------------------------------------------------------ | -| `ArrowUp` | Scroll to the previous option. | -| `ArrowDown` | Scroll to the next option. | -| `PageUp` | Scroll up by more than one option. | -| `PageDown` | Scroll down by more than one option. | -| `Home` | Scroll to the first option. | -| `End` | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Picker supports navigation using a screen reader by implementing the [`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role) on each [Picker Column](./picker-column). The following gestures can be used to navigate the Picker. - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | - -## Accessibility - -### Screen Readers - -Pickerは、各[Picker Column](./picker-column)に[`slider` role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role)を実装することで、スクリーンリーダーを使用したナビゲーションをサポートします。以下のジェスチャーを使用してPickerをナビゲートできます。 - -| Gesture | Function | -| - | - | -| Swipe Left | Move focus to the previous Picker Column. | -| Swipe Right | Move focus to the next Picker Column. | -| Swipe Up | Select the next option in the Picker Column. | -| Swipe Down | Select the previous option in the Picker Column. | -| Double Tap and Slide Up/Down | Adjust the selected option in the Picker Column. Can be used as an alternative to swiping up and down. | - -:::caution -The Swipe Up and Swipe Down gestures rely on the correct key events being synthesized as noted on the [`slider` documentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role). [Chromium-based browsers do not synthesize keyboard events correctly](https://issues.chromium.org/issues/40816094), but the "Double Tap and Slide Up/Down" gesture can be used as an alternative until this has been implemented in Chromium-based browsers. -::: - -### Keyboard Interactions - -Each [Picker Column](./picker-column) can be navigated using the keyboard when focused. - -| Key | Description | -| -------------------- | ------------------------------------ | -| ArrowUp | Scroll to the previous option. | -| ArrowDown | Scroll to the next option. | -| PageUp | Scroll up by more than one option. | -| PageDown | Scroll down by more than one option. | -| Home | Scroll to the first option. | -| End | Scroll to the last option. | ## Accessibility diff --git a/docs/api/popover.md b/docs/api/popover.md index 018f7b4b607..6d7df60b305 100644 --- a/docs/api/popover.md +++ b/docs/api/popover.md @@ -1,12 +1,12 @@ --- title: "ion-popover" --- -import Props from '@ionic-internal/component-api/v8/popover/props.md'; -import Events from '@ionic-internal/component-api/v8/popover/events.md'; -import Methods from '@ionic-internal/component-api/v8/popover/methods.md'; -import Parts from '@ionic-internal/component-api/v8/popover/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/popover/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/popover/slots.md'; +import Props from '@ionic-internal/component-api/v9/popover/props.md'; +import Events from '@ionic-internal/component-api/v9/popover/events.md'; +import Methods from '@ionic-internal/component-api/v9/popover/methods.md'; +import Parts from '@ionic-internal/component-api/v9/popover/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/popover/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/popover/slots.md'; ion-popover: iOS / Android Popover UI Dialog Component @@ -17,12 +17,11 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Popoverは、現在のページの上部に表示されるダイアログです。これは何にでも使用できますが、通常はナビゲーションバーに収まらないオーバーフローアクションに使用されます。 `ion-popover` を使用するには、インラインで使用する方法と `popoverController` を使用する方法がります。それぞれの方法には異なる考慮点があるので、あなたのユースケースに最も適した方法を使用するようにしましょう。 -## インラインポップオーバー +## インラインポップオーバー {/* #inline-popovers */} `ion-popover` は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、ポップオーバーを表示するために必要なハンドラの数を減らすことができます。 @@ -54,7 +53,7 @@ Angular、React、Vue で `ion-popover` を使用する場合、渡されたコ `popoverController` を使用する場合、`ion-popover` は前もって作成されないので、トリガーは適用されません。 ::: -import InlineTrigger from '@site/static/usage/v8/popover/presenting/inline-trigger/index.md'; +import InlineTrigger from '@site/static/usage/v9/popover/presenting/inline-trigger/index.md'; @@ -64,16 +63,15 @@ import InlineTrigger from '@site/static/usage/v8/popover/presenting/inline-trigg `isOpen` は一方向のデータバインディングを使用しています。つまり、ポップオーバーが閉じられたときに自動的に `false` に設定されることはありません。開発者は `ionPopoverDidDismiss` または `didDismiss` イベントをリッスンして `isOpen` を `false` にセットする必要があります。この理由は、`ion-popover` の内部がアプリケーションの状態と密に結合されるのを防ぐためである。一方通行のデータバインディングでは、ポップオーバーはリアクティブ変数が提供するブーリアン値だけを気にすればよいのです。双方向のデータバインディングでは、ポップオーバーはブール値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは非決定的な動作につながり、アプリケーションのデバッグを難しくします。 - -import IsOpenTrigger from '@site/static/usage/v8/popover/presenting/inline-isopen/index.md'; +import IsOpenTrigger from '@site/static/usage/v9/popover/presenting/inline-isopen/index.md'; -## ポップオーバーコントローラ +## ポップオーバーコントローラ {/* #controller-popovers */} Ionic Framework からインポートされた `popoverController` を使用することで、`ion-popover` をプログラム的に表示することも可能です。これにより、インラインポップオーバーのカスタマイズ以上に、ポップオーバーを表示するタイミングを完全に制御することができます。 -### どのような場合に使用するのか +### いつ使うか ポップオーバーはインラインで記述することをお勧めします。ポップオーバーをインラインで書くことが現実的でない複雑なユースケースの場合にのみ `popoverController` を使用すべきです。コントローラを使用する場合、ポップオーバーは前もって作成されないので、 `trigger` や `trigger-action` などのプロパティはここでは適用されません。さらに、ネストされたポップオーバーはコントローラのアプローチと互換性がありません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに自動的にアプリケーションのルートに追加されるからです。 @@ -83,11 +81,10 @@ Ionic Framework からインポートされた `popoverController` を使用す ### 使い方 -import ControllerExample from '@site/static/usage/v8/popover/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/popover/presenting/controller/index.md'; - ## スタイリング ポップオーバーはアプリケーションのルートで表示されるので、アプリケーション全体を覆うように表示されます。この動作はインラインポップオーバーとコントローラから表示されるポップオーバーの両方に適用されます。そのため、カスタムポップオーバースタイリングは特定のコンポーネントにスコープすることができません。代わりに、スタイルはグローバルに適用されなければなりません。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。 @@ -96,11 +93,10 @@ import ControllerExample from '@site/static/usage/v8/popover/presenting/controll If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. ::: -import Styling from '@site/static/usage/v8/popover/customization/styling/index.md'; +import Styling from '@site/static/usage/v9/popover/customization/styling/index.md'; - ## 配置 ### リファレンス @@ -117,7 +113,7 @@ import Styling from '@site/static/usage/v8/popover/customization/styling/index.m ### Side and Alignment Demo -import Positioning from '@site/static/usage/v8/popover/customization/positioning/index.md'; +import Positioning from '@site/static/usage/v9/popover/customization/positioning/index.md'; @@ -129,9 +125,9 @@ import Positioning from '@site/static/usage/v8/popover/customization/positioning ドロップダウンメニューを作成するとき、ポップオーバーの幅をトリガー要素の幅と一致させたい場合があります。トリガーの幅を事前に知らずにこれを行うのは厄介です。 `size` プロパティを `'cover'` に設定すると、Ionic Framework はポップオーバーの幅をトリガー要素の幅に一致させるようにします。 -`popoverController` を使用する場合は、`event` オプションでイベントを指定する必要があり、Ionic Framework は `event.target` を参照要素に使用します。このパターンの例は [controller demo](#controller-popovers) を参照してください。 +`popoverController`を使用している場合、`event`オプションでイベントを指定する必要があり、Ionic Frameworkは`event.target`を参照要素として使用します。このパターンの例については、[controllerデモ](#controller-popovers)を参照してください。 -import Sizing from '@site/static/usage/v8/popover/customization/sizing/index.md'; +import Sizing from '@site/static/usage/v9/popover/customization/sizing/index.md'; @@ -145,11 +141,10 @@ import Sizing from '@site/static/usage/v8/popover/customization/sizing/index.md' `popoverController` を使用する場合、ネストしたポップオーバーは作成できません。なぜなら、ポップオーバーは `create` メソッドが呼ばれたときに、自動的にアプリケーションのルートに追加されるからです。 ::: -import NestedPopover from '@site/static/usage/v8/popover/nested/index.md'; +import NestedPopover from '@site/static/usage/v9/popover/nested/index.md'; - ## Interfaces 以下に、`popoverController` を使用する際に利用可能なすべてのオプションを示します。これらのオプションは `popoverController.create()` を呼び出す際に指定します。 @@ -182,7 +177,6 @@ interface PopoverOptions { } ``` - ## Types 以下に、`ion-popover` のすべてのカスタムTypeを紹介します。 @@ -225,7 +219,7 @@ type PositionAlign = 'start' | 'center' | 'end'; インライン `ion-popover` のコンテンツは、閉じるとマウントされなくなります。このコンテンツのレンダリングにコストがかかる場合、開発者は `keepContentsMounted` プロパティを使用して、ポップオーバーがマウントされると同時にコンテンツをマウントすることができます。これにより、ポップオーバーが開いたときに内部コンテンツがすでにマウントされているため、アプリケーションの応答性を最適化することができます。 -import Mount from '@site/static/usage/v8/popover/performance/mount/index.md'; +import Mount from '@site/static/usage/v9/popover/performance/mount/index.md'; @@ -251,7 +245,7 @@ import Mount from '@site/static/usage/v8/popover/performance/mount/index.md'; ## CSS Shadow Parts -## CSSカスタムプロパティ +## CSSカスタムプロパティ {/* #css-custom-properties */} ## Slots diff --git a/docs/api/progress-bar.md b/docs/api/progress-bar.md index ea0189ee129..6e6a9163c41 100644 --- a/docs/api/progress-bar.md +++ b/docs/api/progress-bar.md @@ -1,12 +1,12 @@ --- title: "ion-progress-bar" --- -import Props from '@ionic-internal/component-api/v8/progress-bar/props.md'; -import Events from '@ionic-internal/component-api/v8/progress-bar/events.md'; -import Methods from '@ionic-internal/component-api/v8/progress-bar/methods.md'; -import Parts from '@ionic-internal/component-api/v8/progress-bar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/progress-bar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/progress-bar/slots.md'; +import Props from '@ionic-internal/component-api/v9/progress-bar/props.md'; +import Events from '@ionic-internal/component-api/v9/progress-bar/events.md'; +import Methods from '@ionic-internal/component-api/v9/progress-bar/methods.md'; +import Parts from '@ionic-internal/component-api/v9/progress-bar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/progress-bar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/progress-bar/slots.md'; ion-progress-bar: App Progress Bar for Loading Indicator @@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Determinateはデフォルトのタイプです。操作のパーセンテージがわかっている場合に使用されるべきです。進行状況は `value` プロパティを設定することで表現されます。これは、進捗が0から100%まで増加するように表示するために使用できます。 -import Determinate from '@site/static/usage/v8/progress-bar/determinate/index.md'; +import Determinate from '@site/static/usage/v9/progress-bar/determinate/index.md'; @@ -32,7 +32,7 @@ import Determinate from '@site/static/usage/v8/progress-bar/determinate/index.md `buffer`プロパティが設定されている場合、バッファーストリームがアニメーションの円と共に表示され、アクティビティを示します。また、`buffer`プロパティの値は、目に見えるトラックの量によって表されます。もし `buffer` の値が `value` プロパティより小さければ、目に見えるトラックはありません。もし `buffer` が `1` に等しければ、バッファースリームは隠されます。 -import Buffer from '@site/static/usage/v8/progress-bar/buffer/index.md'; +import Buffer from '@site/static/usage/v9/progress-bar/buffer/index.md'; @@ -41,15 +41,15 @@ import Buffer from '@site/static/usage/v8/progress-bar/buffer/index.md'; Indeterminateタイプは、処理にかかる時間が不明な場合に使用します。プログレスバーは `value` と連動しておらず、処理が完了するまでトラックに沿ってスライドしつづけます。 -import Indeterminate from '@site/static/usage/v8/progress-bar/indeterminate/index.md'; +import Indeterminate from '@site/static/usage/v9/progress-bar/indeterminate/index.md'; ## Progress Bars in Toolbars - -import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md'; +{/* Reuse the playground from the Toolbar directory */} +import Toolbar from '@site/static/usage/v9/toolbar/progress-bars/index.md'; @@ -58,21 +58,21 @@ import Toolbar from '@site/static/usage/v8/toolbar/progress-bars/index.md'; ### Colors -import Colors from '@site/static/usage/v8/progress-bar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/progress-bar/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/progress-bar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/progress-bar/theming/css-properties/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v8/progress-bar/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md'; diff --git a/docs/api/radio-group.md b/docs/api/radio-group.md index d8d678a0a1a..30d64964082 100644 --- a/docs/api/radio-group.md +++ b/docs/api/radio-group.md @@ -1,12 +1,12 @@ --- title: "ion-radio-group" --- -import Props from '@ionic-internal/component-api/v8/radio-group/props.md'; -import Events from '@ionic-internal/component-api/v8/radio-group/events.md'; -import Methods from '@ionic-internal/component-api/v8/radio-group/methods.md'; -import Parts from '@ionic-internal/component-api/v8/radio-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/radio-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/radio-group/slots.md'; +import Props from '@ionic-internal/component-api/v9/radio-group/props.md'; +import Events from '@ionic-internal/component-api/v9/radio-group/events.md'; +import Methods from '@ionic-internal/component-api/v9/radio-group/methods.md'; +import Parts from '@ionic-internal/component-api/v9/radio-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/radio-group/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/radio-group/slots.md'; ion-radio-group: Radio Button Group Usage for Ionic Apps @@ -15,9 +15,7 @@ import Slots from '@ionic-internal/component-api/v8/radio-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -ラジオ・グループは、[ラジオ](./radio)のグループのためのコンテナです。ラジオグループは、ユーザーがラジオボタンを1つだけ選択できるようにします。ラジオ・グループに属するラジオ・ボタンを1つチェックすると、同じグループ内で以前にチェックされたラジオ・ボタンのチェックは解除されます。ラジオ・グループの使用例については、[radio](./radio)のドキュメントを参照してください。 - +ラジオグループは、[ラジオボタン](./radio)のグループのコンテナです。ユーザーは、セット内のラジオボタンを最大で1つだけ選択できます。ラジオグループに属する1つのラジオボタンをチェックすると、同じグループ内で以前にチェックされたラジオボタンはすべてチェック解除されます。ラジオグループの使用例については、[ラジオ](./radio)のドキュメントを参照してください。 ## Interfaces @@ -40,7 +38,6 @@ interface RadioGroupCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/radio.md b/docs/api/radio.md index 44629c81f14..8e0bfaef2fc 100644 --- a/docs/api/radio.md +++ b/docs/api/radio.md @@ -1,12 +1,12 @@ --- title: "ion-radio" --- -import Props from '@ionic-internal/component-api/v8/radio/props.md'; -import Events from '@ionic-internal/component-api/v8/radio/events.md'; -import Methods from '@ionic-internal/component-api/v8/radio/methods.md'; -import Parts from '@ionic-internal/component-api/v8/radio/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/radio/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/radio/slots.md'; +import Props from '@ionic-internal/component-api/v9/radio/props.md'; +import Events from '@ionic-internal/component-api/v9/radio/events.md'; +import Methods from '@ionic-internal/component-api/v9/radio/methods.md'; +import Parts from '@ionic-internal/component-api/v9/radio/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/radio/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/radio/slots.md'; ion-radio: Radio Component for iOS and Android @@ -24,7 +24,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/radio/basic/index.md'; +import Basic from '@site/static/usage/v9/radio/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v8/radio/basic/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルをコントロールに対してどのように配置するかを制御できます。 このプロパティはフレックスボックスの `flex-direction` プロパティを反映しています。 -import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/radio/label-placement/index.md'; @@ -40,7 +40,7 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md ラベルの配置に関係なく、長いテキストはデフォルトで折り返されません。ラジオの幅が制約されている場合、オーバーフローしたテキストは省略記号で切り詰められます。ラジオテキストの周りのラッパーに`ion-text-wrap`クラスを追加するか、`::part()`セレクタを使用して`label`シャドウパーツをスタイリングすることで、テキストの折り返しを有効にできます。 -import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md'; +import LabelWrap from '@site/static/usage/v9/radio/label-wrap/index.md'; @@ -48,7 +48,7 @@ import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md'; By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property. -import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/index.md'; +import UsingComparewith from '@site/static/usage/v9/radio/using-comparewith/index.md'; @@ -60,7 +60,7 @@ import UsingComparewith from '@site/static/usage/v8/radio/using-comparewith/inde スタックされたラジオは、`alignment`プロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。 ::: -import Alignment from '@site/static/usage/v8/radio/alignment/index.md'; +import Alignment from '@site/static/usage/v9/radio/alignment/index.md'; @@ -68,7 +68,7 @@ import Alignment from '@site/static/usage/v8/radio/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。このプロパティはフレックスボックスの `justify-content` プロパティを反映しています。 -import Justify from '@site/static/usage/v8/radio/justify/index.md'; +import Justify from '@site/static/usage/v9/radio/justify/index.md'; @@ -80,7 +80,7 @@ import Justify from '@site/static/usage/v8/radio/justify/index.md'; デフォルトでは、一度選択されたラジオは選択を解除することができず、もう一度押すと選択されたままになります。この動作は、親ラジオグループの `allowEmptySelection` プロパティを使用することで変更することができ、ラジオを非選択にすることができます。 -import EmptySelection from '@site/static/usage/v8/radio/empty-selection/index.md'; +import EmptySelection from '@site/static/usage/v9/radio/empty-selection/index.md'; @@ -90,7 +90,7 @@ import EmptySelection from '@site/static/usage/v8/radio/empty-selection/index.md Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v8/radio/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/radio/helper-error/index.md'; @@ -99,19 +99,19 @@ import HelperError from '@site/static/usage/v8/radio/helper-error/index.md'; ### Colors -import Colors from '@site/static/usage/v8/radio/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/radio/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/radio/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/radio/theming/css-properties/index.md'; ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/radio/theming/css-shadow-parts/index.md'; diff --git a/docs/api/range.md b/docs/api/range.md index 063c9a07212..d072ff909ee 100644 --- a/docs/api/range.md +++ b/docs/api/range.md @@ -1,12 +1,12 @@ --- title: "ion-range" --- -import Props from '@ionic-internal/component-api/v8/range/props.md'; -import Events from '@ionic-internal/component-api/v8/range/events.md'; -import Methods from '@ionic-internal/component-api/v8/range/methods.md'; -import Parts from '@ionic-internal/component-api/v8/range/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/range/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/range/slots.md'; +import Props from '@ionic-internal/component-api/v9/range/props.md'; +import Events from '@ionic-internal/component-api/v9/range/events.md'; +import Methods from '@ionic-internal/component-api/v9/range/methods.md'; +import Parts from '@ionic-internal/component-api/v9/range/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/range/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/range/slots.md'; ion-range: Range Slider Knob Controls with Labels @@ -34,7 +34,7 @@ Rangeスライダは、スライダノブを動かして、ユーザーが値の 以下のデモでは、`labelPlacement` プロパティを使用して、範囲に対するラベルの位置を変更しています。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットでも使用できます。 -import LabelsPlayground from '@site/static/usage/v8/range/labels/index.md'; +import LabelsPlayground from '@site/static/usage/v9/range/labels/index.md'; @@ -42,7 +42,7 @@ import LabelsPlayground from '@site/static/usage/v8/range/labels/index.md'; プレーンテキストのラベルは `label` プロパティで渡すべきであるが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。 -import LabelSlotPlayground from '@site/static/usage/v8/range/label-slot/index.md'; +import LabelSlotPlayground from '@site/static/usage/v9/range/label-slot/index.md'; @@ -50,7 +50,7 @@ import LabelSlotPlayground from '@site/static/usage/v8/range/label-slot/index.md もし表示するラベルが必要ない場合でも、開発者は`aria-label`を与えるべきです。 -import NoVisibleLabel from '@site/static/usage/v8/range/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/range/no-visible-label/index.md'; @@ -60,7 +60,7 @@ import NoVisibleLabel from '@site/static/usage/v8/range/no-visible-label/index.m ドキュメントの方向性が左から右に設定されている場合、`start`位置にスロットされたコンテンツは範囲の左に表示され、`end`位置にスロットされたコンテンツは範囲の右に表示されます。右から左(rtl)の方向性の場合、`start`位置にスロットされたコンテンツは範囲の右側に表示され、`end`位置にスロットされたコンテンツは範囲の左側に表示されます。 -import DecorationsPlayground from '@site/static/usage/v8/range/slots/index.md'; +import DecorationsPlayground from '@site/static/usage/v9/range/slots/index.md'; @@ -68,7 +68,7 @@ import DecorationsPlayground from '@site/static/usage/v8/range/slots/index.md'; Dual knobs はユーザーが下限と上限の値を選択するために使用できる2つのknobsコントロールを導入しています。選択されると、Range は選択された上下限の値を含む [RangeValue](#rangevalue) を持つ `ionChange` イベントを発信します。 -import DualKnobs from '@site/static/usage/v8/range/dual-knobs/index.md'; +import DualKnobs from '@site/static/usage/v9/range/dual-knobs/index.md'; @@ -78,7 +78,7 @@ import DualKnobs from '@site/static/usage/v8/range/dual-knobs/index.md'; `pinFormatter` 関数を使用すると、開発者はユーザーに対してレンジの値のフォーマットをカスタマイズすることができます。 -import Pins from '@site/static/usage/v8/range/pins/index.md'; +import Pins from '@site/static/usage/v9/range/pins/index.md'; @@ -88,7 +88,7 @@ TicksはRange 上で利用可能な各値のインジケータを表示します snapsを有効にし、knobをドラッグして放すと、Range knobは最も近い利用可能な値にスナップします。 -import SnappingTicks from '@site/static/usage/v8/range/snapping-ticks/index.md'; +import SnappingTicks from '@site/static/usage/v9/range/snapping-ticks/index.md'; @@ -98,7 +98,7 @@ import SnappingTicks from '@site/static/usage/v8/range/snapping-ticks/index.md'; `ionChange` イベントはRange knobの値の変更を監視します。 -import IonChangeEvent from '@site/static/usage/v8/range/ion-change-event/index.md'; +import IonChangeEvent from '@site/static/usage/v9/range/ion-change-event/index.md'; @@ -106,7 +106,7 @@ import IonChangeEvent from '@site/static/usage/v8/range/ion-change-event/index.m マウスドラッグ、タッチジェスチャー、キーボード操作のいずれであっても、Range knobのドラッグが開始されると `ionKnobMoveStart` イベントが発行されます。逆に、`ionKnobMoveEnd`はRange knobがリリースされたときに発生します。両イベントは `RangeValue` タイプで発生し、`dualKnobs` プロパティと組み合わせて動作します。 -import IonKnobMoveEvent from '@site/static/usage/v8/range/ion-knob-move-event/index.md'; +import IonKnobMoveEvent from '@site/static/usage/v9/range/ion-knob-move-event/index.md'; @@ -116,7 +116,7 @@ import IonKnobMoveEvent from '@site/static/usage/v8/range/ion-knob-move-event/in Rangeには、アプリケーションのデザインに合わせてRangeコンポーネントの外観を素早くテーマ化してカスタマイズするための[CSS Variables](#css-custom-properties)が含まれています。 -import CSSProps from '@site/static/usage/v8/range/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/range/theming/css-properties/index.md'; @@ -126,7 +126,7 @@ Rangeには [CSS Shadow Parts](#css-shadow-parts) があり、Rangeコンポー When `dualKnobs` is enabled, additional Shadow Parts are exposed to allow each knob to be styled independently. These are available in two forms: **static identity parts** (`A` and `B`) and **dynamic position parts** (`lower` and `upper`). The A and B parts always refer to the same physical knobs, even if the knobs cross. In contrast, the lower and upper parts reflect the current value position and automatically swap if the knobs cross. This allows styling by consistent identity or by relative value within the range. -import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/range/theming/css-shadow-parts/index.md'; diff --git a/docs/api/refresher-content.md b/docs/api/refresher-content.md index d127d60354a..d7ad09c4fd9 100644 --- a/docs/api/refresher-content.md +++ b/docs/api/refresher-content.md @@ -1,20 +1,18 @@ --- title: "ion-refresher-content" --- -import Props from '@ionic-internal/component-api/v8/refresher-content/props.md'; -import Events from '@ionic-internal/component-api/v8/refresher-content/events.md'; -import Methods from '@ionic-internal/component-api/v8/refresher-content/methods.md'; -import Parts from '@ionic-internal/component-api/v8/refresher-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/refresher-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/refresher-content/slots.md'; +import Props from '@ionic-internal/component-api/v9/refresher-content/props.md'; +import Events from '@ionic-internal/component-api/v9/refresher-content/events.md'; +import Methods from '@ionic-internal/component-api/v9/refresher-content/methods.md'; +import Parts from '@ionic-internal/component-api/v9/refresher-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/refresher-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/refresher-content/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - リフレッシュコンテンツには、プルトゥリフレッシュ時に表示するテキスト、アイコン、スピナーが含まれます。Ionicは、プラットフォームに基づいて、プルアイコンとリフレッシュスピナーを表示します。ただし、デフォルトのアイコン、スピナー、テキストは、リフレッシュの状態に応じてカスタマイズできます。 -使用例については、[Refresher](/docs/api/refresher)ドキュメントを参照してください。 - +使用例については、[Refresher](/docs/api/refresher)のドキュメントを参照してください。 ## プロパティ diff --git a/docs/api/refresher.md b/docs/api/refresher.md index 8d7e12ea44d..0b7672da8b2 100644 --- a/docs/api/refresher.md +++ b/docs/api/refresher.md @@ -1,12 +1,12 @@ --- title: "ion-refresher" --- -import Props from '@ionic-internal/component-api/v8/refresher/props.md'; -import Events from '@ionic-internal/component-api/v8/refresher/events.md'; -import Methods from '@ionic-internal/component-api/v8/refresher/methods.md'; -import Parts from '@ionic-internal/component-api/v8/refresher/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/refresher/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/refresher/slots.md'; +import Props from '@ionic-internal/component-api/v9/refresher/props.md'; +import Events from '@ionic-internal/component-api/v9/refresher/events.md'; +import Methods from '@ionic-internal/component-api/v9/refresher/methods.md'; +import Parts from '@ionic-internal/component-api/v9/refresher/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/refresher/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/refresher/slots.md'; ion-refresher: Pull-to-Refresh Page Content on Ionic Apps @@ -15,41 +15,36 @@ import Slots from '@ionic-internal/component-api/v8/refresher/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - リフレッシャーは、コンテンツコンポーネントにプルトゥリフレッシュ機能を提供します。pull-to-refreshパターンは、ユーザがより多くのデータを取得するために、データのリストをプルダウンすることを可能にします。 データは、リフレッシャーの出力イベント中に変更する必要があります。非同期処理が完了し、リフレッシュが終了したら、リフレッシュに対して `complete()` を呼び出す必要があります。 - ## 基本的な使い方 -import Basic from '@site/static/usage/v8/refresher/basic/index.md'; +import Basic from '@site/static/usage/v9/refresher/basic/index.md'; - -## Pull プロパティ +## Pull プロパティ {/* #pull-properties */} リフレッシャーには、引くジェスチャーをカスタマイズするためのプロパティがいくつかあります。 `pullFactor` プロパティを設定すると引っ張るスピードを、`pullMin` プロパティを設定するとユーザが引っ張る最小距離を、`pullMax` プロパティを設定するとリフレッシャーが `refreshing` 状態になる前にユーザが引っ張る最大距離を変更することができます。 これらのプロパティは、[native refresher](#native-refreshers)が有効な場合には適用されません。 -import PullProperties from '@site/static/usage/v8/refresher/pull-properties/index.md'; +import PullProperties from '@site/static/usage/v9/refresher/pull-properties/index.md'; - -## カスタムリフレッシャーコンテンツ +## カスタムリフレッシャーコンテンツ {/* #custom-refresher-content */} デフォルトのアイコン、スピナー、テキストは、リフレッシャーの状態が `pulling` か `refreshing` かによって、[リフレッシャーコンテンツ](./refresher-content) 上でカスタマイズすることができます。 `pullingIcon`を設定すると、[native refresher](#native-refreshers)が無効になります。 -import CustomContent from '@site/static/usage/v8/refresher/custom-content/index.md'; +import CustomContent from '@site/static/usage/v9/refresher/custom-content/index.md'; - ## Native Refreshers iOSとAndroidの両プラットフォームは、pull-to-refreshにネイティブのような流動的な感覚を与えるために、それぞれのデバイスが公開するプロパティを使用するリフレッシュ機能を提供します。 @@ -58,10 +53,9 @@ iOSとMaterial Designのネイティブリフレッシュ機能は、Ionicのデ ネイティブのリフレッシャーでは、マテリアルデザイン用の `circular` スピナーを使用しますが、iOS では `lines` スピナーを使用します。iOSでは、ティックマークはページが下に引っ張られるにつれて徐々に表示されます。 -[Pullプロパティ](#pull-properties)、`closeDuration`、`snapbackDuration`のような特定のリフレッシャープロパティは、ネイティブリフレッシャーの多くがスクロールベースであるため、互換性がありません。サポートされていないプロパティの詳細については、[Properties](#properties)を参照してください。 - -[リフレッシュコンテンツ](#custom-refresher-content)の `pullingIcon` を任意のアイコンまたはスピナーに設定することで、ネイティブリフレッシュモードを無効にすることができます。使用可能な値については、[Ionicons](https://ionic.io/ionicons) および [Spinner](./spinner) のドキュメントを参照してください。 +[プルプロパティ](#pull-properties)、`closeDuration` および `snapbackDuration` などの特定のリフレッシャーのプロパティは、ネイティブリフレッシャーの多くがスクロールベースであるため、互換性がありません。サポートされていないプロパティの詳細については、[プロパティ](#properties)を参照してください。 +ネイティブのリフレッシャーは、[リフレッシャーコンテンツ](#custom-refresher-content)の`pullingIcon`を任意のアイコンまたはスピナーに設定することで無効にできます。許可されている値については、[Ionicons](https://ionic.io/ionicons)および[Spinner](./spinner)のドキュメントを参照してください。 ## Usage with Virtual Scroll @@ -89,16 +83,15 @@ Developers should apply the following CSS to the scrollable container. This CSS } ``` -import CustomScrollTarget from '@site/static/usage/v8/refresher/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/refresher/custom-scroll-target/index.md'; - ## 高度な使用法 リフレッシャーはどのようなタイプのコンテンツでも使用できますが、ネイティブアプリでよくある使用例は、更新時に更新されるデータのリストを表示することです。以下の例では、アプリはデータのリストを生成し、更新が完了したときにリストの先頭にデータを追加します。実際のアプリでは、ネットワークまたはデータベース呼び出しによってリクエストを送信した後に、データを受信して更新します。 -import Advanced from '@site/static/usage/v8/refresher/advanced/index.md'; +import Advanced from '@site/static/usage/v9/refresher/advanced/index.md'; @@ -110,7 +103,7 @@ The `ionPullStart` event is emitted when the user begins a pull gesture. This ev The `ionPullEnd` event is emitted when the refresher returns to an inactive state, with a reason property of `'complete'` or `'cancel'` indicating whether the refresh operation completed successfully or was canceled. -import PullStartEndEvents from '@site/static/usage/v8/refresher/pull-start-end-events/index.md'; +import PullStartEndEvents from '@site/static/usage/v9/refresher/pull-start-end-events/index.md'; @@ -154,7 +147,7 @@ interface RefresherPullEndCustomEvent extends CustomEvent { } ``` -## プロパティ +## プロパティ {/* #properties */} ## イベント diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md index 5b3ef9cbfc5..1e6cf0ea1c3 100644 --- a/docs/api/reorder-group.md +++ b/docs/api/reorder-group.md @@ -1,12 +1,12 @@ --- title: "ion-reorder-group" --- -import Props from '@ionic-internal/component-api/v8/reorder-group/props.md'; -import Events from '@ionic-internal/component-api/v8/reorder-group/events.md'; -import Methods from '@ionic-internal/component-api/v8/reorder-group/methods.md'; -import Parts from '@ionic-internal/component-api/v8/reorder-group/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/reorder-group/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md'; +import Props from '@ionic-internal/component-api/v9/reorder-group/props.md'; +import Events from '@ionic-internal/component-api/v9/reorder-group/events.md'; +import Methods from '@ionic-internal/component-api/v9/reorder-group/methods.md'; +import Parts from '@ionic-internal/component-api/v9/reorder-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/reorder-group/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/reorder-group/slots.md'; ion-reorder-group: Wrapper Component for Reorder Items @@ -15,11 +15,9 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Reorder groupは、[reorder](./reorder)コンポーネントを使用するアイテムのコンテナです。ユーザーがアイテムをドラッグしてドロップすると、`ionReorderEnd`イベントが発行されます。このイベントのハンドラを実装し、`complete`メソッドを呼び出す必要があります。 -`ionReorderEnd`イベントの`detail`プロパティには、`from`と`to`のインデックスを含む、reorder操作に関するすべての関連情報が含まれています。reorderのコンテキストでは、アイテムはインデックス`from`からインデックス`to`に移動します。reorder groupの使用例については、[reorder](./reorder)ドキュメントを参照してください。 - +`ionReorderEnd` イベントの `detail` プロパティには、`from` および `to` インデックスを含む、並べ替え操作に関するすべての関連情報が含まれています。並べ替えの文脈では、項目は `to` インデックスに `from` 移動します。並べ替えグループの使用例については、[reorder](./reorder) ドキュメントを参照してください。 ## Interfaces @@ -88,7 +86,6 @@ interface ItemReorderCustomEvent extends CustomEvent { } ``` - ## プロパティ diff --git a/docs/api/reorder.md b/docs/api/reorder.md index e7b475daee4..2624c0d956f 100644 --- a/docs/api/reorder.md +++ b/docs/api/reorder.md @@ -1,12 +1,12 @@ --- title: "ion-reorder" --- -import Props from '@ionic-internal/component-api/v8/reorder/props.md'; -import Events from '@ionic-internal/component-api/v8/reorder/events.md'; -import Methods from '@ionic-internal/component-api/v8/reorder/methods.md'; -import Parts from '@ionic-internal/component-api/v8/reorder/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/reorder/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/reorder/slots.md'; +import Props from '@ionic-internal/component-api/v9/reorder/props.md'; +import Events from '@ionic-internal/component-api/v9/reorder/events.md'; +import Methods from '@ionic-internal/component-api/v9/reorder/methods.md'; +import Parts from '@ionic-internal/component-api/v9/reorder/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/reorder/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/reorder/slots.md'; ion-reorder: Drag and Drop Icon to Reorder Items @@ -27,7 +27,7 @@ Reorderは、アイテムをドラッグ＆ドロップするために使用さ Reorderの最も基本的な例は、アイテムの中にスロットを入れることです。デフォルトでは、reorder groupのreorder機能は無効になっています。reorder groupの `disabled` プロパティを `false` に設定することで有効にすることができます。Reorderアイコンを使ってアイテムをドラッグ＆ドロップし、並び替えることができます。 -import Basic from '@site/static/usage/v8/reorder/basic/index.md'; +import Basic from '@site/static/usage/v9/reorder/basic/index.md'; @@ -36,7 +36,7 @@ import Basic from '@site/static/usage/v8/reorder/basic/index.md'; 場合によっては、並べ替えの機能を切り替えるオプションが欲しいかもしれない。これは、関数や変数に基づいて `disabled` プロパティをリアクティブにすることで実現できます。 -import TogglingDisabled from '@site/static/usage/v8/reorder/toggling-disabled/index.md'; +import TogglingDisabled from '@site/static/usage/v9/reorder/toggling-disabled/index.md'; @@ -45,7 +45,7 @@ import TogglingDisabled from '@site/static/usage/v8/reorder/toggling-disabled/in Reorderコンポーネントは、iOSでは3行、Material Designでは2行のReorderアイコンを使用しています。これは、利用可能なIoniconのいずれかを使って、Reorderの中に[Icon](https://ionic.io/ionicons)コンポーネントを追加することでカスタマイズできます。 -import CustomIcon from '@site/static/usage/v8/reorder/custom-icon/index.md'; +import CustomIcon from '@site/static/usage/v9/reorder/custom-icon/index.md'; @@ -54,7 +54,7 @@ import CustomIcon from '@site/static/usage/v8/reorder/custom-icon/index.md'; 並び替えは、項目を囲むラッパーとして使うこともできます。下の項目のどこかをクリックし、ドラッグすると、リストの順番を入れ替えることができます。 -import Wrapper from '@site/static/usage/v8/reorder/wrapper/index.md'; +import Wrapper from '@site/static/usage/v9/reorder/wrapper/index.md'; @@ -69,7 +69,7 @@ import Wrapper from '@site/static/usage/v8/reorder/wrapper/index.md'; どのようなアプローチを取るにせよ、ループの中でアイテムを提供する場合は、アイテムを並べ替えるための安定したIDを提供する必要があります。つまり、Angularでは `trackBy` を使用し、ReactとVueでは `key` を使用します。 -import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md'; +import UpdatingData from '@site/static/usage/v9/reorder/updating-data/index.md'; @@ -81,7 +81,7 @@ The `ionReorderStart` event is emitted when the user begins a reorder gesture. T The `ionReorderEnd` event is emitted when the user completes the reorder gesture. This occurs when the user releases the item they are dragging, for example by lifting their finger on a touch screen or releasing the mouse button. The event includes the `from` and `to` indices of the item, as well as the `complete` method that should be called to finalize the reorder operation. The `from` index will always be the position of the item when the gesture started, while the `to` index will be its final position. This event will fire even if no items have changed position, in which case the `from` and `to` indices will be the same. -import ReorderStartEndEvents from '@site/static/usage/v8/reorder/reorder-start-end-events/index.md'; +import ReorderStartEndEvents from '@site/static/usage/v9/reorder/reorder-start-end-events/index.md'; @@ -93,7 +93,7 @@ The `ionReorderMove` event is emitted continuously during the reorder gesture as Do not call the `complete` method during the `ionReorderMove` event as it can break the gesture. ::: -import ReorderMoveEvent from '@site/static/usage/v8/reorder/reorder-move-event/index.md'; +import ReorderMoveEvent from '@site/static/usage/v9/reorder/reorder-move-event/index.md'; @@ -101,7 +101,7 @@ import ReorderMoveEvent from '@site/static/usage/v8/reorder/reorder-move-event/i Reorderを正しく動作させるには、スクロールコンテナが必要です。仮想スクロールソリューションを使用する場合は、カスタムスクロールターゲットを指定する必要があります。コンテンツのスクロールを無効にし、スクロールを担当する要素に `.ion-content-scroll-host` クラスを追加する必要があります。 -import CustomScrollTarget from '@site/static/usage/v8/reorder/custom-scroll-target/index.md'; +import CustomScrollTarget from '@site/static/usage/v9/reorder/custom-scroll-target/index.md'; diff --git a/docs/api/ripple-effect.md b/docs/api/ripple-effect.md index a64a3af8692..8b6a403c361 100644 --- a/docs/api/ripple-effect.md +++ b/docs/api/ripple-effect.md @@ -1,12 +1,12 @@ --- title: "ion-ripple-effect" --- -import Props from '@ionic-internal/component-api/v8/ripple-effect/props.md'; -import Events from '@ionic-internal/component-api/v8/ripple-effect/events.md'; -import Methods from '@ionic-internal/component-api/v8/ripple-effect/methods.md'; -import Parts from '@ionic-internal/component-api/v8/ripple-effect/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/ripple-effect/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/ripple-effect/slots.md'; +import Props from '@ionic-internal/component-api/v9/ripple-effect/props.md'; +import Events from '@ionic-internal/component-api/v9/ripple-effect/events.md'; +import Methods from '@ionic-internal/component-api/v9/ripple-effect/methods.md'; +import Parts from '@ionic-internal/component-api/v9/ripple-effect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/ripple-effect/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/ripple-effect/slots.md'; import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -25,7 +25,7 @@ ripple effectコンポーネントは、[Material Design ink ripple interaction ## 基本的な使い方 -import Basic from '@site/static/usage/v8/ripple-effect/basic/index.md'; +import Basic from '@site/static/usage/v9/ripple-effect/basic/index.md'; @@ -34,7 +34,7 @@ import Basic from '@site/static/usage/v8/ripple-effect/basic/index.md'; リップル効果には2つのタイプがある： `"bounded"` と `"unbounded"` です。デフォルトのタイプである `"bounded"` は、クリック位置から外側に波及効果を広げます。常に要素の中心から始まり、円形に広がる波及効果を追加するには、タイプを `"unbounded"` に設定します。 -import Type from '@site/static/usage/v8/ripple-effect/type/index.md'; +import Type from '@site/static/usage/v9/ripple-effect/type/index.md'; @@ -43,7 +43,7 @@ import Type from '@site/static/usage/v8/ripple-effect/type/index.md'; リップルはCSSで別の色にカスタマイズできます。デフォルトでは、波紋の色はテキストの色を継承するように設定されています。これはCSSの `color` を親または波紋エフェクト自体に設定することで変更できます。 -import Customizing from '@site/static/usage/v8/ripple-effect/customizing/index.md'; +import Customizing from '@site/static/usage/v9/ripple-effect/customizing/index.md'; diff --git a/docs/api/route-redirect.md b/docs/api/route-redirect.md index c70ffa3d00e..d9d08c51dc7 100644 --- a/docs/api/route-redirect.md +++ b/docs/api/route-redirect.md @@ -2,12 +2,12 @@ title: "ion-route-redirect" --- -import Props from '@ionic-internal/component-api/v8/route-redirect/props.md'; -import Events from '@ionic-internal/component-api/v8/route-redirect/events.md'; -import Methods from '@ionic-internal/component-api/v8/route-redirect/methods.md'; -import Parts from '@ionic-internal/component-api/v8/route-redirect/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/route-redirect/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/route-redirect/slots.md'; +import Props from '@ionic-internal/component-api/v9/route-redirect/props.md'; +import Events from '@ionic-internal/component-api/v9/route-redirect/events.md'; +import Methods from '@ionic-internal/component-api/v9/route-redirect/methods.md'; +import Parts from '@ionic-internal/component-api/v9/route-redirect/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/route-redirect/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/route-redirect/slots.md'; ion-route-redirect: Redirect 'from' a URL 'to' Another URL diff --git a/docs/api/route.md b/docs/api/route.md index b84642e2be1..18b17b95b30 100644 --- a/docs/api/route.md +++ b/docs/api/route.md @@ -4,12 +4,12 @@ title: "ion-route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/route/props.md'; -import Events from '@ionic-internal/component-api/v8/route/events.md'; -import Methods from '@ionic-internal/component-api/v8/route/methods.md'; -import Parts from '@ionic-internal/component-api/v8/route/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/route/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/route/slots.md'; +import Props from '@ionic-internal/component-api/v9/route/props.md'; +import Events from '@ionic-internal/component-api/v9/route/events.md'; +import Methods from '@ionic-internal/component-api/v9/route/methods.md'; +import Parts from '@ionic-internal/component-api/v9/route/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/route/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/route/slots.md'; ion-route: API Route Component for Ionic Framework Apps diff --git a/docs/api/router-link.md b/docs/api/router-link.md index 24b1dd26daf..d4cbe7fb354 100644 --- a/docs/api/router-link.md +++ b/docs/api/router-link.md @@ -2,12 +2,12 @@ title: "ion-router-link" --- -import Props from '@ionic-internal/component-api/v8/router-link/props.md'; -import Events from '@ionic-internal/component-api/v8/router-link/events.md'; -import Methods from '@ionic-internal/component-api/v8/router-link/methods.md'; -import Parts from '@ionic-internal/component-api/v8/router-link/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/router-link/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/router-link/slots.md'; +import Props from '@ionic-internal/component-api/v9/router-link/props.md'; +import Events from '@ionic-internal/component-api/v9/router-link/events.md'; +import Methods from '@ionic-internal/component-api/v9/router-link/methods.md'; +import Parts from '@ionic-internal/component-api/v9/router-link/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/router-link/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/router-link/slots.md'; ion-router-link: Navigate To a Specified Link @@ -18,13 +18,13 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -router linkコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、hrefで場所を、directionで遷移のアニメーションを指定することができます。 +ルーターリンクコンポーネントは、指定されたリンクに移動するために使用します。ブラウザのアンカータグと同様に、`href` で場所を、`direction` で遷移のアニメーションを指定できます。 :::note - Note: このコンポーネントは、vanilla と Stencil での JavaScriptプロジェクトでのみ使用してください。Angularプロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angularルータを使用してください。 +このコンポーネントは、Vanilla JavaScript と Stencil のプロジェクトでのみ使用してください。Angular プロジェクトでは、[`ion-router-outlet`](router-outlet.md) と Angular ルーターを使用してください。 ::: -詳細については、[Router](./router)ドキュメントを参照してください。 +詳細については、[ルーター](./router)のドキュメントを参照してください。 ## プロパティ @@ -41,5 +41,5 @@ router linkコンポーネントは、指定されたリンクに移動するた ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/router-outlet.md b/docs/api/router-outlet.md index b266dc40f27..a96299edb8d 100644 --- a/docs/api/router-outlet.md +++ b/docs/api/router-outlet.md @@ -2,12 +2,12 @@ title: "ion-router-outlet" --- -import Props from '@ionic-internal/component-api/v8/router-outlet/props.md'; -import Events from '@ionic-internal/component-api/v8/router-outlet/events.md'; -import Methods from '@ionic-internal/component-api/v8/router-outlet/methods.md'; -import Parts from '@ionic-internal/component-api/v8/router-outlet/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/router-outlet/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/router-outlet/slots.md'; +import Props from '@ionic-internal/component-api/v9/router-outlet/props.md'; +import Events from '@ionic-internal/component-api/v9/router-outlet/events.md'; +import Methods from '@ionic-internal/component-api/v9/router-outlet/methods.md'; +import Parts from '@ionic-internal/component-api/v9/router-outlet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/router-outlet/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/router-outlet/slots.md'; diff --git a/docs/api/router.md b/docs/api/router.md index 2af688b5b1d..ce7636757bf 100644 --- a/docs/api/router.md +++ b/docs/api/router.md @@ -2,16 +2,16 @@ title: "ion-router" --- -import Props from '@ionic-internal/component-api/v8/router/props.md'; -import Events from '@ionic-internal/component-api/v8/router/events.md'; -import Methods from '@ionic-internal/component-api/v8/router/methods.md'; -import Parts from '@ionic-internal/component-api/v8/router/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/router/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/router/slots.md'; +import Props from '@ionic-internal/component-api/v9/router/props.md'; +import Events from '@ionic-internal/component-api/v9/router/events.md'; +import Methods from '@ionic-internal/component-api/v9/router/methods.md'; +import Parts from '@ionic-internal/component-api/v9/router/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/router/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/router/slots.md'; ion-router: Router Component to Coordinate URL Navigation - + import EncapsulationPill from '@components/page/api/EncapsulationPill'; @@ -28,18 +28,28 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; アプリケーションはコードベースに単一の `ion-router` コンポーネントを持たなければなりません。 このコンポーネントは、ブラウザの履歴とのすべての対話を制御し、イベント・システムを介して更新を集約します。 -`ion-router` は、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` というIonicのナビゲーション機能のURL調整機能に過ぎません。 +`ion-router` は、`ion-tabs` と `ion-router-outlet` という Ionic のナビゲーションアウトレットのための URL コーディネーターです。 -つまり、 `ion-router` はDOMにアクセスすることはなく、コンポーネントを表示することも、何らかのライフサイクルイベントを発行することもなく、ブラウザのURLに基づいて、`ion-nav` と `ion-tabs` 、 `ion-router-outlet` に何をいつ「show」すべきかを指示するだけです。 +つまり、`ion-router` は DOM にアクセスせず、コンポーネントを表示したり、ライフサイクルイベントを発行したりすることもありません。ブラウザの URL に基づいて、`ion-tabs` と `ion-router-outlet` に何をいつ「show」すべきかを指示するだけです。 -コンポーネント(ロード/選択)とURLの間の関係を設定するために、`ion-router` はJSX/HTMLを使ってルートのツリーを定義する宣言的な構文を利用します。 +コンポーネント（ロードまたは選択）と URL の関係を設定するために、`ion-router` は JSX/HTML でルートツリーを定義する宣言的な構文を使用します。 ## 基本的な使い方 -import BasicExample from '@site/static/usage/v8/router/basic/index.md'; +import BasicExample from '@site/static/usage/v9/router/basic/index.md'; +## Using ion-nav within a Routed Page + +`ion-router` and [`ion-nav`](./nav.md) are separate systems. `ion-router` coordinates URL-based navigation through `ion-router-outlet`, while `ion-nav` manages a local stack that is independent of the URL. `ion-nav` does not integrate with `ion-router`: placing an `ion-nav` inside an `ion-router` does not turn it into a routed outlet, and pushing or popping views on an `ion-nav` never changes the URL. + +The two can still be composed. A routed page rendered by `ion-router-outlet` can host its own `ion-nav` for local, URL-less navigation within that page. In the example below, navigating to `/details` updates the URL, but stepping through the `ion-nav` inside that page does not. + +import NavWithinPageExample from '@site/static/usage/v9/router/nav-within-page/index.md'; + + + ## Interfaces ### RouterEventDetail diff --git a/docs/api/row.md b/docs/api/row.md index 1362477e3bd..8862a43b481 100644 --- a/docs/api/row.md +++ b/docs/api/row.md @@ -1,12 +1,12 @@ --- title: "ion-row" --- -import Props from '@ionic-internal/component-api/v8/row/props.md'; -import Events from '@ionic-internal/component-api/v8/row/events.md'; -import Methods from '@ionic-internal/component-api/v8/row/methods.md'; -import Parts from '@ionic-internal/component-api/v8/row/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/row/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/row/slots.md'; +import Props from '@ionic-internal/component-api/v9/row/props.md'; +import Events from '@ionic-internal/component-api/v9/row/events.md'; +import Methods from '@ionic-internal/component-api/v9/row/methods.md'; +import Parts from '@ionic-internal/component-api/v9/row/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/row/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/row/slots.md'; ion-row: Horizontal Row Components of the Grid System @@ -20,16 +20,12 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; Rowは[Grid](./grid)システムの水平方向の構成要素で、さまざまな数の [columns](./col)を含む。列が適切に配置されるようにします。 -詳しくは[grid](./grid)のドキュメントを参照してください。 - +詳細については、[グリッド](./grid)のドキュメントを参照してください。 ## Row Alignment デフォルトでは、列は行の高さ全体を埋めるように伸縮し、必要に応じて折り返されます。行は [Flexコンテナ](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container) なので、この動作をカスタマイズするために、行に適用できるいくつかの [CSS クラス](/docs/layout/css-utilities#flex-container-properties) が用意されています。 - - - ## プロパティ diff --git a/docs/api/searchbar.md b/docs/api/searchbar.md index 91f0db1d5d6..23615c3cc33 100644 --- a/docs/api/searchbar.md +++ b/docs/api/searchbar.md @@ -1,12 +1,12 @@ --- title: "ion-searchbar" --- -import Props from '@ionic-internal/component-api/v8/searchbar/props.md'; -import Events from '@ionic-internal/component-api/v8/searchbar/events.md'; -import Methods from '@ionic-internal/component-api/v8/searchbar/methods.md'; -import Parts from '@ionic-internal/component-api/v8/searchbar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/searchbar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/searchbar/slots.md'; +import Props from '@ionic-internal/component-api/v9/searchbar/props.md'; +import Events from '@ionic-internal/component-api/v9/searchbar/events.md'; +import Methods from '@ionic-internal/component-api/v9/searchbar/methods.md'; +import Parts from '@ionic-internal/component-api/v9/searchbar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/searchbar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/searchbar/slots.md'; ion-searchbar: Search Bar for Searching a Collection @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/searchbar/basic/index.md'; +import Basic from '@site/static/usage/v9/searchbar/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/searchbar/basic/index.md'; 検索バーのInputフィールドの左に表示される検索アイコンです。任意の [Ionicon](https://ionic.io/ionicons/) にカスタマイズすることが可能です。 -import SearchIcon from '@site/static/usage/v8/searchbar/search-icon/index.md'; +import SearchIcon from '@site/static/usage/v9/searchbar/search-icon/index.md'; @@ -40,7 +40,7 @@ import SearchIcon from '@site/static/usage/v8/searchbar/search-icon/index.md'; 検索バーに値があるとき、または検索バーのテキストフィールドに入力があったときに、クリアボタンが表示されます。クリアボタンをクリックすると、テキストフィールドは消去され、入力はフォーカスされたままになります。デフォルトでは、クリアボタンは検索バーをフォーカスしたときに表示されるように設定されていますが、常に表示する、または全く表示しないように設定することができます。また、クリアボタン内のアイコンは、任意の[Ionicon](https://ionic.io/ionicons/)にカスタマイズすることができます。 -import ClearButton from '@site/static/usage/v8/searchbar/clear-button/index.md'; +import ClearButton from '@site/static/usage/v9/searchbar/clear-button/index.md'; @@ -49,7 +49,7 @@ import ClearButton from '@site/static/usage/v8/searchbar/clear-button/index.md'; キャンセルボタンを有効にすると、クリックすると入力がクリアされ、フォーカスが失われます。デフォルトでは、キャンセルボタンは表示されないように設定されていますが、常に表示するように設定したり、検索バーにフォーカスが当たったときのみ表示するように設定したりすることができます。キャンセルボタンは `ios` モードではテキストとして、`md` モードではアイコンとして表示されます。テキストとアイコンはそれぞれ別のプロパティでカスタマイズでき、アイコンは任意の[Ionicon](https://ionic.io/ionicons/)を使用することができます。 -import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md'; +import CancelButton from '@site/static/usage/v9/searchbar/cancel-button/index.md'; @@ -58,8 +58,8 @@ import CancelButton from '@site/static/usage/v8/searchbar/cancel-button/index.md 検索バーは、ツールバーの中に配置されたときにネイティブに見えるようにスタイルされています。iOSでは、検索バーは、ページタイトルを含むツールバーの下にある、独自のツールバーに配置されるべきです。Material Designでは、検索バーは、独自のツールバーに永続的に表示されるか、ページタイトルを含むツールバーの上に展開されるかのいずれかです。 - -import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md'; +{/* Reuse the playground from the Toolbar directory */} +import Toolbar from '@site/static/usage/v9/toolbar/searchbars/index.md'; @@ -68,7 +68,7 @@ import Toolbar from '@site/static/usage/v8/toolbar/searchbars/index.md'; 検索バーにDebounceを設定して、`ionInput`イベントのトリガーを遅延させることができます。これは、入力に文字が入力されるたびにデータを要求するのではなく、要求を出すのを待つために使うことができるので、データを問い合わせるときに便利です。 -import Debounce from '@site/static/usage/v8/searchbar/debounce/index.md'; +import Debounce from '@site/static/usage/v9/searchbar/debounce/index.md'; @@ -77,7 +77,7 @@ import Debounce from '@site/static/usage/v8/searchbar/debounce/index.md'; ### Colors -import Colors from '@site/static/usage/v8/searchbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/searchbar/theming/colors/index.md'; @@ -85,7 +85,7 @@ import Colors from '@site/static/usage/v8/searchbar/theming/colors/index.md'; 検索バーは、スコープをつけてカプセル化されています。これは、実行時に各スタイルに追加のクラスを付加することで、CSSを自動的にスコープ化することを意味します。CSSでscopedセレクタを上書きするには、[higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) セレクタが必要です。そのため、クラスを追加してカスタマイズすることをお勧めします。 -import CSSProps from '@site/static/usage/v8/searchbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/searchbar/theming/css-properties/index.md'; diff --git a/docs/api/segment-button.md b/docs/api/segment-button.md index 16a31b30629..09b398b2545 100644 --- a/docs/api/segment-button.md +++ b/docs/api/segment-button.md @@ -1,12 +1,12 @@ --- title: "ion-segment-button" --- -import Props from '@ionic-internal/component-api/v8/segment-button/props.md'; -import Events from '@ionic-internal/component-api/v8/segment-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/segment-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/segment-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/segment-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/segment-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/segment-button/props.md'; +import Events from '@ionic-internal/component-api/v9/segment-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/segment-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/segment-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/segment-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/segment-button/slots.md'; ion-segment-button | Segment Button Icon and Segment Value @@ -23,7 +23,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/segment-button/basic/index.md'; +import Basic from '@site/static/usage/v9/segment-button/basic/index.md'; @@ -32,7 +32,7 @@ import Basic from '@site/static/usage/v8/segment-button/basic/index.md'; `layout`プロパティは、デフォルトで `"icon-top"` に設定されています。セグメントボタンにアイコンとラベルの両方がある場合、アイコンはラベルの上に表示されます。この動作は `layout` プロパティを `"icon-bottom"`, `"icon-start"`, `"icon-end"` に設定することで変更可能で、それぞれアイコンをラベルの下、ラベルの先頭（LTRでは左、RTLでは右）、ラベルの末尾（LTRでは右、RTLでは左）に表示することができます。 -import Layout from '@site/static/usage/v8/segment-button/layout/index.md'; +import Layout from '@site/static/usage/v9/segment-button/layout/index.md'; @@ -40,14 +40,14 @@ import Layout from '@site/static/usage/v8/segment-button/layout/index.md'; ## テーマ ### CSS Shadow Parts -import CSSParts from '@site/static/usage/v8/segment-button/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/segment-button/theming/css-shadow-parts/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/segment-button/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/segment-button/theming/css-properties/index.md'; diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md index 3c17b07eceb..5b641495dc3 100644 --- a/docs/api/segment-content.md +++ b/docs/api/segment-content.md @@ -2,12 +2,12 @@ title: "ion-segment-content" --- -import Props from '@ionic-internal/component-api/v8/segment-content/props.md'; -import Events from '@ionic-internal/component-api/v8/segment-content/events.md'; -import Methods from '@ionic-internal/component-api/v8/segment-content/methods.md'; -import Parts from '@ionic-internal/component-api/v8/segment-content/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/segment-content/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/segment-content/slots.md'; +import Props from '@ionic-internal/component-api/v9/segment-content/props.md'; +import Events from '@ionic-internal/component-api/v9/segment-content/events.md'; +import Methods from '@ionic-internal/component-api/v9/segment-content/methods.md'; +import Parts from '@ionic-internal/component-api/v9/segment-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/segment-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/segment-content/slots.md'; ion-segment-content: Display control element for swipeable segments @@ -18,18 +18,16 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single -[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation -for more information on how to use segment contents. +セグメントコンテンツは、スワイプ可能なセグメントを使用する際に子要素の表示を制御するためのラッパー要素です。セグメントコンテンツ要素は、[セグメント](./segment.md)にリンクされた単一の[セグメントビュー](./segment-view.md)インスタンスの子要素です。セグメントコンテンツの使用方法については、[スワイプ可能なセグメント](./segment.md#swipeable-segments)のドキュメントを参照してください。 ## Usage Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's [contentId property](./segment-button.md#properties). - +{/* Reuse swipeable segments playground */} -import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; +import Swipeable from '@site/static/usage/v9/segment/swipeable/index.md'; @@ -48,5 +46,5 @@ import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; ## CSS Custom Properties -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md index 5d0054c4ff8..d1c27406e48 100644 --- a/docs/api/segment-view.md +++ b/docs/api/segment-view.md @@ -2,12 +2,12 @@ title: "ion-segment-view" --- -import Props from '@ionic-internal/component-api/v8/segment-view/props.md'; -import Events from '@ionic-internal/component-api/v8/segment-view/events.md'; -import Methods from '@ionic-internal/component-api/v8/segment-view/methods.md'; -import Parts from '@ionic-internal/component-api/v8/segment-view/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/segment-view/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/segment-view/slots.md'; +import Props from '@ionic-internal/component-api/v9/segment-view/props.md'; +import Events from '@ionic-internal/component-api/v9/segment-view/events.md'; +import Methods from '@ionic-internal/component-api/v9/segment-view/methods.md'; +import Parts from '@ionic-internal/component-api/v9/segment-view/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/segment-view/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/segment-view/slots.md'; ion-segment-view: Controller element for swipeable segments @@ -18,8 +18,8 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments. -See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views. +セグメントビューは、スワイプ可能なセグメントを使用する際に、[セグメントコンテンツ](./segment-content.md)のグループを[セグメント](./segment.md)にリンクするラッパー要素です。 +セグメントビューの使用方法については、[スワイプ可能なセグメント](./segment.md#swipeable-segments)のドキュメントを参照してください。 ## Properties @@ -36,5 +36,5 @@ See our [swipeable segments](./segment.md#swipeable-segments) documentation for ## CSS Custom Properties -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/segment.md b/docs/api/segment.md index 9be86bcbb6a..c2c949d9b94 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -1,12 +1,12 @@ --- title: "ion-segment" --- -import Props from '@ionic-internal/component-api/v8/segment/props.md'; -import Events from '@ionic-internal/component-api/v8/segment/events.md'; -import Methods from '@ionic-internal/component-api/v8/segment/methods.md'; -import Parts from '@ionic-internal/component-api/v8/segment/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/segment/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/segment/slots.md'; +import Props from '@ionic-internal/component-api/v9/segment/props.md'; +import Events from '@ionic-internal/component-api/v9/segment/events.md'; +import Methods from '@ionic-internal/component-api/v9/segment/methods.md'; +import Parts from '@ionic-internal/component-api/v9/segment/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/segment/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/segment/slots.md'; ion-segment: API Documentation for Segmented Controls @@ -27,7 +27,7 @@ Segmentsは、関連するボタンのグループを水平方向の行に表示 セグメントは[セグメントボタン](./segment-button)からなり、各ボタンには`value`プロパティが設定されています。セグメントの `value` プロパティをボタンの値と一致させることで、そのボタンを選択することができます。また、セグメントを無効にすることで、ユーザがセグメントと対話できないようにすることができます。 -import Basic from '@site/static/usage/v8/segment/basic/index.md'; +import Basic from '@site/static/usage/v9/segment/basic/index.md'; @@ -36,15 +36,15 @@ import Basic from '@site/static/usage/v8/segment/basic/index.md'; デフォルトでは、セグメントはスクロールできません。各セグメントボタンの幅は固定で、セグメントボタンの数を画面幅で割って幅を決定します。これにより、各セグメントボタンがスクロールすることなく画面に表示されることが保証されます。そのため、ラベルが長いセグメントボタンは、一部が切れてしまうことがあります。これを避けるために、短いラベルを使用するか、`scrollable` プロパティを `true` に設定してスクロール可能なセグメントに変更することをお勧めします。これはセグメントを水平方向にスクロールさせますが、各セグメントボタンの幅を変更することができます。 -import Scrollable from '@site/static/usage/v8/segment/scrollable/index.md'; +import Scrollable from '@site/static/usage/v9/segment/scrollable/index.md'; ## Segments in Toolbars - -import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; +{/* Reuse the playground from the Toolbar directory */} +import Toolbar from '@site/static/usage/v9/toolbar/segments/index.md'; @@ -60,7 +60,7 @@ import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; スワイプ可能なセグメントを使用する場合、セグメントボタンを無効にすることはできません。 ::: -import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; +import Swipeable from '@site/static/usage/v9/segment/swipeable/index.md'; @@ -68,13 +68,13 @@ import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; ### Colors -import Colors from '@site/static/usage/v8/segment/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/segment/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/segment/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/segment/theming/css-properties/index.md'; diff --git a/docs/api/select-option.md b/docs/api/select-option.md index f5852382a7c..045a8896d8a 100644 --- a/docs/api/select-option.md +++ b/docs/api/select-option.md @@ -1,12 +1,12 @@ --- title: "ion-select-option" --- -import Props from '@ionic-internal/component-api/v8/select-option/props.md'; -import Events from '@ionic-internal/component-api/v8/select-option/events.md'; -import Methods from '@ionic-internal/component-api/v8/select-option/methods.md'; -import Parts from '@ionic-internal/component-api/v8/select-option/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/select-option/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/select-option/slots.md'; +import Props from '@ionic-internal/component-api/v9/select-option/props.md'; +import Events from '@ionic-internal/component-api/v9/select-option/events.md'; +import Methods from '@ionic-internal/component-api/v9/select-option/methods.md'; +import Parts from '@ionic-internal/component-api/v9/select-option/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/select-option/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/select-option/slots.md'; ion-select-option: Option For a Select Dialog @@ -17,12 +17,10 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - セレクトオプションは、セレクトの子要素となるコンポーネントです。定義された各オプションは、Selectダイアログに渡され表示されます。 使用例については、[Select](./select)のドキュメントを参照してください。 - ## プロパティ @@ -38,5 +36,5 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/select.md b/docs/api/select.md index ec45b02e90e..8cc0e36747b 100644 --- a/docs/api/select.md +++ b/docs/api/select.md @@ -1,12 +1,12 @@ --- title: "ion-select" --- -import Props from '@ionic-internal/component-api/v8/select/props.md'; -import Events from '@ionic-internal/component-api/v8/select/events.md'; -import Methods from '@ionic-internal/component-api/v8/select/methods.md'; -import Parts from '@ionic-internal/component-api/v8/select/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/select/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/select/slots.md'; +import Props from '@ionic-internal/component-api/v9/select/props.md'; +import Events from '@ionic-internal/component-api/v9/select/events.md'; +import Methods from '@ionic-internal/component-api/v9/select/methods.md'; +import Parts from '@ionic-internal/component-api/v9/select/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/select/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/select/slots.md'; ion-select: Select One or Multiple Value Boxes or Placeholders @@ -38,7 +38,7 @@ selectは、子要素 `` とともに使用する必要があ ラベルはデフォルトではコンテンツの幅を占めます。開発者は `labelPlacement` プロパティを使用して、コントロールに対するラベルの配置を制御することができます。ここでは `label` プロパティを使用しているが、`labelPlacement` は `label` スロットと一緒に使用することもできます。 -import LabelPlacement from '@site/static/usage/v8/select/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/select/label-placement/index.md'; @@ -46,7 +46,7 @@ import LabelPlacement from '@site/static/usage/v8/select/label-placement/index.m プレーンテキストのラベルは `label` プロパティで渡すべきですが、カスタムHTMLが必要な場合は、代わりに `label` スロットで渡すことができます。 -import LabelSlot from '@site/static/usage/v8/select/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/select/label-slot/index.md'; @@ -54,7 +54,7 @@ import LabelSlot from '@site/static/usage/v8/select/label-slot/index.md'; 表示するラベルが必要ない場合でも、開発者は`aria-label`を指定する必要があります -import NoVisibleLabel from '@site/static/usage/v8/select/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/select/no-visible-label/index.md'; @@ -64,7 +64,7 @@ import NoVisibleLabel from '@site/static/usage/v8/select/no-visible-label/index. 単一選択時のキーボード操作については、以下の[キーボード操作](#single-selection-1)のセクションで説明しています。 -import SingleSelectionExample from '@site/static/usage/v8/select/basic/single-selection/index.md'; +import SingleSelectionExample from '@site/static/usage/v9/select/basic/single-selection/index.md'; @@ -80,44 +80,44 @@ select に `multiple` 属性を追加することで、ユーザは複数のオ 複数選択時のキーボード操作については、以下の[キーボード操作](#multiple-selection-1)のセクションで説明しています。 -import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multiple-selection/index.md'; +import MultipleSelectionExample from '@site/static/usage/v9/select/basic/multiple-selection/index.md'; -## インターフェイス +## インターフェイス {/* #interfaces */} デフォルトでは、selectは [ion-alert](alert.md) を使用してアラートのオプションのオーバーレイを開きます。インターフェイスは、`interface` プロパティに `action-sheet`、`popover`、`modal` を渡すことで、[ion-action-sheet](action-sheet.md)、[ion-popover](popover.md)、[ion-modal](modal.md) を使用するように変更することができます。それぞれのインターフェースの制限事項については、他のセクションを参照してください。 ### Alert -import AlertExample from '@site/static/usage/v8/select/basic/single-selection/index.md'; +import AlertExample from '@site/static/usage/v9/select/basic/single-selection/index.md'; ### Action Sheet -import ActionSheetExample from '@site/static/usage/v8/select/interfaces/action-sheet/index.md'; +import ActionSheetExample from '@site/static/usage/v9/select/interfaces/action-sheet/index.md'; ### Popover -import PopoverExample from '@site/static/usage/v8/select/interfaces/popover/index.md'; +import PopoverExample from '@site/static/usage/v9/select/interfaces/popover/index.md'; ### Modal -import ModalExample from '@site/static/usage/v8/select/interfaces/modal/index.md'; +import ModalExample from '@site/static/usage/v9/select/interfaces/modal/index.md'; ## Responding to Interaction -Select とユーザのインタラクションを処理する主な方法は、 `ionChange` イベント、 `ionDismiss` イベント、 `ionCancel` イベントです。これらのイベントやselectが発生するその他のイベントの詳細については、[Events](#events)を参照してください。 +Selectとのユーザーインタラクションを処理する主な方法は、`ionChange`、`ionDismiss`、および`ionCancel`イベントです。これらおよびSelectが発火する他のイベントの詳細については、[Events](#events)を参照してください。 -import RespondingToInteractionExample from '@site/static/usage/v8/select/basic/responding-to-interaction/index.md'; +import RespondingToInteractionExample from '@site/static/usage/v9/select/basic/responding-to-interaction/index.md'; @@ -129,21 +129,21 @@ Selectの値にオブジェクトを使用する場合、Selectの値のidentity ### Using compareWith -import UsingCompareWithExample from '@site/static/usage/v8/select/objects-as-values/using-comparewith/index.md'; +import UsingCompareWithExample from '@site/static/usage/v9/select/objects-as-values/using-comparewith/index.md'; ### Object Values and Multiple Selection -import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v8/select/objects-as-values/multiple-selection/index.md'; +import ObjectValuesAndMultipleSelectionExample from '@site/static/usage/v9/select/objects-as-values/multiple-selection/index.md'; ## Justification - + 開発者は `justify` プロパティを使って、ラベルとコントロールの行の詰め方をコントロールすることができる。 -import JustifyExample from '@site/static/usage/v8/select/justify/index.md'; +import JustifyExample from '@site/static/usage/v9/select/justify/index.md'; @@ -157,7 +157,7 @@ iOSでは、Selectの `mode` を `md` に設定することで、Filled Selects コンポーネント間のスタイリングの競合のため、`fill`を使用するセレクトは`ion-item`内で使用すべきではありません。 ::: -import FillExample from '@site/static/usage/v8/select/fill/index.md'; +import FillExample from '@site/static/usage/v9/select/fill/index.md'; @@ -170,7 +170,7 @@ import FillExample from '@site/static/usage/v8/select/fill/index.md'; `modal`インターフェースには、ヘッダーに単一の`Close`ボタンがあります。このボタンは、モーダルを閉じることのみを担当します。 このボタンをクリックした後、または代替方法でモーダルが閉じられた場合でも、行われた選択は保持されます。 -import ButtonTextExample from '@site/static/usage/v8/select/customization/button-text/index.md'; +import ButtonTextExample from '@site/static/usage/v9/select/customization/button-text/index.md'; @@ -178,12 +178,11 @@ import ButtonTextExample from '@site/static/usage/v8/select/customization/button selectはalert、action sheet、popover、modalの各インターフェイスを使用するので、`interfaceOptions`プロパティを通してこれらのコンポーネントにオプションを渡すことができます。これを使用して、カスタムヘッダー、サブヘッダー、CSS クラスなどを渡すことができます。 -各インタフェースが受け付けるプロパティについては、[ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), [ion-modal docs](modal.md) を参照してください。 -を参照してください。 +各インターフェースが受け入れるプロパティについては、[ion-alertドキュメント](alert.md)、[ion-action-sheetドキュメント](action-sheet.md)、[ion-popoverドキュメント](popover.md)、および[ion-modalドキュメント](modal.md)を参照してください。 注意: `alert` インターフェイスでは、`interfaceOptions` は `inputs` や `buttons` を上書きしません。 -import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/interface-options/index.md'; +import InterfaceOptionsExample from '@site/static/usage/v9/select/customization/interface-options/index.md'; @@ -192,15 +191,31 @@ import InterfaceOptionsExample from '@site/static/usage/v8/select/customization/ `start`と`end`スロットは、セレクトの両側にアイコン、ボタン、またはプレフィックス/サフィックステキストを配置するために使用できます。スロットコンテンツがクリックされた場合、セレクトは開きません。 :::note -ほとんどの場合、これらのスロットに配置された[Icon](./icon.md)コンポーネントには`aria-hidden="true"`を設定すべきです。詳細については、[Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility)を参照してください。 +ほとんどの場合、これらのスロットに配置された[Icon](./icon.md)コンポーネントは`aria-hidden="true"`を持つべきです。詳細については、[Iconアクセシビリティドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照してください。 スロットコンテンツが操作対象である場合、[Button](./button.md)などのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。 ::: -import StartEndSlots from '@site/static/usage/v8/select/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/select/start-end-slots/index.md'; +## リッチコンテンツオプション + +:::important +select option のリッチコンテンツはデフォルトで無効です。[グローバル Ionic config](/docs/developing/config.md#global-config) で [`innerHTMLTemplatesEnabled`](/docs/developing/config.md#ionicconfig) を `true` に設定してください。無効な場合、option 内のマークアップはプレーンテキストとして扱われます。カスタム HTML を有効にする際のサニタイズについては、[セキュリティ](/docs/techniques/security.md)を参照してください。 +::: + +単一のテキストラベルに加えて、[Select Option](./select-option.md) では select インターフェースに HTML リッチコンテンツを含めることができます。名前付き slot を指定せずに option 内へ追加した要素は、デフォルト slot に配置されます。`start` と `end` slot は、デフォルト slot の両側に要素を配置します。`description` 属性を使用すると、ラベルの下に補足テキストを表示できます。 + +これは、閉じた状態のフィールドを装飾する `ion-select` の [Start と End Slot](#start-and-end-slots) とは別のものです。リッチコンテンツオプションは、select を開いた後のインターフェースに表示されます。 + +option を選択すると、閉じた状態のフィールドには option のテキストコンテンツだけがプレーンテキストとして表示されます。HTML マークアップは取り除かれ、`start`、`end` slot と `description` 属性は選択後の表示には含まれません。 + +import RichContentOptions from '@site/static/usage/v9/select/rich-content-options/index.md'; + + + ## カスタマイズ Selectコンポーネントには2つのユニットがあり、それぞれ別々にスタイルを設定する必要があります。 `ion-select`要素は、ビュー上で選択された値、ない場合はプレースホルダ、ドロップダウンのアイコンによって表現されます。インターフェイスは上記の[インターフェイス](#interfaces)セクションで定義されており、`ion-select`をクリックしたときに開くダイアログです。インターフェイスには `ion-select-option` 要素を追加することで定義されるすべてのオプションが含まれています。以下のセクションでは、これらのスタイリングの違いについて説明します。 @@ -211,13 +226,13 @@ Selectコンポーネントには2つのユニットがあり、それぞれ別 また、必要な[ブラウザサポート](https://caniuse.com/#feat=mdn-css_selectors_part)によっては、CSSのシャドウパーツを使用してセレクトのスタイルを設定することもできます。 `part` を使用することで、要素上の任意の CSS プロパティを対象とすることができることに注意してください。 -import StylingSelectExample from '@site/static/usage/v8/select/customization/styling-select/index.md'; +import StylingSelectExample from '@site/static/usage/v9/select/customization/styling-select/index.md'; ### セレクトインターフェースのスタイリング -インターフェイス・ダイアログのカスタマイズは、そのインターフェイスのドキュメントのスタイリングセクション（CSS shadow parts, CSS custom properties, and slots）に +インターフェイス・ダイアログのカスタマイズは、そのインターフェイスのドキュメントのスタイリングセクション（CSS Shadow Parts、CSS カスタムプロパティ、スロット）に 従って行ってください。 - [Alert](alert.md#css-shadow-parts) @@ -225,13 +240,13 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty - [Popover](popover.md#css-shadow-parts) - [Modal](modal.md#css-shadow-parts) -しかし、セレクト・オプションは、スタイルを簡単にするためにクラスを設定し、オーバーレイ・オプションにクラスを渡すことができます。オプションをカスタマイズする使用例については、[セレクト・オプションのドキュメント](select-option.md)を参照してください。 +ただし、Select Optionはスタイリングを容易にするためにクラスを設定し、オーバーレイオプションにクラスを渡すことができます。オプションのカスタマイズ例については、[Select Optionsドキュメント](select-option.md)を参照してください。 -### Custom Toggle Icons +### カスタム切り替えアイコン {/* #custom-toggle-icons */} 選択テキストの隣に表示されるアイコンは、`toggleIcon` プロパティと `expandedIcon` プロパティを使用して、任意の [Ionicon](https://ionic.io/ionicons) に設定することができます。 -import CustomToggleIconsExample from '@site/static/usage/v8/select/customization/custom-toggle-icons/index.md'; +import CustomToggleIconsExample from '@site/static/usage/v9/select/customization/custom-toggle-icons/index.md'; @@ -241,7 +256,7 @@ import CustomToggleIconsExample from '@site/static/usage/v8/select/customization 以下の例では[custom `toggleIcon`](#custom-toggle-icons)を使って、`ios`モードでのトグルアイコンの反転動作をより分かりやすく説明しています。 -import IconFlipBehaviorExample from '@site/static/usage/v8/select/customization/icon-flip-behavior/index.md'; +import IconFlipBehaviorExample from '@site/static/usage/v9/select/customization/icon-flip-behavior/index.md'; @@ -249,7 +264,7 @@ import IconFlipBehaviorExample from '@site/static/usage/v8/select/customization/ Typeaheadまたはオートコンプリート機能は、既存のIonicコンポーネントを使用して構築できます。利用可能なスクリーンスペースを最大限に活用するために、`ion-modal`を使用することをお勧めします。 -import TypeaheadExample from '@site/static/usage/v8/select/typeahead/index.md'; +import TypeaheadExample from '@site/static/usage/v9/select/typeahead/index.md'; @@ -259,11 +274,11 @@ import TypeaheadExample from '@site/static/usage/v8/select/typeahead/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v8/select/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/select/helper-error/index.md'; -## Interfaces +## インターフェイス ### SelectChangeEventDetail @@ -284,56 +299,57 @@ interface SelectCustomEvent extends CustomEvent { } ``` -## Accessibility +## アクセシビリティ + +### キーボード操作 -### Keyboard Interactions +Ionic のキーボード操作は、すべてのプラットフォームで一貫した体験を提供するため、iOS ネイティブの選択要素ではなく Web の実装パターンに従います。 -Ionic's keyboard interactions follow the implementation patterns of the web instead of the native iOS select for a consistent experience across all platforms. +次の条件を満たす場合、これらのキーボード操作はすべての `ion-select` 要素に適用されます。 -These keyboard interactions apply to all `ion-select` elements when the following conditions are met: -- The select is closed. -- The select is focused. -- The select is not disabled. +- 選択要素が閉じている。 +- 選択要素にフォーカスがある。 +- 選択要素が無効化されていない。 -| Key | Description | -| ------------------ | ------------------------------------------------------------ | -| Enter | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | -| Space | Opens the overlay and focuses on the first selected option. If there is no selected option, then it focuses on the first option. | +| キー | 説明 | +| ---------------- | ------------------------------------------------------------------------------------------------------------------ | +| Enter | オーバーレイを開き、最初に選択されているオプションにフォーカスします。選択がない場合は最初の項目に移動します。 | +| Space | オーバーレイを開き、最初に選択されているオプションにフォーカスします。選択がない場合は最初の項目に移動します。 | -#### Single Selection +#### 単一選択 {/* #single-selection-1 */} -Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/). +単一選択のキーボード操作は、[ARIA のラジオボタン実装パターン](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)に従います。 これらのキーボード操作は、オーバーレイが表示され、フォーカスされている場合に`ion-action-sheet`、`ion-alert`、`ion-popover`、および`ion-modal`要素に適用されます。 -| Key | Description | -| --------------------- | ------------------------------------------------------------ | -| ArrowDown | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | -| ArrowLeft | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | -| ArrowRight | Focuses and selects the next option in the list. If there is no next option, selection will cycle to the first option. | -| ArrowUp | Focuses and selects the previous option in the list. If there is no previous option, selection will cycle to the last option. | -| Enter | If an option is focused, it will select the option. Overlays **without** an 'OK' button will commit the value immediately, dismiss the overlay and return focus to the `ion-select` element.

If the 'OK' button is focused, it will save the user's selection, dismiss the overlay and return focus to the `ion-select` element. | -| Escape | Closes the overlay without changing the submitted option. Returns the focus back to the `ion-select` element. | -| Space | If the focused radio button is not checked, unchecks the currently checked radio button and checks the focused radio button. Otherwise, does nothing. If the overlay does not have an 'OK' button, the value will be committed immediately and the overlay will dismiss. | -| Tab | Moves focus to the next focusable element (cancel button, 'OK' button, or either the selection or the first option) on the overlay. If the next focusable element is an option, then it will focus on the selected option, otherwise it will focus the first option. | +| キー | 説明 | +| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| ArrowDown | リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、先頭に戻ります。 | +| ArrowLeft | リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、末尾に移動します。 | +| ArrowRight | リスト内の次のオプションにフォーカスして選択します。次のオプションがない場合は、先頭に戻ります。 | +| ArrowUp | リスト内の前のオプションにフォーカスして選択します。前のオプションがない場合は、末尾に移動します。 | +| Enter | オプションにフォーカスがある場合は、そのオプションを選択します。「OK」ボタンが**ない**オーバーレイでは、値をすぐに確定し、オーバーレイを閉じて `ion-select` 要素へフォーカスを戻します。

「OK」ボタンにフォーカスがある場合は、選択内容を保存してオーバーレイを閉じ、`ion-select` 要素へフォーカスを戻します。 | +| Escape | 選択内容を変更せずにオーバーレイを閉じ、`ion-select` 要素へフォーカスを戻します。 | +| Space | フォーカス中のラジオボタンが未選択なら、現在の選択を解除してそのボタンを選択します。すでに選択されている場合は何もしません。「OK」ボタンがないオーバーレイでは、値をすぐに確定してオーバーレイを閉じます。 | +| Tab | オーバーレイ上の次のフォーカス可能な要素（キャンセルボタン、「OK」ボタン、選択中または最初のオプション）へ移動します。次の要素がオプションなら選択中のオプションに、そうでなければ最初のオプションにフォーカスします。 | -#### Multiple Selection +#### 複数選択 {/* #multiple-selection-1 */} -Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/). +複数選択のキーボード操作は、[ARIA のチェックボックス実装パターン](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)に従います。 これらのキーボード操作は、オーバーレイが表示され、複数選択が有効になっている場合に`ion-alert`、`ion-popover`、および`ion-modal`要素に適用されます。 -| Key | Description | -| ------------------ | ------------------------------------------------------------ | -| Enter | When the 'OK' button is focused, it will save the user's selection, dismiss the overlay, and return focus to the `ion-select` element. | -| Escape | Closes the overlay without changing the submitted option(s). Returns the focus back to the `ion-select` element. | -| Space | Selects or deselects the currently focused option. This does not deselect the other selected options. If the overlay does not have an 'OK' button, the value will be committed immediately. | -| Tab | Move focus to the next focusable element (cancel button, 'OK' button, or any of the options) on the overlay. If the next focusable element is the options list, then it should iterate through each option. | +| キー | 説明 | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Enter | 「OK」ボタンにフォーカスがある場合は、選択内容を保存してオーバーレイを閉じ、`ion-select` 要素へフォーカスを戻します。 | +| Escape | 選択内容を変更せずにオーバーレイを閉じ、`ion-select` 要素へフォーカスを戻します。 | +| Space | 現在フォーカスしているオプションを選択または選択解除します。他の選択済みオプションは解除しません。「OK」ボタンがないオーバーレイでは、値をすぐに確定します。 | +| Tab | オーバーレイ上の次のフォーカス可能な要素（キャンセルボタン、「OK」ボタン、いずれかのオプション）へ移動します。次の要素がオプションリストの場合は、各オプションを順に移動します。 | -## Properties +## プロパティ -## イベント +## イベント {/* #events */} ## メソッド @@ -342,7 +358,7 @@ Multiple selection keyboard interaction follows the [ARIA implementation pattern ## CSS Shadow Parts -## CSS カスタムプロパティ +## CSS カスタムプロパティ {/* #css-custom-properties */} ## Slots diff --git a/docs/api/skeleton-text.md b/docs/api/skeleton-text.md index 9fea21b3c84..d9d4a44720f 100644 --- a/docs/api/skeleton-text.md +++ b/docs/api/skeleton-text.md @@ -1,12 +1,12 @@ --- title: "ion-skeleton-text" --- -import Props from '@ionic-internal/component-api/v8/skeleton-text/props.md'; -import Events from '@ionic-internal/component-api/v8/skeleton-text/events.md'; -import Methods from '@ionic-internal/component-api/v8/skeleton-text/methods.md'; -import Parts from '@ionic-internal/component-api/v8/skeleton-text/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/skeleton-text/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/skeleton-text/slots.md'; +import Props from '@ionic-internal/component-api/v9/skeleton-text/props.md'; +import Events from '@ionic-internal/component-api/v9/skeleton-text/events.md'; +import Methods from '@ionic-internal/component-api/v9/skeleton-text/methods.md'; +import Parts from '@ionic-internal/component-api/v9/skeleton-text/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/skeleton-text/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/skeleton-text/slots.md'; ion-skeleton-text: Skeleton Loading Placeholder for Text @@ -23,7 +23,7 @@ Skeleton Textは、placeholderコンテンツをレンダリングするため ## 基本的な使い方 -import Basic from '@site/static/usage/v8/skeleton-text/basic/index.md'; +import Basic from '@site/static/usage/v9/skeleton-text/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/skeleton-text/basic/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/skeleton-text/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/skeleton-text/theming/css-properties/index.md'; diff --git a/docs/api/spinner.md b/docs/api/spinner.md index ddd3348563a..059150591a9 100644 --- a/docs/api/spinner.md +++ b/docs/api/spinner.md @@ -1,12 +1,12 @@ --- title: "ion-spinner" --- -import Props from '@ionic-internal/component-api/v8/spinner/props.md'; -import Events from '@ionic-internal/component-api/v8/spinner/events.md'; -import Methods from '@ionic-internal/component-api/v8/spinner/methods.md'; -import Parts from '@ionic-internal/component-api/v8/spinner/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/spinner/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/spinner/slots.md'; +import Props from '@ionic-internal/component-api/v9/spinner/props.md'; +import Events from '@ionic-internal/component-api/v9/spinner/events.md'; +import Methods from '@ionic-internal/component-api/v9/spinner/methods.md'; +import Parts from '@ionic-internal/component-api/v9/spinner/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/spinner/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/spinner/slots.md'; ion-spinner: Animated Spinner Icon Components and Properties @@ -25,7 +25,7 @@ Spinnerコンポーネントには、さまざまなアニメーションつき デフォルトのスピナーは、モードに基づいて決定されます。モードが `ios` の場合、スピナーは `"lines"` となり、モードが `md` の場合、スピナーは `"circular"` となります。 `name` プロパティが設定されている場合は、モード固有のスピナーの代わりに、そのスピナーが使用されます。 -import Basic from '@site/static/usage/v8/spinner/basic/index.md'; +import Basic from '@site/static/usage/v9/spinner/basic/index.md'; @@ -33,7 +33,7 @@ import Basic from '@site/static/usage/v8/spinner/basic/index.md'; ### Colors -import Colors from '@site/static/usage/v8/spinner/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/spinner/theming/colors/index.md'; @@ -41,13 +41,13 @@ import Colors from '@site/static/usage/v8/spinner/theming/colors/index.md'; カスタムCSSを使用してスピナーのスタイルを設定できます。たとえば、幅と高さを設定してスピナーのサイズを変更できます。 -import Resizing from '@site/static/usage/v8/spinner/theming/resizing/index.md'; +import Resizing from '@site/static/usage/v9/spinner/theming/resizing/index.md'; ### CSS カスタムプロパティ -import CSSProps from '@site/static/usage/v8/spinner/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/spinner/theming/css-properties/index.md'; diff --git a/docs/api/split-pane.md b/docs/api/split-pane.md index e64dd2597cb..b7eb8775f57 100644 --- a/docs/api/split-pane.md +++ b/docs/api/split-pane.md @@ -2,12 +2,12 @@ title: "ion-split-pane" --- -import Props from '@ionic-internal/component-api/v8/split-pane/props.md'; -import Events from '@ionic-internal/component-api/v8/split-pane/events.md'; -import Methods from '@ionic-internal/component-api/v8/split-pane/methods.md'; -import Parts from '@ionic-internal/component-api/v8/split-pane/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/split-pane/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/split-pane/slots.md'; +import Props from '@ionic-internal/component-api/v9/split-pane/props.md'; +import Events from '@ionic-internal/component-api/v9/split-pane/events.md'; +import Methods from '@ionic-internal/component-api/v9/split-pane/methods.md'; +import Parts from '@ionic-internal/component-api/v9/split-pane/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/split-pane/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/split-pane/slots.md'; ion-split-pane: Split Plane for Menus and Multi-View Layouts @@ -26,18 +26,17 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 :::note -このデモでは `when` プロパティを `'xs'` に設定し、分割ペインが常に表示されるようにしています。小さなビューポートで分割ペインを折りたたみたい場合は、Ionicアプリケーションにこの設定は必要ありません。詳しくは、[ブレークポイントの設定](#setting-breakpoints)を参照してください。 +このデモでは、`when`プロパティを`'xs'`に設定しているため、スプリットペインが常に表示されます。小さいビューポートでスプリットペインを折りたたむ場合、この設定は必要ありません。詳細については、[ブレークポイントの設定](#setting-breakpoints)を参照してください。 ::: -import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; +import Basic from '@site/static/usage/v9/split-pane/basic/index.md'; -## ブレイキング・ポイントを決める +## ブレイキング・ポイントを決める {/* #setting-breakpoints */} デフォルトでは、画面が992pxを超えると分割ペインが拡張表示されます。これをカスタマイズするには、 `when` プロパティにブレークポイントを渡します。`when` プロパティには、真偽値、有効なメディア・クエリー、またはIonicの事前定義サイズのいずれかを指定できます。 - ```html @@ -46,7 +45,6 @@ import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; ``` - | Size | Value | Description | |------|-----------------------|-----------------------------------------------------------------------| | `xs` | `(min-width: 0px)` | Show the split-pane when the min-width is 0px (meaning, always) | @@ -58,7 +56,7 @@ import Basic from '@site/static/usage/v8/split-pane/basic/index.md'; ## CSSカスタムプロパティ -import CSSProperties from '@site/static/usage/v8/split-pane/theming/css-properties/index.md'; +import CSSProperties from '@site/static/usage/v9/split-pane/theming/css-properties/index.md'; @@ -77,5 +75,5 @@ import CSSProperties from '@site/static/usage/v8/split-pane/theming/css-properti ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/tab-bar.md b/docs/api/tab-bar.md index 7ce4af6486a..bd74dd0ee07 100644 --- a/docs/api/tab-bar.md +++ b/docs/api/tab-bar.md @@ -4,12 +4,12 @@ title: "ion-tab-bar" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/tab-bar/props.md'; -import Events from '@ionic-internal/component-api/v8/tab-bar/events.md'; -import Methods from '@ionic-internal/component-api/v8/tab-bar/methods.md'; -import Parts from '@ionic-internal/component-api/v8/tab-bar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/tab-bar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/tab-bar/slots.md'; +import Props from '@ionic-internal/component-api/v9/tab-bar/props.md'; +import Events from '@ionic-internal/component-api/v9/tab-bar/events.md'; +import Methods from '@ionic-internal/component-api/v9/tab-bar/methods.md'; +import Parts from '@ionic-internal/component-api/v9/tab-bar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/tab-bar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/tab-bar/slots.md'; ion-tab-bar: Tab Bar Component with CSS Custom Properties @@ -148,7 +148,7 @@ import { call, person, settings } from 'ionicons/icons'; 空のバッジは`md`モードでのみ利用可能です。 ::: -import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; +import InsideTabBar from '@site/static/usage/v9/badge/inside-tab-bar/index.md'; diff --git a/docs/api/tab-button.md b/docs/api/tab-button.md index 92c8a59e7d4..2c074df7ffb 100644 --- a/docs/api/tab-button.md +++ b/docs/api/tab-button.md @@ -4,26 +4,20 @@ title: "ion-tab-button" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/tab-button/props.md'; -import Events from '@ionic-internal/component-api/v8/tab-button/events.md'; -import Methods from '@ionic-internal/component-api/v8/tab-button/methods.md'; -import Parts from '@ionic-internal/component-api/v8/tab-button/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/tab-button/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/tab-button/slots.md'; +import Props from '@ionic-internal/component-api/v9/tab-button/props.md'; +import Events from '@ionic-internal/component-api/v9/tab-button/events.md'; +import Methods from '@ionic-internal/component-api/v9/tab-button/methods.md'; +import Parts from '@ionic-internal/component-api/v9/tab-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/tab-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/tab-button/slots.md'; - - import EncapsulationPill from '@components/page/api/EncapsulationPill'; +タブボタンは、[タブバー](tab-bar.md)の内部に配置される UI コンポーネントです。タブボタンを使用すると、アイコンとラベルのレイアウトを指定し、[タブビュー](tab.md)に接続できます。 -tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポーネントです。tab buttonを使用すると、iconとlabelのレイアウトを指定し、[tab view](tab.md)に接続できます。 - -タブの設定の詳細については、[tabs documentation](tabs.md)を参照してください。 - - - +タブの設定の詳細については、[tabs ドキュメント](tabs.md)を参照してください。 ## 使い方 @@ -58,10 +52,8 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー ``` - - ```html @@ -108,10 +100,8 @@ tab buttonは、[tab bar](tab-bar.md)の内部に配置されるUIコンポー ``` - - ```tsx @@ -149,10 +139,8 @@ export const TabButtonExample: React.FC = () => ( ); ``` - - ```html @@ -195,7 +183,6 @@ import { calendar, informationCircle, map, personCircle } from 'ionicons/icons'; ``` - diff --git a/docs/api/tab.md b/docs/api/tab.md index ae0295a711c..c38bd9226c6 100644 --- a/docs/api/tab.md +++ b/docs/api/tab.md @@ -2,12 +2,12 @@ title: "ion-tab" --- -import Props from '@ionic-internal/component-api/v8/tab/props.md'; -import Events from '@ionic-internal/component-api/v8/tab/events.md'; -import Methods from '@ionic-internal/component-api/v8/tab/methods.md'; -import Parts from '@ionic-internal/component-api/v8/tab/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/tab/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/tab/slots.md'; +import Props from '@ionic-internal/component-api/v9/tab/props.md'; +import Events from '@ionic-internal/component-api/v9/tab/events.md'; +import Methods from '@ionic-internal/component-api/v9/tab/methods.md'; +import Parts from '@ionic-internal/component-api/v9/tab/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/tab/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/tab/slots.md'; ion-tab: Ionic Framework Application Component @@ -18,19 +18,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - タブコンポーネントは、[tabs](tabs.md) の子コンポーネントです。各タブには、アプリまたは単一のビューのトップレベルのナビゲーション スタックを含めることができます。アプリには多くのタブがあり、それぞれが独立したナビゲーションを持つことができます。 :::note -Angular、React、Vue は、`ion-tabs` コンポーネントが [basic usage](./tabs.md#basic-usage) に設定されている場合にのみ、このコンポーネントを使用できます。ルーティングでタブを設定する場合、`ion-tab`コンポーネントは使用できません。 +Angular、React、Vue は、`ion-tabs` コンポーネントが[基本的な使い方](./tabs.md#basic-usage)に設定されている場合にのみ、このコンポーネントを使用できます。ルーティングでタブを設定する場合、`ion-tab`コンポーネントは使用できません。 -JavaScript では、このコンポーネントは `ion-tabs` コンポーネントを [basic usage](./tabs.md#basic-usage) または [usage with router](./tabs.md#usage-with-router) に設定した場合に使用できます。 +JavaScript では、このコンポーネントは `ion-tabs` コンポーネントを[基本的な使い方](./tabs.md#basic-usage)または[ルーターと使う方法](./tabs.md#usage-with-router)に設定した場合に使用できます。 ::: - -詳しい設定方法は [tabs documentation](tabs.md) をご覧ください。 - - +タブの設定の詳細については、[tabs ドキュメント](tabs.md)を参照してください。 ## プロパティ @@ -47,5 +43,5 @@ JavaScript では、このコンポーネントは `ion-tabs` コンポーネン ## CSSカスタムプロパティ -## Slots - \ No newline at end of file +## スロット + diff --git a/docs/api/tabs.md b/docs/api/tabs.md index cc041871449..bb41c73c7dd 100644 --- a/docs/api/tabs.md +++ b/docs/api/tabs.md @@ -1,12 +1,12 @@ --- title: "ion-tabs" --- -import Props from '@ionic-internal/component-api/v8/tabs/props.md'; -import Events from '@ionic-internal/component-api/v8/tabs/events.md'; -import Methods from '@ionic-internal/component-api/v8/tabs/methods.md'; -import Parts from '@ionic-internal/component-api/v8/tabs/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/tabs/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/tabs/slots.md'; +import Props from '@ionic-internal/component-api/v9/tabs/props.md'; +import Events from '@ionic-internal/component-api/v9/tabs/events.md'; +import Methods from '@ionic-internal/component-api/v9/tabs/methods.md'; +import Parts from '@ionic-internal/component-api/v9/tabs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/tabs/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/tabs/slots.md'; ion-tabs: Tab-Based Component for App Top-Level Navigation @@ -30,7 +30,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; タブは、URLを変更することなく、異なるコンテンツを表示するために使用することができます。これは、タブをナビゲーションのために使用するのではなく、異なるコンテンツを表示するために使用する場合に便利です。 -import Basic from '@site/static/usage/v8/tabs/basic/index.md'; +import Basic from '@site/static/usage/v9/tabs/basic/index.md'; @@ -38,11 +38,11 @@ import Basic from '@site/static/usage/v8/tabs/basic/index.md'; タブをIonicルーターで使用すると、タブベースのナビゲーションを実装できます。タブバーとアクティブタブはURLに基づいて自動的に解決されます。これはタブナビゲーションの最も一般的なパターンです。 -import Router from '@site/static/usage/v8/tabs/router/index.md'; +import Router from '@site/static/usage/v9/tabs/router/index.md'; -:::tip Best Practices +:::tip[ベストプラクティス] Ionicでは、タブを使ったルーティングパターンのベストプラクティスに関するガイドを用意しています。 Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. @@ -52,7 +52,7 @@ Ionicでは、タブを使ったルーティングパターンのベストプラ タブは`select`メソッドを使用してプログラムで選択できます。これは、ボタンのクリックに応答したり、フォームを完了した後など、アプリケーションロジックからタブの変更をトリガーする必要がある場合に便利です。次の例では、ボタンを使用して`select`メソッドを呼び出し、別のタブにナビゲートする方法を示しています。 -import SelectMethod from '@site/static/usage/v8/tabs/select-method/index.md'; +import SelectMethod from '@site/static/usage/v9/tabs/select-method/index.md'; diff --git a/docs/api/text.md b/docs/api/text.md index 18db96fe8e4..60cfaeb37fa 100644 --- a/docs/api/text.md +++ b/docs/api/text.md @@ -1,12 +1,12 @@ --- title: "ion-text" --- -import Props from '@ionic-internal/component-api/v8/text/props.md'; -import Events from '@ionic-internal/component-api/v8/text/events.md'; -import Methods from '@ionic-internal/component-api/v8/text/methods.md'; -import Parts from '@ionic-internal/component-api/v8/text/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/text/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/text/slots.md'; +import Props from '@ionic-internal/component-api/v9/text/props.md'; +import Events from '@ionic-internal/component-api/v9/text/events.md'; +import Methods from '@ionic-internal/component-api/v9/text/methods.md'; +import Parts from '@ionic-internal/component-api/v9/text/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/text/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/text/slots.md'; ion-text: Ionic App Component to Style or Change Text Color @@ -21,7 +21,7 @@ textコンポーネントは、任意の要素のテキストカラーのスタ ## 基本的な使い方 -import Basic from '@site/static/usage/v8/text/basic/index.md'; +import Basic from '@site/static/usage/v9/text/basic/index.md'; diff --git a/docs/api/textarea.md b/docs/api/textarea.md index b26f1a88f2e..eab650e0cbf 100644 --- a/docs/api/textarea.md +++ b/docs/api/textarea.md @@ -1,12 +1,12 @@ --- title: "ion-textarea" --- -import Props from '@ionic-internal/component-api/v8/textarea/props.md'; -import Events from '@ionic-internal/component-api/v8/textarea/events.md'; -import Methods from '@ionic-internal/component-api/v8/textarea/methods.md'; -import Parts from '@ionic-internal/component-api/v8/textarea/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/textarea/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/textarea/slots.md'; +import Props from '@ionic-internal/component-api/v9/textarea/props.md'; +import Events from '@ionic-internal/component-api/v9/textarea/events.md'; +import Methods from '@ionic-internal/component-api/v9/textarea/methods.md'; +import Parts from '@ionic-internal/component-api/v9/textarea/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/textarea/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/textarea/slots.md'; Ionic Textarea Component and CSS Properties for Multi-Line Input @@ -25,7 +25,7 @@ textareaコンポーネントはIonicのプロパティに加えて [ネイテ ## 基本的な使い方 -import BasicPlayground from '@site/static/usage/v8/textarea/basic/index.md'; +import BasicPlayground from '@site/static/usage/v9/textarea/basic/index.md'; @@ -41,7 +41,7 @@ import BasicPlayground from '@site/static/usage/v8/textarea/basic/index.md'; ラベルは、デフォルトでそのコンテンツの幅を占めます。 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v8/textarea/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/textarea/label-placement/index.md'; @@ -51,7 +51,7 @@ import LabelPlacement from '@site/static/usage/v8/textarea/label-placement/index この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 -import LabelSlot from '@site/static/usage/v8/textarea/label-slot/index.md'; +import LabelSlot from '@site/static/usage/v9/textarea/label-slot/index.md'; @@ -59,7 +59,7 @@ import LabelSlot from '@site/static/usage/v8/textarea/label-slot/index.md'; ラベルの表示が必要ない場合でも、開発者は`aria-label`を指定して、textareaがスクリーンリーダーにアクセスできるようにすべきです。 -import NoVisibleLabel from '@site/static/usage/v8/textarea/no-visible-label/index.md'; +import NoVisibleLabel from '@site/static/usage/v9/textarea/no-visible-label/index.md'; @@ -73,7 +73,7 @@ iOSでは、Textareasの`mode`を`md`に設定することで、Filled Textareas コンポーネント間のスタイリングの競合のため、`fill`を使用するTextareaは`ion-item`内で使用すべきではありません。 ::: -import Fill from '@site/static/usage/v8/textarea/fill/index.md'; +import Fill from '@site/static/usage/v9/textarea/fill/index.md'; @@ -83,7 +83,7 @@ import Fill from '@site/static/usage/v8/textarea/fill/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v8/textarea/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/textarea/helper-error/index.md'; @@ -91,7 +91,7 @@ import HelperError from '@site/static/usage/v8/textarea/helper-error/index.md'; textareaカウンターは、textareaの下に表示されるテキストで、textareaが受け付ける合計文字数のうち、何文字が入力されたかをユーザーに通知します。カウンターを追加する場合、デフォルトの動作は、表示される値を `inputLength` / `maxLength` としてフォーマットすることです。この動作は、`counterFormatter`プロパティにフォーマッタ関数を渡すことでカスタマイズすることができます。 -import Counter from '@site/static/usage/v8/textarea/counter/index.md'; +import Counter from '@site/static/usage/v9/textarea/counter/index.md'; @@ -99,7 +99,7 @@ import Counter from '@site/static/usage/v8/textarea/counter/index.md'; `autoGrow`プロパティが`true`に設定されている場合、テキストエリアはその内容に基づいて拡大・縮小します。 -import AutogrowPlayground from '@site/static/usage/v8/textarea/autogrow/index.md'; +import AutogrowPlayground from '@site/static/usage/v9/textarea/autogrow/index.md'; @@ -107,7 +107,7 @@ import AutogrowPlayground from '@site/static/usage/v8/textarea/autogrow/index.md `clearOnEdit`プロパティを`true`に設定すると、テキストエリアが編集削除された後、再度入力されるとクリアされます。 -import ClearOnEditPlayground from '@site/static/usage/v8/textarea/clear-on-edit/index.md'; +import ClearOnEditPlayground from '@site/static/usage/v9/textarea/clear-on-edit/index.md'; @@ -118,18 +118,18 @@ import ClearOnEditPlayground from '@site/static/usage/v8/textarea/clear-on-edit/ この機能は、[Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots)のシミュレート版に依存しているため、実験的なものとみなされていることに注意してください。その結果、シミュレートされた動作はネイティブのスロットの動作と完全に一致するとは限りません。 :::note -ほとんどの場合、これらのスロットに配置された[Icon](./icon.md)コンポーネントには`aria-hidden="true"`を設定すべきです。詳細については、[Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility)を参照してください。 +ほとんどの場合、これらのスロットに配置された[Icon](./icon.md)コンポーネントには`aria-hidden="true"`が必要です。詳細については、[Icon アクセシビリティドキュメント](https://ionicframework.com/docs/api/icon#accessibility)を参照してください。 スロットコンテンツが操作対象である場合、[Button](./button.md)などのインタラクティブ要素でラップする必要があります。これにより、コンテンツにタブで移動できるようになります。 ::: -import StartEndSlots from '@site/static/usage/v8/textarea/start-end-slots/index.md'; +import StartEndSlots from '@site/static/usage/v9/textarea/start-end-slots/index.md'; ## Theming -import ThemingPlayground from '@site/static/usage/v8/textarea/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v9/textarea/theming/index.md'; diff --git a/docs/api/thumbnail.md b/docs/api/thumbnail.md index ff19d505461..480e6879d51 100644 --- a/docs/api/thumbnail.md +++ b/docs/api/thumbnail.md @@ -2,12 +2,12 @@ title: "ion-thumbnail" --- -import Props from '@ionic-internal/component-api/v8/thumbnail/props.md'; -import Events from '@ionic-internal/component-api/v8/thumbnail/events.md'; -import Methods from '@ionic-internal/component-api/v8/thumbnail/methods.md'; -import Parts from '@ionic-internal/component-api/v8/thumbnail/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/thumbnail/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/thumbnail/slots.md'; +import Props from '@ionic-internal/component-api/v9/thumbnail/props.md'; +import Events from '@ionic-internal/component-api/v9/thumbnail/events.md'; +import Methods from '@ionic-internal/component-api/v9/thumbnail/methods.md'; +import Parts from '@ionic-internal/component-api/v9/thumbnail/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/thumbnail/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/thumbnail/slots.md'; ion-thumbnail: Thumbnail App Component for Images or Icons @@ -24,13 +24,13 @@ Thumbnailsは、単独で使用することも、任意の要素の内部で使 ## 基本的な使い方 -import Basic from '@site/static/usage/v8/thumbnail/basic/index.md'; +import Basic from '@site/static/usage/v9/thumbnail/basic/index.md'; ## Item Thumbnails -import Item from '@site/static/usage/v8/thumbnail/item/index.md'; +import Item from '@site/static/usage/v9/thumbnail/item/index.md'; @@ -38,7 +38,7 @@ import Item from '@site/static/usage/v8/thumbnail/item/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/thumbnail/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/thumbnail/theming/css-properties/index.md'; diff --git a/docs/api/title.md b/docs/api/title.md index c14db0ff1b0..8af9586ab99 100644 --- a/docs/api/title.md +++ b/docs/api/title.md @@ -1,12 +1,12 @@ --- title: "ion-title" --- -import Props from '@ionic-internal/component-api/v8/title/props.md'; -import Events from '@ionic-internal/component-api/v8/title/events.md'; -import Methods from '@ionic-internal/component-api/v8/title/methods.md'; -import Parts from '@ionic-internal/component-api/v8/title/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/title/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/title/slots.md'; +import Props from '@ionic-internal/component-api/v9/title/props.md'; +import Events from '@ionic-internal/component-api/v9/title/events.md'; +import Methods from '@ionic-internal/component-api/v9/title/methods.md'; +import Parts from '@ionic-internal/component-api/v9/title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/title/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/title/slots.md'; ion-title: Ionic Framework App Title Component for Toolbars @@ -17,16 +17,15 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - Titleは、[ツールバー](./toolbar)のタイトルを設定するテキストコンポーネントです。ユーザーが現在いる画面やセクション、使用中のアプリを説明するために使用することができます。 ## Basic -import Basic from '@site/static/usage/v8/title/basic/index.md'; +import Basic from '@site/static/usage/v9/title/basic/index.md'; -## 折りたたみ式ラージタイトル +## 折りたたみ式ラージタイトル {/* #collapsible-large-titles */} 大きなタイトルは、[content](./content)がスクロールコンテナの開始位置までスクロールされたときに表示されます。タイトルがヘッダーの後ろにスクロールされると、縮小されたタイトルがフェードインします。 @@ -36,7 +35,7 @@ This feature is only available for iOS. ::: -import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large-title/basic/index.md'; +import CollapsibleLargeTitle from '@site/static/usage/v9/title/collapsible-large-title/basic/index.md'; @@ -44,8 +43,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large [buttons](./buttons.md)コンポーネントは、[`collapse`](./buttons.md#collapse)プロパティと共に使用すると、ツールバーが折りたたまれたときにヘッダーに追加表示することができます。 - -import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; +import CollapsibleLargeTitleButtons from '@site/static/usage/v9/title/collapsible-large-title/buttons/index.md'; @@ -65,7 +63,7 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsibl 折りたたみ式ラージタイトルは、コンテンツの他の部分との関係でシームレスに表示される必要があります。つまり、折りたたみ可能なラージタイトルを含むツールバーの背景色は、常にコンテンツの背景色と一致する必要があります。 -デフォルトでは、標準タイトルを含むツールバーは `opacity: 0` を使って非表示にされ、スクロールによってラージタイトルを折りたたむと徐々に表示されるようになります。その結果、標準タイトルの後ろに見える背景色は、実際にはコンテンツの背景色となります。 +デフォルトでは、標準のタイトルを含むツールバーは`opacity: 0`によって非表示にされ、大きなタイトルをスクロールで折りたたむと段階的に表示されます。その結果、標準タイトルの背後の背景色は実際にはコンテンツの背景色となります。 標準タイトルのあるツールバーの背景色は、CSS変数に `--background` を設定することで変更できます。これにより、大きなタイトルを折りたたむと、ヘッダーの色が変わるという効果が得られます。 @@ -73,7 +71,7 @@ import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsibl ## CSSカスタムプロパティ -import CSSCustomProperties from '@site/static/usage/v8/title/theming/css-properties/index.md'; +import CSSCustomProperties from '@site/static/usage/v9/title/theming/css-properties/index.md'; diff --git a/docs/api/toast.md b/docs/api/toast.md index b74c6bbd8de..0385653091c 100644 --- a/docs/api/toast.md +++ b/docs/api/toast.md @@ -4,12 +4,12 @@ title: "ion-toast" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; -import Props from '@ionic-internal/component-api/v8/toast/props.md'; -import Events from '@ionic-internal/component-api/v8/toast/events.md'; -import Methods from '@ionic-internal/component-api/v8/toast/methods.md'; -import Parts from '@ionic-internal/component-api/v8/toast/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/toast/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/toast/slots.md'; +import Props from '@ionic-internal/component-api/v9/toast/props.md'; +import Events from '@ionic-internal/component-api/v9/toast/events.md'; +import Methods from '@ionic-internal/component-api/v9/toast/methods.md'; +import Parts from '@ionic-internal/component-api/v9/toast/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/toast/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/toast/slots.md'; ion-toast: A Dismissible App Notification Alert Component @@ -26,7 +26,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; `ion-toast`は、テンプレートに直接コンポーネントを記述して使用することができます。これにより、トーストを表示するために配線する必要があるハンドラの数を減らすことができます。 -import InlineToastTriggerExample from '@site/static/usage/v8/toast/inline/basic/index.md'; +import InlineToastTriggerExample from '@site/static/usage/v9/toast/inline/basic/index.md'; @@ -36,13 +36,13 @@ import InlineToastTriggerExample from '@site/static/usage/v8/toast/inline/basic/ `isOpen` は一方通行のデータバインディングを使用しているため、トーストが破棄されたときに自動的に `false` に設定されることはありません。開発者は `ionToastDidDismiss` または `didDismiss` イベントをリスニングして `isOpen` を `false` に設定する必要があります。この理由は、`ion-toast` の内部がアプリケーションの状態と密接に結合するのを防ぐためである。一方通行のデータバインディングでは、トーストはリアクティブ変数が提供するブーリアン値だけを気にすればよい。一方通行のデータバインディングでは、トーストはブーリアン値とリアクティブ変数の存在の両方に関心を持つ必要があります。これは、非決定的な動作につながり、アプリケーションのデバッグを困難にします。 -import InlineToastIsOpenExample from '@site/static/usage/v8/toast/inline/is-open/index.md'; +import InlineToastIsOpenExample from '@site/static/usage/v9/toast/inline/is-open/index.md'; ## Controller Toasts -import ControllerExample from '@site/static/usage/v8/toast/presenting/controller/index.md'; +import ControllerExample from '@site/static/usage/v9/toast/presenting/controller/index.md'; @@ -56,7 +56,7 @@ import ControllerExample from '@site/static/usage/v8/toast/presenting/controller 次の例では、`buttons` プロパティを使用して、クリックすると自動的にトーストを解散させるボタンを追加する方法と、解散イベントの `role` を収集する方法を示しています。 -import ButtonsPlayground from '@site/static/usage/v8/toast/buttons/index.md'; +import ButtonsPlayground from '@site/static/usage/v9/toast/buttons/index.md'; @@ -68,7 +68,7 @@ import ButtonsPlayground from '@site/static/usage/v8/toast/buttons/index.md'; トーストがヘッダー、フッター、[FAB](./fab.md)のようなナビゲーション要素と一緒に表示される場合、デフォルトではトーストはこれらの要素と重なるかもしれません。これは `positionAnchor` プロパティを使って修正することができます。`position="top"`を使用するとトーストは選択した要素に対して相対的な位置になり、`position="bottom"`を使用するとその下に、`position="bottom"`を使用するとその上に表示されます。`position="middle"`を使用する場合、`positionAnchor`プロパティは無視されます。 -import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md'; +import PositionAnchor from '@site/static/usage/v9/toast/position-anchor/index.md'; @@ -76,7 +76,7 @@ import PositionAnchor from '@site/static/usage/v8/toast/position-anchor/index.md `swipeGesture`プロパティを使用することで、トーストをスワイプして消すことができます。この機能は位置を認識します。つまり、ユーザがスワイプする方向は `position` プロパティの値に基づいて変化します。さらに、ユーザーがスワイプする距離は `positionAnchor` プロパティによって影響を受ける可能性があります。 -import SwipeGesture from '@site/static/usage/v8/toast/swipe-gesture/index.md'; +import SwipeGesture from '@site/static/usage/v9/toast/swipe-gesture/index.md'; @@ -84,7 +84,7 @@ import SwipeGesture from '@site/static/usage/v8/toast/swipe-gesture/index.md'; トースト内のボタンコンテナは、`layout`プロパティを使用して、メッセージと同じ行に表示するか、別々の行に積み重ねて表示することができます。スタックレイアウトは、長いテキスト値を持つボタンで使用する必要があります。さらに、スタックトーストレイアウトのボタンは `side` の値として `start` または `end` のどちらかを使用できますが、両方を使用することはできません。 -import StackedPlayground from '@site/static/usage/v8/toast/layout/index.md'; +import StackedPlayground from '@site/static/usage/v9/toast/layout/index.md'; @@ -92,13 +92,13 @@ import StackedPlayground from '@site/static/usage/v8/toast/layout/index.md'; トースト内のコンテンツの横にアイコンを追加することができます。一般的に、トーストのアイコンはスタイルやコンテキストを追加するために使用されるべきで、ユーザーの注意を引いたり、トーストの優先順位を上げたりするために使用すべきではありません。より優先順位の高いメッセージをユーザーに伝えたい場合や、応答を保証したい場合は、代わりに [Alert](alert.md) を使用することをお勧めします。 -import IconPlayground from '@site/static/usage/v8/toast/icon/index.md'; +import IconPlayground from '@site/static/usage/v9/toast/icon/index.md'; ## テーマ -import ThemingPlayground from '@site/static/usage/v8/toast/theming/index.md'; +import ThemingPlayground from '@site/static/usage/v9/toast/theming/index.md'; diff --git a/docs/api/toggle.md b/docs/api/toggle.md index a54100d2549..55bc545b657 100644 --- a/docs/api/toggle.md +++ b/docs/api/toggle.md @@ -1,12 +1,12 @@ --- title: "ion-toggle" --- -import Props from '@ionic-internal/component-api/v8/toggle/props.md'; -import Events from '@ionic-internal/component-api/v8/toggle/events.md'; -import Methods from '@ionic-internal/component-api/v8/toggle/methods.md'; -import Parts from '@ionic-internal/component-api/v8/toggle/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/toggle/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/toggle/slots.md'; +import Props from '@ionic-internal/component-api/v9/toggle/props.md'; +import Events from '@ionic-internal/component-api/v9/toggle/events.md'; +import Methods from '@ionic-internal/component-api/v9/toggle/methods.md'; +import Parts from '@ionic-internal/component-api/v9/toggle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/toggle/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/toggle/slots.md'; ion-toggle: Custom Toggle Button for Ionic Applications @@ -22,7 +22,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; ## 基本的な使い方 -import Basic from '@site/static/usage/v8/toggle/basic/index.md'; +import Basic from '@site/static/usage/v9/toggle/basic/index.md'; @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/toggle/basic/index.md'; トグルは、`enableOnOffLabels`プロパティを設定することで、オン/オフラベルを有効にすることができます。これはアクセシビリティ上重要なことで、チェックされたトグルとチェックされていないトグルの区別がつきやすくなります。 -import OnOff from '@site/static/usage/v8/toggle/on-off/index.md'; +import OnOff from '@site/static/usage/v9/toggle/on-off/index.md'; @@ -40,7 +40,7 @@ import OnOff from '@site/static/usage/v8/toggle/on-off/index.md'; [アイテム](./item)と[リスト](./list)コンポーネントを使用すると、リストビューでトグルを使用することも可能です。 -import List from '@site/static/usage/v8/toggle/list/index.md'; +import List from '@site/static/usage/v9/toggle/list/index.md'; @@ -49,7 +49,7 @@ import List from '@site/static/usage/v8/toggle/list/index.md'; 開発者は `labelPlacement` プロパティを使用して、ラベルがどのように配置されるかを制御することができます。 -import LabelPlacement from '@site/static/usage/v8/toggle/label-placement/index.md'; +import LabelPlacement from '@site/static/usage/v9/toggle/label-placement/index.md'; @@ -61,7 +61,7 @@ import LabelPlacement from '@site/static/usage/v8/toggle/label-placement/index.m スタックされたトグルは、`alignment`プロパティを使用して配置できます。ラベルとコントロールを水平方向に中央揃えする必要がある場合に便利です。 ::: -import Alignment from '@site/static/usage/v8/toggle/alignment/index.md'; +import Alignment from '@site/static/usage/v9/toggle/alignment/index.md'; @@ -69,7 +69,7 @@ import Alignment from '@site/static/usage/v8/toggle/alignment/index.md'; 開発者は `justify` プロパティを使用して、ラベルとコントロールの行の詰め方を制御することができます。 -import Justify from '@site/static/usage/v8/toggle/justify/index.md'; +import Justify from '@site/static/usage/v9/toggle/justify/index.md'; @@ -79,7 +79,7 @@ import Justify from '@site/static/usage/v8/toggle/justify/index.md'; Angularでは、これはフォームバリデーションによって自動的に行われます。JavaScript、React、Vueでは、独自のバリデーションに基づいてクラスを手動で追加する必要があります。 -import HelperError from '@site/static/usage/v8/toggle/helper-error/index.md'; +import HelperError from '@site/static/usage/v9/toggle/helper-error/index.md'; @@ -87,7 +87,7 @@ import HelperError from '@site/static/usage/v8/toggle/helper-error/index.md'; ### Colors -import Colors from '@site/static/usage/v8/toggle/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/toggle/theming/colors/index.md'; @@ -95,7 +95,7 @@ import Colors from '@site/static/usage/v8/toggle/theming/colors/index.md'; CSSカスタムプロパティは、標準CSSと組み合わせてトグルの異なる部分をターゲットにすることができます。トグルの `width` と `height` を直接変更してトラックのサイズを変更し、`--handle-width` と `--handle-height` カスタムプロパティを使用して、ハンドルサイズをカスタマイズすることができます。 -import CSSProps from '@site/static/usage/v8/toggle/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/toggle/theming/css-properties/index.md'; @@ -103,7 +103,7 @@ import CSSProps from '@site/static/usage/v8/toggle/theming/css-properties/index. トグルをさらにカスタマイズするには、公開されている特定のシャドウ部分をターゲットにすることができます。これらの部分には、どのようなCSSプロパティでもスタイルを設定でき、CSSカスタムプロパティと組み合わせることも可能です。 -import CSSParts from '@site/static/usage/v8/toggle/theming/css-shadow-parts/index.md'; +import CSSParts from '@site/static/usage/v9/toggle/theming/css-shadow-parts/index.md'; diff --git a/docs/api/toolbar.md b/docs/api/toolbar.md index 1dd1f8da070..432d05b7a6b 100644 --- a/docs/api/toolbar.md +++ b/docs/api/toolbar.md @@ -1,12 +1,12 @@ --- title: "ion-toolbar" --- -import Props from '@ionic-internal/component-api/v8/toolbar/props.md'; -import Events from '@ionic-internal/component-api/v8/toolbar/events.md'; -import Methods from '@ionic-internal/component-api/v8/toolbar/methods.md'; -import Parts from '@ionic-internal/component-api/v8/toolbar/parts.md'; -import CustomProps from '@ionic-internal/component-api/v8/toolbar/custom-props.mdx'; -import Slots from '@ionic-internal/component-api/v8/toolbar/slots.md'; +import Props from '@ionic-internal/component-api/v9/toolbar/props.md'; +import Events from '@ionic-internal/component-api/v9/toolbar/events.md'; +import Methods from '@ionic-internal/component-api/v9/toolbar/methods.md'; +import Parts from '@ionic-internal/component-api/v9/toolbar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v9/toolbar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v9/toolbar/slots.md'; ion-toolbar: Customize App Menu Toolbar Buttons and Icons @@ -17,79 +17,70 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; - -ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。 +ツールバーは、一般的にコンテンツの上または下に配置され、現在の画面のコンテンツとアクションを提供します。[コンテンツ](./content)内に配置された場合、ツールバーはコンテンツと一緒にスクロールします。 ツールバーには、タイトル、ボタン、アイコン、戻るボタン、メニューボタン、検索バー、セグメント、プログレスバーなど、さまざまなコンポーネントを含めることができます。 - ## 基本的な使い方 ツールバーを正しく配置するために、[header](./header)または[footer](./footer)の内部に配置することをお勧めします。ツールバーをヘッダーに配置すると、コンテンツの上部に固定されて表示されます。フッターに配置された場合は、下側に固定されて表示されます。フルスクリーンのコンテンツは、ヘッダーやフッターにあるツールバーの後ろでスクロールします。 [title](./title) コンポーネントを使用すると、ツールバーの内側にテキストを表示することができます。 -import Basic from '@site/static/usage/v8/toolbar/basic/index.md'; +import Basic from '@site/static/usage/v9/toolbar/basic/index.md'; - ## Buttons in Toolbars ツールバーに配置するボタンは、[buttons](./buttons)コンポーネントの内部に配置する必要があります。ボタンコンポーネントは、名前付きの [スロット](#slots) を使ってツールバーの内側に配置することができます。スロットの `"primary"` と `"secondary"` は `ios` モードと `md` モードで異なる動作をします。 -buttons コンポーネントは、標準的な [ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそれらのいずれかをラップすることができます。ツールバーのボタンはデフォルトで透明ですが、ボタンの [`fill`](./button#fill) プロパティで変更することが可能です。この例でバックボタンとメニューボタンに含まれているプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。 +buttons コンポーネントは、標準の[ボタン](./button)、[戻るボタン](./back-button)、[メニューボタン](./menu-button)、またはそのいずれかを複数ラップできます。ツールバー内のボタンはデフォルトでクリアスタイルに設定されていますが、これはボタンの[`fill`](./button#fill)プロパティを使用して変更できます。この例に含まれる戻るボタンとメニューボタンのプロパティは表示目的であり、適切な使用方法についてはそれぞれのドキュメントを参照してください。 -import Buttons from '@site/static/usage/v8/toolbar/buttons/index.md'; +import Buttons from '@site/static/usage/v9/toolbar/buttons/index.md'; - ## Searchbars in Toolbars [searchbar](./searchbar)は、ツールバーの中に配置することで、コンテンツを検索することができます。ツールバーの唯一の子コンポーネントである必要があり、幅と高さを完全に占有します。 -import Searchbars from '@site/static/usage/v8/toolbar/searchbars/index.md'; +import Searchbars from '@site/static/usage/v9/toolbar/searchbars/index.md'; - ## ツールバーのセグメント [セグメント](./segment)は、一般的にツールバーで、同じページ内の2つの異なるコンテンツビューを切り替えるために使用されます。ボタンなどの他のコンポーネントと一緒にツールバーに配置することができますが、タイトルと一緒に配置するべきではありません。 -import Segments from '@site/static/usage/v8/toolbar/segments/index.md'; +import Segments from '@site/static/usage/v9/toolbar/segments/index.md'; - ## ツールバーのプログレスバー [プログレスバー](./progress-bar)は、アプリで進行中のプロセスを示すローディングインジケータとして使用されます。プログレスバーは、ツールバーの下部に配置されるため、ツールバーの中の他のコンポーネントと一緒に配置することができます。 -import ProgressBars from '@site/static/usage/v8/toolbar/progress-bars/index.md'; +import ProgressBars from '@site/static/usage/v9/toolbar/progress-bars/index.md'; - ## テーマ ### Colors -import Colors from '@site/static/usage/v8/toolbar/theming/colors/index.md'; +import Colors from '@site/static/usage/v9/toolbar/theming/colors/index.md'; ## CSSカスタムプロパティ -import CSSProps from '@site/static/usage/v8/toolbar/theming/css-properties/index.md'; +import CSSProps from '@site/static/usage/v9/toolbar/theming/css-properties/index.md'; - ## Borders `md` モードでは、`` は下部にボックスシャドウを、`` は上部にボックスシャドウを表示します。 `ios` モードでは、`` の下部にボーダーが、`` の上部にボーダーが表示されます。 - ## プロパティ diff --git a/docs/cli.md b/docs/cli.md index 4c9aeba62b1..885362233b0 100644 --- a/docs/cli.md +++ b/docs/cli.md @@ -4,14 +4,14 @@ sidebar_label: 概要 --- - Ionic CLI Framework: Command-Line Interface to Develop Apps + Ionic CLI: アプリ開発用コマンドラインインターフェイス -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) は、Ionic アプリを開発する時に頼りになるツールです。 +Ionic コマンドラインインターフェイス（[CLI](/docs/reference/glossary#cli)）は、Ionic アプリを開発するときに頼りになるツールです。 ## インストール @@ -21,7 +21,7 @@ Ionic CLI は npm でグローバルにインストールできます: npm install -g @ionic/cli ``` -## Help +## ヘルプ Ionic CLI では `--help` フラグをつけることでコマンドのドキュメントを利用できます。 @@ -37,18 +37,16 @@ $ ionic --help コマンドの中には `ionic serve` のように、React と Angular のように、プロジェクトのタイプに応じたヘルプが表示されるものがあります。 ::: - - ## 構成 -Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。Follow development on the open source Github repository. +Ionic CLI は、[TypeScript](/docs/reference/glossary#typescript)と [Node.js](/docs/reference/glossary#node)で構築されています。Node 10.3+をサポートしていますが、最新の Node LTS が推奨です。開発状況は、オープンソースの GitHub リポジトリで確認できます。 ## トラブルシューティング Ionic CLI の問題をトラブルシューティングするには、以下の方法が役立ちます: -- Ionic CLI の最新バージョンがインストールされていることを確認します。 `ionic --version` を実行して、インストールされている Ionic CLI のバージョンを取得します。Ionic CLI のバージョンは Ionic Framework のバージョンとは関係ありません。 -- 最新の Node LTS がインストールされていることを確認する。 [Node & npm](/docs/intro/environment#node-npm) 環境設定を参照してください。 -- `verbose` フラグはデバッグメッセージを表示し、問題を絞り込むことができます。 -- 接続の問題は、プロキシの設定が適切でないことが原因かもしれません。リクエストのプロキシ設定については、[プロキシを使う](/docs/cli/using-a-proxy)を参照してください。 -- グローバル Ionic CLI 設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除でき、Ionic CLI が再作成しますが、すべての設定（ユーザーセッションを含む）は失われます。このディレクトリを[CLI 環境変数](/docs/cli/configuration#environment-variables)で設定します。 +- 最新の Ionic CLI がインストールされていることを確認してください。インストール済みの Ionic CLI のバージョンは、`ionic --version` を実行して確認できます。Ionic CLI のバージョンは Ionic Framework のバージョンとは関係ありません。 +- 最新の Node LTS がインストールされていることを確認してください。設定手順については [Node & npm](/docs/intro/environment#node-npm) の環境設定を参照してください。 +- `--verbose` フラグはデバッグメッセージを表示します。これにより問題の原因を絞り込むことができます。 +- 接続の問題は、不適切に設定されたプロキシ設定が原因である場合があります。リクエストのプロキシ設定方法については [プロキシの使用](/docs/cli/using-a-proxy) を参照してください。 +- グローバル Ionic CLI 設定ディレクトリは、すべてのプラットフォームで `~/.ionic` です。このディレクトリは安全に削除できます。削除後、Ionic CLI は再生成しますが、すべての設定（ユーザーセッションを含む）が失われます。このディレクトリは [CLI 環境変数](/docs/cli/configuration#environment-variables) で設定してください。 diff --git a/docs/cli/configuration.md b/docs/cli/configuration.md index 293fc0bc9bd..3c3748694eb 100644 --- a/docs/cli/configuration.md +++ b/docs/cli/configuration.md @@ -14,7 +14,7 @@ title: 設定 設定された値は JSON ファイルに格納されます。Ionic CLI は、通常`~/.ionic/config.json`にグローバル設定ファイルを設定します。通常はプロジェクトのルートディレクトリに `ionic.config.json` という名前で保存されます。 -CLI には、プロジェクト設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定および printf するためのコマンドが用意されています。[`ionic config get`](commands/config-get.md) と [`ionic config set`](commands/config-set.md) の使い方については、`ionic config--help`を参照してください。 +CLI は、プロジェクトの設定ファイルおよびグローバル CLI 設定ファイルから設定値を設定・表示するコマンドを提供します。`ionic config --help` を実行するか、[`ionic config get`](commands/config-get.md) および [`ionic config set`](commands/config-set.md) の使用方法に関するドキュメントを参照してください。 ### プロジェクト設定ファイル @@ -40,20 +40,20 @@ CLI には、プロジェクト設定ファイルおよびグローバル CLI } }, - // Hook configuration--see the Hooks section below for details. + // Hook configuration--refer to the Hooks section below for details. "hooks": { ... } } ``` -## 環境変数 +## 環境変数 {/* #environment-variables */} CLI は、次の環境変数を検索します: -- `IONIC_CONFIG_DIRECTORY`: The directory of the global CLI config. Defaults to `~/.ionic`. -- `IONIC_HTTP_PROXY`: Set a URL for proxying all CLI requests through. See [Using a Proxy](using-a-proxy.md). -- `IONIC_TOKEN`: Automatically authenticates with [Appflow](https://ionic.io/appflow). +- `IONIC_CONFIG_DIRECTORY`: グローバル CLI 設定ディレクトリ。デフォルトは `~/.ionic`。 +- `IONIC_HTTP_PROXY`: すべての CLI リクエストをプロキシする URL を設定します。詳細は [プロキシの使用](using-a-proxy.md) を参照してください。 +- `IONIC_TOKEN`: [Appflow](https://ionic.io/appflow) に自動で認証します。 ## Flags @@ -67,15 +67,15 @@ CLI flags は、CLI コマンドの動作を変更するグローバルオプシ ## Hooks -CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするために、以下の [npm scripts](https://docs.npmjs.com/misc/scripts) を `package.json`: ファイルで使用できます。: +CLI は、ビルドの前後など、特定のイベント中にスクリプトを実行できます。CLI にフックするには、次の [npm スクリプト](https://docs.npmjs.com/misc/scripts)を `package.json` ファイルで使用できます。 -- `ionic:serve:before`: dev server が start される前に実行されます -- `ionic:serve:after`: dev server が終了される前に実行されます -- `ionic:build:before`: web asset の構築がはじまる前に実行されます -- `ionic:build:after`: web asset の構築が終了して実行されます。 -- `ionic:capacitor:run:before` : executed on capacitor run before capacitor open is executed -- `ionic:capacitor:build:before` : executed on capacitor build before capacitor open is executed -- `ionic:capacitor:sync:after`: executed during `ionic capacitor sync` after a sync +- `ionic:serve:before`: 開発サーバーが起動する前に実行されます +- `ionic:serve:after`: 開発サーバーが終了した後に実行されます +- `ionic:build:before`: Web アセットのビルドが始まる前に実行されます +- `ionic:build:after`: Web アセットのビルドが完了した後に実行されます +- `ionic:capacitor:run:before`: `ionic capacitor run` 中、Capacitor が開かれる前に実行されます +- `ionic:capacitor:build:before`: `ionic capacitor build` 中、Capacitor が開かれる前に実行されます +- `ionic:capacitor:sync:after`: `ionic capacitor sync` の同期完了後に実行されます When using a shell script for any of the hooks, hook context is defined in environment variables prefixed with `IONIC_CLI_HOOK_CTX_`. @@ -126,21 +126,21 @@ The Ionic CLI supports a multi-app configuration setup, which involves multiple :::note Ionic CLI は multi-app 構成セットアップをサポートしており、複数の Ionic アプリケーションと共有コードが単一のリポジトリ [monorepo](/docs/reference/glossary#monorepo) 内に存在することができます。 -If you're using Angular, please see [this article](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) for examples. +Angular を使用している場合は、例について [Angular モノレポガイド](https://github.com/ionic-team/ionic-cli/wiki/Angular-Monorepo) を参照してください。 ::: ### セットアップステップ -1. Create a directory and initialize a monorepo (see [Project Structure](#project-structure) for full details). -1. Initialize the monorepo as an Ionic multi-app project. This will create a multi-app `ionic.config.json` file. See [Config File](#config-file) for full details. +1. ディレクトリを作成し、モノレポを初期化します（詳細は[プロジェクト構造](#project-structure)を参照してください）。 +1. モノレポを Ionic マルチアプリプロジェクトとして初期化します。これによりマルチアプリ`ionic.config.json`ファイルが作成されます。詳細は[設定ファイル](#config-file)を参照してください。 ```shell $ ionic init --multi-app ``` -1. Use `ionic start` to create Ionic apps or `ionic init` to initialize existing apps (see [Adding an App](#adding-an-app) for full details). +1. `ionic start`を使用して Ionic アプリを作成するか、`ionic init`を使用して既存のアプリを初期化します（詳細は[アプリの追加](#adding-an-app)を参照してください）。 -### プロジェクト構成 +### プロジェクト構成 {/* #project-structure */} In a multi-app project, project structure is flexible. The only requirement is a multi-app `ionic.config.json` file at the root of the repository. @@ -155,7 +155,7 @@ ionic.config.json package.json ``` -### 設定ファイル +### 設定ファイル {/* #config-file */} In a multi-app project, apps share a single `ionic.config.json` file at the root of the repository instead of each app having their own. The multi-app config file contains the configuration for each app by nesting configuration objects in a `projects` object. A default app can be specified using `defaultProject`. @@ -187,7 +187,7 @@ When a multi-app project is detected, the Ionic CLI will operate under the conte 1. If the CLI detects it is being run within a project path, configured with the `root` key, it will select the matched project. For example, using the CLI within the `apps/myOtherApp/src` directory will select the `myOtherApp` project. 1. If a `defaultProject` is specified in `ionic.config.json`, it will select the specified project when the above criteria is not met. -### アプリの追加 +### アプリの追加 {/* #adding-an-app */} Apps can be registered in a multi-app project either by using `ionic start` to create new apps or `ionic init` to initialize existing apps. @@ -240,4 +240,4 @@ If these variables are set in the environment, `ionic cordova build ios` will us ### 遠隔計測について -CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set-g telemetry false`を実行してください。 +CLI から Ionic に使用状況データが送信されるため、操作性が向上します。この機能を無効にするには、`ionic config set -g telemetry false`を実行してください。 diff --git a/docs/cli/livereload.md b/docs/cli/livereload.md index be45d2e0392..98a8e5adfe8 100644 --- a/docs/cli/livereload.md +++ b/docs/cli/livereload.md @@ -55,10 +55,10 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl ## Tips -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.md). -- You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. -- For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (see `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. -- If you are using a development container with Angular, you may see that live reload does not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`. +- Cordova では、`--device`、`--emulator`、および`--target`オプションを使用してターゲットデバイスを絞り込みます。`--list`オプションを使用すると、すべてのターゲットを一覧表示できます。使用方法は[コマンドドキュメント](commands/cordova-run.md)を参照してください。 +- `ionic serve`および`ionic cordova run`または`ionic capacitor run`の`--livereload-url`オプションを使用することで、開発サーバープロセスとデプロイプロセスを分離できます。 +- Android の場合、[adb](https://developer.android.com/studio/command-line/adb)を設定して、adb サーバー実行中に常にポートを転送することが可能です（`adb reverse`を参照）。ポート転送が設定されると、外部アドレスは不要になります。また、後続のデプロイに USB ケーブルを使用しなくても、TCP 経由で adb ブリッジを設定することもできます。 +- Angular を使用した開発コンテナでは、ライブリロードが動作しない場合があります。これを修正するには、`angular.json`内で`projects.app.architect.serve.configurations.development.poll`を`1`に設定してください。 ### Using SSL @@ -70,4 +70,4 @@ For example, with an Angular application you can run the following to pass a cer ionic capacitor run android --livereload --external --ssl -- --ssl-cert='server.crt' --ssl-key='server.key' ``` -Using a self signed certificate and ensuring it is trusted by the device is a complicated topic and is covered in [this article](https://ionic.zendesk.com/hc/en-us/articles/11384425513623). +自己署名証明書を使用し、デバイスによって信頼されるようにすることは複雑なトピックであり、[Ionic サポート記事の自己署名証明書に関する記事](https://ionic.zendesk.com/hc/en-us/articles/11384425513623)で取り上げられています。 diff --git a/docs/components.md b/docs/components.md index dddb57829b5..ad645847d2a 100644 --- a/docs/components.md +++ b/docs/components.md @@ -7,10 +7,10 @@ import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; - UIコンポーネント | User Interface Application Building Components + UI コンポーネント | ユーザーインターフェイスを構築するコンポーネント ``` Remember that removing the photo from the `photos` array triggers the `cachePhotos` method for us automatically. @@ -176,7 +197,7 @@ Remember that removing the photo from the `photos` array triggers the `cachePhot Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪 :::note -Remember, you can find the complete source code for this app [here](https://github.com/ionic-team/tutorial-photo-gallery-vue). +このアプリの[完全なソースコード](https://github.com/ionic-team/tutorial-photo-gallery-vue)は GitHub で見つけることができます。 ::: In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/docs/vue/your-first-app/8-distribute.md b/docs/vue/your-first-app/8-distribute.md index 9a6d7d1b71b..760c8c64802 100644 --- a/docs/vue/your-first-app/8-distribute.md +++ b/docs/vue/your-first-app/8-distribute.md @@ -11,7 +11,7 @@ sidebar_label: Distribute /> -Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. The entire Quickstart guide can be found [here](https://ionic.io/docs/appflow/quickstart). +最初のアプリを作成したので、次に皆が使えるように配布したくなるでしょう。アプリケーションを構築して展開する仕組みは非常に面倒な場合があります。そこで[Appflow](https://ionic.io/docs/appflow/)の出番です。Appflow を使うことで、ウェブおよびネイティブビルドの生成、ライブアプデートの配信、アプリストアへのアプリ公開、そしてプロセス全体の自動化が効果的に行えます。詳細は[Appflow クイックスタートガイド](https://ionic.io/docs/appflow/quickstart)を参照してください。 Below we will run through an overview of the steps. @@ -46,7 +46,7 @@ git commit -m "added appflow sdk" # commit staged changes git push origin main # push the changes from the main branch to your git host ``` -After the push is made, you will then see your commit under the `Commits` tab of the Appflow Dashboard. For more on this, take a look at the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. +プッシュが行われると、そのコミットは Appflow ダッシュボードの`Commits`タブに表示されます。詳細については、Appflow ドキュメント内の[コミットをプッシュする](https://ionic.io/docs/appflow/quickstart/push)セクションを参照してください。 ## Deploy a Live Update @@ -62,7 +62,7 @@ To receive this live update, you will need to run the app on a device or an emul ionic cordova run [ios | android] [options] ``` -Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and you will see the updates applied! +アプリが展開したチャネルを正しくリッスンするように設定されている場合、セットアップ時に自動更新方式を選択していれば、アプリの起動時にすぐに更新が行われます。バックグラウンド更新方式を選択した場合は、更新がダウンロードされることを確認するために、アプリ内に約 30 秒間滞在してください。その後、アプリを閉じて再度開くと、更新が適用されます！ To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs. @@ -78,7 +78,7 @@ Further information regarding building native binaries can be found inside of th [Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. -For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. There you will see details on creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. +詳細については、Appflow ドキュメント内の[オートメーションの作成](https://ionic.io/docs/appflow/quickstart/automation)セクションを参照してください。このセクションでは単一のオートメーションの作成について説明されています。しかし、異なるブランチやワークフロー用に複数のオートメーションを作成し、ニーズに合わせてカスタマイズすることも可能です。重要な注意点として、オートメーション作成の機能は、[ベーシックプラン](https://ionic.io/pricing)以上のユーザー向けに提供されています。 ## Create an Environment diff --git a/docusaurus.config.js b/docusaurus.config.js index f79eb29a60c..cdefa58ae25 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -46,7 +46,25 @@ module.exports = { }, }, onBrokenLinks: 'warn', - onBrokenMarkdownLinks: 'warn', + /** + * Docusaurus Faster replaces the Webpack/Babel/Terser toolchain with + * Rspack/SWC/Lightning CSS, which cuts build times and memory usage on a + * site with this many versioned pages. It becomes the default in v4. + * + * `removeLegacyPostBuildHeadAttribute` is required by the `ssgWorkerThreads` + * part of `faster`, so it has to be enabled alongside it. + */ + future: { + v4: { + removeLegacyPostBuildHeadAttribute: true, + }, + faster: true, + }, + markdown: { + hooks: { + onBrokenMarkdownLinks: 'warn', + }, + }, favicon: 'img/meta/favicon-96x96.png', organizationName: 'ionic-team', projectName: 'ionic-docs', @@ -83,7 +101,7 @@ module.exports = { /** @type {import('@docusaurus/plugin-content-docs').VersionOptions} */ versions: { current: { - label: 'v8', + label: 'v9', }, }, }, @@ -183,8 +201,8 @@ module.exports = { }, { type: 'doc', - docId: 'updating/8-0', - label: 'Ionic v8.0.0 アップグレードガイド', + docId: 'updating/9-0', + label: 'Ionic v9.0.0 アップグレードガイド', position: 'left', className: 'cta', }, @@ -288,12 +306,7 @@ module.exports = { position: 'right', dropdownItemsBefore: [], dropdownItemsAfter: [ - { - href: 'https://ionicframework.com/docs', - label: 'English', - target: '_self', - rel: null, - }, + { href: 'https://ionicframework.com/docs', label: 'English', target: '_self', rel: null }, { href: 'https://ionicframework.com/translate', label: 'Translate', @@ -358,7 +371,7 @@ module.exports = { name: 'ionic-docs-ads', async loadContent() { const repoName = 'ionicframeworkcom'; - const endpoint = prismic.getEndpoint(repoName); + const endpoint = prismic.getRepositoryEndpoint(repoName); const client = prismic.createClient(endpoint, { fetch, }); @@ -376,6 +389,12 @@ module.exports = { versions: VERSIONS_JSON, }, ], + [ + 'docusaurus-plugin-copy-page-button', + { + injectButton: false, + }, + ], ], customFields: {}, themes: [], diff --git a/package-lock.json b/package-lock.json index de24556ec1a..69108e34340 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,177 +8,204 @@ "name": "ionic-docs", "version": "0.0.0", "dependencies": { - "@docusaurus/core": "^3.7.0", - "@docusaurus/mdx-loader": "^3.7.0", - "@docusaurus/plugin-client-redirects": "^3.7.0", - "@docusaurus/preset-classic": "^3.7.0", + "@docusaurus/core": "^3.10.2", + "@docusaurus/faster": "^3.10.2", + "@docusaurus/mdx-loader": "^3.10.2", + "@docusaurus/plugin-client-redirects": "^3.10.2", + "@docusaurus/preset-classic": "^3.10.2", + "@floating-ui/react": "^0.27.20", "@ionic-internal/ionic-ds": "^7.0.0", "@mdx-js/react": "^3.0.0", - "@prismicio/client": "^6.4.2", - "@prismicio/react": "^2.2.0", + "@prismicio/client": "^7.21.8", + "@prismicio/react": "^3.4.1", "@stackblitz/sdk": "^1.6.0", - "@tippyjs/react": "^4.2.6", "clsx": "^1.1.1", - "concurrently": "^6.2.0", "crowdin": "^3.5.0", + "docusaurus-plugin-copy-page-button": "^0.8.2", "docusaurus-plugin-module-alias": "^0.0.2", "docusaurus-plugin-sass": "^0.2.6", "fs-extra": "^9.1.0", "modern-normalize": "^1.1.0", "prism-react-renderer": "^2.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.2.8", + "react-dom": "^19.2.8", "remark-html": "^16.0.1", "remark-parse": "^11.0.0", "sass": "^1.44.0", "semver": "^7.3.5" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^3.7.0", - "@docusaurus/tsconfig": "^3.7.0", + "@docusaurus/module-type-aliases": "^3.10.2", + "@docusaurus/tsconfig": "^3.10.2", "@ionic/prettier-config": "^3.0.0", - "@types/react": "^18.2.29", + "@types/react": "^19.2.18", "cspell": "^6.31.3", - "deepl": "^1.0.13", "html-loader": "^3.1.0", "hygen": "^6.2.11", "prettier": "^2.8.8", - "ts-node": "^10.4.0", - "typescript": "^5.2.2" + "typescript": "^5.2.2", + "vitest": "^4.1.7" }, "engines": { "node": ">=20.0.0" } }, - "node_modules/@algolia/autocomplete-core": { - "version": "1.17.9", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.17.9.tgz", - "integrity": "sha512-O7BxrpLDPJWWHv/DLA9DRFWs+iY1uOJZkqUwjS5HSZAGcl0hIVCQ97LTLewiZmZ402JYUrun+8NqFP+hCknlbQ==", + "node_modules/@11ty/gray-matter": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@11ty/gray-matter/-/gray-matter-1.0.0.tgz", + "integrity": "sha512-7mJJl+wf1AByoT0PknQiQfOPnVNT4fevGrUBVWO4HXsnYn1aQPyRyrELYrNUFleUBM++KzMKN6QaxHPk0t/6/g==", + "license": "MIT", "dependencies": { - "@algolia/autocomplete-plugin-algolia-insights": "1.17.9", - "@algolia/autocomplete-shared": "1.17.9" + "js-yaml": "^4.1.0", + "kind-of": "^6.0.3", + "section-matter": "^1.0.0", + "strip-bom-string": "^1.0.0" + }, + "engines": { + "node": ">=11" } }, - "node_modules/@algolia/autocomplete-plugin-algolia-insights": { - "version": "1.17.9", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.17.9.tgz", - "integrity": "sha512-u1fEHkCbWF92DBeB/KHeMacsjsoI0wFhjZtlCq2ddZbAehshbZST6Hs0Avkc0s+4UyBGbMDnSuXHLuvRWK5iDQ==", + "node_modules/@algolia/abtesting": { + "version": "1.22.0", + "resolved": "https://registry.npmjs.org/@algolia/abtesting/-/abtesting-1.22.0.tgz", + "integrity": "sha512-BFR6zNowNKcY7Ou7TaJc9QWexES4YKPbmf/OTFofpdsdhz4x6q0lbxp3duO0EHnyrN7rE4ba/TSXuY+BDGu4+g==", + "license": "MIT", "dependencies": { - "@algolia/autocomplete-shared": "1.17.9" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, - "peerDependencies": { - "search-insights": ">= 1 < 3" + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/autocomplete-core": { + "version": "1.19.9", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.19.9.tgz", + "integrity": "sha512-4U2JKLMWlDu0CotYyUkWakDxr8AIav3QtIUXXRpfavYN29aVWfzlwJp9T0rPKEf/dO2QCPAUc0Kq1Tj1GJxo2A==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-plugin-algolia-insights": "1.19.9", + "@algolia/autocomplete-shared": "1.19.9" } }, - "node_modules/@algolia/autocomplete-preset-algolia": { - "version": "1.17.9", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.17.9.tgz", - "integrity": "sha512-Na1OuceSJeg8j7ZWn5ssMu/Ax3amtOwk76u4h5J4eK2Nx2KB5qt0Z4cOapCsxot9VcEN11ADV5aUSlQF4RhGjQ==", + "node_modules/@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.19.9", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.9.tgz", + "integrity": "sha512-6mExC6X7762s2SV3eJy3QOkB8bdMmnUhQ2agvGVDuzwoGyr3PquGSY/0vPQXCfiAiCaXUz1rXn+lwghgSi0l0w==", + "license": "MIT", "dependencies": { - "@algolia/autocomplete-shared": "1.17.9" + "@algolia/autocomplete-shared": "1.19.9" }, "peerDependencies": { - "@algolia/client-search": ">= 4.9.1 < 6", - "algoliasearch": ">= 4.9.1 < 6" + "search-insights": ">= 1 < 3" } }, "node_modules/@algolia/autocomplete-shared": { - "version": "1.17.9", - "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.17.9.tgz", - "integrity": "sha512-iDf05JDQ7I0b7JEA/9IektxN/80a2MZ1ToohfmNS3rfeuQnIKI3IJlIafD0xu4StbtQTghx9T3Maa97ytkXenQ==", + "version": "1.19.9", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.9.tgz", + "integrity": "sha512-YosP9Uoek6y/Ur1r1qeogk4biMe/hzkyNcgMCciw0//3XpCM7VlYLSHnyt/vOnEOGhCCc0+3v+unEiH6zz+Z1A==", + "license": "MIT", "peerDependencies": { "@algolia/client-search": ">= 4.9.1 < 6", "algoliasearch": ">= 4.9.1 < 6" } }, "node_modules/@algolia/client-abtesting": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.23.4.tgz", - "integrity": "sha512-WIMT2Kxy+FFWXWQxIU8QgbTioL+SGE24zhpj0kipG4uQbzXwONaWt7ffaYLjfge3gcGSgJVv+1VlahVckafluQ==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-abtesting/-/client-abtesting-5.56.0.tgz", + "integrity": "sha512-7r4Z3NC7yU1oAQVWJNA2HX7tX481F3pJvCGyLIXiTdBcthz4Q/o21jwcMYDFkuI92UWTNBQQmHYgwHo1zS5dzg==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-analytics": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.23.4.tgz", - "integrity": "sha512-4B9gChENsQA9kFmFlb+x3YhBz2Gx3vSsm81FHI1yJ3fn2zlxREHmfrjyqYoMunsU7BybT/o5Nb7ccCbm/vfseA==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-5.56.0.tgz", + "integrity": "sha512-avmjXQSq+jadFO8Xl2em05/uQdQnEmHsJyOAdVbZkmVgpMfxL12aJwVVfGNwYr9nulcpuJN1X0lTaQ5wxuNGcA==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-common": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.23.4.tgz", - "integrity": "sha512-bsj0lwU2ytiWLtl7sPunr+oLe+0YJql9FozJln5BnIiqfKOaseSDdV42060vUy+D4373f2XBI009K/rm2IXYMA==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-5.56.0.tgz", + "integrity": "sha512-v2TPStUhY//ripPjIVclZ8AWc7DEGooXULZGFlFu37zNatgHjw34oZZ+OSbbc/YHO+xZwPl62I1k8xH1m4S2eg==", + "license": "MIT", "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-insights": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.23.4.tgz", - "integrity": "sha512-XSCtAYvJ/hnfDHfRVMbBH0dayR+2ofVZy3jf5qyifjguC6rwxDsSdQvXpT0QFVyG+h8UPGtDhMPoUIng4wIcZA==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-insights/-/client-insights-5.56.0.tgz", + "integrity": "sha512-P0ehROpM4Sem3Sqo5x2cKPgj67D3G3jy0rh1Amwkcvsfr6tkvIcdCmerieanqTF7NxUMPNFLkpIFeMO8Rpa50w==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-personalization": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.23.4.tgz", - "integrity": "sha512-l/0QvqgRFFOf7BnKSJ3myd1WbDr86ftVaa3PQwlsNh7IpIHmvVcT83Bi5zlORozVGMwaKfyPZo6O48PZELsOeA==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-5.56.0.tgz", + "integrity": "sha512-SXK3Vn3WVxyzbm31oePZBJkp1wpOyuWdd4B/Pv7n0aXDxmeSWhC1R1FC1517mMrFAIaPH4Rt0x6RUe7ZNjz8FA==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-query-suggestions": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.23.4.tgz", - "integrity": "sha512-TB0htrDgVacVGtPDyENoM6VIeYqR+pMsDovW94dfi2JoaRxfqu/tYmLpvgWcOknP6wLbr8bA+G7t/NiGksNAwQ==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-query-suggestions/-/client-query-suggestions-5.56.0.tgz", + "integrity": "sha512-5+ZdX8garFnmycnZgKhtXHePEaLj5zqDxI/0lkhhluzCcvTn0/PvvTirTg8hHYetQHvn7GDyeAiqTAieMvMW4A==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/client-search": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.23.4.tgz", - "integrity": "sha512-uBGo6KwUP6z+u6HZWRui8UJClS7fgUIAiYd1prUqCbkzDiCngTOzxaJbEvrdkK0hGCQtnPDiuNhC5MhtVNN4Eg==", - "peer": true, + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-5.56.0.tgz", + "integrity": "sha512-+mKUdYvqOi0BcvpAEyCEw49vSBptufIcfibtHz2bdr1pI789M46Yt0uQEk/sxtK3teh71OQvVFHaTDzShUWewQ==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" @@ -187,78 +214,85 @@ "node_modules/@algolia/events": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/@algolia/events/-/events-4.0.1.tgz", - "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==" + "integrity": "sha512-FQzvOCgoFXAbf5Y6mYozw2aj5KCJoA3m4heImceldzPSMbdyS4atVjJzXKMsfX3wnZTFYwkkt8/z8UesLHlSBQ==", + "license": "MIT" }, "node_modules/@algolia/ingestion": { - "version": "1.23.4", - "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.23.4.tgz", - "integrity": "sha512-Si6rFuGnSeEUPU9QchYvbknvEIyCRK7nkeaPVQdZpABU7m4V/tsiWdHmjVodtx3h20VZivJdHeQO9XbHxBOcCw==", + "version": "1.56.0", + "resolved": "https://registry.npmjs.org/@algolia/ingestion/-/ingestion-1.56.0.tgz", + "integrity": "sha512-9g/zj+AZx5moFcdFIrYQoVrueXivjUcc3MQHtCYT8WhIuk1lUh1AyEhvJCS0XBZld09cLvd1AZ3BvDBpVpX2UA==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/monitoring": { - "version": "1.23.4", - "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.23.4.tgz", - "integrity": "sha512-EXGoVVTshraqPJgr5cMd1fq7Jm71Ew6MpGCEaxI5PErBpJAmKdtjRIzs6JOGKHRaWLi+jdbJPYc2y8RN4qcx5Q==", + "version": "1.56.0", + "resolved": "https://registry.npmjs.org/@algolia/monitoring/-/monitoring-1.56.0.tgz", + "integrity": "sha512-Qf3Sr6f9A9uxCZUf3MXS0d2b877uYzEB5yxqpVGXAhcJnBCQjrRRon0KvefpGkxy+BshrIJs96OUoMtGqXTFDA==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/recommend": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.23.4.tgz", - "integrity": "sha512-1t6glwKVCkjvBNlng2itTf8fwaLSqkL4JaMENgR3WTGR8mmW2akocUy/ZYSQcG4TcR7qu4zW2UMGAwLoWoflgQ==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/recommend/-/recommend-5.56.0.tgz", + "integrity": "sha512-GXWG1rWc5wu8hY4N33Y3b6ernY6sAdAvmKWN/zHAiACOx40WnpG0TVX5YazCAr/9gOYGInSiM2A0y2jy2xbiDA==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/client-common": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/requester-browser-xhr": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.23.4.tgz", - "integrity": "sha512-UUuizcgc5+VSY8hqzDFVdJ3Wcto03lpbFRGPgW12pHTlUQHUTADtIpIhkLLOZRCjXmCVhtr97Z+eR6LcRYXa3Q==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-5.56.0.tgz", + "integrity": "sha512-7t24cBxaInS3mZb7ddEaZT/tp6q+/aR4YttsQVyP1/i+LmwPR34atO35KjaLFCcRVrlP7sYOAqkCfg6lIRB+ew==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4" + "@algolia/client-common": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/requester-fetch": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.23.4.tgz", - "integrity": "sha512-UhDg6elsek6NnV5z4VG1qMwR6vbp+rTMBEnl/v4hUyXQazU+CNdYkl++cpdmLwGI/7nXc28xtZiL90Es3I7viQ==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-fetch/-/requester-fetch-5.56.0.tgz", + "integrity": "sha512-R7ePHgVYmDFjZpvrsVAfbDz/d4RxKAYZ5/vgLfIsCVRZRryjWl/3INOxpOICzitehQ5FjNtNjcLQTrmHPTcHBQ==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4" + "@algolia/client-common": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/@algolia/requester-node-http": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.23.4.tgz", - "integrity": "sha512-jXGzGBRUS0oywQwnaCA6mMDJO7LoC3dYSLsyNfIqxDR4SNGLhtg3je0Y31lc24OA4nYyKAYgVLtjfrpcpsWShg==", + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-5.56.0.tgz", + "integrity": "sha512-PIOUXlSnrqM0S+WOgDRb4RzotydJH7ZoT6tOyL7tAO7qJOfvX5wsEW8Pe+PMKMwvuI4/gIyK9cg2H7lJXqnc4Q==", + "license": "MIT", "dependencies": { - "@algolia/client-common": "5.23.4" + "@algolia/client-common": "5.56.0" }, "engines": { "node": ">= 14.0.0" @@ -277,22 +311,24 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", + "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/compat-data": { - "version": "7.26.8", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.8.tgz", - "integrity": "sha512-oH5UPLMWR3L2wEFLnFJ1TZXqHufiTKAiLfqw5zkhS4dKXLJ10yVztfil/twG8EDTA4F/tvVNw9nOl4ZMslB8rQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", + "license": "MIT", "engines": { "node": ">=6.9.0" } @@ -301,7 +337,6 @@ "version": "7.26.10", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz", "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==", - "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", @@ -336,14 +371,15 @@ } }, "node_modules/@babel/generator": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.27.0.tgz", - "integrity": "sha512-VybsKvpiN1gU1sdMZIp7FcqphVVKEwcuj02x73uvcHE0PTihx1nlBcowYWhDwjpoAXRv43+gDzyggGnn1XZhVw==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.8.tgz", + "integrity": "sha512-gZbepsdh3WDtgZKWL+vTPh71LSBrm/Y4/QDZBVCcYfmeTEEuoOYwlSy+G1StfJg+/Zy550u/3TATbm7qDbbMtg==", + "license": "MIT", "dependencies": { - "@babel/parser": "^7.27.0", - "@babel/types": "^7.27.0", - "@jridgewell/gen-mapping": "^0.3.5", - "@jridgewell/trace-mapping": "^0.3.25", + "@babel/parser": "^7.29.8", + "@babel/types": "^7.29.8", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" }, "engines": { @@ -351,23 +387,25 @@ } }, "node_modules/@babel/helper-annotate-as-pure": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.25.9.tgz", - "integrity": "sha512-gv7320KBUFJz1RnylIg5WWYPRXKZ884AGkYpgpWW02TH66Dl+HaC1t1CKd0z3R4b6hdYEcmrNZHUmfCP+1u3/g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.29.7.tgz", + "integrity": "sha512-OoK6239jHPuSQOoS0kfTVKn0b/rVTk0seKq4Gd2UMLtmOVLjDC0ki3e+c90Trqv2gMfvJFqkiljrr568+qddiw==", + "license": "MIT", "dependencies": { - "@babel/types": "^7.25.9" + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.0.tgz", - "integrity": "sha512-LVk7fbXml0H2xH34dFzKQ7TDZ2G4/rVTOrq9V+icbbadjbVxxeFeDsNHv2SrZeWoA+6ZiTyWYWtScEIW07EAcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", + "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.26.8", - "@babel/helper-validator-option": "^7.25.9", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -385,16 +423,17 @@ } }, "node_modules/@babel/helper-create-class-features-plugin": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.27.0.tgz", - "integrity": "sha512-vSGCvMecvFCd/BdpGlhpXYNhhC4ccxyvQWpbGL4CWbvfEoLFWUZuSuf7s9Aw70flgQF+6vptvgK2IfOnKlRmBg==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-member-expression-to-functions": "^7.25.9", - "@babel/helper-optimise-call-expression": "^7.25.9", - "@babel/helper-replace-supers": "^7.26.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", - "@babel/traverse": "^7.27.0", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.29.7.tgz", + "integrity": "sha512-IY3ZD9Tmooqr3TUhc3DUWxiuo8xx1DWLhd5M7hQ+ZWJamqM2BbalrBJb2MisSLoYorOj75U03qULCxQTY9r3hg==", + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-member-expression-to-functions": "^7.29.7", + "@babel/helper-optimise-call-expression": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", + "@babel/traverse": "^7.29.7", "semver": "^6.3.1" }, "engines": { @@ -408,17 +447,19 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", "bin": { "semver": "bin/semver.js" } }, "node_modules/@babel/helper-create-regexp-features-plugin": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.27.0.tgz", - "integrity": "sha512-fO8l08T76v48BhpNRW/nQ0MxfnSdoSKUJBMjubOAYffsVuGG5qOfMq7N6Es7UJvi7Y8goXXo07EfcHZXDPuELQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.29.7.tgz", + "integrity": "sha512-907Uymvqgg1dwUA+7IGwFAOSYzQOuzPXKNJ1yxzwPffzkYFg2q2eHi1fIOs6sXkG9NbIUMunnUlkYsfRFNvomg==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "regexpu-core": "^6.2.0", + "@babel/helper-annotate-as-pure": "^7.29.7", + "regexpu-core": "^6.3.1", "semver": "^6.3.1" }, "engines": { @@ -432,57 +473,71 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", "bin": { "semver": "bin/semver.js" } }, "node_modules/@babel/helper-define-polyfill-provider": { - "version": "0.6.4", - "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.4.tgz", - "integrity": "sha512-jljfR1rGnXXNWnmQg2K3+bvhkxB51Rl32QRaOTuwwjviGrHzIbSc8+x9CpraDtbT7mfyjXObULP4w/adunNwAw==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.6.8.tgz", + "integrity": "sha512-47UwBLPpQi1NoWzLuHNjRoHlYXMwIJoBf7MFou6viC/sIHWYygpvr0B6IAyh5sBdA2nr2LPIRww8lfaUVQINBA==", + "license": "MIT", "dependencies": { - "@babel/helper-compilation-targets": "^7.22.6", - "@babel/helper-plugin-utils": "^7.22.5", - "debug": "^4.1.1", + "@babel/helper-compilation-targets": "^7.28.6", + "@babel/helper-plugin-utils": "^7.28.6", + "debug": "^4.4.3", "lodash.debounce": "^4.0.8", - "resolve": "^1.14.2" + "resolve": "^1.22.11" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/helper-member-expression-to-functions": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.25.9.tgz", - "integrity": "sha512-wbfdZ9w5vk0C0oyHqAJbc62+vet5prjj01jjJ8sKn3j9h3MQQlflEdXYvuqRWjHnM12coDEqiC1IRCi0U/EKwQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.29.7.tgz", + "integrity": "sha512-j+7JYmk1JYDtACIGj0QJqqWZjoUpMoEikQGADMaHgCMCSDqd2+P32rfcibUNrGOMWrlzK1WJBdxrB3JJQZwWtg==", + "license": "MIT", "dependencies": { - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-imports": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz", - "integrity": "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", + "license": "MIT", "dependencies": { - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.26.0.tgz", - "integrity": "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -492,32 +547,35 @@ } }, "node_modules/@babel/helper-optimise-call-expression": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.25.9.tgz", - "integrity": "sha512-FIpuNaz5ow8VyrYcnXQTDRGvV6tTjkNtCK/RYNDXGSLlUD6cBuQTSw43CShGxjvfBTfcUA/r6UhUCbtYqkhcuQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.29.7.tgz", + "integrity": "sha512-+kmGVjcT9RGYzoDwdwEqEvGgKe3BYq+O1iGzjFubaNgZHwYHP6lsF2Yghf4kEuv9BV7tYDZ913aBW9am6YKong==", + "license": "MIT", "dependencies": { - "@babel/types": "^7.25.9" + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.26.5.tgz", - "integrity": "sha512-RS+jZcRdZdRFzMyr+wcsaqOmld1/EqTghfaBGQQd/WnRdzdlvSZ//kF7U8VQTxf1ynZ4cjUcYgjVGx13ewNPMg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-remap-async-to-generator": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.25.9.tgz", - "integrity": "sha512-IZtukuUeBbhgOcaW2s06OXTzVNJR0ybm4W5xC1opWFFJMZbwRj5LCk+ByYH7WdZPZTt8KnFwA8pvjN2yqcPlgw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.29.7.tgz", + "integrity": "sha512-16AMiW26DbXWBbr3B8wNozKM0ydMLB892vaOaJW/fPJdnT8vJk5sdkQcU/isqUxyCE0cEoa8wZOcbgDuC4b6Og==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-wrap-function": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-wrap-function": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -527,13 +585,14 @@ } }, "node_modules/@babel/helper-replace-supers": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.26.5.tgz", - "integrity": "sha512-bJ6iIVdYX1YooY2X7w1q6VITt+LnUILtNk7zT78ykuwStx8BauCzxvFqFaHjOpW1bVnSUM1PN1f0p5P21wHxvg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.29.7.tgz", + "integrity": "sha512-atfGXWSeCiF4DnKZIfmJfQRkSw9b9gNNXR1kqKjbhG4pGYCOnkp8OcTB8E3NXjBu8NpheSnOeNKz8KT7UNFTmQ==", + "license": "MIT", "dependencies": { - "@babel/helper-member-expression-to-functions": "^7.25.9", - "@babel/helper-optimise-call-expression": "^7.25.9", - "@babel/traverse": "^7.26.5" + "@babel/helper-member-expression-to-functions": "^7.29.7", + "@babel/helper-optimise-call-expression": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -543,49 +602,54 @@ } }, "node_modules/@babel/helper-skip-transparent-expression-wrappers": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.25.9.tgz", - "integrity": "sha512-K4Du3BFa3gvyhzgPcntrkDgZzQaq6uozzcpGbOO1OEJaI+EJdqWIMTLgFgQf6lrfiDFo5FU+BxKepI9RmZqahA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.29.7.tgz", + "integrity": "sha512-brcMGQaVzIeUb+6/bs1Av0f8YuNNjKY2JyvfRCsFuFsdKccEQ5Ges2y74D74NZ1Rz8lKJ9ksJkfqwQFJ/iNEyQ==", + "license": "MIT", "dependencies": { - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.25.9.tgz", - "integrity": "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", + "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-wrap-function": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.25.9.tgz", - "integrity": "sha512-ETzz9UTjQSTmw39GboatdymDq4XIQbR8ySgVrylRhPOFpsd+JrKHIuF0de7GCWmem+T4uC5z7EZguod7Wj4A4g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.29.7.tgz", + "integrity": "sha512-iES0Skag9ERIF68aXadpO6dbXa03mNWK3sEqJaMnLNs/eC3l0lkImdfoy6Y09/SfkpawdAB4RjQ7PVA7TcVGdw==", + "license": "MIT", "dependencies": { - "@babel/template": "^7.25.9", - "@babel/traverse": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -604,11 +668,12 @@ } }, "node_modules/@babel/parser": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz", - "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz", + "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", + "license": "MIT", "dependencies": { - "@babel/types": "^7.27.0" + "@babel/types": "^7.29.8" }, "bin": { "parser": "bin/babel-parser.js" @@ -618,12 +683,13 @@ } }, "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.25.9.tgz", - "integrity": "sha512-ZkRyVkThtxQ/J6nv3JFYv1RYY+JT5BvU0y3k5bWrmuG4woXypRa4PXmm9RhOwodRkYFWqC0C0cqcJ4OqR7kW+g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.29.7.tgz", + "integrity": "sha512-j8SrR0zLZrRsC09DlszEx8FpMiwukKffYXMK0d5LmOglO7vGG6sz/BR/20yHqWH+Lnn31JTt2PE3hIWNgM2J6w==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -633,11 +699,12 @@ } }, "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.25.9.tgz", - "integrity": "sha512-MrGRLZxLD/Zjj0gdU15dfs+HH/OXvnw/U4jJD8vpcP2CJQapPEv1IWwjc/qMg7ItBlPwSv1hRBbb7LeuANdcnw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-class-field-initializer-scope/-/plugin-bugfix-safari-class-field-initializer-scope-7.29.7.tgz", + "integrity": "sha512-r8j8escF+U2FUHo0KOhPUdMzUO+jp9fInva6+ACVAF3Y97Ev+5iNZwiqTghmzNeWwDkOPlYuTcfb1vDaoZKmAQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -647,11 +714,28 @@ } }, "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.25.9.tgz", - "integrity": "sha512-2qUwwfAFpJLZqxd02YW9btUCZHl+RFvdDkNfZwaIJrvB8Tesjsk8pEQkTvGwZXLqXUx/2oyY3ySRhm6HOXuCug==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.29.7.tgz", + "integrity": "sha512-GE1TFSiuFeGsCxmYXZl8HwoPrVlwe4rHPFE8weieGKZqnDORK+Ar3vgWMgW+AOxQ6/2TgLSKx9p6W7O4rC6qgQ==", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array/-/plugin-bugfix-safari-rest-destructuring-rhs-array-7.29.7.tgz", + "integrity": "sha512-oBNVCvnO5tND+xSopWvV8WNGfpTfgP4Zr/YXXSj8zfmcPktp5Ku/aZlsIowgSD4fjmgHn6sGmB9APVsU5zOdhA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -661,13 +745,14 @@ } }, "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.25.9.tgz", - "integrity": "sha512-6xWgLZTJXwilVjlnV7ospI3xi+sl8lN8rXXbBD6vYn3UYDlGsag8wrZkKcSI8G6KgqKP7vNFaDgeDnfAABq61g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.29.7.tgz", + "integrity": "sha512-QQt9qKHZ2sg/kivaLr7lnQr8HVrQDdBNSfCsTjiDxRuX/K5ORyKq+Bu8Xr0cDE3Dfkv0cw28Ve0EKyKMvulkOw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", - "@babel/plugin-transform-optional-chaining": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", + "@babel/plugin-transform-optional-chaining": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -677,12 +762,13 @@ } }, "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.25.9.tgz", - "integrity": "sha512-aLnMXYPnzwwqhYSCyXfKkIkYgJ8zv9RK+roo9DkTXz38ynIhd9XCbN08s3MGvqL2MYGVUGdRQLL/JqBIeJhJBg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.29.7.tgz", + "integrity": "sha512-pn6QacGLgvCcwc+syUhKE/qSjV2D1IHDB84RNxWYSt1mW3K/SCtjinZ2p0cETJxAWBjPy3K/1lHwG5BjjPxNlw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -695,6 +781,7 @@ "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "license": "MIT", "engines": { "node": ">=6.9.0" }, @@ -706,6 +793,7 @@ "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz", "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==", + "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" }, @@ -714,11 +802,12 @@ } }, "node_modules/@babel/plugin-syntax-import-assertions": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.26.0.tgz", - "integrity": "sha512-QCWT5Hh830hK5EQa7XzuqIkQU9tT/whqbDz7kuaZMHFl1inRRg7JnuAEOQ0Ur0QUl0NufCk1msK2BeY79Aj/eg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.29.7.tgz", + "integrity": "sha512-/An1OCBN93thpBAGyfsK2pcf0jvju1SAtKkL2Ny++B5Sy6sqgzXDQH1cZxWbF96Wuk+bn41MDA9bLd4VVAw6rw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -728,11 +817,12 @@ } }, "node_modules/@babel/plugin-syntax-import-attributes": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.26.0.tgz", - "integrity": "sha512-e2dttdsJ1ZTpi3B9UYGLw41hifAubg19AtCu/2I/F1QNVclOBr1dYpTdmdyZ84Xiz43BS/tCUkMAZNLv12Pi+A==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.29.7.tgz", + "integrity": "sha512-zGYcYfq/WmZ4V+kBIXQon9dSSc8ircGZqw9ZaNhhGj9nZkeBu1jHLBDQqYYi5WA9uawvA2sIMbry2nCFhf5Djg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -742,11 +832,12 @@ } }, "node_modules/@babel/plugin-syntax-jsx": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.25.9.tgz", - "integrity": "sha512-ld6oezHQMZsZfp6pWtbjaNDF2tiiCYYDqQszHt5VV437lewP9aSi2Of99CK0D0XB21k7FLgnLcmQKyKzynfeAA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.29.7.tgz", + "integrity": "sha512-TSu8+mHCoEaaCDEZ0I3+6mvTBYR4PCxQwf2z9/r5Tbztv6NaLR3B9thGTTxX2WGuGHJqRiAbKPeGTJ5XWXVg6A==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -756,11 +847,12 @@ } }, "node_modules/@babel/plugin-syntax-typescript": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.25.9.tgz", - "integrity": "sha512-hjMgRy5hb8uJJjUcdWunWVcoi9bGpJp8p5Ol1229PoN6aytsLwNMgmdftO23wnCLMfVmTwZDWMPNq/D1SY60JQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.29.7.tgz", + "integrity": "sha512-ngr+82Sh0xMz25TPCZi+nC2iTzjfCdWS2ONXTp/PtSCHCgaCNBpdMqgvJ2ccdLlClVZ7sisIgB914j/JFe+RZA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -773,6 +865,7 @@ "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz", "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==", + "license": "MIT", "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.18.6", "@babel/helper-plugin-utils": "^7.18.6" @@ -785,11 +878,12 @@ } }, "node_modules/@babel/plugin-transform-arrow-functions": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.25.9.tgz", - "integrity": "sha512-6jmooXYIwn9ca5/RylZADJ+EnSxVUS5sjeJ9UPk6RWRzXCmOJCy6dqItPJFpw2cuCangPK4OYr5uhGKcmrm5Qg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.29.7.tgz", + "integrity": "sha512-N7zArUXWzAMzm+/N0uPBeVB3Fam5lMxtUwMmDK5f/IBBS7a7p1qeUoxd/6CckXoxUdgsntq1Dh8xNW06maZbDQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -799,13 +893,14 @@ } }, "node_modules/@babel/plugin-transform-async-generator-functions": { - "version": "7.26.8", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.26.8.tgz", - "integrity": "sha512-He9Ej2X7tNf2zdKMAGOsmg2MrFc+hfoAhd3po4cWfo/NWjzEAKa0oQruj1ROVUdl0e6fb6/kE/G3SSxE0lRJOg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.29.7.tgz", + "integrity": "sha512-d98gXZkgswvkyohMBABkhm3GeXhYj8psWfwQ2C7gtfrKGTykQa/iOIi+JJhwMjPlZ6Vm2XN+DCf3Es1EoG4ZLA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5", - "@babel/helper-remap-async-to-generator": "^7.25.9", - "@babel/traverse": "^7.26.8" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-remap-async-to-generator": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -815,13 +910,14 @@ } }, "node_modules/@babel/plugin-transform-async-to-generator": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.25.9.tgz", - "integrity": "sha512-NT7Ejn7Z/LjUH0Gv5KsBCxh7BH3fbLTV0ptHvpeMvrt3cPThHfJfst9Wrb7S8EvJ7vRTFI7z+VAvFVEQn/m5zQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.29.7.tgz", + "integrity": "sha512-pcUb2SS+RMo9TWVBwKGI5ShtoG7R+zBsFmCKDa6fe8c+hPr3XJlZgoE5j6i8W7gDjhyvy+85vmYexanvXh3d1w==", + "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-remap-async-to-generator": "^7.25.9" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-remap-async-to-generator": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -831,11 +927,12 @@ } }, "node_modules/@babel/plugin-transform-block-scoped-functions": { - "version": "7.26.5", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.26.5.tgz", - "integrity": "sha512-chuTSY+hq09+/f5lMj8ZSYgCFpppV2CbYrhNFJ1BFoXpiWPnnAb7R0MqrafCpN8E1+YRrtM1MXZHJdIx8B6rMQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.29.7.tgz", + "integrity": "sha512-cUSmjh72N+rN4PrkFlN1dJwNCwjVp5d38/CQrEsFggkD10UiFlBFgdH3tv5dNsLuHY+3S8db2xCHjhZcv5WgvA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -845,11 +942,12 @@ } }, "node_modules/@babel/plugin-transform-block-scoping": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.27.0.tgz", - "integrity": "sha512-u1jGphZ8uDI2Pj/HJj6YQ6XQLZCNjOlprjxB5SVz6rq2T6SwAR+CdrWK0CP7F+9rDVMXdB0+r6Am5G5aobOjAQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.29.7.tgz", + "integrity": "sha512-ONyr4+AZhKh8yKWInVxU9AXA9EbsyeLcL6V0dJy6M2/62vuvpGm29zzuymbTpdc451GEpDIdAyPLP3r+P61yKQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -859,12 +957,13 @@ } }, "node_modules/@babel/plugin-transform-class-properties": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.25.9.tgz", - "integrity": "sha512-bbMAII8GRSkcd0h0b4X+36GksxuheLFjP65ul9w6C3KgAamI3JqErNgSrosX6ZPj+Mpim5VvEbawXxJCyEUV3Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.29.7.tgz", + "integrity": "sha512-GtcpjFvanPfzNQi3eTitsCqtRRmmqzpy/A+yhTR1HaZo1Ly3EA8ZXxlPyHdR8/IuRMYc3E4wdGBewB2QKQjAaA==", + "license": "MIT", "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -874,12 +973,13 @@ } }, "node_modules/@babel/plugin-transform-class-static-block": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.26.0.tgz", - "integrity": "sha512-6J2APTs7BDDm+UMqP1useWqhcRAXo0WIoVj26N7kPFB6S73Lgvyka4KTZYIxtgYXiN5HTyRObA72N2iu628iTQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.29.7.tgz", + "integrity": "sha512-kibJgmEdX2iMwsHY2tSZNDgj8PwIlCQz7FK9KuGKO8zsuoUwSEhoNnNVp/emKWrbY4HeO6kkXfdMqRKKKXBm2A==", + "license": "MIT", "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -889,16 +989,17 @@ } }, "node_modules/@babel/plugin-transform-classes": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.25.9.tgz", - "integrity": "sha512-mD8APIXmseE7oZvZgGABDyM34GUmK45Um2TXiBUt7PnuAxrgoSVf123qUzPxEr/+/BHrRn5NMZCdE2m/1F8DGg==", - "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-replace-supers": "^7.25.9", - "@babel/traverse": "^7.25.9", - "globals": "^11.1.0" + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.29.7.tgz", + "integrity": "sha512-qV0OGGBVacduzQHE649JyCneOFI/maT+YKsO+K4Yi3xv2wTPNjM/W2o2gdzMwEAZz7fXNTHAe0NcSg30bIN69g==", + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -908,12 +1009,13 @@ } }, "node_modules/@babel/plugin-transform-computed-properties": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.25.9.tgz", - "integrity": "sha512-HnBegGqXZR12xbcTHlJ9HGxw1OniltT26J5YpfruGqtUHlz/xKf/G2ak9e+t0rVqrjXa9WOhvYPz1ERfMj23AA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.29.7.tgz", + "integrity": "sha512-RK7/IyU5phpuCdBAuig5VkzG/EnbDaui5SQGdU9BFrHdV+mV4cUjLMQ9lJDjLNtWHsqtiefpGZUXQP2BiTYMsA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/template": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/template": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -923,11 +1025,13 @@ } }, "node_modules/@babel/plugin-transform-destructuring": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.25.9.tgz", - "integrity": "sha512-WkCGb/3ZxXepmMiX101nnGiU+1CAdut8oHyEOHxkKuS1qKpU2SMXE2uSvfz8PBuLd49V6LEsbtyPhWC7fnkgvQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.29.7.tgz", + "integrity": "sha512-iPX8aD6H9zV5s7ZsqTdNocPN/MGQ5sSMnElKrktxjJRMnB2jN/1p2+R7GkfD6CAYoVFqy5A4XnSIUeGgJzIWpg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -937,12 +1041,13 @@ } }, "node_modules/@babel/plugin-transform-dotall-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.25.9.tgz", - "integrity": "sha512-t7ZQ7g5trIgSRYhI9pIJtRl64KHotutUJsh4Eze5l7olJv+mRSg4/MmbZ0tv1eeqRbdvo/+trvJD/Oc5DmW2cA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.29.7.tgz", + "integrity": "sha512-3qc18hsD2RdZiyJNDNc7HQpv6xbncwh8FYtxNFFzclSyh/trPD9KkVR9BDECUjDLvb7yJVF15GfYUuC+LMkkiQ==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -952,11 +1057,12 @@ } }, "node_modules/@babel/plugin-transform-duplicate-keys": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.25.9.tgz", - "integrity": "sha512-LZxhJ6dvBb/f3x8xwWIuyiAHy56nrRG3PeYTpBkkzkYRRQ6tJLu68lEF5VIqMUZiAV7a8+Tb78nEoMCMcqjXBw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.29.7.tgz", + "integrity": "sha512-6IvRRriEMqnBwD6chtxdLpMYCHWEzN+oL5cyQtjykya19UgzbmKhxmhZgKC/LHxS2nYr9Q/qYPZ5Lr6jOL9+yQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -966,12 +1072,13 @@ } }, "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.25.9.tgz", - "integrity": "sha512-0UfuJS0EsXbRvKnwcLjFtJy/Sxc5J5jhLHnFhy7u4zih97Hz6tJkLU+O+FMMrNZrosUPxDi6sYxJ/EA8jDiAog==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-named-capturing-groups-regex/-/plugin-transform-duplicate-named-capturing-groups-regex-7.29.7.tgz", + "integrity": "sha512-2wiIyo2BjtgU7HufSeDnL9L2O7zr8jmhFKuSr65VpRkUiRKRNpb0mdlk56+XPPKoIrfHqzbMuglDvZun0RISsA==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -981,11 +1088,28 @@ } }, "node_modules/@babel/plugin-transform-dynamic-import": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.25.9.tgz", - "integrity": "sha512-GCggjexbmSLaFhqsojeugBpeaRIgWNTcgKVq/0qIteFEqY2A+b9QidYadrWlnbWQUrW5fn+mCvf3tr7OeBFTyg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.29.7.tgz", + "integrity": "sha512-giOlEm/EFjfjr+te9NsdjkUo2v4f8rS/SXPumRVHAtbNcyNlvtREkU1dZzaIDclNpnaVhlCqRdFKhJBjBikzLg==", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-explicit-resource-management": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-explicit-resource-management/-/plugin-transform-explicit-resource-management-7.29.7.tgz", + "integrity": "sha512-Rstj7coNz8sE+7Ju7ihpHLI564lsK5pUpNNlvptCIC/16E/S5hbl6n3kESPKdNRmqEWlpn5xpS5Q2dvXBsySLw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/plugin-transform-destructuring": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -995,11 +1119,12 @@ } }, "node_modules/@babel/plugin-transform-exponentiation-operator": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.26.3.tgz", - "integrity": "sha512-7CAHcQ58z2chuXPWblnn1K6rLDnDWieghSOEmqQsrBenH0P9InCUtOJYD89pvngljmZlJcz3fcmgYsXFNGa1ZQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.29.7.tgz", + "integrity": "sha512-zFpMOTLZBdW5LfObqcSbL6kefg4R4eLdmvS0wbN9M6D5Mym/sKm9toOoWyVOa+xDjvCnuWcHls2YonXwHvH3CQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1009,11 +1134,12 @@ } }, "node_modules/@babel/plugin-transform-export-namespace-from": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.25.9.tgz", - "integrity": "sha512-2NsEz+CxzJIVOPx2o9UsW1rXLqtChtLoVnwYHHiB04wS5sgn7mrV45fWMBX0Kk+ub9uXytVYfNP2HjbVbCB3Ww==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.29.7.tgz", + "integrity": "sha512-24B2nOy2TeJSMheqwPD4DDQOV/elLSIlKxjZt4i05H5AgdPdWR3n18HnNrcJ+j76WJd9gbwb9jPjNYUy6RautA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1023,12 +1149,13 @@ } }, "node_modules/@babel/plugin-transform-for-of": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.26.9.tgz", - "integrity": "sha512-Hry8AusVm8LW5BVFgiyUReuoGzPUpdHQQqJY5bZnbbf+ngOHWuCuYFKw/BqaaWlvEUrF91HMhDtEaI1hZzNbLg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.29.7.tgz", + "integrity": "sha512-zeSIHh0+E1Um1WJRXCFlHQYu2ieJNdivLLjlBEp+dIBu3S51n+SZZmIXjxnItw6pz56Cn+KvK68BIBVsxq2JiQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1038,13 +1165,14 @@ } }, "node_modules/@babel/plugin-transform-function-name": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.25.9.tgz", - "integrity": "sha512-8lP+Yxjv14Vc5MuWBpJsoUCd3hD6V9DgBon2FVYL4jJgbnVQ9fTgYmonchzZJOVNgzEgbxp4OwAf6xz6M/14XA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.29.7.tgz", + "integrity": "sha512-otRWaHXE6fbAGkePvaj/kvs3HsqXfPhlnzwSOlnFgbqCPMd975dW+4wZ00WFBt+/YlBGcJwNrARQTOJOb4ZrIg==", + "license": "MIT", "dependencies": { - "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1054,11 +1182,12 @@ } }, "node_modules/@babel/plugin-transform-json-strings": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.25.9.tgz", - "integrity": "sha512-xoTMk0WXceiiIvsaquQQUaLLXSW1KJ159KP87VilruQm0LNNGxWzahxSS6T6i4Zg3ezp4vA4zuwiNUR53qmQAw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.29.7.tgz", + "integrity": "sha512-RRnE2+eon1rJAq8MnoF1b5kTpY1vU88twHcvcKMrsqP/jxIRqDVs9iJB5fqPuqyeFAW0wJo4MlUIPpQCq/aRsg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1068,11 +1197,12 @@ } }, "node_modules/@babel/plugin-transform-literals": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.25.9.tgz", - "integrity": "sha512-9N7+2lFziW8W9pBl2TzaNht3+pgMIRP74zizeCSrtnSKVdUl8mAjjOP2OOVQAfZ881P2cNjDj1uAMEdeD50nuQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.29.7.tgz", + "integrity": "sha512-DZ/oLP21ZuWx1vKqnoNv6/tvEK48AQOBRai40CX9dTjGluvT/YZCyY3rryDtyUqCEoyNroy5KKPwX2iQCiRvyw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1082,11 +1212,12 @@ } }, "node_modules/@babel/plugin-transform-logical-assignment-operators": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.25.9.tgz", - "integrity": "sha512-wI4wRAzGko551Y8eVf6iOY9EouIDTtPb0ByZx+ktDGHwv6bHFimrgJM/2T021txPZ2s4c7bqvHbd+vXG6K948Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.29.7.tgz", + "integrity": "sha512-A0H91hh6W8MFRkp5TqJmMr39jzGD1A1E1Ysiv2O06Sfbhkapm+XyIzxWCEh5kqwOZ1/8QZ0dY3SeQ7XBqfJd5Q==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1096,11 +1227,12 @@ } }, "node_modules/@babel/plugin-transform-member-expression-literals": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.25.9.tgz", - "integrity": "sha512-PYazBVfofCQkkMzh2P6IdIUaCEWni3iYEerAsRWuVd8+jlM1S9S9cz1dF9hIzyoZ8IA3+OwVYIp9v9e+GbgZhA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.29.7.tgz", + "integrity": "sha512-hl1kwFZCCiDyfH25Xmco9jTrkPgnS9pmOzSG7W5I4SaGbLeqKv417hcU2RKmaxoPEgsoJh7ZPOrnPGq99bHoUg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1110,12 +1242,13 @@ } }, "node_modules/@babel/plugin-transform-modules-amd": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.25.9.tgz", - "integrity": "sha512-g5T11tnI36jVClQlMlt4qKDLlWnG5pP9CSM4GhdRciTNMRgkfpo5cR6b4rGIOYPgRRuFAvwjPQ/Yk+ql4dyhbw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.29.7.tgz", + "integrity": "sha512-fxtQoH3m5ywUSIfaH0FGCzWu4McsYon5bD3K4XnskC7f+OyQMj7rsOMi4NvvmJ83WwBAg4UCe+ov4VZlqEvyew==", + "license": "MIT", "dependencies": { - "@babel/helper-module-transforms": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1125,12 +1258,13 @@ } }, "node_modules/@babel/plugin-transform-modules-commonjs": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.26.3.tgz", - "integrity": "sha512-MgR55l4q9KddUDITEzEFYn5ZsGDXMSsU9E+kh7fjRXTIC3RHqfCo8RPRbyReYJh44HQ/yomFkqbOFohXvDCiIQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.29.7.tgz", + "integrity": "sha512-j0vCldybPC5b5dwCQOJ21uKtHzt7hxLygJTg9eF1ScfaikEDNfzn94XoW5Fi+seBR0nCyL23xaBFFkq7dTM8XQ==", + "license": "MIT", "dependencies": { - "@babel/helper-module-transforms": "^7.26.0", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1140,14 +1274,15 @@ } }, "node_modules/@babel/plugin-transform-modules-systemjs": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.25.9.tgz", - "integrity": "sha512-hyss7iIlH/zLHaehT+xwiymtPOpsiwIIRlCAOwBB04ta5Tt+lNItADdlXw3jAWZ96VJ2jlhl/c+PNIQPKNfvcA==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.29.8.tgz", + "integrity": "sha512-6iSnEK0zlkLKU4heofK/AdmRD4e2SHVpJMtrwnTCzhnaM98ria4rTrOXBBi45BTTYnJtO8txnPsX4fChYXkmeA==", + "license": "MIT", "dependencies": { - "@babel/helper-module-transforms": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9", - "@babel/traverse": "^7.25.9" + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.8" }, "engines": { "node": ">=6.9.0" @@ -1157,12 +1292,13 @@ } }, "node_modules/@babel/plugin-transform-modules-umd": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.25.9.tgz", - "integrity": "sha512-bS9MVObUgE7ww36HEfwe6g9WakQ0KF07mQF74uuXdkoziUPfKyu/nIm663kz//e5O1nPInPFx36z7WJmJ4yNEw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.29.7.tgz", + "integrity": "sha512-B4UkaTK3QpgCwJnrxKfMPKdo92CN7OKXAlpAAnM3UPu0Q0lCCk57ylA9AJbRy2v8dDKOPAAWcoR6CMyeoHwRCA==", + "license": "MIT", "dependencies": { - "@babel/helper-module-transforms": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1172,12 +1308,13 @@ } }, "node_modules/@babel/plugin-transform-named-capturing-groups-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.25.9.tgz", - "integrity": "sha512-oqB6WHdKTGl3q/ItQhpLSnWWOpjUJLsOCLVyeFgeTktkBSCiurvPOsyt93gibI9CmuKvTUEtWmG5VhZD+5T/KA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.29.7.tgz", + "integrity": "sha512-vuFoLwr4qnv2xbZ16SQd6uPcH5FNrLHhk/Jzo++0XJFcaDsr4gjJVg6j398oMHiC+83k/GiBzviwF5KBJkPUtQ==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1187,11 +1324,12 @@ } }, "node_modules/@babel/plugin-transform-new-target": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.25.9.tgz", - "integrity": "sha512-U/3p8X1yCSoKyUj2eOBIx3FOn6pElFOKvAAGf8HTtItuPyB+ZeOqfn+mvTtg9ZlOAjsPdK3ayQEjqHjU/yLeVQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.29.7.tgz", + "integrity": "sha512-fEo41GmsOUhOBlw8ioo6zvjX5Xc2Lqkzlyfqbpsk3eB6TReV18uhxZ0esfEokVbY2+PVJAQHNKxER6lGrzNd3A==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1201,11 +1339,12 @@ } }, "node_modules/@babel/plugin-transform-nullish-coalescing-operator": { - "version": "7.26.6", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.26.6.tgz", - "integrity": "sha512-CKW8Vu+uUZneQCPtXmSBUC6NCAUdya26hWCElAWh5mVSlSRsmiCPUUDKb3Z0szng1hiAJa098Hkhg9o4SE35Qw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.29.7.tgz", + "integrity": "sha512-idmp1dFaekP9GbcMvG24Kvw2BfhFZjHnNJCkV4WuIY4PskJzwI3f1N5OdgYke38T7rftO6ERulFRn2cFeZwRkg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1215,11 +1354,12 @@ } }, "node_modules/@babel/plugin-transform-numeric-separator": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.25.9.tgz", - "integrity": "sha512-TlprrJ1GBZ3r6s96Yq8gEQv82s8/5HnCVHtEJScUj90thHQbwe+E5MLhi2bbNHBEJuzrvltXSru+BUxHDoog7Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.29.7.tgz", + "integrity": "sha512-zR7fv/z14OjgHl4AgRtkDBvBMhIzCxqV/qN/2BCRC7LjFwvuzjYe7gDWxC4Wl/SNsLM6SE1IWvRPYMgSJaUvNw==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1229,13 +1369,16 @@ } }, "node_modules/@babel/plugin-transform-object-rest-spread": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.25.9.tgz", - "integrity": "sha512-fSaXafEE9CVHPweLYw4J0emp1t8zYTXyzN3UuG+lylqkvYd7RMrsOQ8TYx5RF231be0vqtFC6jnx3UmpJmKBYg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.29.7.tgz", + "integrity": "sha512-Ld98jn4c0smUywL57m7SgsHq3OpThOa6LqZJif3G6jYOovPleoFhVrBJ1WegRApSFB2wu4+RelAj9AC9G08Z4A==", + "license": "MIT", "dependencies": { - "@babel/helper-compilation-targets": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/plugin-transform-parameters": "^7.25.9" + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/plugin-transform-destructuring": "^7.29.7", + "@babel/plugin-transform-parameters": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1245,12 +1388,13 @@ } }, "node_modules/@babel/plugin-transform-object-super": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.25.9.tgz", - "integrity": "sha512-Kj/Gh+Rw2RNLbCK1VAWj2U48yxxqL2x0k10nPtSdRa0O2xnHXalD0s+o1A6a0W43gJ00ANo38jxkQreckOzv5A==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.29.7.tgz", + "integrity": "sha512-Ea/diGcw0twB5IlZPO5sgET6fJsLJqPABqTuFWIR+iMPGPZJkATEIWx0wa+aEQ5UY1CBQyP/gkAiLEqn1vBiQA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-replace-supers": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1260,11 +1404,12 @@ } }, "node_modules/@babel/plugin-transform-optional-catch-binding": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.25.9.tgz", - "integrity": "sha512-qM/6m6hQZzDcZF3onzIhZeDHDO43bkNNlOX0i8n3lR6zLbu0GN2d8qfM/IERJZYauhAHSLHy39NF0Ctdvcid7g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.29.7.tgz", + "integrity": "sha512-sLsyndxK2VwX6yNUOakMb7Sh553ZTe/vVM1XJ+9Z5aW1ytsc8xOIwmyk05NNjN60vkc5/KqoTH6hB4V41LJhng==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1274,12 +1419,13 @@ } }, "node_modules/@babel/plugin-transform-optional-chaining": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.25.9.tgz", - "integrity": "sha512-6AvV0FsLULbpnXeBjrY4dmWF8F7gf8QnvTEoO/wX/5xm/xE1Xo8oPuD3MPS+KS9f9XBEAWN7X1aWr4z9HdOr7A==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.29.7.tgz", + "integrity": "sha512-6GM1dhvK3gNODkXcEcMCOLEDCLSoZ/sBbro2Ax8HURyasQ4NshagQixkRFdh5niI6E4gmA/jYI/4aT7rRos3ZQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1289,11 +1435,12 @@ } }, "node_modules/@babel/plugin-transform-parameters": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.25.9.tgz", - "integrity": "sha512-wzz6MKwpnshBAiRmn4jR8LYz/g8Ksg0o80XmwZDlordjwEk9SxBzTWC7F5ef1jhbrbOW2DJ5J6ayRukrJmnr0g==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.29.7.tgz", + "integrity": "sha512-ZDOBqV/qLYJI0YElr8DcENEyARsFQeESqWXH6gZlghYXuPPjvweuDhP4VyEi4BlUBlLRFZVjxoZDMjxhLW766g==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1303,12 +1450,13 @@ } }, "node_modules/@babel/plugin-transform-private-methods": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.25.9.tgz", - "integrity": "sha512-D/JUozNpQLAPUVusvqMxyvjzllRaF8/nSrP1s2YGQT/W4LHK4xxsMcHjhOGTS01mp9Hda8nswb+FblLdJornQw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.29.7.tgz", + "integrity": "sha512-/6Rz4DK1ETDEM/bWHsPHcaEe7ZaT1EqSXjtSP/L0DijOYuaUhiRiOKcwpZ8P7zR4xXEHc2ITdiCgBm9Tpyv9ug==", + "license": "MIT", "dependencies": { - "@babel/helper-create-class-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1318,13 +1466,14 @@ } }, "node_modules/@babel/plugin-transform-private-property-in-object": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.25.9.tgz", - "integrity": "sha512-Evf3kcMqzXA3xfYJmZ9Pg1OvKdtqsDMSWBDzZOPLvHiTt36E75jLDQo5w1gtRU95Q4E5PDttrTf25Fw8d/uWLw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.29.7.tgz", + "integrity": "sha512-+BNo06dnrzdNNqCm1X6YUaVv0DKk8Q+JYcoZfOkLhYWNCXzlwTSRq8zGWayT1csjcpNXV9CQTBRRbmTLZac5cA==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-create-class-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1334,11 +1483,12 @@ } }, "node_modules/@babel/plugin-transform-property-literals": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.25.9.tgz", - "integrity": "sha512-IvIUeV5KrS/VPavfSM/Iu+RE6llrHrYIKY1yfCzyO/lMXHQ+p7uGhonmGVisv6tSBSVgWzMBohTcvkC9vQcQFA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.29.7.tgz", + "integrity": "sha512-bOMRLQuI0A5ZqHq3OWJ89/rXpJ/NJrbVhXiP4zwPGMs6kpcVsuTUNjwoE30K0Qm3mf48a/TnRYYD6vPNqcg6jA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1348,11 +1498,12 @@ } }, "node_modules/@babel/plugin-transform-react-constant-elements": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.25.9.tgz", - "integrity": "sha512-Ncw2JFsJVuvfRsa2lSHiC55kETQVLSnsYGQ1JDDwkUeWGTL/8Tom8aLTnlqgoeuopWrbbGndrc9AlLYrIosrow==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.29.7.tgz", + "integrity": "sha512-J0wGhKan+rIiE2OhfhRptySLrJ6SjQYM6b6N1FMlhyhCcw1Mig8vQjWchyB+bgHGDvaWo6Diu6CLRMra2uMtmg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1362,11 +1513,12 @@ } }, "node_modules/@babel/plugin-transform-react-display-name": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.25.9.tgz", - "integrity": "sha512-KJfMlYIUxQB1CJfO3e0+h0ZHWOTLCPP115Awhaz8U0Zpq36Gl/cXlpoyMRnUWlhNUBAzldnCiAZNvCDj7CrKxQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.29.7.tgz", + "integrity": "sha512-+1wdDMGNb4UPeY3Q4L5yLiYe6TXPXubs4NjrgRFw13hPRLJfEMw2Q5OXkee6/IfdqePIeW4Jjwe3aBh7SdKz4Q==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1376,15 +1528,16 @@ } }, "node_modules/@babel/plugin-transform-react-jsx": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.25.9.tgz", - "integrity": "sha512-s5XwpQYCqGerXl+Pu6VDL3x0j2d82eiV77UJ8a2mDHAW7j9SWRqQ2y1fNo1Z74CdcYipl5Z41zvjj4Nfzq36rw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.29.7.tgz", + "integrity": "sha512-WsZulLVBUHXVj2cUcPVx6UE21TpalB6bHbSFErKT0Ib++ax24jjXe73FqlWvdylFOjiuPHYi6VCcgRad1ItN+A==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/plugin-syntax-jsx": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/plugin-syntax-jsx": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1394,11 +1547,12 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-development": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.25.9.tgz", - "integrity": "sha512-9mj6rm7XVYs4mdLIpbZnHOYdpW42uoiBCTVowg7sP1thUOiANgMb4UtpRivR0pp5iL+ocvUv7X4mZgFRpJEzGw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.29.7.tgz", + "integrity": "sha512-Xfy3UVMF04+ypnFbkhvfqtmvwfe92qwQdbGZVonhE+6v35GzlofmOnA1szaZqzb9xYWr0nl1e5EMmzi0DNON1g==", + "license": "MIT", "dependencies": { - "@babel/plugin-transform-react-jsx": "^7.25.9" + "@babel/plugin-transform-react-jsx": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1408,12 +1562,13 @@ } }, "node_modules/@babel/plugin-transform-react-pure-annotations": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.25.9.tgz", - "integrity": "sha512-KQ/Takk3T8Qzj5TppkS1be588lkbTp5uj7w6a0LeQaTMSckU/wK0oJ/pih+T690tkgI5jfmg2TqDJvd41Sj1Cg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-pure-annotations/-/plugin-transform-react-pure-annotations-7.29.7.tgz", + "integrity": "sha512-H5E+HBgDpr6Q5t+Aj11tL7XkIui1jhbIoArVQnqjgXo5/3YxkN7ZEBcWF4RQlB0T4rrxJQbXS6kiFV6B7XTqUA==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1423,12 +1578,12 @@ } }, "node_modules/@babel/plugin-transform-regenerator": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.27.0.tgz", - "integrity": "sha512-LX/vCajUJQDqE7Aum/ELUMZAY19+cDpghxrnyt5I1tV6X5PyC86AOoWXWFYFeIvauyeSA6/ktn4tQVn/3ZifsA==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.29.8.tgz", + "integrity": "sha512-0UpIXPtdDtMXfnV2OJAVMLpj3H/92vmkA6lpSRakmycJvj3VUy6Xs1dM8tXRugupykr5WB+LpiVl0J8LMVg2mg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5", - "regenerator-transform": "^0.15.2" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1438,12 +1593,13 @@ } }, "node_modules/@babel/plugin-transform-regexp-modifiers": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.26.0.tgz", - "integrity": "sha512-vN6saax7lrA2yA/Pak3sCxuD6F5InBjn9IcrIKQPjpsLvuHYLVroTxjdlVRHjjBWxKOqIwpTXDkOssYT4BFdRw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regexp-modifiers/-/plugin-transform-regexp-modifiers-7.29.7.tgz", + "integrity": "sha512-mB5Fs0VWrJ42ZCmc8114v60qetdaUVNkj9PmSZRmanCZM3S9hm0CFRLjRmYIsuXav14l2jvZ+4T8iiCGnhj3nQ==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1453,11 +1609,12 @@ } }, "node_modules/@babel/plugin-transform-reserved-words": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.25.9.tgz", - "integrity": "sha512-7DL7DKYjn5Su++4RXu8puKZm2XBPHyjWLUidaPEkCUBbE7IPcsrkRHggAOOKydH1dASWdcUBxrkOGNxUv5P3Jg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.29.7.tgz", + "integrity": "sha512-5+YhdpVgmfSmwZyLMftfaiffLRMHjzIRHFHHLdibcSyJm2pasMrKHrO3Ptrt2DRshjvpgjEJJ1zVW14WPq/6QA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1467,15 +1624,16 @@ } }, "node_modules/@babel/plugin-transform-runtime": { - "version": "7.26.10", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.26.10.tgz", - "integrity": "sha512-NWaL2qG6HRpONTnj4JvDU6th4jYeZOJgu3QhmFTCihib0ermtOJqktA5BduGm3suhhVe9EMP9c9+mfJ/I9slqw==", - "dependencies": { - "@babel/helper-module-imports": "^7.25.9", - "@babel/helper-plugin-utils": "^7.26.5", - "babel-plugin-polyfill-corejs2": "^0.4.10", - "babel-plugin-polyfill-corejs3": "^0.11.0", - "babel-plugin-polyfill-regenerator": "^0.6.1", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.29.7.tgz", + "integrity": "sha512-xmAscdE/AsqRW7vutbPNoUmu/nF5SrLKPs7aoJgEjo35lLKA/Bc0i2rMv/hr1+Y0o1bQCiVtith3u2vdgRL39Q==", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "babel-plugin-polyfill-corejs2": "^0.4.14", + "babel-plugin-polyfill-corejs3": "^0.13.0", + "babel-plugin-polyfill-regenerator": "^0.6.5", "semver": "^6.3.1" }, "engines": { @@ -1489,16 +1647,18 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", "bin": { "semver": "bin/semver.js" } }, "node_modules/@babel/plugin-transform-shorthand-properties": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.25.9.tgz", - "integrity": "sha512-MUv6t0FhO5qHnS/W8XCbHmiRWOphNufpE1IVxhK5kuN3Td9FT1x4rx4K42s3RYdMXCXpfWkGSbCSd0Z64xA7Ng==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.29.7.tgz", + "integrity": "sha512-I+WYbGBAiCn7nA6xBrlgPH+MB7HWb4u8pv5S0Pv7OtwNvIFvCCb24YlttKEeUFVurfBCEaOTnuhlqsb7f0Z5Dg==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1508,12 +1668,13 @@ } }, "node_modules/@babel/plugin-transform-spread": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.25.9.tgz", - "integrity": "sha512-oNknIB0TbURU5pqJFVbOOFspVlrpVwo2H1+HUIsVDvp5VauGGDP1ZEvO8Nn5xyMEs3dakajOxlmkNW7kNgSm6A==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.29.8.tgz", + "integrity": "sha512-4S9ksMGVWUshvgK0mKfvZky7leuG5/uoFVwMpAomJ8bMoDJiNHRVmc1EglwW/CmGVSqqWpEbXm9FmbRit22qoA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1523,11 +1684,12 @@ } }, "node_modules/@babel/plugin-transform-sticky-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.25.9.tgz", - "integrity": "sha512-WqBUSgeVwucYDP9U/xNRQam7xV8W5Zf+6Eo7T2SRVUFlhRiMNFdFz58u0KZmCVVqs2i7SHgpRnAhzRNmKfi2uA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.29.7.tgz", + "integrity": "sha512-BCHzNYJGe9l7EpwwDBN/ztlL2NYFFq8hp9ddjtUEM9f2O7S7kKV/lL6Fwo7IF7NSkYhPK2vO+86nIGltA90MsA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1537,11 +1699,12 @@ } }, "node_modules/@babel/plugin-transform-template-literals": { - "version": "7.26.8", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.26.8.tgz", - "integrity": "sha512-OmGDL5/J0CJPJZTHZbi2XpO0tyT2Ia7fzpW5GURwdtp2X3fMmN8au/ej6peC/T33/+CRiIpA8Krse8hFGVmT5Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.29.7.tgz", + "integrity": "sha512-NCSEJ4sLFU2gqAub45HYh4fus2yQ36rr6ei6vpU7NdoJqCpxvEG8E6eJpscGyXP3VHD2Ny+fSXr04k1hoUrFqA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1551,11 +1714,12 @@ } }, "node_modules/@babel/plugin-transform-typeof-symbol": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.27.0.tgz", - "integrity": "sha512-+LLkxA9rKJpNoGsbLnAgOCdESl73vwYn+V6b+5wHbrE7OGKVDPHIQvbFSzqE6rwqaCw2RE+zdJrlLkcf8YOA0w==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.29.7.tgz", + "integrity": "sha512-223mNGoTkBiTEWFoK+Q6Go3tueMRclO8vxxxxquNCYuNI4jWOofFKJRRDu6SDrB8Sgo1UEGW9T4GAQ8ZyRso1A==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1565,15 +1729,16 @@ } }, "node_modules/@babel/plugin-transform-typescript": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.27.0.tgz", - "integrity": "sha512-fRGGjO2UEGPjvEcyAZXRXAS8AfdaQoq7HnxAbJoAoW10B9xOKesmmndJv+Sym2a+9FHWZ9KbyyLCe9s0Sn5jtg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.29.7.tgz", + "integrity": "sha512-jK52h8LaLc7JarhQV2ofeFMts4H7vnOXnqZNA6fYglBTZewRBE51KWt3BUltW1P+KoPsYkHoJeXePuz4zo2LMw==", + "license": "MIT", "dependencies": { - "@babel/helper-annotate-as-pure": "^7.25.9", - "@babel/helper-create-class-features-plugin": "^7.27.0", - "@babel/helper-plugin-utils": "^7.26.5", - "@babel/helper-skip-transparent-expression-wrappers": "^7.25.9", - "@babel/plugin-syntax-typescript": "^7.25.9" + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", + "@babel/plugin-syntax-typescript": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1583,11 +1748,12 @@ } }, "node_modules/@babel/plugin-transform-unicode-escapes": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.25.9.tgz", - "integrity": "sha512-s5EDrE6bW97LtxOcGj1Khcx5AaXwiMmi4toFWRDP9/y0Woo6pXC+iyPu/KuhKtfSrNFd7jJB+/fkOtZy6aIC6Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.29.7.tgz", + "integrity": "sha512-jCfXxSjf94lf4E0hKE0AByxF6F3/pVFqRdUUNkDJhsY0m1ZKjnN6ZYyMeHNpzflxb/0q5b7t3p+BE+SLF1WOtA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1597,12 +1763,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-property-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.25.9.tgz", - "integrity": "sha512-Jt2d8Ga+QwRluxRQ307Vlxa6dMrYEMZCgGxoPR8V52rxPyldHu3hdlHspxaqYmE7oID5+kB+UKUB/eWS+DkkWg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.29.7.tgz", + "integrity": "sha512-OgZ+zoAJgZLUCunsTRQ5LAjOywDv5zzZ2/hQ5aMw1pGXyY2rtE8/chXYUmu3AlVHKpm10KEdG9aMwbI/K76ZGw==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1612,12 +1779,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.25.9.tgz", - "integrity": "sha512-yoxstj7Rg9dlNn9UQxzk4fcNivwv4nUYz7fYXBaKxvw/lnmPuOm/ikoELygbYq68Bls3D/D+NBPHiLwZdZZ4HA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.29.7.tgz", + "integrity": "sha512-7D/x/23/d/3VqZ0QA+LGbZMlGwZjztBygSWWWsfTPoQ1oQ6Q1P6Mr3d0kk42XabyUVw+fha3LqdRsFqeKqvCyA==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1627,12 +1795,13 @@ } }, "node_modules/@babel/plugin-transform-unicode-sets-regex": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.25.9.tgz", - "integrity": "sha512-8BYqO3GeVNHtx69fdPshN3fnzUNLrWdHhk/icSwigksJGczKSizZ+Z6SBCxTs723Fr5VSNorTIK7a+R2tISvwQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.29.7.tgz", + "integrity": "sha512-BLOhLht9DOJwIxlmp91wHvkXv1lguuHS3/FwUO8HL1H0u8s4hR1gASVFyilu9iGtcTRYqjTZmlsFFeQletntEg==", + "license": "MIT", "dependencies": { - "@babel/helper-create-regexp-features-plugin": "^7.25.9", - "@babel/helper-plugin-utils": "^7.25.9" + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1642,78 +1811,81 @@ } }, "node_modules/@babel/preset-env": { - "version": "7.26.9", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.26.9.tgz", - "integrity": "sha512-vX3qPGE8sEKEAZCWk05k3cpTAE3/nOYca++JA+Rd0z2NCNzabmYvEiSShKzm10zdquOIAVXsy2Ei/DTW34KlKQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.29.7.tgz", + "integrity": "sha512-GYzX36n1nsciIb0uyH0GHwxwtNwPQIcpxSeiVLDtG/B7jB5xXgchnmL1f/jCX5o+pwnaDBtO60ONSJhEBJfxYA==", + "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.26.8", - "@babel/helper-compilation-targets": "^7.26.5", - "@babel/helper-plugin-utils": "^7.26.5", - "@babel/helper-validator-option": "^7.25.9", - "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.25.9", - "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.25.9", - "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.25.9", - "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.25.9", - "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.25.9", + "@babel/compat-data": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.29.7", + "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.29.7", + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.29.7", + "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.7", + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.29.7", + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.29.7", "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2", - "@babel/plugin-syntax-import-assertions": "^7.26.0", - "@babel/plugin-syntax-import-attributes": "^7.26.0", + "@babel/plugin-syntax-import-assertions": "^7.29.7", + "@babel/plugin-syntax-import-attributes": "^7.29.7", "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", - "@babel/plugin-transform-arrow-functions": "^7.25.9", - "@babel/plugin-transform-async-generator-functions": "^7.26.8", - "@babel/plugin-transform-async-to-generator": "^7.25.9", - "@babel/plugin-transform-block-scoped-functions": "^7.26.5", - "@babel/plugin-transform-block-scoping": "^7.25.9", - "@babel/plugin-transform-class-properties": "^7.25.9", - "@babel/plugin-transform-class-static-block": "^7.26.0", - "@babel/plugin-transform-classes": "^7.25.9", - "@babel/plugin-transform-computed-properties": "^7.25.9", - "@babel/plugin-transform-destructuring": "^7.25.9", - "@babel/plugin-transform-dotall-regex": "^7.25.9", - "@babel/plugin-transform-duplicate-keys": "^7.25.9", - "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.25.9", - "@babel/plugin-transform-dynamic-import": "^7.25.9", - "@babel/plugin-transform-exponentiation-operator": "^7.26.3", - "@babel/plugin-transform-export-namespace-from": "^7.25.9", - "@babel/plugin-transform-for-of": "^7.26.9", - "@babel/plugin-transform-function-name": "^7.25.9", - "@babel/plugin-transform-json-strings": "^7.25.9", - "@babel/plugin-transform-literals": "^7.25.9", - "@babel/plugin-transform-logical-assignment-operators": "^7.25.9", - "@babel/plugin-transform-member-expression-literals": "^7.25.9", - "@babel/plugin-transform-modules-amd": "^7.25.9", - "@babel/plugin-transform-modules-commonjs": "^7.26.3", - "@babel/plugin-transform-modules-systemjs": "^7.25.9", - "@babel/plugin-transform-modules-umd": "^7.25.9", - "@babel/plugin-transform-named-capturing-groups-regex": "^7.25.9", - "@babel/plugin-transform-new-target": "^7.25.9", - "@babel/plugin-transform-nullish-coalescing-operator": "^7.26.6", - "@babel/plugin-transform-numeric-separator": "^7.25.9", - "@babel/plugin-transform-object-rest-spread": "^7.25.9", - "@babel/plugin-transform-object-super": "^7.25.9", - "@babel/plugin-transform-optional-catch-binding": "^7.25.9", - "@babel/plugin-transform-optional-chaining": "^7.25.9", - "@babel/plugin-transform-parameters": "^7.25.9", - "@babel/plugin-transform-private-methods": "^7.25.9", - "@babel/plugin-transform-private-property-in-object": "^7.25.9", - "@babel/plugin-transform-property-literals": "^7.25.9", - "@babel/plugin-transform-regenerator": "^7.25.9", - "@babel/plugin-transform-regexp-modifiers": "^7.26.0", - "@babel/plugin-transform-reserved-words": "^7.25.9", - "@babel/plugin-transform-shorthand-properties": "^7.25.9", - "@babel/plugin-transform-spread": "^7.25.9", - "@babel/plugin-transform-sticky-regex": "^7.25.9", - "@babel/plugin-transform-template-literals": "^7.26.8", - "@babel/plugin-transform-typeof-symbol": "^7.26.7", - "@babel/plugin-transform-unicode-escapes": "^7.25.9", - "@babel/plugin-transform-unicode-property-regex": "^7.25.9", - "@babel/plugin-transform-unicode-regex": "^7.25.9", - "@babel/plugin-transform-unicode-sets-regex": "^7.25.9", + "@babel/plugin-transform-arrow-functions": "^7.29.7", + "@babel/plugin-transform-async-generator-functions": "^7.29.7", + "@babel/plugin-transform-async-to-generator": "^7.29.7", + "@babel/plugin-transform-block-scoped-functions": "^7.29.7", + "@babel/plugin-transform-block-scoping": "^7.29.7", + "@babel/plugin-transform-class-properties": "^7.29.7", + "@babel/plugin-transform-class-static-block": "^7.29.7", + "@babel/plugin-transform-classes": "^7.29.7", + "@babel/plugin-transform-computed-properties": "^7.29.7", + "@babel/plugin-transform-destructuring": "^7.29.7", + "@babel/plugin-transform-dotall-regex": "^7.29.7", + "@babel/plugin-transform-duplicate-keys": "^7.29.7", + "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.7", + "@babel/plugin-transform-dynamic-import": "^7.29.7", + "@babel/plugin-transform-explicit-resource-management": "^7.29.7", + "@babel/plugin-transform-exponentiation-operator": "^7.29.7", + "@babel/plugin-transform-export-namespace-from": "^7.29.7", + "@babel/plugin-transform-for-of": "^7.29.7", + "@babel/plugin-transform-function-name": "^7.29.7", + "@babel/plugin-transform-json-strings": "^7.29.7", + "@babel/plugin-transform-literals": "^7.29.7", + "@babel/plugin-transform-logical-assignment-operators": "^7.29.7", + "@babel/plugin-transform-member-expression-literals": "^7.29.7", + "@babel/plugin-transform-modules-amd": "^7.29.7", + "@babel/plugin-transform-modules-commonjs": "^7.29.7", + "@babel/plugin-transform-modules-systemjs": "^7.29.7", + "@babel/plugin-transform-modules-umd": "^7.29.7", + "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.7", + "@babel/plugin-transform-new-target": "^7.29.7", + "@babel/plugin-transform-nullish-coalescing-operator": "^7.29.7", + "@babel/plugin-transform-numeric-separator": "^7.29.7", + "@babel/plugin-transform-object-rest-spread": "^7.29.7", + "@babel/plugin-transform-object-super": "^7.29.7", + "@babel/plugin-transform-optional-catch-binding": "^7.29.7", + "@babel/plugin-transform-optional-chaining": "^7.29.7", + "@babel/plugin-transform-parameters": "^7.29.7", + "@babel/plugin-transform-private-methods": "^7.29.7", + "@babel/plugin-transform-private-property-in-object": "^7.29.7", + "@babel/plugin-transform-property-literals": "^7.29.7", + "@babel/plugin-transform-regenerator": "^7.29.7", + "@babel/plugin-transform-regexp-modifiers": "^7.29.7", + "@babel/plugin-transform-reserved-words": "^7.29.7", + "@babel/plugin-transform-shorthand-properties": "^7.29.7", + "@babel/plugin-transform-spread": "^7.29.7", + "@babel/plugin-transform-sticky-regex": "^7.29.7", + "@babel/plugin-transform-template-literals": "^7.29.7", + "@babel/plugin-transform-typeof-symbol": "^7.29.7", + "@babel/plugin-transform-unicode-escapes": "^7.29.7", + "@babel/plugin-transform-unicode-property-regex": "^7.29.7", + "@babel/plugin-transform-unicode-regex": "^7.29.7", + "@babel/plugin-transform-unicode-sets-regex": "^7.29.7", "@babel/preset-modules": "0.1.6-no-external-plugins", - "babel-plugin-polyfill-corejs2": "^0.4.10", - "babel-plugin-polyfill-corejs3": "^0.11.0", - "babel-plugin-polyfill-regenerator": "^0.6.1", - "core-js-compat": "^3.40.0", + "babel-plugin-polyfill-corejs2": "^0.4.15", + "babel-plugin-polyfill-corejs3": "^0.14.0", + "babel-plugin-polyfill-regenerator": "^0.6.6", + "core-js-compat": "^3.48.0", "semver": "^6.3.1" }, "engines": { @@ -1723,10 +1895,24 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": { + "version": "0.14.2", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.14.2.tgz", + "integrity": "sha512-coWpDLJ410R781Npmn/SIBZEsAetR4xVi0SxLMXPaMO4lSf1MwnkGYMtkFxew0Dn8B3/CpbpYxN0JCgg8mn67g==", + "license": "MIT", + "dependencies": { + "@babel/helper-define-polyfill-provider": "^0.6.8", + "core-js-compat": "^3.48.0" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", "bin": { "semver": "bin/semver.js" } @@ -1735,6 +1921,7 @@ "version": "0.1.6-no-external-plugins", "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.6-no-external-plugins.tgz", "integrity": "sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==", + "license": "MIT", "dependencies": { "@babel/helper-plugin-utils": "^7.0.0", "@babel/types": "^7.4.4", @@ -1745,16 +1932,17 @@ } }, "node_modules/@babel/preset-react": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.26.3.tgz", - "integrity": "sha512-Nl03d6T9ky516DGK2YMxrTqvnpUW63TnJMOMonj+Zae0JiPC5BC9xPMSL6L8fiSpA5vP88qfygavVQvnLp+6Cw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/preset-react/-/preset-react-7.29.7.tgz", + "integrity": "sha512-C+PV1TFUPTmBQGoPBL8j2QmLpZ117YTCwxIZeJOM96GbYMFSc7/pOXU5lVykwnZxyTqQxRsvoRk6f2FktZgGHA==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.25.9", - "@babel/helper-validator-option": "^7.25.9", - "@babel/plugin-transform-react-display-name": "^7.25.9", - "@babel/plugin-transform-react-jsx": "^7.25.9", - "@babel/plugin-transform-react-jsx-development": "^7.25.9", - "@babel/plugin-transform-react-pure-annotations": "^7.25.9" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "@babel/plugin-transform-react-display-name": "^7.29.7", + "@babel/plugin-transform-react-jsx": "^7.29.7", + "@babel/plugin-transform-react-jsx-development": "^7.29.7", + "@babel/plugin-transform-react-pure-annotations": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1764,15 +1952,16 @@ } }, "node_modules/@babel/preset-typescript": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.27.0.tgz", - "integrity": "sha512-vxaPFfJtHhgeOVXRKuHpHPAOgymmy8V8I65T1q53R7GCZlefKeCaTyDs3zOPHTTbmquvNlQYC5klEvWsBAtrBQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.29.7.tgz", + "integrity": "sha512-/Foi8vKY2EVbed/1eZx0gJEEwHAIxogrySI7rULcRIvhZzbvoE/b5qG5Ghc0WKAFKOHA9SD1x7RsFlOYdutIiQ==", + "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.26.5", - "@babel/helper-validator-option": "^7.25.9", - "@babel/plugin-syntax-jsx": "^7.25.9", - "@babel/plugin-transform-modules-commonjs": "^7.26.3", - "@babel/plugin-transform-typescript": "^7.27.0" + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "@babel/plugin-syntax-jsx": "^7.29.7", + "@babel/plugin-transform-modules-commonjs": "^7.29.7", + "@babel/plugin-transform-typescript": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1792,55 +1981,46 @@ "node": ">=6.9.0" } }, - "node_modules/@babel/runtime-corejs3": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.27.0.tgz", - "integrity": "sha512-UWjX6t+v+0ckwZ50Y5ShZLnlk95pP5MyW/pon9tiYzl3+18pkTHTFNTKr7rQbfRXPkowt2QAn30o1b6oswszew==", - "dependencies": { - "core-js-pure": "^3.30.2", - "regenerator-runtime": "^0.14.0" - }, - "engines": { - "node": ">=6.9.0" - } - }, "node_modules/@babel/template": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz", - "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.26.2", - "@babel/parser": "^7.27.0", - "@babel/types": "^7.27.0" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.27.0.tgz", - "integrity": "sha512-19lYZFzYVQkkHkl4Cy4WrAVcqBkgvV2YM2TU3xG6DIwO7O3ecbDPfW3yM3bjAGcqcQHi+CCtjMR3dIEHxsd6bA==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.8.tgz", + "integrity": "sha512-I5z7H3bf/41ktsNVLtpN0wAa336HkqIHQ5BuPLEhTkt1jVSyZpeNKIzTgEWmlxjdg81R0IgUCcaE+Ok3NvrfZg==", + "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.26.2", - "@babel/generator": "^7.27.0", - "@babel/parser": "^7.27.0", - "@babel/template": "^7.27.0", - "@babel/types": "^7.27.0", - "debug": "^4.3.1", - "globals": "^11.1.0" + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.8", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.8", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.8", + "debug": "^4.3.1" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/types": { - "version": "7.27.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz", - "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", + "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -2257,34 +2437,10 @@ "node": ">=14.6" } }, - "node_modules/@cspotcode/source-map-support": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", - "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/trace-mapping": "0.3.9" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": { - "version": "0.3.9", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", - "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" - } - }, "node_modules/@csstools/cascade-layer-name-parser": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.4.tgz", - "integrity": "sha512-7DFHlPuIxviKYZrOiwVU/PiHLm3lLUR23OMuEEtfEOQTOp9hzQ2JjdY6X5H18RVuUPJqSCI+qNnD5iOLMVE0bA==", + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@csstools/cascade-layer-name-parser/-/cascade-layer-name-parser-2.0.5.tgz", + "integrity": "sha512-p1ko5eHgV+MgXFVa4STPKpvPxr6ReS8oS2jzTukjR74i5zJNyWO1ZM1m8YKBXnzDKWfBN1ztLYlHxbVemDD88A==", "funding": [ { "type": "github", @@ -2295,18 +2451,19 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" } }, "node_modules/@csstools/color-helpers": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.0.2.tgz", - "integrity": "sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==", + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-5.1.0.tgz", + "integrity": "sha512-S11EXWJyy0Mz5SYvRmY8nJYTFFd1LCNV+7cXyAgQtOOuzb4EsgfqDufL+9esx72/eLhsRdGZwaldu/h+E4t4BA==", "funding": [ { "type": "github", @@ -2317,14 +2474,15 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" } }, "node_modules/@csstools/css-calc": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.2.tgz", - "integrity": "sha512-TklMyb3uBB28b5uQdxjReG4L80NxAqgrECqLZFQbyLekwwlcDDS8r3f07DKqeo8C4926Br0gf/ZDe17Zv4wIuw==", + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-2.1.4.tgz", + "integrity": "sha512-3N8oaj+0juUw/1H3YwmDDJXCgTB1gKU6Hc/bB502u9zR0q2vd786XJH9QfrKIEgFlZmhZiq6epXl4rHqhzsIgQ==", "funding": [ { "type": "github", @@ -2335,18 +2493,19 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" } }, "node_modules/@csstools/css-color-parser": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.0.8.tgz", - "integrity": "sha512-pdwotQjCCnRPuNi06jFuP68cykU1f3ZWExLe/8MQ1LOs8Xq+fTkYgd+2V8mWUWMrOn9iS2HftPVaMZDaXzGbhQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-3.1.0.tgz", + "integrity": "sha512-nbtKwh3a6xNVIp/VRuXV64yTKnb1IjTAEEh3irzS+HkKjAOYLTGNb9pmVNntZ8iVBHcWDA2Dof0QtPgFI1BaTA==", "funding": [ { "type": "github", @@ -2357,22 +2516,23 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { - "@csstools/color-helpers": "^5.0.2", - "@csstools/css-calc": "^2.1.2" + "@csstools/color-helpers": "^5.1.0", + "@csstools/css-calc": "^2.1.4" }, "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" } }, "node_modules/@csstools/css-parser-algorithms": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz", - "integrity": "sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-3.0.5.tgz", + "integrity": "sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==", "funding": [ { "type": "github", @@ -2383,18 +2543,18 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-tokenizer": "^3.0.4" } }, "node_modules/@csstools/css-tokenizer": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.3.tgz", - "integrity": "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-3.0.4.tgz", + "integrity": "sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==", "funding": [ { "type": "github", @@ -2405,15 +2565,15 @@ "url": "https://opencollective.com/csstools" } ], - "peer": true, + "license": "MIT", "engines": { "node": ">=18" } }, "node_modules/@csstools/media-query-list-parser": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.2.tgz", - "integrity": "sha512-EUos465uvVvMJehckATTlNqGj4UJWkTmdWuDMjqvSUkjGpmOyFZBVwb4knxCm/k2GMTXY+c/5RkdndzFYWeX5A==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-4.0.3.tgz", + "integrity": "sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==", "funding": [ { "type": "github", @@ -2424,18 +2584,19 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "engines": { "node": ">=18" }, "peerDependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" } }, - "node_modules/@csstools/postcss-cascade-layers": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-5.0.1.tgz", - "integrity": "sha512-XOfhI7GShVcKiKwmPAnWSqd2tBR0uxt+runAxttbSp/LY2U16yAVPmAf7e9q4JJ0d+xMNmpwNDLBXnmRCl3HMQ==", + "node_modules/@csstools/postcss-alpha-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-alpha-function/-/postcss-alpha-function-1.0.1.tgz", + "integrity": "sha512-isfLLwksH3yHkFXfCI2Gcaqg7wGGHZZwunoJzEZk0yKYIokgre6hYVFibKL3SYAoR1kBXova8LB+JoO5vZzi9w==", "funding": [ { "type": "github", @@ -2446,9 +2607,13 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/selector-specificity": "^5.0.0", - "postcss-selector-parser": "^7.0.0" + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", + "@csstools/utilities": "^2.0.0" }, "engines": { "node": ">=18" @@ -2457,11 +2622,37 @@ "postcss": "^8.4" } }, - "node_modules/@csstools/postcss-cascade-layers/node_modules/@csstools/selector-specificity": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz", - "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==", - "funding": [ + "node_modules/@csstools/postcss-cascade-layers": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-5.0.2.tgz", + "integrity": "sha512-nWBE08nhO8uWl6kSAeCx4im7QfVko3zLrtgWZY4/bP87zrSPpSyN/3W3TDqz1jJuH+kbKOHXg5rJnK+ZVYcFFg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/selector-specificity": "^5.0.0", + "postcss-selector-parser": "^7.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-cascade-layers/node_modules/@csstools/selector-specificity": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-5.0.0.tgz", + "integrity": "sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==", + "funding": [ { "type": "github", "url": "https://github.com/sponsors/csstools" @@ -2471,6 +2662,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2479,10 +2671,10 @@ } }, "node_modules/@csstools/postcss-cascade-layers/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", - "peer": true, + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2492,9 +2684,38 @@ } }, "node_modules/@csstools/postcss-color-function": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-4.0.8.tgz", - "integrity": "sha512-9dUvP2qpZI6PlGQ/sob+95B3u5u7nkYt9yhZFCC7G9HBRHBxj+QxS/wUlwaMGYW0waf+NIierI8aoDTssEdRYw==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function/-/postcss-color-function-4.0.12.tgz", + "integrity": "sha512-yx3cljQKRaSBc2hfh8rMZFZzChaFgwmO2JfFgFr1vMcF3C/uyy5I4RFIBOIWGq1D+XbKCG789CGkG6zzkLpagA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-color-function-display-p3-linear": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-function-display-p3-linear/-/postcss-color-function-display-p3-linear-1.0.1.tgz", + "integrity": "sha512-E5qusdzhlmO1TztYzDIi8XPdPoYOjoTY6HBYBCYSj+Gn4gQRBlvjgPQXzfzuPQqt8EhkC/SzPKObg4Mbn8/xMg==", "funding": [ { "type": "github", @@ -2505,11 +2726,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2520,9 +2742,38 @@ } }, "node_modules/@csstools/postcss-color-mix-function": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.8.tgz", - "integrity": "sha512-yuZpgWUzqZWQhEqfvtJufhl28DgO9sBwSbXbf/59gejNuvZcoUTRGQZhzhwF4ccqb53YAGB+u92z9+eSKoB4YA==", + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-function/-/postcss-color-mix-function-3.0.12.tgz", + "integrity": "sha512-4STERZfCP5Jcs13P1U5pTvI9SkgLgfMUMhdXW8IlJWkzOOOqhZIjcNhWtNJZes2nkBDsIKJ0CJtFtuaZ00moag==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-color-mix-variadic-function-arguments": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@csstools/postcss-color-mix-variadic-function-arguments/-/postcss-color-mix-variadic-function-arguments-1.0.2.tgz", + "integrity": "sha512-rM67Gp9lRAkTo+X31DUqMEq+iK+EFqsidfecmhrteErxJZb6tUoJBVQca1Vn1GpDql1s1rD1pKcuYzMsg7Z1KQ==", "funding": [ { "type": "github", @@ -2533,11 +2784,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2548,9 +2800,37 @@ } }, "node_modules/@csstools/postcss-content-alt-text": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.4.tgz", - "integrity": "sha512-YItlZUOuZJCBlRaCf8Aucc1lgN41qYGALMly0qQllrxYJhiyzlI6RxOTMUvtWk+KhS8GphMDsDhKQ7KTPfEMSw==", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@csstools/postcss-content-alt-text/-/postcss-content-alt-text-2.0.8.tgz", + "integrity": "sha512-9SfEW9QCxEpTlNMnpSqFaHyzsiRpZ5J5+KqCu1u5/eEJAWsMhzT40qf0FIbeeglEvrGRMdDzAxMIz3wqoGSb+Q==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", + "@csstools/utilities": "^2.0.0" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-contrast-color-function": { + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-contrast-color-function/-/postcss-contrast-color-function-2.0.12.tgz", + "integrity": "sha512-YbwWckjK3qwKjeYz/CijgcS7WDUCtKTd8ShLztm3/i5dhh4NaqzsbYnhm4bjrpFpnLZ31jVcbK8YL77z3GBPzA==", "funding": [ { "type": "github", @@ -2561,10 +2841,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2575,9 +2857,9 @@ } }, "node_modules/@csstools/postcss-exponential-functions": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-2.0.7.tgz", - "integrity": "sha512-XTb6Mw0v2qXtQYRW9d9duAjDnoTbBpsngD7sRNLmYDjvwU2ebpIHplyxgOeo6jp/Kr52gkLi5VaK5RDCqzMzZQ==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@csstools/postcss-exponential-functions/-/postcss-exponential-functions-2.0.9.tgz", + "integrity": "sha512-abg2W/PI3HXwS/CZshSa79kNWNZHdJPMBXeZNyPQFbbj8sKO3jXxOt/wF7juJVjyDTc6JrvaUZYFcSBZBhaxjw==", "funding": [ { "type": "github", @@ -2588,10 +2870,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -2614,6 +2897,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" @@ -2626,9 +2910,9 @@ } }, "node_modules/@csstools/postcss-gamut-mapping": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-2.0.8.tgz", - "integrity": "sha512-/K8u9ZyGMGPjmwCSIjgaOLKfic2RIGdFHHes84XW5LnmrvdhOTVxo255NppHi3ROEvoHPW7MplMJgjZK5Q+TxA==", + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gamut-mapping/-/postcss-gamut-mapping-2.0.11.tgz", + "integrity": "sha512-fCpCUgZNE2piVJKC76zFsgVW1apF6dpYsqGyH8SIeCcM4pTEsRTWTLCaJIMKFEundsCKwY1rwfhtrio04RJ4Dw==", "funding": [ { "type": "github", @@ -2639,10 +2923,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -2652,9 +2937,9 @@ } }, "node_modules/@csstools/postcss-gradients-interpolation-method": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.8.tgz", - "integrity": "sha512-CoHQ/0UXrvxLovu0ZeW6c3/20hjJ/QRg6lyXm3dZLY/JgvRU6bdbQZF/Du30A4TvowfcgvIHQmP1bNXUxgDrAw==", + "version": "5.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-gradients-interpolation-method/-/postcss-gradients-interpolation-method-5.0.12.tgz", + "integrity": "sha512-jugzjwkUY0wtNrZlFeyXzimUL3hN4xMvoPnIXxoZqxDvjZRiSh+itgHcVUWzJ2VwD/VAMEgCLvtaJHX+4Vj3Ow==", "funding": [ { "type": "github", @@ -2665,11 +2950,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2680,9 +2966,9 @@ } }, "node_modules/@csstools/postcss-hwb-function": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.8.tgz", - "integrity": "sha512-LpFKjX6hblpeqyych1cKmk+3FJZ19QmaJtqincySoMkbkG/w2tfbnO5oE6mlnCTXcGUJ0rCEuRHvTqKK0nHYUQ==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-hwb-function/-/postcss-hwb-function-4.0.12.tgz", + "integrity": "sha512-mL/+88Z53KrE4JdePYFJAQWFrcADEqsLprExCM04GDNgHIztwFzj0Mbhd/yxMBngq0NIlz58VVxjt5abNs1VhA==", "funding": [ { "type": "github", @@ -2693,11 +2979,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2708,9 +2995,9 @@ } }, "node_modules/@csstools/postcss-ic-unit": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.0.tgz", - "integrity": "sha512-9QT5TDGgx7wD3EEMN3BSUG6ckb6Eh5gSPT5kZoVtUuAonfPmLDJyPhqR4ntPpMYhUKAMVKAg3I/AgzqHMSeLhA==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-ic-unit/-/postcss-ic-unit-4.0.4.tgz", + "integrity": "sha512-yQ4VmossuOAql65sCPppVO1yfb7hDscf4GseF0VCA/DTDaBc0Wtf8MTqVPfjGYlT5+2buokG0Gp7y0atYZpwjg==", "funding": [ { "type": "github", @@ -2721,8 +3008,9 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, @@ -2747,6 +3035,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2755,9 +3044,9 @@ } }, "node_modules/@csstools/postcss-is-pseudo-class": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-5.0.1.tgz", - "integrity": "sha512-JLp3POui4S1auhDR0n8wHd/zTOWmMsmK3nQd3hhL6FhWPaox5W7j1se6zXOG/aP07wV2ww0lxbKYGwbBszOtfQ==", + "version": "5.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-5.0.3.tgz", + "integrity": "sha512-jS/TY4SpG4gszAtIg7Qnf3AS2pjcUM5SzxpApOrlndMeGhIbaTzWBzzP/IApXoNWEW7OhcjkRT48jnAUIFXhAQ==", "funding": [ { "type": "github", @@ -2768,6 +3057,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" @@ -2793,6 +3083,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2801,10 +3092,10 @@ } }, "node_modules/@csstools/postcss-is-pseudo-class/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", - "peer": true, + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -2814,9 +3105,9 @@ } }, "node_modules/@csstools/postcss-light-dark-function": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.7.tgz", - "integrity": "sha512-ZZ0rwlanYKOHekyIPaU+sVm3BEHCe+Ha0/px+bmHe62n0Uc1lL34vbwrLYn6ote8PHlsqzKeTQdIejQCJ05tfw==", + "version": "2.0.11", + "resolved": "https://registry.npmjs.org/@csstools/postcss-light-dark-function/-/postcss-light-dark-function-2.0.11.tgz", + "integrity": "sha512-fNJcKXJdPM3Lyrbmgw2OBbaioU7yuKZtiXClf4sGdQttitijYlZMD5K7HrC/eF83VRWRrYq6OZ0Lx92leV2LFA==", "funding": [ { "type": "github", @@ -2827,10 +3118,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2854,6 +3146,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2875,6 +3168,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2896,6 +3190,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -2917,6 +3212,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -2928,9 +3224,9 @@ } }, "node_modules/@csstools/postcss-logical-viewport-units": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-3.0.3.tgz", - "integrity": "sha512-OC1IlG/yoGJdi0Y+7duz/kU/beCwO+Gua01sD6GtOtLi7ByQUpcIqs7UE/xuRPay4cHgOMatWdnDdsIDjnWpPw==", + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-logical-viewport-units/-/postcss-logical-viewport-units-3.0.4.tgz", + "integrity": "sha512-q+eHV1haXA4w9xBwZLKjVKAWn3W2CMqmpNpZUk5kRprvSiBEGMgrNH3/sJZ8UA3JgyHaOt3jwT9uFa4wLX4EqQ==", "funding": [ { "type": "github", @@ -2941,8 +3237,9 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-tokenizer": "^3.0.3", + "@csstools/css-tokenizer": "^3.0.4", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -2953,9 +3250,9 @@ } }, "node_modules/@csstools/postcss-media-minmax": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-2.0.7.tgz", - "integrity": "sha512-LB6tIP7iBZb5CYv8iRenfBZmbaG3DWNEziOnPjGoQX5P94FBPvvTBy68b/d9NnS5PELKwFmmOYsAEIgEhDPCHA==", + "version": "2.0.9", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-minmax/-/postcss-media-minmax-2.0.9.tgz", + "integrity": "sha512-af9Qw3uS3JhYLnCbqtZ9crTvvkR+0Se+bBqSr7ykAnl9yKhk6895z9rf+2F4dClIDJWxgn0iZZ1PSdkhrbs2ig==", "funding": [ { "type": "github", @@ -2966,11 +3263,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/media-query-list-parser": "^4.0.2" + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/media-query-list-parser": "^4.0.3" }, "engines": { "node": ">=18" @@ -2980,9 +3278,9 @@ } }, "node_modules/@csstools/postcss-media-queries-aspect-ratio-number-values": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-3.0.4.tgz", - "integrity": "sha512-AnGjVslHMm5xw9keusQYvjVWvuS7KWK+OJagaG0+m9QnIjZsrysD2kJP/tr/UJIyYtMCtu8OkUd+Rajb4DqtIQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/@csstools/postcss-media-queries-aspect-ratio-number-values/-/postcss-media-queries-aspect-ratio-number-values-3.0.5.tgz", + "integrity": "sha512-zhAe31xaaXOY2Px8IYfoVTB3wglbJUVigGphFLj6exb7cjZRH9A6adyE22XfFK3P2PzwRk0VDeTJmaxpluyrDg==", "funding": [ { "type": "github", @@ -2993,10 +3291,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/media-query-list-parser": "^4.0.2" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/media-query-list-parser": "^4.0.3" }, "engines": { "node": ">=18" @@ -3019,6 +3318,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" @@ -3031,9 +3331,9 @@ } }, "node_modules/@csstools/postcss-normalize-display-values": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.0.tgz", - "integrity": "sha512-HlEoG0IDRoHXzXnkV4in47dzsxdsjdz6+j7MLjaACABX2NfvjFS6XVAnpaDyGesz9gK2SC7MbNwdCHusObKJ9Q==", + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-4.0.1.tgz", + "integrity": "sha512-TQUGBuRvxdc7TgNSTevYqrL8oItxiwPDixk20qCB5me/W8uF7BPbhRrAvFuhEoywQp/woRsUZ6SJ+sU5idZAIA==", "funding": [ { "type": "github", @@ -3044,6 +3344,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -3055,9 +3356,9 @@ } }, "node_modules/@csstools/postcss-oklab-function": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.8.tgz", - "integrity": "sha512-+5aPsNWgxohXoYNS1f+Ys0x3Qnfehgygv3qrPyv+Y25G0yX54/WlVB+IXprqBLOXHM1gsVF+QQSjlArhygna0Q==", + "version": "4.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-oklab-function/-/postcss-oklab-function-4.0.12.tgz", + "integrity": "sha512-HhlSmnE1NKBhXsTnNGjxvhryKtO7tJd1w42DKOGFD6jSHtYOrsJTQDKPMwvOfrzUAk8t7GcpIfRyM7ssqHpFjg==", "funding": [ { "type": "github", @@ -3068,11 +3369,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -3082,10 +3384,32 @@ "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-position-area-property": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-position-area-property/-/postcss-position-area-property-1.0.0.tgz", + "integrity": "sha512-fUP6KR8qV2NuUZV3Cw8itx0Ep90aRjAZxAEzC3vrl6yjFv+pFsQbR18UuQctEKmA72K9O27CoYiKEgXxkqjg8Q==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/@csstools/postcss-progressive-custom-properties": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.0.0.tgz", - "integrity": "sha512-XQPtROaQjomnvLUSy/bALTR5VCtTVUFwYs1SblvYgLSeTo2a/bMNwUwo2piXw5rTv/FEYiy5yPSXBqg9OKUx7Q==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-4.2.1.tgz", + "integrity": "sha512-uPiiXf7IEKtUQXsxu6uWtOlRMXd2QWWy5fhxHDnPdXKCQckPP3E34ZgDoZ62r2iT+UOgWsSbM4NvHE5m3mAEdw==", "funding": [ { "type": "github", @@ -3096,6 +3420,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -3106,10 +3431,36 @@ "postcss": "^8.4" } }, + "node_modules/@csstools/postcss-property-rule-prelude-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-property-rule-prelude-list/-/postcss-property-rule-prelude-list-1.0.0.tgz", + "integrity": "sha512-IxuQjUXq19fobgmSSvUDO7fVwijDJaZMvWQugxfEUxmjBeDCVaDuMpsZ31MsTm5xbnhA+ElDi0+rQ7sQQGisFA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, "node_modules/@csstools/postcss-random-function": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@csstools/postcss-random-function/-/postcss-random-function-1.0.3.tgz", - "integrity": "sha512-dbNeEEPHxAwfQJ3duRL5IPpuD77QAHtRl4bAHRs0vOVhVbHrsL7mHnwe0irYjbs9kYwhAHZBQTLBgmvufPuRkA==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-random-function/-/postcss-random-function-2.0.1.tgz", + "integrity": "sha512-q+FQaNiRBhnoSNo+GzqGOIBKoHQ43lYz0ICrV+UudfWnEF6ksS6DsBIJSISKQT2Bvu3g4k6r7t0zYrk5pDlo8w==", "funding": [ { "type": "github", @@ -3120,10 +3471,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -3133,9 +3485,9 @@ } }, "node_modules/@csstools/postcss-relative-color-syntax": { - "version": "3.0.8", - "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.8.tgz", - "integrity": "sha512-eGE31oLnJDoUysDdjS9MLxNZdtqqSxjDXMdISpLh80QMaYrKs7VINpid34tWQ+iU23Wg5x76qAzf1Q/SLLbZVg==", + "version": "3.0.12", + "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-3.0.12.tgz", + "integrity": "sha512-0RLIeONxu/mtxRtf3o41Lq2ghLimw0w9ByLWnnEVuy89exmEEq8bynveBxNW3nyHqLAFEeNtVEmC1QK9MZ8Huw==", "funding": [ { "type": "github", @@ -3146,11 +3498,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -3174,6 +3527,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -3185,9 +3539,10 @@ } }, "node_modules/@csstools/postcss-scope-pseudo-class/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -3197,9 +3552,9 @@ } }, "node_modules/@csstools/postcss-sign-functions": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-sign-functions/-/postcss-sign-functions-1.1.2.tgz", - "integrity": "sha512-4EcAvXTUPh7n6UoZZkCzgtCf/wPzMlTNuddcKg7HG8ozfQkUcHsJ2faQKeLmjyKdYPyOUn4YA7yDPf8K/jfIxw==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@csstools/postcss-sign-functions/-/postcss-sign-functions-1.1.4.tgz", + "integrity": "sha512-P97h1XqRPcfcJndFdG95Gv/6ZzxUBBISem0IDqPZ7WMvc/wlO+yU0c5D/OCpZ5TJoTt63Ok3knGk64N+o6L2Pg==", "funding": [ { "type": "github", @@ -3210,10 +3565,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -3223,9 +3579,61 @@ } }, "node_modules/@csstools/postcss-stepped-value-functions": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-4.0.7.tgz", - "integrity": "sha512-rdrRCKRnWtj5FyRin0u/gLla7CIvZRw/zMGI1fVJP0Sg/m1WGicjPVHRANL++3HQtsiXKAbPrcPr+VkyGck0IA==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-4.0.9.tgz", + "integrity": "sha512-h9btycWrsex4dNLeQfyU3y3w40LMQooJWFMm/SK9lrKguHDcFl4VMkncKKoXi2z5rM9YGWbUQABI8BT2UydIcA==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-syntax-descriptor-syntax-production": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@csstools/postcss-syntax-descriptor-syntax-production/-/postcss-syntax-descriptor-syntax-production-1.0.1.tgz", + "integrity": "sha512-GneqQWefjM//f4hJ/Kbox0C6f2T7+pi4/fqTqOFGTL3EjnvOReTqO1qUQ30CaUjkwjYq9qZ41hzarrAxCc4gow==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/csstools" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/csstools" + } + ], + "license": "MIT-0", + "dependencies": { + "@csstools/css-tokenizer": "^3.0.4" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "postcss": "^8.4" + } + }, + "node_modules/@csstools/postcss-system-ui-font-family": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@csstools/postcss-system-ui-font-family/-/postcss-system-ui-font-family-1.0.0.tgz", + "integrity": "sha512-s3xdBvfWYfoPSBsikDXbuorcMG1nN1M6GdU0qBsGfcmNR0A/qhloQZpTxjA3Xsyrk1VJvwb2pOfiOT3at/DuIQ==", "funding": [ { "type": "github", @@ -3236,10 +3644,10 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -3249,9 +3657,9 @@ } }, "node_modules/@csstools/postcss-text-decoration-shorthand": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-4.0.2.tgz", - "integrity": "sha512-8XvCRrFNseBSAGxeaVTaNijAu+FzUvjwFXtcrynmazGb/9WUdsPCpBX+mHEHShVRq47Gy4peYAoxYs8ltUnmzA==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-4.0.3.tgz", + "integrity": "sha512-KSkGgZfx0kQjRIYnpsD7X2Om9BUXX/Kii77VBifQW9Ih929hK0KNjVngHDH0bFB9GmfWcR9vJYJJRvw/NQjkrA==", "funding": [ { "type": "github", @@ -3262,8 +3670,9 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/color-helpers": "^5.0.2", + "@csstools/color-helpers": "^5.1.0", "postcss-value-parser": "^4.2.0" }, "engines": { @@ -3274,9 +3683,9 @@ } }, "node_modules/@csstools/postcss-trigonometric-functions": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-4.0.7.tgz", - "integrity": "sha512-qTrZgLju3AV7Djhzuh2Bq/wjFqbcypnk0FhHjxW8DWJQcZLS1HecIus4X2/RLch1ukX7b+YYCdqbEnpIQO5ccg==", + "version": "4.0.9", + "resolved": "https://registry.npmjs.org/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-4.0.9.tgz", + "integrity": "sha512-Hnh5zJUdpNrJqK9v1/E3BbrQhaDTj5YiX7P61TOvUhoDHnUmsNNxcDAgkQ32RrcWx9GVUvfUNPcUkn8R3vIX6A==", "funding": [ { "type": "github", @@ -3287,10 +3696,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-calc": "^2.1.2", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3" + "@csstools/css-calc": "^2.1.4", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4" }, "engines": { "node": ">=18" @@ -3313,6 +3723,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -3334,6 +3745,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -3349,20 +3761,43 @@ "node": ">=10.0.0" } }, + "node_modules/@docsearch/core": { + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/core/-/core-4.7.0.tgz", + "integrity": "sha512-p/9xVKmPDj3FPvMfPf5naVO3Ej8SCbcUugGvx1+8GgkuBNbqxqN2Irx3WLBv8VY0jH7XpRwKWdlmjXLZsmTLsg==", + "license": "MIT", + "peerDependencies": { + "@types/react": ">= 16.8.0 < 20.0.0", + "react": ">= 16.8.0 < 20.0.0", + "react-dom": ">= 16.8.0 < 20.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@docsearch/css": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.9.0.tgz", - "integrity": "sha512-cQbnVbq0rrBwNAKegIac/t6a8nWoUAn8frnkLFW6YARaRmAQr5/Eoe6Ln2fqkUCZ40KpdrKbpSAmgrkviOxuWA==" + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-4.7.0.tgz", + "integrity": "sha512-Sk5xkdRFeE7PeWjG9l4AfTwdvMfr9wHiwNNCpHXT4v4SNyNMKdHGvEILc31BgaVFGDDNbv5u/a73tofRiwbEZw==", + "license": "MIT" }, "node_modules/@docsearch/react": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.9.0.tgz", - "integrity": "sha512-mb5FOZYZIkRQ6s/NWnM98k879vu5pscWqTLubLFBO87igYYT4VzVazh4h5o/zCvTIZgEt3PvsCOMOswOUo9yHQ==", + "version": "4.7.0", + "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-4.7.0.tgz", + "integrity": "sha512-x6oedjJ8O8/pIDBsMo5Orca3/6cQCz616/CwthVe68l43mqnj2lrJ9kFQITBqy8hMsS3nWeBWFoVO5dJ1DCFKA==", + "license": "MIT", "dependencies": { - "@algolia/autocomplete-core": "1.17.9", - "@algolia/autocomplete-preset-algolia": "1.17.9", - "@docsearch/css": "3.9.0", - "algoliasearch": "^5.14.2" + "@algolia/autocomplete-core": "1.19.2", + "@docsearch/core": "4.7.0", + "@docsearch/css": "4.7.0" }, "peerDependencies": { "@types/react": ">= 16.8.0 < 20.0.0", @@ -3385,10 +3820,43 @@ } } }, + "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-core": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.19.2.tgz", + "integrity": "sha512-mKv7RyuAzXvwmq+0XRK8HqZXt9iZ5Kkm2huLjgn5JoCPtDy+oh9yxUMfDDaVCw0oyzZ1isdJBc7l9nuCyyR7Nw==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-plugin-algolia-insights": "1.19.2", + "@algolia/autocomplete-shared": "1.19.2" + } + }, + "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-plugin-algolia-insights": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.19.2.tgz", + "integrity": "sha512-TjxbcC/r4vwmnZaPwrHtkXNeqvlpdyR+oR9Wi2XyfORkiGkLTVhX2j+O9SaCCINbKoDfc+c2PB8NjfOnz7+oKg==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-shared": "1.19.2" + }, + "peerDependencies": { + "search-insights": ">= 1 < 3" + } + }, + "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-shared": { + "version": "1.19.2", + "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.19.2.tgz", + "integrity": "sha512-jEazxZTVD2nLrC+wYlVHQgpBoBB5KPStrJxLzsIFl6Kqd1AlG9sIAGl39V5tECLpIQzB3Qa2T6ZPJ1ChkwMK/w==", + "license": "MIT", + "peerDependencies": { + "@algolia/client-search": ">= 4.9.1 < 6", + "algoliasearch": ">= 4.9.1 < 6" + } + }, "node_modules/@docusaurus/babel": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/babel/-/babel-3.7.0.tgz", - "integrity": "sha512-0H5uoJLm14S/oKV3Keihxvh8RV+vrid+6Gv+2qhuzbqHanawga8tYnsdpjEyt36ucJjqlby2/Md2ObWjA02UXQ==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/babel/-/babel-3.10.2.tgz", + "integrity": "sha512-aJ1hpGyvfkte3dDAfNbWM4biW4yWZBVz7TIGLZP+v+tWOBgxX3e0N5ZIXHIvmfNNXTI77pcHUx3KmtOk05Ze3Q==", + "license": "MIT", "dependencies": { "@babel/core": "^7.25.9", "@babel/generator": "^7.25.9", @@ -3398,22 +3866,22 @@ "@babel/preset-react": "^7.25.9", "@babel/preset-typescript": "^7.25.9", "@babel/runtime": "^7.25.9", - "@babel/runtime-corejs3": "^7.25.9", "@babel/traverse": "^7.25.9", - "@docusaurus/logger": "3.7.0", - "@docusaurus/utils": "3.7.0", + "@docusaurus/logger": "3.10.2", + "@docusaurus/utils": "3.10.2", "babel-plugin-dynamic-import-node": "^2.3.3", "fs-extra": "^11.1.1", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/babel/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3424,38 +3892,38 @@ } }, "node_modules/@docusaurus/bundler": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/bundler/-/bundler-3.7.0.tgz", - "integrity": "sha512-CUUT9VlSGukrCU5ctZucykvgCISivct+cby28wJwCC/fkQFgAHRp/GKv2tx38ZmXb7nacrKzFTcp++f9txUYGg==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/bundler/-/bundler-3.10.2.tgz", + "integrity": "sha512-i0ZNcy0f0WhaOlYVgzLsWhIoEXO9kS3HRoKPtgE6vQtZUq7arKZaYdNBudr3mqCmd+TyOkwtwfHgs1ENj07r5g==", + "license": "MIT", "dependencies": { "@babel/core": "^7.25.9", - "@docusaurus/babel": "3.7.0", - "@docusaurus/cssnano-preset": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", + "@docusaurus/babel": "3.10.2", + "@docusaurus/cssnano-preset": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", "babel-loader": "^9.2.1", - "clean-css": "^5.3.2", + "clean-css": "^5.3.3", "copy-webpack-plugin": "^11.0.0", - "css-loader": "^6.8.1", + "css-loader": "^6.11.0", "css-minimizer-webpack-plugin": "^5.0.1", "cssnano": "^6.1.2", "file-loader": "^6.2.0", "html-minifier-terser": "^7.2.0", - "mini-css-extract-plugin": "^2.9.1", + "mini-css-extract-plugin": "^2.9.2", "null-loader": "^4.0.1", - "postcss": "^8.4.26", - "postcss-loader": "^7.3.3", - "postcss-preset-env": "^10.1.0", - "react-dev-utils": "^12.0.1", + "postcss": "^8.5.4", + "postcss-loader": "^7.3.4", + "postcss-preset-env": "^10.2.1", "terser-webpack-plugin": "^5.3.9", "tslib": "^2.6.0", "url-loader": "^4.1.1", "webpack": "^5.95.0", - "webpackbar": "^6.0.1" + "webpackbar": "^7.0.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "@docusaurus/faster": "*" @@ -3467,17 +3935,18 @@ } }, "node_modules/@docusaurus/core": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.7.0.tgz", - "integrity": "sha512-b0fUmaL+JbzDIQaamzpAFpTviiaU4cX3Qz8cuo14+HGBCwa0evEK0UYCBFY3n4cLzL8Op1BueeroUD2LYAIHbQ==", - "dependencies": { - "@docusaurus/babel": "3.7.0", - "@docusaurus/bundler": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/core/-/core-3.10.2.tgz", + "integrity": "sha512-EYByj6nk+aD9KeVxV6Hmo2/nAAT79P21Y82ycTBOBtrmqilloIbIEhgL2/8Xpt2Jz/pgNqHAwyusOGwmbKeJmA==", + "license": "MIT", + "dependencies": { + "@docusaurus/babel": "3.10.2", + "@docusaurus/bundler": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "boxen": "^6.2.1", "chalk": "^4.1.2", "chokidar": "^3.5.3", @@ -3485,45 +3954,51 @@ "combine-promises": "^1.1.0", "commander": "^5.1.0", "core-js": "^3.31.1", - "del": "^6.1.1", - "detect-port": "^1.5.1", + "detect-port": "^2.1.0", "escape-html": "^1.0.3", "eta": "^2.2.0", "eval": "^0.1.8", + "execa": "^5.1.1", "fs-extra": "^11.1.1", "html-tags": "^3.3.1", "html-webpack-plugin": "^5.6.0", "leven": "^3.1.0", "lodash": "^4.17.21", + "open": "^8.4.0", "p-map": "^4.0.0", "prompts": "^2.4.2", - "react-dev-utils": "^12.0.1", "react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0", "react-loadable": "npm:@docusaurus/react-loadable@6.0.0", - "react-loadable-ssr-addon-v5-slorber": "^1.0.1", + "react-loadable-ssr-addon-v5-slorber": "^1.0.3", "react-router": "^5.3.4", "react-router-config": "^5.1.1", "react-router-dom": "^5.3.4", "semver": "^7.5.4", - "serve-handler": "^6.1.6", - "shelljs": "^0.8.5", + "serve-handler": "^6.1.7", + "tinypool": "^1.0.2", "tslib": "^2.6.0", "update-notifier": "^6.0.2", "webpack": "^5.95.0", "webpack-bundle-analyzer": "^4.10.2", - "webpack-dev-server": "^4.15.2", + "webpack-dev-server": "^5.2.2", "webpack-merge": "^6.0.1" }, "bin": { "docusaurus": "bin/docusaurus.mjs" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { + "@docusaurus/faster": "*", "@mdx-js/react": "^3.0.0", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@docusaurus/faster": { + "optional": true + } } }, "node_modules/@docusaurus/core/node_modules/fs-extra": { @@ -3540,46 +4015,73 @@ } }, "node_modules/@docusaurus/cssnano-preset": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.7.0.tgz", - "integrity": "sha512-X9GYgruZBSOozg4w4dzv9uOz8oK/EpPVQXkp0MM6Tsgp/nRIU9hJzJ0Pxg1aRa3xCeEQTOimZHcocQFlLwYajQ==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/cssnano-preset/-/cssnano-preset-3.10.2.tgz", + "integrity": "sha512-4gCnHRbJLTloiwfvFAa92tgb2gI4KYhvjfQVYnEaiMO/EgvWfCo1LwytHXen+1oZAN0VAlS0JAPxp3MsvKDa3A==", + "license": "MIT", "dependencies": { "cssnano-preset-advanced": "^6.1.2", - "postcss": "^8.4.38", + "postcss": "^8.5.4", "postcss-sort-media-queries": "^5.2.0", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" + } + }, + "node_modules/@docusaurus/faster": { + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/faster/-/faster-3.10.2.tgz", + "integrity": "sha512-p/5E5/RyHv+QWusJMPN5i3OMJTqTgkhuwzVbB1AReDWTUHXQCmf5mlTFzGiDrWeQWIDOKsuOPn1jJh0s9LUOHA==", + "license": "MIT", + "dependencies": { + "@docusaurus/types": "3.10.2", + "@rspack/core": "^1.7.10", + "@swc/core": "^1.15.40", + "@swc/html": "^1.15.40", + "browserslist": "^4.24.2", + "lightningcss": "^1.27.0", + "semver": "^7.5.4", + "swc-loader": "^0.2.6", + "tslib": "^2.6.0", + "webpack": "^5.95.0" + }, + "engines": { + "node": ">=20.0" + }, + "peerDependencies": { + "@docusaurus/types": "*" } }, "node_modules/@docusaurus/logger": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.7.0.tgz", - "integrity": "sha512-z7g62X7bYxCYmeNNuO9jmzxLQG95q9QxINCwpboVcNff3SJiHJbGrarxxOVMVmAh1MsrSfxWkVGv4P41ktnFsA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/logger/-/logger-3.10.2.tgz", + "integrity": "sha512-gSEwqtPfCAnC3ZSJY6xL7tcIfgg0vFD39jbv93eakuweyvO2864xR0K+kmKwBhkTCtWRNjuGGnb5rdmkD/ndqw==", + "license": "MIT", "dependencies": { "chalk": "^4.1.2", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/mdx-loader": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.7.0.tgz", - "integrity": "sha512-OFBG6oMjZzc78/U3WNPSHs2W9ZJ723ewAcvVJaqS0VgyeUfmzUV8f1sv+iUHA0DtwiR5T5FjOxj6nzEE8LY6VA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/mdx-loader/-/mdx-loader-3.10.2.tgz", + "integrity": "sha512-9Fd4V/SFjfrVQ0JH5EN0+iPWyFunvTeQE3gfyFeetqPaXMP0OylIjOw16dCuXG4NZJrYdBqwzjh18/h3gRi47w==", + "license": "MIT", "dependencies": { - "@docusaurus/logger": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "@docusaurus/logger": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "@mdx-js/mdx": "^3.0.0", "@slorber/remark-comment": "^1.0.0", "escape-html": "^1.0.3", "estree-util-value-to-estree": "^3.0.1", "file-loader": "^6.2.0", "fs-extra": "^11.1.1", - "image-size": "^1.0.2", + "image-size": "^2.0.2", "mdast-util-mdx": "^3.0.0", "mdast-util-to-string": "^4.0.0", "rehype-raw": "^7.0.0", @@ -3596,7 +4098,7 @@ "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3617,16 +4119,17 @@ } }, "node_modules/@docusaurus/module-type-aliases": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.7.0.tgz", - "integrity": "sha512-g7WdPqDNaqA60CmBrr0cORTrsOit77hbsTj7xE2l71YhBn79sxdm7WMK7wfhcaafkbpIh7jv5ef5TOpf1Xv9Lg==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/module-type-aliases/-/module-type-aliases-3.10.2.tgz", + "integrity": "sha512-h/I5e4jaAhDHW4vaLENi1i2hnOEnXY1t9R+nnRTbgUl7ymVRzN/HF7dDfj8rKYGj8gfIge+Ef+iYRAMtbGvsrQ==", + "license": "MIT", "dependencies": { - "@docusaurus/types": "3.7.0", + "@docusaurus/types": "3.10.2", "@types/history": "^4.7.11", "@types/react": "*", "@types/react-router-config": "*", "@types/react-router-dom": "*", - "react-helmet-async": "npm:@slorber/react-helmet-async@*", + "react-helmet-async": "npm:@slorber/react-helmet-async@1.3.0", "react-loadable": "npm:@docusaurus/react-loadable@6.0.0" }, "peerDependencies": { @@ -3635,22 +4138,23 @@ } }, "node_modules/@docusaurus/plugin-client-redirects": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-3.7.0.tgz", - "integrity": "sha512-6B4XAtE5ZVKOyhPgpgMkb7LwCkN+Hgd4vOnlbwR8nCdTQhLjz8MHbGlwwvZ/cay2SPNRX5KssqKAlcHVZP2m8g==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-client-redirects/-/plugin-client-redirects-3.10.2.tgz", + "integrity": "sha512-z5I5ttCXw+8y2gHVZvqAMmUw4Rb0ZzKA5eCPk87SfM/jCKOTvE24yDpPAwwipvug96ij7mOwEHXWw8G4LlWdGA==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "eta": "^2.2.0", "fs-extra": "^11.1.1", "lodash": "^4.17.21", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3671,23 +4175,25 @@ } }, "node_modules/@docusaurus/plugin-content-blog": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.7.0.tgz", - "integrity": "sha512-EFLgEz6tGHYWdPU0rK8tSscZwx+AsyuBW/r+tNig2kbccHYGUJmZtYN38GjAa3Fda4NU+6wqUO5kTXQSRBQD3g==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/theme-common": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-blog/-/plugin-content-blog-3.10.2.tgz", + "integrity": "sha512-0cbEnNKf0InmLkhj/+nVRmqEnWEoOE8Mh+2x1qOXI0qYpCnphq4RXknVJ8BvybKRXqYVvbmdMfiJSup+k4tm5w==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/theme-common": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "cheerio": "1.0.0-rc.12", + "combine-promises": "^1.1.0", "feed": "^4.2.2", "fs-extra": "^11.1.1", "lodash": "^4.17.21", - "reading-time": "^1.5.0", + "schema-dts": "^1.1.2", "srcset": "^4.0.0", "tslib": "^2.6.0", "unist-util-visit": "^5.0.0", @@ -3695,7 +4201,7 @@ "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "@docusaurus/plugin-content-docs": "*", @@ -3704,9 +4210,10 @@ } }, "node_modules/@docusaurus/plugin-content-blog/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3717,31 +4224,32 @@ } }, "node_modules/@docusaurus/plugin-content-docs": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.7.0.tgz", - "integrity": "sha512-GXg5V7kC9FZE4FkUZA8oo/NrlRb06UwuICzI6tcbzj0+TVgjq/mpUXXzSgKzMS82YByi4dY2Q808njcBCyy6tQ==", - "peer": true, + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-docs/-/plugin-content-docs-3.10.2.tgz", + "integrity": "sha512-Sqwl4FPoZBDrlY8I2VU2H8O0M91CHp9T8ToMSkTZmjvHCif+1laqfXi6sTk8IfyVS/trN5yNjcWd1bFsGB6W5Q==", + "license": "MIT", "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/module-type-aliases": "3.7.0", - "@docusaurus/theme-common": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/module-type-aliases": "3.10.2", + "@docusaurus/theme-common": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "@types/react-router-config": "^5.0.7", "combine-promises": "^1.1.0", "fs-extra": "^11.1.1", "js-yaml": "^4.1.0", "lodash": "^4.17.21", + "schema-dts": "^1.1.2", "tslib": "^2.6.0", "utility-types": "^3.10.0", "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3749,9 +4257,10 @@ } }, "node_modules/@docusaurus/plugin-content-docs/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3762,21 +4271,22 @@ } }, "node_modules/@docusaurus/plugin-content-pages": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.7.0.tgz", - "integrity": "sha512-YJSU3tjIJf032/Aeao8SZjFOrXJbz/FACMveSMjLyMH4itQyZ2XgUIzt4y+1ISvvk5zrW4DABVT2awTCqBkx0Q==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-content-pages/-/plugin-content-pages-3.10.2.tgz", + "integrity": "sha512-h5R12sZ/vV9EPiVjvIl9YFCOwkpwXes7dQMYt3EvP6Pphu4amHxxTqWxf08Fl5DR8h+oZMbWpFTNw5vKEYfvzQ==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "fs-extra": "^11.1.1", "tslib": "^2.6.0", "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3784,9 +4294,10 @@ } }, "node_modules/@docusaurus/plugin-content-pages/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3796,20 +4307,37 @@ "node": ">=14.14" } }, + "node_modules/@docusaurus/plugin-css-cascade-layers": { + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-css-cascade-layers/-/plugin-css-cascade-layers-3.10.2.tgz", + "integrity": "sha512-UkdvQby5OQUKWrw3lLnSTJXQ6VETaUVTuPQX9AABtmFm5h+ifEBx1OQ+LN726Q4byuwBf2ElHkf4qU4hTxdvRg==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", + "tslib": "^2.6.0" + }, + "engines": { + "node": ">=20.0" + } + }, "node_modules/@docusaurus/plugin-debug": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.7.0.tgz", - "integrity": "sha512-Qgg+IjG/z4svtbCNyTocjIwvNTNEwgRjSXXSJkKVG0oWoH0eX/HAPiu+TS1HBwRPQV+tTYPWLrUypYFepfujZA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-debug/-/plugin-debug-3.10.2.tgz", + "integrity": "sha512-8vbZNOSCpnsT57EY6CgN7sgRVmx3KTYwO8Uvo2pbxOyb8tbqAwtT9SslqaQ41HbA1v1hpn5RP7u5s2KvRwAFpQ==", + "license": "MIT", "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", "fs-extra": "^11.1.1", - "react-json-view-lite": "^1.2.0", + "react-json-view-lite": "^2.3.0", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3817,9 +4345,10 @@ } }, "node_modules/@docusaurus/plugin-debug/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3830,17 +4359,18 @@ } }, "node_modules/@docusaurus/plugin-google-analytics": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.7.0.tgz", - "integrity": "sha512-otIqiRV/jka6Snjf+AqB360XCeSv7lQC+DKYW+EUZf6XbuE8utz5PeUQ8VuOcD8Bk5zvT1MC4JKcd5zPfDuMWA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-analytics/-/plugin-google-analytics-3.10.2.tgz", + "integrity": "sha512-kMHMBK9j4VAtgd5owwrRLRIi0EjkrpXlX7ePj1+y68XfVZV9I1T4S+koPDm+Hfw2TtnyHvh0uNrDvjz+DjQGVA==", + "license": "MIT", "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3848,18 +4378,18 @@ } }, "node_modules/@docusaurus/plugin-google-gtag": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.7.0.tgz", - "integrity": "sha512-M3vrMct1tY65ModbyeDaMoA+fNJTSPe5qmchhAbtqhDD/iALri0g9LrEpIOwNaoLmm6lO88sfBUADQrSRSGSWA==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", - "@types/gtag.js": "^0.0.12", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-gtag/-/plugin-google-gtag-3.10.2.tgz", + "integrity": "sha512-Vt90nNFhtAChRe9+it1hcHFgFvETdSnOkL5Bma+p6E/yU2tAYrvvyk+gv+LJGM2ZUkyKuKXLRsZ2Lb0bO7+Vog==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3867,17 +4397,18 @@ } }, "node_modules/@docusaurus/plugin-google-tag-manager": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.7.0.tgz", - "integrity": "sha512-X8U78nb8eiMiPNg3jb9zDIVuuo/rE1LjGDGu+5m5CX4UBZzjMy+klOY2fNya6x8ACyE/L3K2erO1ErheP55W/w==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-google-tag-manager/-/plugin-google-tag-manager-3.10.2.tgz", + "integrity": "sha512-MLCffCldysi/R0nzJQP7ZWd0xAoGNnSTiVOo6TTR6mKVGFhE+/XArGe67ZcaZv1uytgQXoXs92VJrgVDrz80rQ==", + "license": "MIT", "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3885,22 +4416,23 @@ } }, "node_modules/@docusaurus/plugin-sitemap": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.7.0.tgz", - "integrity": "sha512-bTRT9YLZ/8I/wYWKMQke18+PF9MV8Qub34Sku6aw/vlZ/U+kuEuRpQ8bTcNOjaTSfYsWkK4tTwDMHK2p5S86cA==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-sitemap/-/plugin-sitemap-3.10.2.tgz", + "integrity": "sha512-PODkwg5XetLML3hU/3xpCKJUZ9cqExLaBnD/Fzzwj2VHogLeqnDisLIujae87zuze7T4mCm2A6KEqZkyiz07EQ==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "fs-extra": "^11.1.1", "sitemap": "^7.1.1", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3908,9 +4440,10 @@ } }, "node_modules/@docusaurus/plugin-sitemap/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -3921,21 +4454,22 @@ } }, "node_modules/@docusaurus/plugin-svgr": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/plugin-svgr/-/plugin-svgr-3.7.0.tgz", - "integrity": "sha512-HByXIZTbc4GV5VAUkZ2DXtXv1Qdlnpk3IpuImwSnEzCDBkUMYcec5282hPjn6skZqB25M1TYCmWS91UbhBGxQg==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/plugin-svgr/-/plugin-svgr-3.10.2.tgz", + "integrity": "sha512-JgfT3jWM0TJ8Uw0cEcqxHpybngQY1vlBYpuuNO+gEh5iPh5Ar+vxq/u9CFrYsWeXy48BN7Db76Pzp2edNXUQ8A==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "@svgr/core": "8.1.0", "@svgr/webpack": "^8.1.0", "tslib": "^2.6.0", "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3943,27 +4477,29 @@ } }, "node_modules/@docusaurus/preset-classic": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.7.0.tgz", - "integrity": "sha512-nPHj8AxDLAaQXs+O6+BwILFuhiWbjfQWrdw2tifOClQoNfuXDjfjogee6zfx6NGHWqshR23LrcN115DmkHC91Q==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/plugin-content-blog": "3.7.0", - "@docusaurus/plugin-content-docs": "3.7.0", - "@docusaurus/plugin-content-pages": "3.7.0", - "@docusaurus/plugin-debug": "3.7.0", - "@docusaurus/plugin-google-analytics": "3.7.0", - "@docusaurus/plugin-google-gtag": "3.7.0", - "@docusaurus/plugin-google-tag-manager": "3.7.0", - "@docusaurus/plugin-sitemap": "3.7.0", - "@docusaurus/plugin-svgr": "3.7.0", - "@docusaurus/theme-classic": "3.7.0", - "@docusaurus/theme-common": "3.7.0", - "@docusaurus/theme-search-algolia": "3.7.0", - "@docusaurus/types": "3.7.0" + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/preset-classic/-/preset-classic-3.10.2.tgz", + "integrity": "sha512-a4B3VczmDl99zK0EufDQYomdJ186WDingjmDXxhN2PNPS9Ty/Y2M5CLFX1KQMRKqRTLiRDKfutzG5IY1FC/ceg==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/plugin-content-blog": "3.10.2", + "@docusaurus/plugin-content-docs": "3.10.2", + "@docusaurus/plugin-content-pages": "3.10.2", + "@docusaurus/plugin-css-cascade-layers": "3.10.2", + "@docusaurus/plugin-debug": "3.10.2", + "@docusaurus/plugin-google-analytics": "3.10.2", + "@docusaurus/plugin-google-gtag": "3.10.2", + "@docusaurus/plugin-google-tag-manager": "3.10.2", + "@docusaurus/plugin-sitemap": "3.10.2", + "@docusaurus/plugin-svgr": "3.10.2", + "@docusaurus/theme-classic": "3.10.2", + "@docusaurus/theme-common": "3.10.2", + "@docusaurus/theme-search-algolia": "3.10.2", + "@docusaurus/types": "3.10.2" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -3971,30 +4507,31 @@ } }, "node_modules/@docusaurus/theme-classic": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.7.0.tgz", - "integrity": "sha512-MnLxG39WcvLCl4eUzHr0gNcpHQfWoGqzADCly54aqCofQX6UozOS9Th4RK3ARbM9m7zIRv3qbhggI53dQtx/hQ==", - "dependencies": { - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/module-type-aliases": "3.7.0", - "@docusaurus/plugin-content-blog": "3.7.0", - "@docusaurus/plugin-content-docs": "3.7.0", - "@docusaurus/plugin-content-pages": "3.7.0", - "@docusaurus/theme-common": "3.7.0", - "@docusaurus/theme-translations": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/theme-classic/-/theme-classic-3.10.2.tgz", + "integrity": "sha512-JqTSLQmqmA9uKWZsD5iwBGJ4JyKB4/yTw6PsSXVPRJG/6GAm/u+add9Iip+hvwP12/AnPNztrdxsI14NJW4KeA==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/module-type-aliases": "3.10.2", + "@docusaurus/plugin-content-blog": "3.10.2", + "@docusaurus/plugin-content-docs": "3.10.2", + "@docusaurus/plugin-content-pages": "3.10.2", + "@docusaurus/theme-common": "3.10.2", + "@docusaurus/theme-translations": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "copy-text-to-clipboard": "^3.2.0", "infima": "0.2.0-alpha.45", "lodash": "^4.17.21", "nprogress": "^0.2.0", - "postcss": "^8.4.26", + "postcss": "^8.5.4", "prism-react-renderer": "^2.3.0", "prismjs": "^1.29.0", "react-router-dom": "^5.3.4", @@ -4003,7 +4540,7 @@ "utility-types": "^3.10.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -4014,19 +4551,21 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/@docusaurus/theme-common": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.7.0.tgz", - "integrity": "sha512-8eJ5X0y+gWDsURZnBfH0WabdNm8XMCXHv8ENy/3Z/oQKwaB/EHt5lP9VsTDTf36lKEp0V6DjzjFyFIB+CetL0A==", - "dependencies": { - "@docusaurus/mdx-loader": "3.7.0", - "@docusaurus/module-type-aliases": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/theme-common/-/theme-common-3.10.2.tgz", + "integrity": "sha512-R9b/vMpK1yye6hNZTA6x/ivRv+at6GhxnXcxkpzCGzO1R1RwiquqiFg2wMFh6aqlJTpWRFKpFD2TzCDQcyOU0A==", + "license": "MIT", + "dependencies": { + "@docusaurus/mdx-loader": "3.10.2", + "@docusaurus/module-type-aliases": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", "@types/history": "^4.7.11", "@types/react": "*", "@types/react-router-config": "*", @@ -4037,7 +4576,7 @@ "utility-types": "^3.10.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "@docusaurus/plugin-content-docs": "*", @@ -4049,25 +4588,28 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/@docusaurus/theme-search-algolia": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.7.0.tgz", - "integrity": "sha512-Al/j5OdzwRU1m3falm+sYy9AaB93S1XF1Lgk9Yc6amp80dNxJVplQdQTR4cYdzkGtuQqbzUA8+kaoYYO0RbK6g==", - "dependencies": { - "@docsearch/react": "^3.8.1", - "@docusaurus/core": "3.7.0", - "@docusaurus/logger": "3.7.0", - "@docusaurus/plugin-content-docs": "3.7.0", - "@docusaurus/theme-common": "3.7.0", - "@docusaurus/theme-translations": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-validation": "3.7.0", - "algoliasearch": "^5.17.1", - "algoliasearch-helper": "^3.22.6", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.10.2.tgz", + "integrity": "sha512-1msxllyhi/5m77JukXtp5UFnUAriwZIC1oJ7MTnpQpCwLTbclJi5BK5n28CTZuSXpQN2ewbbnqRgAhMM6c6ihg==", + "license": "MIT", + "dependencies": { + "@algolia/autocomplete-core": "^1.19.2", + "@docsearch/react": "^3.9.0 || ^4.3.2", + "@docusaurus/core": "3.10.2", + "@docusaurus/logger": "3.10.2", + "@docusaurus/plugin-content-docs": "3.10.2", + "@docusaurus/theme-common": "3.10.2", + "@docusaurus/theme-translations": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-validation": "3.10.2", + "algoliasearch": "^5.37.0", + "algoliasearch-helper": "^3.26.0", "clsx": "^2.0.0", "eta": "^2.2.0", "fs-extra": "^11.1.1", @@ -4076,7 +4618,7 @@ "utility-types": "^3.10.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", @@ -4087,14 +4629,16 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", "engines": { "node": ">=6" } }, "node_modules/@docusaurus/theme-search-algolia/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -4105,21 +4649,23 @@ } }, "node_modules/@docusaurus/theme-translations": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.7.0.tgz", - "integrity": "sha512-Ewq3bEraWDmienM6eaNK7fx+/lHMtGDHQyd1O+4+3EsDxxUmrzPkV7Ct3nBWTuE0MsoZr3yNwQVKjllzCMuU3g==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/theme-translations/-/theme-translations-3.10.2.tgz", + "integrity": "sha512-iv20wrxnyXkY89LM3TzRlzGlt5fIGO5UnaR6UL1ZVfB9RRFjxQFQ6awDrwAc6Km8Y5gD8pInuwYPF+6/TiCxXA==", + "license": "MIT", "dependencies": { "fs-extra": "^11.1.1", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/theme-translations/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -4130,18 +4676,21 @@ } }, "node_modules/@docusaurus/tsconfig": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/tsconfig/-/tsconfig-3.7.0.tgz", - "integrity": "sha512-vRsyj3yUZCjscgfgcFYjIsTcAru/4h4YH2/XAE8Rs7wWdnng98PgWKvP5ovVc4rmRpRg2WChVW0uOy2xHDvDBQ==", - "dev": true + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/tsconfig/-/tsconfig-3.10.2.tgz", + "integrity": "sha512-5GiB7h/nFsMFPO9mCqcRNE1yA5TSXXNCshNIgHPL6fCPOjcTDixs6qjQBu8ddkgPcicwCvOA7n3jeK2rGdJk6g==", + "dev": true, + "license": "MIT" }, "node_modules/@docusaurus/types": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.7.0.tgz", - "integrity": "sha512-kOmZg5RRqJfH31m+6ZpnwVbkqMJrPOG5t0IOl4i/+3ruXyNfWzZ0lVtVrD0u4ONc/0NOsS9sWYaxxWNkH1LdLQ==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/types/-/types-3.10.2.tgz", + "integrity": "sha512-B6rvfwIFSapUqUJjMriZswX13K8l5Z7AcmVE6uTEJpYddQieSTR12DsGaFtcZAIDsQd4p+0WTl0Vc6jmZK0Trw==", + "license": "MIT", "dependencies": { "@mdx-js/mdx": "^3.0.0", "@types/history": "^4.7.11", + "@types/mdast": "^4.0.2", "@types/react": "*", "commander": "^5.1.0", "joi": "^17.9.2", @@ -4159,6 +4708,7 @@ "version": "5.10.0", "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.10.0.tgz", "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==", + "license": "MIT", "dependencies": { "clone-deep": "^4.0.1", "flat": "^5.0.2", @@ -4169,55 +4719,59 @@ } }, "node_modules/@docusaurus/utils": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.7.0.tgz", - "integrity": "sha512-e7zcB6TPnVzyUaHMJyLSArKa2AG3h9+4CfvKXKKWNx6hRs+p0a+u7HHTJBgo6KW2m+vqDnuIHK4X+bhmoghAFA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/utils/-/utils-3.10.2.tgz", + "integrity": "sha512-xx0W3eav2uW1NRIpuHJWNwLTC15xPNjU4Uxi9NSnd3swYC96BE3vFiT93SD8s24kmAAWNwgZwfZ2fghGZ01Lcw==", + "license": "MIT", "dependencies": { - "@docusaurus/logger": "3.7.0", - "@docusaurus/types": "3.7.0", - "@docusaurus/utils-common": "3.7.0", + "@11ty/gray-matter": "^1.0.0", + "@docusaurus/logger": "3.10.2", + "@docusaurus/types": "3.10.2", + "@docusaurus/utils-common": "3.10.2", "escape-string-regexp": "^4.0.0", + "execa": "^5.1.1", "file-loader": "^6.2.0", "fs-extra": "^11.1.1", "github-slugger": "^1.5.0", "globby": "^11.1.0", - "gray-matter": "^4.0.3", "jiti": "^1.20.0", "js-yaml": "^4.1.0", "lodash": "^4.17.21", "micromatch": "^4.0.5", + "p-queue": "^6.6.2", "prompts": "^2.4.2", "resolve-pathname": "^3.0.0", - "shelljs": "^0.8.5", "tslib": "^2.6.0", "url-loader": "^4.1.1", "utility-types": "^3.10.0", "webpack": "^5.88.1" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/utils-common": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.7.0.tgz", - "integrity": "sha512-IZeyIfCfXy0Mevj6bWNg7DG7B8G+S6o6JVpddikZtWyxJguiQ7JYr0SIZ0qWd8pGNuMyVwriWmbWqMnK7Y5PwA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/utils-common/-/utils-common-3.10.2.tgz", + "integrity": "sha512-x3Dz6jv6iQKBNjBmVTu8p57abMp/VNTUgKBMgRVXJc5444orBTsArv0+cdfrXTiz/VMmHfDRVkPbL7GH2B7T7w==", + "license": "MIT", "dependencies": { - "@docusaurus/types": "3.7.0", + "@docusaurus/types": "3.10.2", "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/utils-validation": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.7.0.tgz", - "integrity": "sha512-w8eiKk8mRdN+bNfeZqC4nyFoxNyI1/VExMKAzD9tqpJfLLbsa46Wfn5wcKH761g9WkKh36RtFV49iL9lh1DYBA==", + "version": "3.10.2", + "resolved": "https://registry.npmjs.org/@docusaurus/utils-validation/-/utils-validation-3.10.2.tgz", + "integrity": "sha512-sn8unbDfUL585NtR3cwHefPicOyaHvPaX7VD0aOg/siIxUBoKyKKaGEqzJZDS64mM43TnxurkYDtmB1wsJlZsw==", + "license": "MIT", "dependencies": { - "@docusaurus/logger": "3.7.0", - "@docusaurus/utils": "3.7.0", - "@docusaurus/utils-common": "3.7.0", + "@docusaurus/logger": "3.10.2", + "@docusaurus/utils": "3.10.2", + "@docusaurus/utils-common": "3.10.2", "fs-extra": "^11.2.0", "joi": "^17.9.2", "js-yaml": "^4.1.0", @@ -4225,13 +4779,14 @@ "tslib": "^2.6.0" }, "engines": { - "node": ">=18.0" + "node": ">=20.0" } }, "node_modules/@docusaurus/utils-validation/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -4242,9 +4797,10 @@ } }, "node_modules/@docusaurus/utils/node_modules/fs-extra": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.3.0.tgz", - "integrity": "sha512-Z4XaCL6dUDHfP/jT25jJKMmtxvuwbkrD1vNSMFlo9lNLY2c5FHYSQgHPRZUjAB26TpDEoW9HCOgplrdbaPV/ew==", + "version": "11.4.0", + "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.4.0.tgz", + "integrity": "sha512-EQsFzMUJkCKGr1ePqlYADkIUmHW1s3ZXr5Yqy6wbGrfUCphpl2maM/kyOIRA2HpP3AaFQTZXD4ldjek+nccddA==", + "license": "MIT", "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", @@ -4254,10 +4810,42 @@ "node": ">=14.14" } }, + "node_modules/@emnapi/core": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz", + "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==", + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/wasi-threads": "1.2.3", + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/runtime": { + "version": "1.11.3", + "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz", + "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==", + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, + "node_modules/@emnapi/wasi-threads": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz", + "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==", + "license": "MIT", + "optional": true, + "dependencies": { + "tslib": "^2.4.0" + } + }, "node_modules/@emotion/is-prop-valid": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "peer": true, "dependencies": { "@emotion/memoize": "^0.8.1" } @@ -4265,12 +4853,67 @@ "node_modules/@emotion/memoize": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", - "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "peer": true }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", - "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "peer": true + }, + "node_modules/@floating-ui/core": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.8.0.tgz", + "integrity": "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.12" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.8.0.tgz", + "integrity": "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.8.0", + "@floating-ui/utils": "^0.2.12" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.27.20", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.27.20.tgz", + "integrity": "sha512-CMqMy7OaXl9W0eq1Uy7L7i2Y/anPvHmFmESd2CEw0t5YvZhcVCeo4MBevAmswRllX7Y2dEidA4ozGPunLSTQpw==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.9", + "@floating-ui/utils": "^0.2.12", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=17.0.0", + "react-dom": ">=17.0.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.9.tgz", + "integrity": "sha512-JDjEFGCpImxDCA7JJKviA0M9+RtmJdj0m/NVU5IMgBK+AmZouAQQ7/+2GLH0GXXY0YMw9oXPB8hKdbPYg5QLYg==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.8.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.12", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.12.tgz", + "integrity": "sha512-HpCo8tmWzLVad5s2d19EhAz5zqrrQ6s69qd6moPMQvkOuSwDT1YgRfWSVuc4ennqrgv3OHppiOGMQ7oC13yIww==", + "license": "MIT" }, "node_modules/@hapi/hoek": { "version": "9.3.0", @@ -4311,6 +4954,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/schemas/-/schemas-29.6.3.tgz", "integrity": "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==", + "license": "MIT", "dependencies": { "@sinclair/typebox": "^0.27.8" }, @@ -4322,6 +4966,7 @@ "version": "29.6.3", "resolved": "https://registry.npmjs.org/@jest/types/-/types-29.6.3.tgz", "integrity": "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==", + "license": "MIT", "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", @@ -4335,16 +4980,13 @@ } }, "node_modules/@jridgewell/gen-mapping": { - "version": "0.3.8", - "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", - "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "license": "MIT", "dependencies": { - "@jridgewell/set-array": "^1.2.1", - "@jridgewell/sourcemap-codec": "^1.4.10", + "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" - }, - "engines": { - "node": ">=6.0.0" } }, "node_modules/@jridgewell/resolve-uri": { @@ -4355,14 +4997,6 @@ "node": ">=6.0.0" } }, - "node_modules/@jridgewell/set-array": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", - "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", - "engines": { - "node": ">=6.0.0" - } - }, "node_modules/@jridgewell/source-map": { "version": "0.3.5", "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz", @@ -4373,589 +5007,2491 @@ } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.15", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz", - "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==" + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.25", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", - "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, - "node_modules/@leichtgewicht/ip-codec": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", - "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==" + "node_modules/@jsonjoy.com/base64": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-1.1.2.tgz", + "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } }, - "node_modules/@mdx-js/mdx": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.0.tgz", - "integrity": "sha512-Icm0TBKBLYqroYbNW3BPnzMGn+7mwpQOK310aZ7+fkCtiU3aqv2cdcX+nd0Ydo3wI5Rx8bX2Z2QmGb/XcAClCw==", - "dependencies": { - "@types/estree": "^1.0.0", - "@types/estree-jsx": "^1.0.0", - "@types/hast": "^3.0.0", - "@types/mdx": "^2.0.0", - "collapse-white-space": "^2.0.0", - "devlop": "^1.0.0", - "estree-util-build-jsx": "^3.0.0", - "estree-util-is-identifier-name": "^3.0.0", - "estree-util-to-js": "^2.0.0", - "estree-walker": "^3.0.0", - "hast-util-to-estree": "^3.0.0", - "hast-util-to-jsx-runtime": "^2.0.0", - "markdown-extensions": "^2.0.0", - "periscopic": "^3.0.0", - "remark-mdx": "^3.0.0", - "remark-parse": "^11.0.0", - "remark-rehype": "^11.0.0", - "source-map": "^0.7.0", - "unified": "^11.0.0", - "unist-util-position-from-estree": "^2.0.0", - "unist-util-stringify-position": "^4.0.0", - "unist-util-visit": "^5.0.0", - "vfile": "^6.0.0" + "node_modules/@jsonjoy.com/buffers": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-17.67.0.tgz", + "integrity": "sha512-tfExRpYxBvi32vPs9ZHaTjSP4fHAfzSmcahOfNxtvGHcyJel+aibkPlGeBB+7AoC6hL7lXIE++8okecBxx7lcw==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@mdx-js/react": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.0.tgz", - "integrity": "sha512-nDctevR9KyYFyV+m+/+S4cpzCWHqj+iHDHq3QrsWezcC+B17uZdIWgCguESUkwFhM3n/56KxWVE3V6EokrmONQ==", - "peer": true, - "dependencies": { - "@types/mdx": "^2.0.0" + "node_modules/@jsonjoy.com/codegen": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/codegen/-/codegen-1.0.0.tgz", + "integrity": "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "type": "github", + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@types/react": ">=16", - "react": ">=16" + "tslib": "2" } }, - "node_modules/@nodelib/fs.scandir": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", - "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "node_modules/@jsonjoy.com/fs-core": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-core/-/fs-core-4.67.0.tgz", + "integrity": "sha512-+QOYAGujzm86pKcX4N0JQ1YcLEjypr/I+wmQRxwI8W7K0QXKSi8vQVC2oKQGjcfbHq02JvCQijypfvyhcTz7uw==", + "license": "Apache-2.0", "dependencies": { - "@nodelib/fs.stat": "2.0.5", - "run-parallel": "^1.1.9" + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "@jsonjoy.com/fs-node-utils": "4.67.0", + "thingies": "^2.5.0" }, "engines": { - "node": ">= 8" + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@nodelib/fs.stat": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", - "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "node_modules/@jsonjoy.com/fs-fsa": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-fsa/-/fs-fsa-4.67.0.tgz", + "integrity": "sha512-2jCnH5ofKXb+6vcl8dQArO1Gb4FT7vLbMGVnNim0ekXkY78DPVXZvJ8DQp9WLbqP/G/gxiPVz/DOMoOCD4BqqQ==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-core": "4.67.0", + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "@jsonjoy.com/fs-node-utils": "4.67.0", + "thingies": "^2.5.0" + }, "engines": { - "node": ">= 8" + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@nodelib/fs.walk": { - "version": "1.2.8", - "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", - "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "node_modules/@jsonjoy.com/fs-node": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node/-/fs-node-4.67.0.tgz", + "integrity": "sha512-EZ/mSrxRYphDbyll1VuDW0mvj/USoe2M5sxT2nYqyYyvdxsIsijhJOiygBHAaj86Eqd/Kb9ukkwXjBisRTk1tg==", + "license": "Apache-2.0", "dependencies": { - "@nodelib/fs.scandir": "2.1.5", - "fastq": "^1.6.0" + "@jsonjoy.com/fs-core": "4.67.0", + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "@jsonjoy.com/fs-node-utils": "4.67.0", + "@jsonjoy.com/fs-print": "4.67.0", + "@jsonjoy.com/fs-snapshot": "4.67.0", + "glob-to-regex.js": "^1.0.0", + "thingies": "^2.5.0" }, "engines": { - "node": ">= 8" + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@pnpm/config.env-replace": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz", - "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==", + "node_modules/@jsonjoy.com/fs-node-builtins": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-builtins/-/fs-node-builtins-4.67.0.tgz", + "integrity": "sha512-os7Cft1EudH0xZs5Kh5/qHI72jk8DMQ1561elyHkHd9c9xaa4wOfK1iMh4JB9y+kXtpXjEnT4cjHqqc7A3X3lA==", + "license": "Apache-2.0", "engines": { - "node": ">=12.22.0" - } - }, - "node_modules/@pnpm/network.ca-file": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz", - "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==", - "dependencies": { - "graceful-fs": "4.2.10" - }, - "engines": { - "node": ">=12.22.0" - } - }, - "node_modules/@pnpm/network.ca-file/node_modules/graceful-fs": { - "version": "4.2.10", - "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", - "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" - }, - "node_modules/@pnpm/npm-conf": { - "version": "2.2.2", - "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz", - "integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==", - "dependencies": { - "@pnpm/config.env-replace": "^1.1.0", - "@pnpm/network.ca-file": "^1.0.1", - "config-chain": "^1.1.11" + "node": ">=10.0" }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@polka/url": { - "version": "1.0.0-next.29", - "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz", - "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==" - }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, - "node_modules/@prismicio/client": { - "version": "6.9.0", - "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-6.9.0.tgz", - "integrity": "sha512-0vEjrywd65ivCa49WHly/c/DdxK2uEZ4w7Vg2ajrG8n7Q3RxQubO26AtGs0eJ2+jPjAnROI78iNS0f5qMBor5Q==", - "peer": true, - "dependencies": { - "@prismicio/helpers": "^2.3.8", - "@prismicio/types": "^0.2.7" + "type": "github", + "url": "https://github.com/sponsors/streamich" }, - "engines": { - "node": ">=12.13.0" + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@prismicio/helpers": { - "version": "2.3.9", - "resolved": "https://registry.npmjs.org/@prismicio/helpers/-/helpers-2.3.9.tgz", - "integrity": "sha512-p7Y1sG83A2YPZvptfAzuZA8xH1bdM2wGRjqSKW9Qa0rAnBq2OfVKRvwl9OMCZML4eLUMxSEUAEWRVSoKpQnJvA==", + "node_modules/@jsonjoy.com/fs-node-to-fsa": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-to-fsa/-/fs-node-to-fsa-4.67.0.tgz", + "integrity": "sha512-5e6WTnLhw0Q5mPEACOsA7h2BA++N1FCSmhXRX5gone8Le4fsqcpgpukqW5hWneLfzIr5AOEliu0PyokdYx3Bwg==", + "license": "Apache-2.0", "dependencies": { - "@prismicio/richtext": "^2.1.4", - "@prismicio/types": "^0.2.7", - "imgix-url-builder": "^0.0.3" + "@jsonjoy.com/fs-fsa": "4.67.0", + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "@jsonjoy.com/fs-node-utils": "4.67.0" }, "engines": { - "node": ">=12.7.0" - } - }, - "node_modules/@prismicio/react": { - "version": "2.7.3", - "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-2.7.3.tgz", - "integrity": "sha512-4Fr19mcJPCDCQUvCYUjphgFH6bzoNeamIVubDvDTdedYYGT+SjKCwNRIElDJIh6QMCU8zqvVAT4jAS3Tok5hlw==", - "dependencies": { - "@prismicio/richtext": "^2.1.5" + "node": ">=10.0" }, - "engines": { - "node": ">=12.7.0" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@prismicio/client": "^6 || ^7", - "react": "^18" + "tslib": "2" } }, - "node_modules/@prismicio/richtext": { - "version": "2.1.5", - "resolved": "https://registry.npmjs.org/@prismicio/richtext/-/richtext-2.1.5.tgz", - "integrity": "sha512-Sf6iCsciPmfK3uQeFmeY9RTRSuhrCVzyU39OkiJ1VJn8O0531pKapGoWS+5WGxouJtE5+jGqV8L+L2mKP7NkXQ==", + "node_modules/@jsonjoy.com/fs-node-utils": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-node-utils/-/fs-node-utils-4.67.0.tgz", + "integrity": "sha512-ZcCPh4jvUqYxAgu4lLe+6eQbijxEkZIrCq0Jhh669o3v3zrCn8N4YAFod3zllZtSHhwb+YbER29LUW/SdNrP7Q==", + "license": "Apache-2.0", "dependencies": { - "@prismicio/types": "^0.2.7" + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "glob-to-regex.js": "^1.0.1" }, "engines": { - "node": ">=12.7.0" - } - }, - "node_modules/@prismicio/types": { - "version": "0.2.8", - "resolved": "https://registry.npmjs.org/@prismicio/types/-/types-0.2.8.tgz", - "integrity": "sha512-EmuYYil56U+UtEifMD/9TmLzpWliV+X6kypwPq47GNXmIXyFK1JsP3z872fUziXwoBjd2YILj28DNdYXlLOpXg==", - "engines": { - "node": ">=12.7.0" - } - }, - "node_modules/@rollup/plugin-babel": { - "version": "5.3.1", - "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", - "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==", - "dependencies": { - "@babel/helper-module-imports": "^7.10.4", - "@rollup/pluginutils": "^3.1.0" + "node": ">=10.0" }, - "engines": { - "node": ">= 10.0.0" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0", - "@types/babel__core": "^7.1.9", - "rollup": "^1.20.0||^2.0.0" - }, - "peerDependenciesMeta": { - "@types/babel__core": { - "optional": true - } + "tslib": "2" } }, - "node_modules/@rollup/pluginutils": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", - "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "node_modules/@jsonjoy.com/fs-print": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-print/-/fs-print-4.67.0.tgz", + "integrity": "sha512-xBhay3ayVlFeScafZy+7jyH0+I6MLomaL+2nn/KWirgjwh58w8+u44j7oSvE8EQ2NLF63B1eVc65awmbs/39Iw==", + "license": "Apache-2.0", "dependencies": { - "@types/estree": "0.0.39", - "estree-walker": "^1.0.1", - "picomatch": "^2.2.2" + "@jsonjoy.com/fs-node-utils": "4.67.0", + "tree-dump": "^1.1.0" }, "engines": { - "node": ">= 8.0.0" + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "rollup": "^1.20.0||^2.0.0" - } - }, - "node_modules/@rollup/pluginutils/node_modules/@types/estree": { - "version": "0.0.39", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", - "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" - }, - "node_modules/@rollup/pluginutils/node_modules/estree-walker": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", - "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==" - }, - "node_modules/@sideway/address": { - "version": "4.1.4", - "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", - "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==", - "dependencies": { - "@hapi/hoek": "^9.0.0" - } - }, - "node_modules/@sideway/formula": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz", - "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==" - }, - "node_modules/@sideway/pinpoint": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz", - "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==" - }, - "node_modules/@sinclair/typebox": { - "version": "0.27.8", - "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", - "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==" - }, - "node_modules/@sindresorhus/is": { - "version": "0.14.0", - "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", - "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", - "engines": { - "node": ">=6" + "tslib": "2" } }, - "node_modules/@slorber/remark-comment": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz", - "integrity": "sha512-RCE24n7jsOj1M0UPvIQCHTe7fI0sFL4S2nwKVWwHyVr/wI/H8GosgsJGyhnsZoGFnD/P2hLf1mSbrrgSLN93NA==", + "node_modules/@jsonjoy.com/fs-snapshot": { + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/fs-snapshot/-/fs-snapshot-4.67.0.tgz", + "integrity": "sha512-wn5c6Qx0iVX1dV74l5WOCIPH9lz3xU6A0QG45n0c53athmmr7Z+XTg0YOndME88g/5LjcqwiSSYD9aSr9+goYg==", + "license": "Apache-2.0", "dependencies": { - "micromark-factory-space": "^1.0.0", - "micromark-util-character": "^1.1.0", - "micromark-util-symbol": "^1.0.1" - } - }, - "node_modules/@stackblitz/sdk": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.9.0.tgz", - "integrity": "sha512-3m6C7f8pnR5KXys/Hqx2x6ylnpqOak6HtnZI6T5keEO0yT+E4Spkw37VEbdwuC+2oxmjdgq6YZEgiKX7hM1GmQ==" - }, - "node_modules/@svgr/babel-plugin-add-jsx-attribute": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", - "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "@jsonjoy.com/buffers": "^17.65.0", + "@jsonjoy.com/fs-node-utils": "4.67.0", + "@jsonjoy.com/json-pack": "^17.65.0", + "@jsonjoy.com/util": "^17.65.0" + }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", - "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/base64": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/base64/-/base64-17.67.0.tgz", + "integrity": "sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw==", + "license": "Apache-2.0", "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", - "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/codegen": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/codegen/-/codegen-17.67.0.tgz", + "integrity": "sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q==", + "license": "Apache-2.0", "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", - "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pack": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-17.67.0.tgz", + "integrity": "sha512-t0ejURcGaZsn1ClbJ/3kFqSOjlryd92eQY465IYrezsXmPcfHPE/av4twRSxf6WE+TkZgLY+71vCZbiIiFKA/w==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/base64": "17.67.0", + "@jsonjoy.com/buffers": "17.67.0", + "@jsonjoy.com/codegen": "17.67.0", + "@jsonjoy.com/json-pointer": "17.67.0", + "@jsonjoy.com/util": "17.67.0", + "hyperdyperid": "^1.2.0", + "thingies": "^2.5.0", + "tree-dump": "^1.1.0" + }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-svg-dynamic-title": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", - "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pointer": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-17.67.0.tgz", + "integrity": "sha512-+iqOFInH+QZGmSuaybBUNdh7yvNrXvqR+h3wjXm0N/3JK1EyyFAeGJvqnmQL61d1ARLlk/wJdFKSL+LHJ1eaUA==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/util": "17.67.0" + }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-svg-em-dimensions": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", - "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/util": { + "version": "17.67.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-17.67.0.tgz", + "integrity": "sha512-6+8xBaz1rLSohlGh68D1pdw3AwDi9xydm8QNlAFkvnavCJYSze+pxoW2VKP8p308jtlMRLs5NTHfPlZLd4w7ew==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/buffers": "17.67.0", + "@jsonjoy.com/codegen": "17.67.0" + }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-transform-react-native-svg": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", - "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "node_modules/@jsonjoy.com/json-pack": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pack/-/json-pack-1.21.0.tgz", + "integrity": "sha512-+AKG+R2cfZMShzrF2uQw34v3zbeDYUqnQ+jg7ORic3BGtfw9p/+N6RJbq/kkV8JmYZaINknaEQ2m0/f693ZPpg==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/base64": "^1.1.2", + "@jsonjoy.com/buffers": "^1.2.0", + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/json-pointer": "^1.0.2", + "@jsonjoy.com/util": "^1.9.0", + "hyperdyperid": "^1.2.0", + "thingies": "^2.5.0", + "tree-dump": "^1.1.0" + }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-plugin-transform-svg-component": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", - "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "node_modules/@jsonjoy.com/json-pack/node_modules/@jsonjoy.com/buffers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.2.1.tgz", + "integrity": "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==", + "license": "Apache-2.0", "engines": { - "node": ">=12" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/babel-preset": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", - "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "node_modules/@jsonjoy.com/json-pointer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/json-pointer/-/json-pointer-1.0.2.tgz", + "integrity": "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==", + "license": "Apache-2.0", "dependencies": { - "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", - "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", - "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", - "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", - "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", - "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", - "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", - "@svgr/babel-plugin-transform-svg-component": "8.0.0" + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/util": "^1.9.0" }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" }, "peerDependencies": { - "@babel/core": "^7.0.0-0" + "tslib": "2" } }, - "node_modules/@svgr/core": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", - "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", - "peer": true, + "node_modules/@jsonjoy.com/util": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/util/-/util-1.9.0.tgz", + "integrity": "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==", + "license": "Apache-2.0", "dependencies": { - "@babel/core": "^7.21.3", - "@svgr/babel-preset": "8.1.0", - "camelcase": "^6.2.0", - "cosmiconfig": "^8.1.3", - "snake-case": "^3.0.4" + "@jsonjoy.com/buffers": "^1.0.0", + "@jsonjoy.com/codegen": "^1.0.0" }, "engines": { - "node": ">=14" + "node": ">=10.0" }, "funding": { "type": "github", - "url": "https://github.com/sponsors/gregberge" + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@svgr/core/node_modules/dot-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", - "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dependencies": { - "no-case": "^3.0.4", - "tslib": "^2.0.3" + "node_modules/@jsonjoy.com/util/node_modules/@jsonjoy.com/buffers": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@jsonjoy.com/buffers/-/buffers-1.2.1.tgz", + "integrity": "sha512-12cdlDwX4RUM3QxmUbVJWqZ/mrK6dFQH4Zxq6+r1YXKXYBNgZXndx2qbCJwh3+WWkCSn67IjnlG3XYTvmvYtgA==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, - "node_modules/@svgr/core/node_modules/lower-case": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", - "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "node_modules/@leichtgewicht/ip-codec": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.5.tgz", + "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==", + "license": "MIT" + }, + "node_modules/@mdx-js/mdx": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@mdx-js/mdx/-/mdx-3.0.0.tgz", + "integrity": "sha512-Icm0TBKBLYqroYbNW3BPnzMGn+7mwpQOK310aZ7+fkCtiU3aqv2cdcX+nd0Ydo3wI5Rx8bX2Z2QmGb/XcAClCw==", "dependencies": { - "tslib": "^2.0.3" + "@types/estree": "^1.0.0", + "@types/estree-jsx": "^1.0.0", + "@types/hast": "^3.0.0", + "@types/mdx": "^2.0.0", + "collapse-white-space": "^2.0.0", + "devlop": "^1.0.0", + "estree-util-build-jsx": "^3.0.0", + "estree-util-is-identifier-name": "^3.0.0", + "estree-util-to-js": "^2.0.0", + "estree-walker": "^3.0.0", + "hast-util-to-estree": "^3.0.0", + "hast-util-to-jsx-runtime": "^2.0.0", + "markdown-extensions": "^2.0.0", + "periscopic": "^3.0.0", + "remark-mdx": "^3.0.0", + "remark-parse": "^11.0.0", + "remark-rehype": "^11.0.0", + "source-map": "^0.7.0", + "unified": "^11.0.0", + "unist-util-position-from-estree": "^2.0.0", + "unist-util-stringify-position": "^4.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" } }, - "node_modules/@svgr/core/node_modules/no-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", - "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "node_modules/@mdx-js/react": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.0.0.tgz", + "integrity": "sha512-nDctevR9KyYFyV+m+/+S4cpzCWHqj+iHDHq3QrsWezcC+B17uZdIWgCguESUkwFhM3n/56KxWVE3V6EokrmONQ==", "dependencies": { - "lower-case": "^2.0.2", - "tslib": "^2.0.3" + "@types/mdx": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + }, + "peerDependencies": { + "@types/react": ">=16", + "react": ">=16" } }, - "node_modules/@svgr/core/node_modules/snake-case": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", - "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "node_modules/@module-federation/error-codes": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/error-codes/-/error-codes-0.22.0.tgz", + "integrity": "sha512-xF9SjnEy7vTdx+xekjPCV5cIHOGCkdn3pIxo9vU7gEZMIw0SvAEdsy6Uh17xaCpm8V0FWvR0SZoK9Ik6jGOaug==", + "license": "MIT" + }, + "node_modules/@module-federation/runtime": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/runtime/-/runtime-0.22.0.tgz", + "integrity": "sha512-38g5iPju2tPC3KHMPxRKmy4k4onNp6ypFPS1eKGsNLUkXgHsPMBFqAjDw96iEcjri91BrahG4XcdyKi97xZzlA==", + "license": "MIT", "dependencies": { - "dot-case": "^3.0.4", - "tslib": "^2.0.3" + "@module-federation/error-codes": "0.22.0", + "@module-federation/runtime-core": "0.22.0", + "@module-federation/sdk": "0.22.0" } }, - "node_modules/@svgr/hast-util-to-babel-ast": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", - "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "node_modules/@module-federation/runtime-core": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/runtime-core/-/runtime-core-0.22.0.tgz", + "integrity": "sha512-GR1TcD6/s7zqItfhC87zAp30PqzvceoeDGYTgF3Vx2TXvsfDrhP6Qw9T4vudDQL3uJRne6t7CzdT29YyVxlgIA==", + "license": "MIT", "dependencies": { - "@babel/types": "^7.21.3", - "entities": "^4.4.0" + "@module-federation/error-codes": "0.22.0", + "@module-federation/sdk": "0.22.0" + } + }, + "node_modules/@module-federation/runtime-tools": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/runtime-tools/-/runtime-tools-0.22.0.tgz", + "integrity": "sha512-4ScUJ/aUfEernb+4PbLdhM/c60VHl698Gn1gY21m9vyC1Ucn69fPCA1y2EwcCB7IItseRMoNhdcWQnzt/OPCNA==", + "license": "MIT", + "dependencies": { + "@module-federation/runtime": "0.22.0", + "@module-federation/webpack-bundler-runtime": "0.22.0" + } + }, + "node_modules/@module-federation/sdk": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/sdk/-/sdk-0.22.0.tgz", + "integrity": "sha512-x4aFNBKn2KVQRuNVC5A7SnrSCSqyfIWmm1DvubjbO9iKFe7ith5niw8dqSFBekYBg2Fwy+eMg4sEFNVvCAdo6g==", + "license": "MIT" + }, + "node_modules/@module-federation/webpack-bundler-runtime": { + "version": "0.22.0", + "resolved": "https://registry.npmjs.org/@module-federation/webpack-bundler-runtime/-/webpack-bundler-runtime-0.22.0.tgz", + "integrity": "sha512-aM8gCqXu+/4wBmJtVeMeeMN5guw3chf+2i6HajKtQv7SJfxV/f4IyNQJUeUQu9HfiAZHjqtMV5Lvq/Lvh8LdyA==", + "license": "MIT", + "dependencies": { + "@module-federation/runtime": "0.22.0", + "@module-federation/sdk": "0.22.0" + } + }, + "node_modules/@napi-rs/wasm-runtime": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.0.7.tgz", + "integrity": "sha512-SeDnOO0Tk7Okiq6DbXmmBODgOAb9dp9gjlphokTUxmt8U3liIP1ZsozBahH69j/RJv+Rfs6IwUKHTgQYJ/HBAw==", + "license": "MIT", + "optional": true, + "dependencies": { + "@emnapi/core": "^1.5.0", + "@emnapi/runtime": "^1.5.0", + "@tybys/wasm-util": "^0.10.1" + } + }, + "node_modules/@noble/hashes": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz", + "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==", + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@oxc-project/types": { + "version": "0.143.0", + "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.143.0.tgz", + "integrity": "sha512-u6JZdLBTLotrNC9Vd6vPssINdzcCzleKAH6EJKImQb7GtYvX5keN2dxkoK44stCc4tffE6QQRtZTXVSzsLUlWA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/Boshen" + } + }, + "node_modules/@parcel/watcher": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.6.0.tgz", + "integrity": "sha512-7FNeNl8NCE7aINx7WXiKQrPYZWC/hvrTsmk6zmxbI7LTXE7hVek/n8AfVgpe2y82zl3w0HvCHN0bVKMBoJcC0w==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.3", + "is-glob": "^4.0.3", + "node-addon-api": "^7.0.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "@parcel/watcher-android-arm64": "2.6.0", + "@parcel/watcher-darwin-arm64": "2.6.0", + "@parcel/watcher-darwin-x64": "2.6.0", + "@parcel/watcher-freebsd-x64": "2.6.0", + "@parcel/watcher-linux-arm-glibc": "2.6.0", + "@parcel/watcher-linux-arm-musl": "2.6.0", + "@parcel/watcher-linux-arm64-glibc": "2.6.0", + "@parcel/watcher-linux-arm64-musl": "2.6.0", + "@parcel/watcher-linux-x64-glibc": "2.6.0", + "@parcel/watcher-linux-x64-musl": "2.6.0", + "@parcel/watcher-win32-arm64": "2.6.0", + "@parcel/watcher-win32-x64": "2.6.0" + } + }, + "node_modules/@parcel/watcher-android-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.6.0.tgz", + "integrity": "sha512-trgpLSCKRC/huFjXX/Smh+0sWe4+YtKfktIToiMl59ghz7z+qkH6kMvNnUbLyRs9N11t8l4svSCs1+5B3rOAhA==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.6.0.tgz", + "integrity": "sha512-Y3QV0gl7Q1zbfueunkWIERICbEojQFCgpyG7YqOGNFLsckXyI1xu9mAIUpKY9QBYzBtSkN8dBPwd3yiAO9ovMw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-darwin-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.6.0.tgz", + "integrity": "sha512-Ohv6OpzhUfKYD7Beb8kDvG0jbIxORCYY1JRdZnaBtnjjkJxgD7ZVL0nw2sCYd0yTMKTvz3nnTnOF3cDifK+kvw==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-freebsd-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.6.0.tgz", + "integrity": "sha512-5HmXvDgs8VK+74jF9y9/2FE3/OnlcKmc56tjmSrEuZjpSZOGL+fvAu+HKJBdPs9uwoP2hE6TlSUpXZ/C5jUFmQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.6.0.tgz", + "integrity": "sha512-Ps/hui3A+vMbjdqlqAowK2ZL8+BO8dBjxeWXj6npTBs3jx4wWmbPpaLuqwrQrSqIVMCnpWo238bJ1U37GhQOYg==", + "cpu": [ + "arm" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.6.0.tgz", + "integrity": "sha512-9c6AUHgHoG+IY88MRIHupztQiQnrbqHYQjkM2btA+Bf/wQnQMuiD0Wfk1EVv3TlNT3x41uU71rn6E4xh/+zvkw==", + "cpu": [ + "arm" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.6.0.tgz", + "integrity": "sha512-yHRqS2owEXe6Hic9z6Mh1ECsCd+ODVOGvZDyciqRd21+v+o+DnXMOrw50DSpIG2sb8GPEaPPmfeCAWKPJdq46g==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-arm64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.6.0.tgz", + "integrity": "sha512-WhB2e/V7rqdHHWZusBSPuy5Ei8S6lSz6FE5TKKQz5h3a0O+C+mhY7vxU9b/stqvMb8beLnPY82ZrFTLKs+SrKA==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-glibc": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.6.0.tgz", + "integrity": "sha512-ulGE6x6Oz6iAwg75T8YQSoguBWasniIbX+QWpaYPcCnDOpdWX3k+4xbEYPZVLxOuoJI+svJJPD3sEj8G7lrQ3A==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-linux-x64-musl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.6.0.tgz", + "integrity": "sha512-tkBYKt7YQrjIJWYDnto2YgO8MRkjlMTSNoRHzsXinBqbLdeOM3L32wPZJvIZxqaLMfSlS/4sUjH/6STVP/XDLw==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-arm64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.6.0.tgz", + "integrity": "sha512-gIZAP23jaHjGWasY/TY6yL7NHFClf0Ga7FN+iINvk+KN94rhm94lYZhFsbYFNcA04/onvGD9kKmiJLJB2HbNwQ==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher-win32-x64": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.6.0.tgz", + "integrity": "sha512-cA+/pXV2YkfxlIcXOQ5fSWqAzzPyD78/x5qbK/I0vUkrlYHA8TIz+MXjAbGouguKVSI4bOmkTSJ1/poVSsgt+A==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "license": "MIT", + "optional": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/@peculiar/asn1-cms": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.8.0.tgz", + "integrity": "sha512-NgekZOrSJFSBFLFoLfwePguAWAx7z1+f2TEsWFUMyiqqfntZ4+S/S5hzqME3q4pCA0iOsFKdwiQ35dwY24eVqA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-csr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.8.0.tgz", + "integrity": "sha512-akbF8+uvleHs8sejNPQxwmVFuInAg6FMNHOwMILXfP518YfFJwdR3jr6oNUPOaEJfuEhn/vkNOCIT6ASUd4mbg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-ecc": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.8.0.tgz", + "integrity": "sha512-ohwlk+u9Rv2NOAY1c6MfHj45ATVF8R1DUN/WCgABiRtLi2ZftlZWZX7KvpAbU8v9xPcmoILfELeEABj/rn18AQ==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pfx": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.8.0.tgz", + "integrity": "sha512-5yof1ytoB++RQtaFbqSUJ8pxDJtZT6vbVqZ8XoJ61ph7UjNVvfFwAilnCodqkNsAodpy13gDhoxZXw00pghnyg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-rsa": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs8": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.8.0.tgz", + "integrity": "sha512-qAKXtLpBEw9LqhKpjw3ajZSXlBur+ipW+y2ivVBQAG6F6qRx94yO+1ZR4mvw+YaCfKSaOzLeYEzsPaBp4SJELA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs9": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.8.0.tgz", + "integrity": "sha512-b5nDWCnkV60+cQ141D6sVVwK9nz64R5n3zSVnklGd+ECdkW2Ol3U1a6yYFlalpSOaD557yuJB64A+q42jG7lUQ==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pfx": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-rsa": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.8.0.tgz", + "integrity": "sha512-zHEUlCqB2mk7x2lxDwHHJy7hWZOPdGHVlsmITWKB5/PbQo61atbu9PJ/0r9dQNMwFzbKPXZ8uK8/91eUhRznSg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-schema": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.8.0.tgz", + "integrity": "sha512-7YT0U/ze0tF2QOBbE15gKZwy5tvgGyLRiRHLzhlbOpf7BT032oBSd0haZqXn5W6l26WLlu3dyxzjM+2638/z2Q==", + "license": "MIT", + "dependencies": { + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.8.0.tgz", + "integrity": "sha512-N0CMuhWUzsWEVq6F1q9X6+VKUnWzSW+cSVg+aPaGGwDdbFoFWTYgin5MHwXgpWd6y9COMBxnfy/Qc+Xc7F0Zwg==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509-attr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.8.0.tgz", + "integrity": "sha512-tHjkfS/qhMnmrlB2J9NhflQlQ7In3khO3CfmVrriOlpTeErY9ZIKOso1hQ5JQiyrJ7ShvqVPk7E5fQmbclkSKA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/utils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz", + "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==", + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/x509": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz", + "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==", + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.6.0", + "@peculiar/asn1-csr": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.0", + "@peculiar/asn1-pkcs9": "^2.6.0", + "@peculiar/asn1-rsa": "^2.6.0", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.0", + "pvtsutils": "^1.3.6", + "reflect-metadata": "^0.2.2", + "tslib": "^2.8.1", + "tsyringe": "^4.10.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@pnpm/config.env-replace": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@pnpm/config.env-replace/-/config.env-replace-1.1.0.tgz", + "integrity": "sha512-htyl8TWnKL7K/ESFa1oW2UB5lVDxuF5DpM7tBi6Hu2LNL3mWkIzNLG6N4zoCUP1lCKNxWy/3iu8mS8MvToGd6w==", + "engines": { + "node": ">=12.22.0" + } + }, + "node_modules/@pnpm/network.ca-file": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@pnpm/network.ca-file/-/network.ca-file-1.0.2.tgz", + "integrity": "sha512-YcPQ8a0jwYU9bTdJDpXjMi7Brhkr1mXsXrUJvjqM2mQDgkRiz8jFaQGOdaLxgjtUfQgZhKy/O3cG/YwmgKaxLA==", + "dependencies": { + "graceful-fs": "4.2.10" + }, + "engines": { + "node": ">=12.22.0" + } + }, + "node_modules/@pnpm/network.ca-file/node_modules/graceful-fs": { + "version": "4.2.10", + "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz", + "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==" + }, + "node_modules/@pnpm/npm-conf": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/@pnpm/npm-conf/-/npm-conf-2.2.2.tgz", + "integrity": "sha512-UA91GwWPhFExt3IizW6bOeY/pQ0BkuNwKjk9iQW9KqxluGCrg4VenZ0/L+2Y0+ZOtme72EVvg6v0zo3AMQRCeA==", + "dependencies": { + "@pnpm/config.env-replace": "^1.1.0", + "@pnpm/network.ca-file": "^1.0.1", + "config-chain": "^1.1.11" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@polka/url": { + "version": "1.0.0-next.29", + "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.29.tgz", + "integrity": "sha512-wwQAWhWSuHaag8c4q/KN/vCoeOJYshAIvMQwD4GpSb3OiZklFfvAgmj0VCBBImRpuF/aFgIRzllXlVX93Jevww==" + }, + "node_modules/@prismicio/client": { + "version": "7.21.8", + "resolved": "https://registry.npmjs.org/@prismicio/client/-/client-7.21.8.tgz", + "integrity": "sha512-HFXrV/XdbVy/AL7V5K/976gr4SEa7WA7xuZuSNuseLK5VSl0DlMSgy7GTUk+ngjz9QvN0Xu3nxWzUGFxnD8RIA==", + "license": "Apache-2.0", + "dependencies": { + "imgix-url-builder": "^0.0.6" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@prismicio/react": { + "version": "3.4.1", + "resolved": "https://registry.npmjs.org/@prismicio/react/-/react-3.4.1.tgz", + "integrity": "sha512-OR/F1+B6tlPMGm5YCE7Ir0FXXfobyQDQvNGl22TUYVbyCMc7qyY4VtPIxyEbKJBQNRRM22UYc8a4THS49Fwetg==", + "license": "Apache-2.0", + "workspaces": [ + ".", + "e2e-projects/*" + ], + "dependencies": { + "esm-env": "^1.2.2" + }, + "engines": { + "node": ">=20" + }, + "peerDependencies": { + "@prismicio/client": "^7", + "react": "^18 || ^19" + } + }, + "node_modules/@rolldown/binding-android-arm64": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.2.3.tgz", + "integrity": "sha512-zrJtHDcaZJ1Fp7xf4hNl+7seH9Cn/N5TwLYkhgXREtBwAd/jaqW3uqeHxpDugJLVICWg4eW44kOQEGJ1r6jCGw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-arm64": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.2.3.tgz", + "integrity": "sha512-ieIiibVCp0tX7TLu2cafoNPv8wJyYi01ekXpbf8q2j7F4rGAhhXb/eQh7ge9DRBY78GwmRQtvjZDux7EDbA8kA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-darwin-x64": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.2.3.tgz", + "integrity": "sha512-Zh9tCon19eDXJoihx0rqKhMUlMYqzwj3aPsSuHmI4RWZh62dWUL+DJN4C5YQya5TcQBJU/Fe8+rY0jhXTQITqA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-freebsd-x64": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.2.3.tgz", + "integrity": "sha512-nGbJWewA1wrXXZiQhjAT5rhibGfns5ZNkDVqxsO6zJ3f3YvpoDNNmGMSbbhLuXKjNScaBJVOAboztAWVespQMg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm-gnueabihf": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.2.3.tgz", + "integrity": "sha512-QNniJr5Kml0kDEB98jiDOJjXNroxIIi0IXIbdYzY26Xt1pVbeP62+KnoIZLwirOymX/0jDk/2gI/bNUv7A7OIw==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-gnu": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.2.3.tgz", + "integrity": "sha512-TkqEAcmmvH3I/q4114NB4RVt6241Dao48pF45uLcFGrwAaIn0iITgTAKP/dLjbN0R4buJjGb91+UHSoFmpgIWw==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-arm64-musl": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.2.3.tgz", + "integrity": "sha512-NHqjnxpsndf4MPymxteFAWHHfkTL8HjWh1KB7z23ofZ6QO2euONuxDXjat69dKZRALnGypg8k8SsK8vZJoXv1Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-ppc64-gnu": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.2.3.tgz", + "integrity": "sha512-6tbrbwfz5GB9DQ4Jwo6hy9v+vR31xZlvzZ6n5Xut6Hhx5PvrA9q/HsK8KMaYQp063iqZGXwNvZtYNLD7EM/x0w==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-s390x-gnu": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.2.3.tgz", + "integrity": "sha512-oyuXxXmoZHjXC917IAPFAAv4wWAa0cM9afk8nx1+9/jNNOX1uPf8yDA6p7G0RypOfw/X0PQt5IfoquY1um+zSg==", + "cpu": [ + "s390x" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-gnu": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.2.3.tgz", + "integrity": "sha512-TytMwF2KVGqP2tgd0I1OY0PAv78dZRAYcF5ssDzjM34SUXCED3uXvSd5+lHoC0bTD6eEdFz7LdQNCO1y0oVk9w==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-linux-x64-musl": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.2.3.tgz", + "integrity": "sha512-/E9m3qstrJFVPoULV25mVQblSNExY2+kBsYe4sy0Tn0yOOgJ8wZbZt3KnRbF/XeU2Gl1STKUQnDNTqhIE5MD4A==", + "cpu": [ + "x64" + ], + "dev": true, + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-openharmony-arm64": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.2.3.tgz", + "integrity": "sha512-Kr0OcsoQI816i6HOl3vFHpd1K0eZyh76zgfj4c1nTyaTsd5r2Mj1lwM4R90y/qaCfmTn9eHy0SKwi98eitRxug==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-arm64-msvc": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.2.3.tgz", + "integrity": "sha512-hOtMwTqnME+/gJcH/PCZ0wn0zPUjiWOgkHpxbSJpfGKMezHltx1S7/k1SitzVa7Ww2cqrDDaFbZEhcJZO8o+Jw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/binding-win32-x64-msvc": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.2.3.tgz", + "integrity": "sha512-ekcqMMkI2PlhYnfzQnB/cEdYUVVJViWvoUyLrbzgDoi3Snfc1mVBwdnc306ufA5ejy8JSPjT2RlW1nQSjW7efg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@rollup/plugin-babel": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", + "integrity": "sha512-WFfdLWU/xVWKeRQnKmIAQULUI7Il0gZnBIH/ZFO069wYIfPu+8zrfp/KMW0atmELoRDq8FbiP3VCss9MhCut7Q==", + "dependencies": { + "@babel/helper-module-imports": "^7.10.4", + "@rollup/pluginutils": "^3.1.0" + }, + "engines": { + "node": ">= 10.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0", + "@types/babel__core": "^7.1.9", + "rollup": "^1.20.0||^2.0.0" + }, + "peerDependenciesMeta": { + "@types/babel__core": { + "optional": true + } + } + }, + "node_modules/@rollup/pluginutils": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz", + "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==", + "dependencies": { + "@types/estree": "0.0.39", + "estree-walker": "^1.0.1", + "picomatch": "^2.2.2" + }, + "engines": { + "node": ">= 8.0.0" + }, + "peerDependencies": { + "rollup": "^1.20.0||^2.0.0" + } + }, + "node_modules/@rollup/pluginutils/node_modules/@types/estree": { + "version": "0.0.39", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz", + "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==" + }, + "node_modules/@rollup/pluginutils/node_modules/estree-walker": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-1.0.1.tgz", + "integrity": "sha512-1fMXF3YP4pZZVozF8j/ZLfvnR8NSIljt56UhbZ5PeeDmmGHpgpdwQt7ITlGvYaQukCvuBRMLEiKiYC+oeIg4cg==" + }, + "node_modules/@rspack/binding": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding/-/binding-1.7.12.tgz", + "integrity": "sha512-f4HHuLbvuld8Ba4iB/4ibse5XrKxFrgmM3S4P2AOKnPlekAFlBjmltCuaTL/W2ggYvILaVY+YcFXrEH1rrKeQA==", + "license": "MIT", + "optionalDependencies": { + "@rspack/binding-darwin-arm64": "1.7.12", + "@rspack/binding-darwin-x64": "1.7.12", + "@rspack/binding-linux-arm64-gnu": "1.7.12", + "@rspack/binding-linux-arm64-musl": "1.7.12", + "@rspack/binding-linux-x64-gnu": "1.7.12", + "@rspack/binding-linux-x64-musl": "1.7.12", + "@rspack/binding-wasm32-wasi": "1.7.12", + "@rspack/binding-win32-arm64-msvc": "1.7.12", + "@rspack/binding-win32-ia32-msvc": "1.7.12", + "@rspack/binding-win32-x64-msvc": "1.7.12" + } + }, + "node_modules/@rspack/binding-darwin-arm64": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-arm64/-/binding-darwin-arm64-1.7.12.tgz", + "integrity": "sha512-rbFprJaJiqrmfy8SHth8EsoRS0wg4bXcucwj9NiMzpGFq14Opw8c04iQ6H9BECYzgmN0PKZ9rh41LdVvhdZe4A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rspack/binding-darwin-x64": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-darwin-x64/-/binding-darwin-x64-1.7.12.tgz", + "integrity": "sha512-jnOp+/UXOJa9xqUb8KXH03sysoO2e4Ij6tw6MqDdmdj8n/A8PQENRPUbW9AwXpPtVDJPus9r4fi7b3+6e4B8Hg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rspack/binding-linux-arm64-gnu": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.7.12.tgz", + "integrity": "sha512-C8owWG+yvo7X0oVLIXetkoJhIFBP1LYNcAQqtgLmJnQLQDklGuP83dKC+zISGQWpjawHfZ1ER96vLgoTrxKZdw==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rspack/binding-linux-arm64-musl": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.7.12.tgz", + "integrity": "sha512-i51WWI64aRpsfSki6rN0aepPqXkVfS+vZM7+4bWDcmnhUmdMvhIPcYg0QRk3DtyJnu33jqNLM0WHY78k00NyfA==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rspack/binding-linux-x64-gnu": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.7.12.tgz", + "integrity": "sha512-MSos0FuPEefqo9V92ULd5hggKG29EkSNg1zDcypy0OkpsKh5pfjVxTLYFXgTcVyFoUQQbdG8zFBzYbwmJ8V4ew==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rspack/binding-linux-x64-musl": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-linux-x64-musl/-/binding-linux-x64-musl-1.7.12.tgz", + "integrity": "sha512-JcAMVKXOnjfpC3coWjCFPWD3Yl8RBw6a+IXQQ8mfRlHaHMIiOv8IfZqx15XRxMUn49CtP7Z0Na8iiAg2aKrcfw==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rspack/binding-wasm32-wasi": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-wasm32-wasi/-/binding-wasm32-wasi-1.7.12.tgz", + "integrity": "sha512-n+ZqP6ZMc0nhOgvadg5VhEs9ojtbES80AcWeFnmGkbzIszvGSO63GKNiRkXtjJ9KFuRzytbbmsCqkUVH+Tywxg==", + "cpu": [ + "wasm32" + ], + "license": "MIT", + "optional": true, + "dependencies": { + "@napi-rs/wasm-runtime": "1.0.7" + } + }, + "node_modules/@rspack/binding-win32-arm64-msvc": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.7.12.tgz", + "integrity": "sha512-8+h5fYDXYdmugbdfZ+D1y8IQ3rv2EhSfyGP7vBe+bjNyaMa4jWrpucmZbtxojUL1AzaeuHbvMdj9UO/gelk/+g==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rspack/binding-win32-ia32-msvc": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-win32-ia32-msvc/-/binding-win32-ia32-msvc-1.7.12.tgz", + "integrity": "sha512-cDMGwTRSa2p9fNBVe1wTRkF2AEXZ9ARWW36QeC5CkLaI0Ezz8lvhF2+CSOPnhaQ1O1qtn0L0SF+lFnrY+I7xGQ==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rspack/binding-win32-x64-msvc": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.7.12.tgz", + "integrity": "sha512-wIqFvlgFqrgUyj/6S/FJcvShnkZOmIeXTfqvheLY67MGq8qd8jb1YimQVKAIrmWB3yuJKUFACI3Ag1UBtEedEA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rspack/core": { + "version": "1.7.12", + "resolved": "https://registry.npmjs.org/@rspack/core/-/core-1.7.12.tgz", + "integrity": "sha512-6CwFIHlhRmXfZoMj3v9MZ1SMTPBn+cHVXeMIeaGp5sufqinKsISbsqHu6ZMJu2wDSmZLdmQJX6zLxkhcAUlhkQ==", + "license": "MIT", + "dependencies": { + "@module-federation/runtime-tools": "0.22.0", + "@rspack/binding": "1.7.12", + "@rspack/lite-tapable": "1.1.0" + }, + "engines": { + "node": ">=18.12.0" + }, + "peerDependencies": { + "@swc/helpers": ">=0.5.1" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/@rspack/lite-tapable": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@rspack/lite-tapable/-/lite-tapable-1.1.0.tgz", + "integrity": "sha512-E2B0JhYFmVAwdDiG14+DW0Di4Ze4Jg10Pc4/lILUrd5DRCaklduz2OvJ5HYQ6G+hd+WTzqQb3QnDNfK4yvAFYw==", + "license": "MIT" + }, + "node_modules/@sideway/address": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz", + "integrity": "sha512-7vwq+rOHVWjyXxVlR76Agnvhy8I9rpzjosTESvmhNeXOXdZZB15Fl+TI9x1SiHZH5Jv2wTGduSxFDIaq0m3DUw==", + "dependencies": { + "@hapi/hoek": "^9.0.0" + } + }, + "node_modules/@sideway/formula": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/@sideway/formula/-/formula-3.0.1.tgz", + "integrity": "sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==" + }, + "node_modules/@sideway/pinpoint": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz", + "integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ==" + }, + "node_modules/@sinclair/typebox": { + "version": "0.27.12", + "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.12.tgz", + "integrity": "sha512-hhyNJ+nbR6ZR7pToHvllEFun9TL0sbL+tk/ON75lo+Xas054uez98qRbsuNt7MBCyZKK4+8Yli/OAGZhmfBZ/g==", + "license": "MIT" + }, + "node_modules/@sindresorhus/is": { + "version": "0.14.0", + "resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz", + "integrity": "sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@slorber/remark-comment": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@slorber/remark-comment/-/remark-comment-1.0.0.tgz", + "integrity": "sha512-RCE24n7jsOj1M0UPvIQCHTe7fI0sFL4S2nwKVWwHyVr/wI/H8GosgsJGyhnsZoGFnD/P2hLf1mSbrrgSLN93NA==", + "dependencies": { + "micromark-factory-space": "^1.0.0", + "micromark-util-character": "^1.1.0", + "micromark-util-symbol": "^1.0.1" + } + }, + "node_modules/@stackblitz/sdk": { + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/@stackblitz/sdk/-/sdk-1.9.0.tgz", + "integrity": "sha512-3m6C7f8pnR5KXys/Hqx2x6ylnpqOak6HtnZI6T5keEO0yT+E4Spkw37VEbdwuC+2oxmjdgq6YZEgiKX7hM1GmQ==" + }, + "node_modules/@standard-schema/spec": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz", + "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==", + "dev": true, + "license": "MIT" + }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "license": "MIT", + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/core/node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/@svgr/core/node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, + "node_modules/@svgr/core/node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "license": "MIT", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, + "node_modules/@svgr/core/node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/plugin-svgo": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", + "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", + "license": "MIT", + "dependencies": { + "cosmiconfig": "^8.1.3", + "deepmerge": "^4.3.1", + "svgo": "^3.0.2" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, + "node_modules/@svgr/webpack": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz", + "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@babel/plugin-transform-react-constant-elements": "^7.21.3", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.0", + "@svgr/core": "8.1.0", + "@svgr/plugin-jsx": "8.1.0", + "@svgr/plugin-svgo": "8.1.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@swc/core": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.47.tgz", + "integrity": "sha512-FbsO5JcfOjfH38W/rohBRBweJeERsAuIP4f377lmkmxTcq9exjtx4SkRuZY5CdfhR2CBVwDIJegBpJDffwNsOg==", + "hasInstallScript": true, + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3", + "@swc/types": "^0.1.27" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/swc" + }, + "optionalDependencies": { + "@swc/core-darwin-arm64": "1.15.47", + "@swc/core-darwin-x64": "1.15.47", + "@swc/core-linux-arm-gnueabihf": "1.15.47", + "@swc/core-linux-arm64-gnu": "1.15.47", + "@swc/core-linux-arm64-musl": "1.15.47", + "@swc/core-linux-ppc64-gnu": "1.15.47", + "@swc/core-linux-s390x-gnu": "1.15.47", + "@swc/core-linux-x64-gnu": "1.15.47", + "@swc/core-linux-x64-musl": "1.15.47", + "@swc/core-win32-arm64-msvc": "1.15.47", + "@swc/core-win32-ia32-msvc": "1.15.47", + "@swc/core-win32-x64-msvc": "1.15.47" + }, + "peerDependencies": { + "@swc/helpers": ">=0.5.17" + }, + "peerDependenciesMeta": { + "@swc/helpers": { + "optional": true + } + } + }, + "node_modules/@swc/core-darwin-arm64": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-arm64/-/core-darwin-arm64-1.15.47.tgz", + "integrity": "sha512-GsoMtan3ojGGMGFbl31mmRu5ctZ56re8grGE8mO/OHJ8O+JRkzod02fe7X6ZQ8JvamA3imkEkx/h3u+vsOgPgA==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-darwin-x64": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-darwin-x64/-/core-darwin-x64-1.15.47.tgz", + "integrity": "sha512-leTi7Rx3KF4zcC637iqWgk9SoV8VXAD8ppQYXsep63px5A/UftOcxLN1pmr8Z1si/YvX90ompP/rHgpYkgwXWg==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm-gnueabihf": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm-gnueabihf/-/core-linux-arm-gnueabihf-1.15.47.tgz", + "integrity": "sha512-hBqHuoWKKIsKmDBn9qVeWqj5GWZhtlcczVaqQmNRXsDfq+voR5CxKRfamA367QjJXtceYuliLFfEL8QsskRM2g==", + "cpu": [ + "arm" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-gnu/-/core-linux-arm64-gnu-1.15.47.tgz", + "integrity": "sha512-TBxvRz+B4K205TWHHZxWVxkC2RFNP/Mz3PNcECBos5PsKwxjg3QSJzdoebr0VCf0Bfh8HOPldKxAP/8XkFe9gA==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-arm64-musl": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-arm64-musl/-/core-linux-arm64-musl-1.15.47.tgz", + "integrity": "sha512-3Yu3Uq/VgytqsPjTMbkPU1ExADytbdWbruJYhA584E9jrpE2Ki+R6VVPoZCeAVk1Cb7QxcRTgblw6bSa6a/R+w==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-ppc64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-ppc64-gnu/-/core-linux-ppc64-gnu-1.15.47.tgz", + "integrity": "sha512-wfdMi5IaOaNtmh2/6geRoxIdNfqylUZFdtzTKS655y1axWfIWyx7As74vv0wVdjeCIZ3WmCI9odDd4rUttXOSQ==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-s390x-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-s390x-gnu/-/core-linux-s390x-gnu-1.15.47.tgz", + "integrity": "sha512-3hHYBY0yx8Ez7GMRrkhXHQzMdR5IZA6Wq5Ee4svlgwvSECLpnAJ9+0AimEGUFDvuLwE7nV/2+PYe8+Nm4rvNcQ==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-gnu/-/core-linux-x64-gnu-1.15.47.tgz", + "integrity": "sha512-TjfhjgP/jGCfFHYC3JQPhJA1HwErbIJ9JfREDc1KNkvY6P0LodCgKVIlQ5deeTbkG7ih3bF5PHJLuLpaZjdRyQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-linux-x64-musl": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-linux-x64-musl/-/core-linux-x64-musl-1.15.47.tgz", + "integrity": "sha512-CQpS8Ge/avfjZd0UEwG/sds83Uu32deQXcV1Jo3jD0mmvQQqtYAjpsDZXugmheeAwmt+YIuoVtVHro8LMYHqsQ==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-arm64-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-win32-arm64-msvc/-/core-win32-arm64-msvc-1.15.47.tgz", + "integrity": "sha512-0W8IKHsUTYiT7G2RqtOoVWk+89yzZikIiDUb/sCK6BmQDBhN91hQSfyUtW12jhEWLzYgcfmisfsZrmZE+84U1A==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-ia32-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-win32-ia32-msvc/-/core-win32-ia32-msvc-1.15.47.tgz", + "integrity": "sha512-ZIp49d2Z4/ka2jO9otOg4hDvTdPmp86kVOgS2M5FCPI7eKKZ1W0boxWn+8XeZrfERtFGW0AlMRm4JhlJa7l3NA==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/core-win32-x64-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/core-win32-x64-msvc/-/core-win32-x64-msvc-1.15.47.tgz", + "integrity": "sha512-2h8Iek95vnixkBRCo+H8p09+Q5ll2NgSMFrWTy0iKt7+/t+8/T5mBpiT6c0ZxSS7wcWjwZ9sGZkK70tTSYHdDw==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", + "license": "Apache-2.0" + }, + "node_modules/@swc/html": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html/-/html-1.15.47.tgz", + "integrity": "sha512-Olu/8OORvYB+43v2/85nHe1EA8WSvWp8D3kctEAput/o4F+EWCK0nr4yGTqvWB7Z+ODz0k+vnxpvHQYzsKP2LA==", + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3" + }, + "engines": { + "node": ">=14" + }, + "optionalDependencies": { + "@swc/html-darwin-arm64": "1.15.47", + "@swc/html-darwin-x64": "1.15.47", + "@swc/html-linux-arm-gnueabihf": "1.15.47", + "@swc/html-linux-arm64-gnu": "1.15.47", + "@swc/html-linux-arm64-musl": "1.15.47", + "@swc/html-linux-ppc64-gnu": "1.15.47", + "@swc/html-linux-s390x-gnu": "1.15.47", + "@swc/html-linux-x64-gnu": "1.15.47", + "@swc/html-linux-x64-musl": "1.15.47", + "@swc/html-win32-arm64-msvc": "1.15.47", + "@swc/html-win32-ia32-msvc": "1.15.47", + "@swc/html-win32-x64-msvc": "1.15.47" + } + }, + "node_modules/@swc/html-darwin-arm64": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-darwin-arm64/-/html-darwin-arm64-1.15.47.tgz", + "integrity": "sha512-Qe3FXNLO/k2WN7xmBP8SzBrtLvlIbyqa8cceUOI0opE4gk+myk5qIk022MiGJOgiF1B21/wMXgA08gYjQ2lP2Q==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-darwin-x64": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-darwin-x64/-/html-darwin-x64-1.15.47.tgz", + "integrity": "sha512-khCOiWmqlqi8yz+F/ePExhht/+3/cz1XzKV7raPKVynzd6sPxYtFQlNubj305s2soEXgkYYIH0zVVLwiMOVn6Q==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-arm-gnueabihf": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-arm-gnueabihf/-/html-linux-arm-gnueabihf-1.15.47.tgz", + "integrity": "sha512-7VRqaOEQEFPHSbUcnobmI59WbFK9M35Sse8TFN3hHxOlK9fINJ9yN5FuE9XEeRQAk+PFdR6WrIcF1Xwx1Cpi8A==", + "cpu": [ + "arm" + ], + "license": "Apache-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-arm64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-gnu/-/html-linux-arm64-gnu-1.15.47.tgz", + "integrity": "sha512-Ri9MmQqVRiEWuRfpkSTqz0bguvejXQcqQAkoW1Hke6+DColfzETcgNWa/Kw/ii5A/SS9Nb7acKaYdIw1vMBPwA==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-arm64-musl": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-arm64-musl/-/html-linux-arm64-musl-1.15.47.tgz", + "integrity": "sha512-NyXRQiVBkeutgCwCxUUaFqZdDmpZONs7Zz3AZGoY35s9GwXF412Nt22fK/e7lO/sM6G/+S3rOom/0xTmUQSK6A==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-ppc64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-ppc64-gnu/-/html-linux-ppc64-gnu-1.15.47.tgz", + "integrity": "sha512-rQ+XLJHFzu0e4M5p1+8kF2FKzI7WO9KPPji87OuicHZVrDCEqg7/jSGu3hys9CjIQIYVfR+tAFuZz3Q1/jOoNA==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-s390x-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-s390x-gnu/-/html-linux-s390x-gnu-1.15.47.tgz", + "integrity": "sha512-w6bitHrllrE3lqmf14cT3spmWhZHGts1O08O4adzxztSPto7O5GM3IerqZm/NtsqlxNsfbVHnhaNXxXWe/8Q+Q==", + "cpu": [ + "s390x" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-x64-gnu": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-gnu/-/html-linux-x64-gnu-1.15.47.tgz", + "integrity": "sha512-FTA7E29gcyadd71prg8sJUVacYrIhAXS8L7p48yCfgcNOKquofN1TDOrHVOyYMoxplL3FUwwbN+AZxWO7QfWPQ==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-linux-x64-musl": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-linux-x64-musl/-/html-linux-x64-musl-1.15.47.tgz", + "integrity": "sha512-g+K1GKUrj+S9o8Qsgii2g7ooMzZ750R4IAqH5CVElIA5FTMAx7KGnu9ga6aEnRwwLYxY3s1k/nN+ls0NEk240g==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=10" + } + }, + "node_modules/@swc/html-win32-arm64-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-win32-arm64-msvc/-/html-win32-arm64-msvc-1.15.47.tgz", + "integrity": "sha512-5Iw3i00JdTySi+ccc2CM5bxY+8TZivQmcTqUC6mUdAY0/KYBgSe1/L294UJQ4OTLQqNDOYXY9jdb070zZUX7jg==", + "cpu": [ + "arm64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" + "node": ">=10" } }, - "node_modules/@svgr/plugin-jsx": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", - "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", - "dependencies": { - "@babel/core": "^7.21.3", - "@svgr/babel-preset": "8.1.0", - "@svgr/hast-util-to-babel-ast": "8.0.0", - "svg-parser": "^2.0.4" - }, + "node_modules/@swc/html-win32-ia32-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-win32-ia32-msvc/-/html-win32-ia32-msvc-1.15.47.tgz", + "integrity": "sha512-YkKd0hbIOeuFC1Sg7uGKkU2JhL+c9vAJlT6P0nRbWCAL71n01IPbdtbW6PmvgVmI7pxRYucXpr4pg839nX5+9Q==", + "cpu": [ + "ia32" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@svgr/core": "*" + "node": ">=10" } }, - "node_modules/@svgr/plugin-svgo": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz", - "integrity": "sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==", - "dependencies": { - "cosmiconfig": "^8.1.3", - "deepmerge": "^4.3.1", - "svgo": "^3.0.2" - }, + "node_modules/@swc/html-win32-x64-msvc": { + "version": "1.15.47", + "resolved": "https://registry.npmjs.org/@swc/html-win32-x64-msvc/-/html-win32-x64-msvc-1.15.47.tgz", + "integrity": "sha512-w9Ug+VB9hlHT4hTWIJSB40AdF+qs5w07CYq/+ef1vQRjT5naN6/SKuXmr9/CKLn3T7A9z3lRMPKE4+lmtUkBOQ==", + "cpu": [ + "x64" + ], + "license": "Apache-2.0 AND MIT", + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" - }, - "peerDependencies": { - "@svgr/core": "*" + "node": ">=10" } }, - "node_modules/@svgr/webpack": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz", - "integrity": "sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==", + "node_modules/@swc/types": { + "version": "0.1.28", + "resolved": "https://registry.npmjs.org/@swc/types/-/types-0.1.28.tgz", + "integrity": "sha512-V6Mnml8v09QALx6K0elJ7o9K/MkVDtW3t6L+7Ou/JcWtb3xwId2AH4FeOceySd2JaO87IMw4+6vSZxLm34LPbw==", + "license": "Apache-2.0", "dependencies": { - "@babel/core": "^7.21.3", - "@babel/plugin-transform-react-constant-elements": "^7.21.3", - "@babel/preset-env": "^7.20.2", - "@babel/preset-react": "^7.18.6", - "@babel/preset-typescript": "^7.21.0", - "@svgr/core": "8.1.0", - "@svgr/plugin-jsx": "8.1.0", - "@svgr/plugin-svgo": "8.1.0" - }, - "engines": { - "node": ">=14" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/gregberge" + "@swc/counter": "^0.1.3" } }, "node_modules/@szmarczak/http-timer": { @@ -4969,54 +7505,16 @@ "node": ">=6" } }, - "node_modules/@tippyjs/react": { - "version": "4.2.6", - "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", - "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "node_modules/@tybys/wasm-util": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.3.tgz", + "integrity": "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg==", + "license": "MIT", + "optional": true, "dependencies": { - "tippy.js": "^6.3.1" - }, - "peerDependencies": { - "react": ">=16.8", - "react-dom": ">=16.8" - } - }, - "node_modules/@trysound/sax": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz", - "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==", - "engines": { - "node": ">=10.13.0" + "tslib": "^2.4.0" } }, - "node_modules/@tsconfig/node10": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", - "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "dev": true, - "license": "MIT" - }, - "node_modules/@tsconfig/node12": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", - "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "dev": true, - "license": "MIT" - }, - "node_modules/@tsconfig/node14": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", - "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "dev": true, - "license": "MIT" - }, - "node_modules/@tsconfig/node16": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", - "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/acorn": { "version": "4.0.6", "resolved": "https://registry.npmjs.org/@types/acorn/-/acorn-4.0.6.tgz", @@ -5026,9 +7524,10 @@ } }, "node_modules/@types/body-parser": { - "version": "1.19.5", - "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.5.tgz", - "integrity": "sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==", + "version": "1.19.6", + "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.6.tgz", + "integrity": "sha512-HLFeCYgz89uk22N5Qg3dvGvsv46B8GLvKKo1zKG4NybA8U2DiEO3w9lqGg29t/tfLRJpJ6iQxnVw4OnB7MoM9g==", + "license": "MIT", "dependencies": { "@types/connect": "*", "@types/node": "*" @@ -5038,14 +7537,27 @@ "version": "3.5.13", "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.13.tgz", "integrity": "sha512-z9fJ5Im06zvUL548KvYNecEVlA7cVDkGUi6kZusb04mpyEFKCIZJvloCcmpmLaIahDpOQGHaHmG6imtPMmPXGQ==", + "license": "MIT", "dependencies": { "@types/node": "*" } }, + "node_modules/@types/chai": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz", + "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/deep-eql": "*", + "assertion-error": "^2.0.1" + } + }, "node_modules/@types/connect": { "version": "3.4.38", "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.38.tgz", "integrity": "sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==", + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -5054,6 +7566,7 @@ "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.4.tgz", "integrity": "sha512-n6Cr2xS1h4uAulPRdlw6Jl6s1oG8KrVilPN2yUITEs+K48EzMJJ3W1xy8K5eWuFvjp3R74AOIGSmp2UfBJ8HFw==", + "license": "MIT", "dependencies": { "@types/express-serve-static-core": "*", "@types/node": "*" @@ -5067,6 +7580,13 @@ "@types/ms": "*" } }, + "node_modules/@types/deep-eql": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz", + "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==", + "dev": true, + "license": "MIT" + }, "node_modules/@types/eslint": { "version": "8.44.8", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.8.tgz", @@ -5099,31 +7619,22 @@ } }, "node_modules/@types/express": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.21.tgz", - "integrity": "sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==", + "version": "4.17.25", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz", + "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==", + "license": "MIT", "dependencies": { "@types/body-parser": "*", "@types/express-serve-static-core": "^4.17.33", "@types/qs": "*", - "@types/serve-static": "*" + "@types/serve-static": "^1" } }, "node_modules/@types/express-serve-static-core": { - "version": "5.0.6", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-5.0.6.tgz", - "integrity": "sha512-3xhRnjJPkULekpSzgtoNYYcTWgEZkp4myc+Saevii5JPnHNvHMRlBSHDbs7Bh1iPPoVTERHEZXyhyLbMEsExsA==", - "dependencies": { - "@types/node": "*", - "@types/qs": "*", - "@types/range-parser": "*", - "@types/send": "*" - } - }, - "node_modules/@types/express/node_modules/@types/express-serve-static-core": { - "version": "4.19.6", - "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.6.tgz", - "integrity": "sha512-N4LZ2xG7DatVqhCZzOGb1Yi5lMbXSZcmdLDe9EzSndPV2HpWYWzRbaerl2n27irrm94EPpprqa8KpskPT085+A==", + "version": "4.19.9", + "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.19.9.tgz", + "integrity": "sha512-QP2ESEe/ImWY0HDwNAnK9PvEffUyhLTnWkk7KXzHfyeWAnlrDe1fN77bXl6ia8KT3wPlmA7t9/VPRpnf4Ex9sg==", + "license": "MIT", "dependencies": { "@types/node": "*", "@types/qs": "*", @@ -5131,11 +7642,6 @@ "@types/send": "*" } }, - "node_modules/@types/gtag.js": { - "version": "0.0.12", - "resolved": "https://registry.npmjs.org/@types/gtag.js/-/gtag.js-0.0.12.tgz", - "integrity": "sha512-YQV9bUsemkzG81Ea295/nF/5GijnD2Af7QhEofh7xu+kvCN6RdodgNwwGWXB5GMI3NoyvQo0odNctoH/qLMIpg==" - }, "node_modules/@types/hast": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.3.tgz", @@ -5160,14 +7666,16 @@ "integrity": "sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==" }, "node_modules/@types/http-errors": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.4.tgz", - "integrity": "sha512-D0CFMMtydbJAegzOyHjtiKPLlvnm3iTZyZRSZoLq2mRhDdmLfIWOCYPfQJ4cu2erKghU++QvjcUjp/5h7hESpA==" + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@types/http-errors/-/http-errors-2.0.5.tgz", + "integrity": "sha512-r8Tayk8HJnX0FztbZN7oVqGccWgw98T/0neJphO91KkmOzug1KkofZURD4UaD5uH8AqcFLfdPErnBod0u71/qg==", + "license": "MIT" }, "node_modules/@types/http-proxy": { - "version": "1.17.16", - "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.16.tgz", - "integrity": "sha512-sdWoUajOB1cd0A8cRRQ1cfyWNbmFKLAqBB89Y8x5iYyG/mkJHc0YUH8pdWBy2omi9qtCpiIgGjuwO0dQST2l5w==", + "version": "1.17.17", + "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.17.tgz", + "integrity": "sha512-ED6LB+Z1AVylNTu7hdzuBqOgMnvG/ld6wGCG8wFnAzKX5uyW2K3WD52v0gnLCTK/VLpXtKckgWuyScYK6cSPaw==", + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -5175,12 +7683,14 @@ "node_modules/@types/istanbul-lib-coverage": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz", - "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==" + "integrity": "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==", + "license": "MIT" }, "node_modules/@types/istanbul-lib-report": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.3.tgz", "integrity": "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==", + "license": "MIT", "dependencies": { "@types/istanbul-lib-coverage": "*" } @@ -5189,6 +7699,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/istanbul-reports/-/istanbul-reports-3.0.4.tgz", "integrity": "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==", + "license": "MIT", "dependencies": { "@types/istanbul-lib-report": "*" } @@ -5214,7 +7725,8 @@ "node_modules/@types/mime": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.5.tgz", - "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==" + "integrity": "sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==", + "license": "MIT" }, "node_modules/@types/ms": { "version": "0.7.34", @@ -5225,53 +7737,34 @@ "version": "20.10.4", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.10.4.tgz", "integrity": "sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==", - "peer": true, "dependencies": { "undici-types": "~5.26.4" } }, - "node_modules/@types/node-forge": { - "version": "1.3.11", - "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.11.tgz", - "integrity": "sha512-FQx220y22OKNTqaByeBGqHWYz4cl94tpcxeFdvBo3wjG6XPBuZ0BNgNZRV5J5TFmmcsJ4IzsLkmGRiQbnYsBEQ==", - "dependencies": { - "@types/node": "*" - } - }, - "node_modules/@types/parse-json": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", - "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==" - }, "node_modules/@types/prismjs": { "version": "1.26.3", "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.3.tgz", "integrity": "sha512-A0D0aTXvjlqJ5ZILMz3rNfDBOx9hHxLZYv2by47Sm/pqW35zzjusrZTryatjN/Rf8Us2gZrJD+KeHbUSTux1Cw==" }, - "node_modules/@types/prop-types": { - "version": "15.7.11", - "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", - "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" - }, "node_modules/@types/qs": { - "version": "6.9.18", - "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.18.tgz", - "integrity": "sha512-kK7dgTYDyGqS+e2Q4aK9X3D7q234CIZ1Bv0q/7Z5IwRDoADNU81xXJK/YVyLbLTZCoIwUoDoffFeF+p/eIklAA==" + "version": "6.15.1", + "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.15.1.tgz", + "integrity": "sha512-GZHUBZR9hckSUhrxmp1nG6NwdpM9fCunJwyThLW1X3AyHgd9IlHb6VANpQQqDr2o/qQp6McZ3y/IA2rVzKzSbw==", + "license": "MIT" }, "node_modules/@types/range-parser": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", - "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==" + "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", + "license": "MIT" }, "node_modules/@types/react": { - "version": "18.2.42", - "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.42.tgz", - "integrity": "sha512-c1zEr96MjakLYus/wPnuWDo1/zErfdU9rNsIGmE+NV71nx88FG9Ttgo5dqorXTu/LImX2f63WBP986gJkMPNbA==", - "peer": true, + "version": "19.2.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", + "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", + "license": "MIT", "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" + "csstype": "^3.2.2" } }, "node_modules/@types/react-router": { @@ -5304,29 +7797,26 @@ } }, "node_modules/@types/retry": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", - "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==" + "version": "0.12.2", + "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz", + "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==", + "license": "MIT" }, "node_modules/@types/sax": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.7.tgz", "integrity": "sha512-rO73L89PJxeYM3s3pPPjiPgVVcymqU490g0YO5n5By0k2Erzj6tay/4lr1CHAAU4JyOWd1rpQ8bCf6cZfHU96A==", + "license": "MIT", "dependencies": { "@types/node": "*" } }, - "node_modules/@types/scheduler": { - "version": "0.16.8", - "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", - "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" - }, "node_modules/@types/send": { - "version": "0.17.4", - "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.4.tgz", - "integrity": "sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz", + "integrity": "sha512-arsCikDvlU99zl1g69TcAB3mzZPpxgw0UQnaHeC1Nwb015xp8bknZv5rIfri9xTOcMuaVgvabfIRA7PSZVuZIQ==", + "license": "MIT", "dependencies": { - "@types/mime": "^1", "@types/node": "*" } }, @@ -5334,24 +7824,37 @@ "version": "1.9.4", "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.4.tgz", "integrity": "sha512-qLpGZ/c2fhSs5gnYsQxtDEq3Oy8SXPClIXkW5ghvAvsNuVSA8k+gCONcUCS/UjLEYvYps+e8uBtfgXgvhwfNug==", + "license": "MIT", "dependencies": { "@types/express": "*" } }, "node_modules/@types/serve-static": { - "version": "1.15.7", - "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.7.tgz", - "integrity": "sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==", + "version": "1.15.10", + "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.10.tgz", + "integrity": "sha512-tRs1dB+g8Itk72rlSI2ZrW6vZg0YrLI81iQSTkMmOqnqCaNr/8Ek4VwWcN5vZgCYWbg/JJSGBlUaYGAOP73qBw==", + "license": "MIT", "dependencies": { "@types/http-errors": "*", "@types/node": "*", - "@types/send": "*" + "@types/send": "<1" + } + }, + "node_modules/@types/serve-static/node_modules/@types/send": { + "version": "0.17.6", + "resolved": "https://registry.npmjs.org/@types/send/-/send-0.17.6.tgz", + "integrity": "sha512-Uqt8rPBE8SY0RK8JB1EzVOIZ32uqy8HwdxCnoCOsYrvnswqmFZ/k+9Ikidlk/ImhsdvBsloHbAlewb2IEBV/Og==", + "license": "MIT", + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" } }, "node_modules/@types/sockjs": { "version": "0.3.36", "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.36.tgz", "integrity": "sha512-MK9V6NzAS1+Ud7JV9lJLFqW85VbC9dq3LmwZCuBe4wBDgKC0Kj/jd8Xl+nSviU+Qc3+m7umHHyHg//2KSa0a0Q==", + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -5359,7 +7862,8 @@ "node_modules/@types/stylis": { "version": "4.2.4", "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.4.tgz", - "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==" + "integrity": "sha512-36ZrGJ8fgtBr6nwNnuJ9jXIj+bn/pF6UoqmrQT7+Y99+tFFeHHsoR54+194dHdyhPjgbeoNz3Qru0oRt0l6ASQ==", + "peer": true }, "node_modules/@types/unist": { "version": "3.0.2", @@ -5370,14 +7874,16 @@ "version": "8.18.1", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz", "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==", + "license": "MIT", "dependencies": { "@types/node": "*" } }, "node_modules/@types/yargs": { - "version": "17.0.33", - "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz", - "integrity": "sha512-WpxBCKWPLr4xSsHgz511rFJAM+wS28w2zEO1QDNY5zM/S8ok70NNfztH0xwhqKyaK0OHCbN98LDAZuy1ctxDkA==", + "version": "17.0.35", + "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.35.tgz", + "integrity": "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==", + "license": "MIT", "dependencies": { "@types/yargs-parser": "*" } @@ -5385,13 +7891,127 @@ "node_modules/@types/yargs-parser": { "version": "21.0.3", "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.3.tgz", - "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==" + "integrity": "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==", + "license": "MIT" }, "node_modules/@ungap/structured-clone": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, + "node_modules/@vitest/expect": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.10.tgz", + "integrity": "sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.1.0", + "@types/chai": "^5.2.2", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "chai": "^6.2.2", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/mocker": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.10.tgz", + "integrity": "sha512-v0xaezt+DKEmKfaxg133ldzADrwLGd7Ze1MfQQTYfvs8OqZIwbxyxaYURivwV7sWy5fqn3rH5uOrSp07bp44Ow==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/spy": "4.1.10", + "estree-walker": "^3.0.3", + "magic-string": "^0.30.21" + }, + "funding": { + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "msw": "^2.4.9", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "msw": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/@vitest/pretty-format": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.10.tgz", + "integrity": "sha512-W1HsjSH4MXQ9YfmmhLAoIYf1HRfekQCGngeIgcei6MP5QQGWUe0gkopdZQaVCFO+JDJMrAJGwa5pRpNpvy4P8Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/runner": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.10.tgz", + "integrity": "sha512-IKI6kpIH+LmpROplyLwBBaCfMgOZOMsygVa6BARD6ahA04VRuJSa6OaVG7kRvSEMD870Vd91rSSw0eegtWyLGg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/utils": "4.1.10", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/snapshot": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.10.tgz", + "integrity": "sha512-xRkfOT1qpTAi/Ti4Y1LtfRc3kEuqxGw59eN2jN9pRWMtS/XDevekhcFSqvQqjUNGksfjMJu3Y+oJ+4Ypn2OaJw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "@vitest/utils": "4.1.10", + "magic-string": "^0.30.21", + "pathe": "^2.0.3" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/spy": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.10.tgz", + "integrity": "sha512-PLf/Ugvoq5wO/b4rwYCR1h2PSIdXz7wnkQFMiUpLdtM7l6pqVFcQIBEHyT1+l+cj7mNwAfZHzqXqDyjvOuwbDw==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://opencollective.com/vitest" + } + }, + "node_modules/@vitest/utils": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.10.tgz", + "integrity": "sha512-fy9am/HWxbaGt/Sawrp90vt6Y6jQwf1RX77cz3uwoJwJVMli/e1IEwRPnMNJ7vKfPTwo0diXifkpPvwH9v7nGA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@vitest/pretty-format": "4.1.10", + "convert-source-map": "^2.0.0", + "tinyrainbow": "^3.1.0" + }, + "funding": { + "url": "https://opencollective.com/vitest" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz", @@ -5537,6 +8157,7 @@ "version": "1.3.8", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz", "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==", + "license": "MIT", "dependencies": { "mime-types": "~2.1.34", "negotiator": "0.6.3" @@ -5549,6 +8170,7 @@ "version": "0.6.3", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -5557,7 +8179,6 @@ "version": "8.14.1", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz", "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -5585,17 +8206,19 @@ } }, "node_modules/address": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz", - "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/address/-/address-2.0.3.tgz", + "integrity": "sha512-XNAb/a6TCqou+TufU8/u11HCu9x1gYvOoxLwtlXgIqmkrYQADVv6ljyW2zwiPhHz9R1gItAWpuDrdJMmrOBFEA==", + "license": "MIT", "engines": { - "node": ">= 10.0.0" + "node": ">= 16.0.0" } }, "node_modules/aggregate-error": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", + "license": "MIT", "dependencies": { "clean-stack": "^2.0.0", "indent-string": "^4.0.0" @@ -5608,7 +8231,6 @@ "version": "8.17.1", "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -5648,33 +8270,35 @@ } }, "node_modules/algoliasearch": { - "version": "5.23.4", - "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.23.4.tgz", - "integrity": "sha512-QzAKFHl3fm53s44VHrTdEo0TkpL3XVUYQpnZy1r6/EHvMAyIg+O4hwprzlsNmcCHTNyVcF2S13DAUn7XhkC6qg==", - "peer": true, + "version": "5.56.0", + "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-5.56.0.tgz", + "integrity": "sha512-PrqppUmhT4ENdas2pH9caE7efUcxy6EcSFhWzosiVuQBzu2tQ5yLTI6jwomT/1cuBnivzGfxiJCqDNN9FRRh+Q==", + "license": "MIT", "dependencies": { - "@algolia/client-abtesting": "5.23.4", - "@algolia/client-analytics": "5.23.4", - "@algolia/client-common": "5.23.4", - "@algolia/client-insights": "5.23.4", - "@algolia/client-personalization": "5.23.4", - "@algolia/client-query-suggestions": "5.23.4", - "@algolia/client-search": "5.23.4", - "@algolia/ingestion": "1.23.4", - "@algolia/monitoring": "1.23.4", - "@algolia/recommend": "5.23.4", - "@algolia/requester-browser-xhr": "5.23.4", - "@algolia/requester-fetch": "5.23.4", - "@algolia/requester-node-http": "5.23.4" + "@algolia/abtesting": "1.22.0", + "@algolia/client-abtesting": "5.56.0", + "@algolia/client-analytics": "5.56.0", + "@algolia/client-common": "5.56.0", + "@algolia/client-insights": "5.56.0", + "@algolia/client-personalization": "5.56.0", + "@algolia/client-query-suggestions": "5.56.0", + "@algolia/client-search": "5.56.0", + "@algolia/ingestion": "1.56.0", + "@algolia/monitoring": "1.56.0", + "@algolia/recommend": "5.56.0", + "@algolia/requester-browser-xhr": "5.56.0", + "@algolia/requester-fetch": "5.56.0", + "@algolia/requester-node-http": "5.56.0" }, "engines": { "node": ">= 14.0.0" } }, "node_modules/algoliasearch-helper": { - "version": "3.24.3", - "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.24.3.tgz", - "integrity": "sha512-3QKg5lzSfUiPN8Hn1ViHEGv6PjK7i4SFEDLzwlSzPO/4mVOsyos7B7/AsEtFQW5KHHPiCq6DyJl+mzg7CYlEgw==", + "version": "3.29.2", + "resolved": "https://registry.npmjs.org/algoliasearch-helper/-/algoliasearch-helper-3.29.2.tgz", + "integrity": "sha512-SaV+rZM3drExb0punEYYjT+sNcH74YFwN8ocjya7IDOyQvKWeQpEaSMVG3+IGTVos+feuatj7ljQ4BXlXdUp3w==", + "license": "MIT", "dependencies": { "@algolia/events": "^4.0.1" }, @@ -5717,31 +8341,6 @@ "node": ">=6" } }, - "node_modules/ansi-escapes": { - "version": "4.3.2", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz", - "integrity": "sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==", - "dependencies": { - "type-fest": "^0.21.3" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/ansi-escapes/node_modules/type-fest": { - "version": "0.21.3", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.21.3.tgz", - "integrity": "sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/ansi-html-community": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz", @@ -5749,6 +8348,7 @@ "engines": [ "node >= 0.8.0" ], + "license": "Apache-2.0", "bin": { "ansi-html": "bin/ansi-html" } @@ -5775,6 +8375,15 @@ "url": "https://github.com/chalk/ansi-styles?sponsor=1" } }, + "node_modules/ansis": { + "version": "3.17.0", + "resolved": "https://registry.npmjs.org/ansis/-/ansis-3.17.0.tgz", + "integrity": "sha512-0qWUglt9JEqLFr3w1I1pbrChn1grhaiAR2ocX1PP/flRmxgtwTzPFFFnfIlD6aMOLQZgSuCRlidD70lvx8yhzg==", + "license": "ISC", + "engines": { + "node": ">=14" + } + }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", @@ -5790,7 +8399,8 @@ "node_modules/arg": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", - "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==" + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "license": "MIT" }, "node_modules/argparse": { "version": "2.0.1", @@ -5800,7 +8410,8 @@ "node_modules/array-flatten": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", - "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==" + "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==", + "license": "MIT" }, "node_modules/array-timsort": { "version": "1.0.3", @@ -5812,10 +8423,35 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz", "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==", + "license": "MIT", "engines": { "node": ">=8" } }, + "node_modules/asn1js": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz", + "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==", + "license": "BSD-3-Clause", + "dependencies": { + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.5", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/assertion-error": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz", + "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + } + }, "node_modules/astring": { "version": "1.8.6", "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.6.tgz", @@ -5844,9 +8480,9 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.21", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", - "integrity": "sha512-O+A6LWV5LDHSJD3LjHYoNi4VLsj/Whi7k6zG12xTYaU4cQ8oxQGckXNX8cRHK5yOZ/ppVHe0ZBXGzSV9jXdVbQ==", + "version": "10.5.4", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.5.4.tgz", + "integrity": "sha512-MaU0U/za7N3r6brxD4YB/l4NSrFzLPlANv6wEuQVaIPlD3L4W9rFcQPbL/EilY9BHhHvhfcz3gInDLrEtWT4EA==", "funding": [ { "type": "opencollective", @@ -5861,11 +8497,11 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { - "browserslist": "^4.24.4", - "caniuse-lite": "^1.0.30001702", - "fraction.js": "^4.3.7", - "normalize-range": "^0.1.2", + "browserslist": "^4.28.6", + "caniuse-lite": "^1.0.30001806", + "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, @@ -5879,20 +8515,11 @@ "postcss": "^8.1.0" } }, - "node_modules/axios": { - "version": "0.21.4", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz", - "integrity": "sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==", - "dev": true, - "license": "MIT", - "dependencies": { - "follow-redirects": "^1.14.0" - } - }, "node_modules/babel-loader": { "version": "9.2.1", "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.2.1.tgz", "integrity": "sha512-fqe8naHt46e0yIdkjUZYqddSXfej3AHajX+CSO5X7oy0EmPc6o5Xh+RClNoHjnieWz9AW4kZxW9yyFMhVB1QLA==", + "license": "MIT", "dependencies": { "find-cache-dir": "^4.0.0", "schema-utils": "^4.0.0" @@ -5909,17 +8536,19 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.3.tgz", "integrity": "sha512-jZVI+s9Zg3IqA/kdi0i6UDCybUI3aSBLnglhYbSSjKlV7yF1F/5LWv8MakQmvYpnbJDS6fcBL2KzHSxNCMtWSQ==", + "license": "MIT", "dependencies": { "object.assign": "^4.1.0" } }, "node_modules/babel-plugin-polyfill-corejs2": { - "version": "0.4.13", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.13.tgz", - "integrity": "sha512-3sX/eOms8kd3q2KZ6DAhKPc0dgm525Gqq5NtWKZ7QYYZEv57OQ54KtblzJzH1lQF/eQxO8KjWGIK9IPUJNus5g==", + "version": "0.4.17", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.17.tgz", + "integrity": "sha512-aTyf30K/rqAsNwN76zYrdtx8obu0E4KoUME29B1xj+B3WxgvWkp943vYQ+z8Mv3lw9xHXMHpvSPOBxzAkIa94w==", + "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.22.6", - "@babel/helper-define-polyfill-provider": "^0.6.4", + "@babel/compat-data": "^7.28.6", + "@babel/helper-define-polyfill-provider": "^0.6.8", "semver": "^6.3.1" }, "peerDependencies": { @@ -5930,28 +8559,31 @@ "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==", + "license": "ISC", "bin": { "semver": "bin/semver.js" } }, "node_modules/babel-plugin-polyfill-corejs3": { - "version": "0.11.1", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.11.1.tgz", - "integrity": "sha512-yGCqvBT4rwMczo28xkH/noxJ6MZ4nJfkVYdoDaC/utLtWrXxv27HVrzAeSbqR8SxDsp46n0YF47EbHoixy6rXQ==", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.13.0.tgz", + "integrity": "sha512-U+GNwMdSFgzVmfhNm8GJUX88AadB3uo9KpJqS3FaqNIPKgySuvMb+bHPsOmmuWyIcuqZj/pzt1RUIUZns4y2+A==", + "license": "MIT", "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.6.3", - "core-js-compat": "^3.40.0" + "@babel/helper-define-polyfill-provider": "^0.6.5", + "core-js-compat": "^3.43.0" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "node_modules/babel-plugin-polyfill-regenerator": { - "version": "0.6.4", - "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.4.tgz", - "integrity": "sha512-7gD3pRadPrbjhjLyxebmx/WrFYcuSjZ0XbdUujQMZ/fcE9oeewk2U/7PCvez84UeuK3oSjmPZ0Ch0dlupQvGzw==", + "version": "0.6.8", + "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.6.8.tgz", + "integrity": "sha512-M762rNHfSF1EV3SLtnCJXFoQbbIIz0OyRwnCmV0KPC7qosSfCO0QLTSuJX3ayAebubhE6oYBAYPrBA5ljowaZg==", + "license": "MIT", "dependencies": { - "@babel/helper-define-polyfill-provider": "^0.6.4" + "@babel/helper-define-polyfill-provider": "^0.6.8" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" @@ -5991,10 +8623,23 @@ } ] }, + "node_modules/baseline-browser-mapping": { + "version": "2.11.12", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.12.tgz", + "integrity": "sha512-r7WnVImvVCeFpf2DOXfy41aPWzeNg3H/A2X4dKmy1QL0MSyyk/e7z8ihJ3N6Nn2PsdhkVlqnEfnUE4a05P2aTA==", + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/batch": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz", - "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==" + "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==", + "license": "MIT" }, "node_modules/big.js": { "version": "5.2.2", @@ -6024,22 +8669,23 @@ } }, "node_modules/body-parser": { - "version": "1.20.3", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", - "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", + "version": "1.20.6", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.6.tgz", + "integrity": "sha512-p5tAzS57i5MV9fZFDj9LeIiTZEufbSe2eDozP+ElheSUq1m74CRq1jI4mYNDdVs9vQztXFLuk/Gd6BWTdwRJ5g==", + "license": "MIT", "dependencies": { - "bytes": "3.1.2", + "bytes": "~3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.13.0", - "raw-body": "2.5.2", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", "type-is": "~1.6.18", - "unpipe": "1.0.0" + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8", @@ -6050,6 +8696,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -6058,6 +8705,7 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -6065,12 +8713,14 @@ "node_modules/body-parser/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/bonjour-service": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.3.0.tgz", - "integrity": "sha512-3YuAUiSkWykd+2Azjgyxei8OWf8thdn8AITIog2M4UICzoqfjlqr64WIjEXZllf/W6vK1goqleSR6brGomxQqA==", + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/bonjour-service/-/bonjour-service-1.4.4.tgz", + "integrity": "sha512-jCZcVv7eoc4QesRscwEZtSROBen+6LpKAmBIsQYQrsAeVHLyMXWX/t6eIV5KiRZYNUBl8eVqImEEMQ8L5+c/Kw==", + "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.3", "multicast-dns": "^7.2.5" @@ -6123,9 +8773,9 @@ } }, "node_modules/browserslist": { - "version": "4.24.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", - "integrity": "sha512-KDi1Ny1gSePi1vm0q4oxSF8b4DR44GF4BbmS2YdhPLOEqd8pDviZOGH/GsmRwoWJ2+5Lr085X7naowMwKHDG1A==", + "version": "4.28.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz", + "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==", "funding": [ { "type": "opencollective", @@ -6140,12 +8790,13 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, + "license": "MIT", "dependencies": { - "caniuse-lite": "^1.0.30001688", - "electron-to-chromium": "^1.5.73", - "node-releases": "^2.0.19", - "update-browserslist-db": "^1.1.1" + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" @@ -6183,14 +8834,39 @@ "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz", "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==" }, + "node_modules/bundle-name": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz", + "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==", + "license": "MIT", + "dependencies": { + "run-applescript": "^7.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/bytes": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==", + "license": "MIT", "engines": { "node": ">= 0.8" } }, + "node_modules/bytestreamjs": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz", + "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==", + "license": "BSD-3-Clause", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/cacheable-lookup": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz", @@ -6252,13 +8928,14 @@ } }, "node_modules/call-bind": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz", - "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.9.tgz", + "integrity": "sha512-a/hy+pNsFUTR+Iz8TCJvXudKVLAnz/DyeSUo10I5yvFDQJBFU2s9uqQpoSrJlroHUKoKqzg+epxyP9lqFdzfBQ==", + "license": "MIT", "dependencies": { - "call-bind-apply-helpers": "^1.0.0", - "es-define-property": "^1.0.0", - "get-intrinsic": "^1.2.4", + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "get-intrinsic": "^1.3.0", "set-function-length": "^1.2.2" }, "engines": { @@ -6272,6 +8949,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" @@ -6284,6 +8962,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.2", "get-intrinsic": "^1.3.0" @@ -6327,6 +9006,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.1.tgz", "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "peer": true, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -6335,6 +9015,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", "integrity": "sha512-bsTwuIg/BZZK/vreVTYYbSWoe2F+71P7K5QGEX+pT250DZbfU1MQ5prOKpPR+LL6uWKK3KMwMCAS74QB3Um1uw==", + "license": "MIT", "dependencies": { "browserslist": "^4.0.0", "caniuse-lite": "^1.0.0", @@ -6343,9 +9024,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001748", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001748.tgz", - "integrity": "sha512-5P5UgAr0+aBmNiplks08JLw+AW/XG/SurlgZLgB1dDLfAw7EfRGxIwzPHxdSCGY/BTKDqIVyJL87cCN6s0ZR0w==", + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", "funding": [ { "type": "opencollective", @@ -6371,6 +9052,16 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chai": { + "version": "6.2.2", + "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz", + "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -6467,6 +9158,7 @@ "version": "1.0.0-rc.12", "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.12.tgz", "integrity": "sha512-VqR8m68vM46BNnuZ5NtnGBKIE/DfN0cRIzg9n40EIq9NOv90ayxLBXA8fXC5gquFRGJSTRqBq25Jt2ECLR431Q==", + "license": "MIT", "dependencies": { "cheerio-select": "^2.1.0", "dom-serializer": "^2.0.0", @@ -6487,6 +9179,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/cheerio-select/-/cheerio-select-2.1.0.tgz", "integrity": "sha512-9v9kG0LvzrlcungtnJtpGNxY+fzECQKhK4EGJX2vByejiMX84MFNQw4UxPJl3bFbTMw+Dfs37XaIkCwTZfLh4g==", + "license": "BSD-2-Clause", "dependencies": { "boolbase": "^1.0.0", "css-select": "^5.1.0", @@ -6500,15 +9193,10 @@ } }, "node_modules/chokidar": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz", - "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==", - "funding": [ - { - "type": "individual", - "url": "https://paulmillr.com/funding/" - } - ], + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "license": "MIT", "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -6521,6 +9209,9 @@ "engines": { "node": ">= 8.10.0" }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, "optionalDependencies": { "fsevents": "~2.3.2" } @@ -6570,6 +9261,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", + "license": "MIT", "engines": { "node": ">=6" } @@ -6657,50 +9349,6 @@ "node": ">=8" } }, - "node_modules/cliui": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz", - "integrity": "sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==", - "dependencies": { - "string-width": "^4.2.0", - "strip-ansi": "^6.0.0", - "wrap-ansi": "^7.0.0" - } - }, - "node_modules/cliui/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/cliui/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/cliui/node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" - } - }, "node_modules/clone": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz", @@ -6769,12 +9417,14 @@ "node_modules/colord": { "version": "2.9.3", "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", - "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==" + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "license": "MIT" }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", - "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==" + "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", + "license": "MIT" }, "node_modules/combine-promises": { "version": "1.2.0", @@ -6831,12 +9481,14 @@ "node_modules/common-path-prefix": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz", - "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==" + "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==", + "license": "ISC" }, "node_modules/compressible": { "version": "2.0.18", "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz", "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==", + "license": "MIT", "dependencies": { "mime-db": ">= 1.43.0 < 2" }, @@ -6845,15 +9497,16 @@ } }, "node_modules/compression": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.0.tgz", - "integrity": "sha512-k6WLKfunuqCYD3t6AsuPGvQWaKwuLLh2/xHNcX4qE+vIfDNXpSqnrhwA7O53R7WVQUnt8dVAIW+YHr7xTgOgGA==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/compression/-/compression-1.8.1.tgz", + "integrity": "sha512-9mAqGPHLakhCLeNyxPkK4xVo746zQ/czLH1Ky+vkitMnWfWZps8r0qXuwhwizagCRttsL4lfG4pIOvaWLpAP0w==", + "license": "MIT", "dependencies": { "bytes": "3.1.2", "compressible": "~2.0.18", "debug": "2.6.9", "negotiator": "~0.6.4", - "on-headers": "~1.0.2", + "on-headers": "~1.1.0", "safe-buffer": "5.2.1", "vary": "~1.1.2" }, @@ -6865,6 +9518,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -6873,6 +9527,7 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -6880,48 +9535,14 @@ "node_modules/compression/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, - "node_modules/concurrently": { - "version": "6.5.1", - "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-6.5.1.tgz", - "integrity": "sha512-FlSwNpGjWQfRwPLXvJ/OgysbBxPkWpiVjy1042b0U7on7S7qwwMIILRj7WTN1mTgqa582bG6NFuScOoh6Zgdag==", - "dependencies": { - "chalk": "^4.1.0", - "date-fns": "^2.16.1", - "lodash": "^4.17.21", - "rxjs": "^6.6.3", - "spawn-command": "^0.0.2-1", - "supports-color": "^8.1.0", - "tree-kill": "^1.2.2", - "yargs": "^16.2.0" - }, - "bin": { - "concurrently": "bin/concurrently.js" - }, - "engines": { - "node": ">=10.0.0" - } - }, - "node_modules/concurrently/node_modules/supports-color": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", - "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/supports-color?sponsor=1" - } - }, "node_modules/config-chain": { "version": "1.1.13", "resolved": "https://registry.npmjs.org/config-chain/-/config-chain-1.1.13.tgz", @@ -6952,6 +9573,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz", "integrity": "sha512-U73+6lQFmfiNPrYbXqr6kZ1i1wiRqXnp2nhMsINseWXO8lDau0LGEffJ8kQi4EjLZympVgRdvqjAgiZ1tgzDDA==", + "license": "MIT", "engines": { "node": ">=0.8" } @@ -6960,6 +9582,7 @@ "version": "3.4.2", "resolved": "https://registry.npmjs.org/consola/-/consola-3.4.2.tgz", "integrity": "sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==", + "license": "MIT", "engines": { "node": "^14.18.0 || >=16.10.0" } @@ -6977,6 +9600,7 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", "integrity": "sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -6985,6 +9609,7 @@ "version": "1.0.5", "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz", "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -6995,22 +9620,25 @@ "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==" }, "node_modules/cookie": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", - "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", + "version": "0.7.2", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.2.tgz", + "integrity": "sha512-yki5XnKuf750l50uGTllt6kKILY4nQ1eNIQatoXEByZ5dWgnKqbnqmTrBE5B4N7lrMJKQ2ytWMiTO2o0v6Ew/w==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/cookie-signature": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==" + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", + "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", + "license": "MIT" }, "node_modules/copy-text-to-clipboard": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz", - "integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.2.tgz", + "integrity": "sha512-T6SqyLd1iLuqPA90J5N4cTalrtovCySh58iiZDGJ6FGznbclKh4UI+FGacQSgFzwKG77W7XT5gwbVEbd9cIH1A==", + "license": "MIT", "engines": { "node": ">=12" }, @@ -7022,6 +9650,7 @@ "version": "11.0.0", "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz", "integrity": "sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==", + "license": "MIT", "dependencies": { "fast-glob": "^3.2.11", "glob-parent": "^6.0.1", @@ -7045,6 +9674,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "license": "ISC", "dependencies": { "is-glob": "^4.0.3" }, @@ -7056,6 +9686,7 @@ "version": "13.2.2", "resolved": "https://registry.npmjs.org/globby/-/globby-13.2.2.tgz", "integrity": "sha512-Y1zNGV+pzQdh7H39l9zgB4PJqjRNqydvdYCDG4HFXM4XuvSaQQlEc91IU1yALL8gUTDomgBAfz3XJdmUS+oo0w==", + "license": "MIT", "dependencies": { "dir-glob": "^3.0.1", "fast-glob": "^3.3.0", @@ -7074,6 +9705,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz", "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", + "license": "MIT", "engines": { "node": ">=12" }, @@ -7092,27 +9724,18 @@ } }, "node_modules/core-js-compat": { - "version": "3.41.0", - "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.41.0.tgz", - "integrity": "sha512-RFsU9LySVue9RTwdDVX/T0e2Y6jRYWXERKElIjpuEOEnxaXffI0X7RUwVzfYLfzuLXSNJDYoRYUAmRUcyln20A==", + "version": "3.49.0", + "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.49.0.tgz", + "integrity": "sha512-VQXt1jr9cBz03b331DFDCCP90b3fanciLkgiOoy8SBHy06gNf+vQ1A3WFLqG7I8TipYIKeYK9wxd0tUrvHcOZA==", + "license": "MIT", "dependencies": { - "browserslist": "^4.24.4" + "browserslist": "^4.28.1" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/core-js" } }, - "node_modules/core-js-pure": { - "version": "3.41.0", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.41.0.tgz", - "integrity": "sha512-71Gzp96T9YPk63aUvE5Q5qP+DryB4ZloUZPSOebGM88VNw8VNfvdA7z6kGA8iGOTEzAomsRidp4jXSmUIJsL+Q==", - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-util-is": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz", @@ -7122,6 +9745,7 @@ "version": "8.3.6", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "license": "MIT", "dependencies": { "import-fresh": "^3.3.0", "js-yaml": "^4.1.0", @@ -7143,13 +9767,6 @@ } } }, - "node_modules/create-require": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", - "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "dev": true, - "license": "MIT" - }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -7407,6 +10024,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -7418,9 +10036,10 @@ } }, "node_modules/css-blank-pseudo/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7433,14 +10052,16 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "peer": true, "engines": { "node": ">=4" } }, "node_modules/css-declaration-sorter": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.2.0.tgz", - "integrity": "sha512-h70rUM+3PNFuaBDTLe8wF/cdWu+dOZmb7pJt8Z2sedYbAcQVQV/tEchueg3GWxwqS0cxtbxmaHEdkNACqcvsow==", + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-7.4.0.tgz", + "integrity": "sha512-LTuzjPoyA2vMGKKcaOqKSp7Ub2eGrNfKiZH4LpezxpNrsICGCSFvsQOI29psISxNZtaXibkC2CXzrQ5enMeGGw==", + "license": "ISC", "engines": { "node": "^14 || ^16 || >=18" }, @@ -7449,9 +10070,9 @@ } }, "node_modules/css-has-pseudo": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-7.0.2.tgz", - "integrity": "sha512-nzol/h+E0bId46Kn2dQH5VElaknX2Sr0hFuB/1EomdC7j+OISt2ZzK7EHX9DZDY53WbIVAR7FYKSO2XnSf07MQ==", + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/css-has-pseudo/-/css-has-pseudo-7.0.3.tgz", + "integrity": "sha512-oG+vKuGyqe/xvEMoxAQrhi7uY16deJR3i7wwhBerVrGQKSqUC5GiOVxTpM9F9B9hw0J+eKeOWLH7E9gZ1Dr5rA==", "funding": [ { "type": "github", @@ -7462,6 +10083,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0", @@ -7488,6 +10110,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -7496,10 +10119,10 @@ } }, "node_modules/css-has-pseudo/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", - "peer": true, + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -7512,6 +10135,7 @@ "version": "6.11.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz", "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==", + "license": "MIT", "dependencies": { "icss-utils": "^5.1.0", "postcss": "^8.4.33", @@ -7546,6 +10170,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/css-minimizer-webpack-plugin/-/css-minimizer-webpack-plugin-5.0.1.tgz", "integrity": "sha512-3caImjKFQkS+ws1TGcFn0V1HyDJFq1Euy589JlD6/3rV2kj+w7r5G9WDMgSHvpvXHNZ2calVypZWuEDQd9wfLg==", + "license": "MIT", "dependencies": { "@jridgewell/trace-mapping": "^0.3.18", "cssnano": "^6.0.1", @@ -7599,6 +10224,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -7607,9 +10233,10 @@ } }, "node_modules/css-select": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.1.0.tgz", - "integrity": "sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==", + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/css-select/-/css-select-5.2.2.tgz", + "integrity": "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw==", + "license": "BSD-2-Clause", "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", @@ -7625,6 +10252,7 @@ "version": "3.2.0", "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz", "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "peer": true, "dependencies": { "camelize": "^1.0.0", "css-color-keywords": "^1.0.0", @@ -7635,6 +10263,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz", "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==", + "license": "MIT", "dependencies": { "mdn-data": "2.0.30", "source-map-js": "^1.0.1" @@ -7655,9 +10284,9 @@ } }, "node_modules/cssdb": { - "version": "8.2.4", - "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.2.4.tgz", - "integrity": "sha512-3KSCVkjZJe/QxicVXnbyYSY26WsFc1YoMY7jep1ZKWMEVc7jEm6V2Xq2r+MX8WKQIuB7ofGbnr5iVI+aZpoSzg==", + "version": "8.9.0", + "resolved": "https://registry.npmjs.org/cssdb/-/cssdb-8.9.0.tgz", + "integrity": "sha512-J8jOU/hLjaXcO1LldOLraJSQpfLXRKof0I7mtbRyOy2AAXgqst0x9rlgi2qXeD6d0ou3ZLqcPAMqYVbpCbrxEw==", "funding": [ { "type": "opencollective", @@ -7667,12 +10296,14 @@ "type": "github", "url": "https://github.com/sponsors/csstools" } - ] + ], + "license": "MIT-0" }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "license": "MIT", "bin": { "cssesc": "bin/cssesc" }, @@ -7684,6 +10315,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-6.1.2.tgz", "integrity": "sha512-rYk5UeX7VAM/u0lNqewCdasdtPK81CgX8wJFLEIXHbV2oldWRgJAsZrdhRXkV1NJzA2g850KiFm9mMU2HxNxMA==", + "license": "MIT", "dependencies": { "cssnano-preset-default": "^6.1.2", "lilconfig": "^3.1.1" @@ -7703,6 +10335,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-6.1.2.tgz", "integrity": "sha512-Nhao7eD8ph2DoHolEzQs5CfRpiEP0xa1HBdnFZ82kvqdmbwVBUr2r1QuQ4t1pi+D1ZpqpcO4T+wy/7RxzJ/WPQ==", + "license": "MIT", "dependencies": { "autoprefixer": "^10.4.19", "browserslist": "^4.23.0", @@ -7723,6 +10356,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-6.1.2.tgz", "integrity": "sha512-1C0C+eNaeN8OcHQa193aRgYexyJtU8XwbdieEjClw+J9d94E41LwT6ivKH0WT+fYwYWB0Zp3I3IZ7tI/BbUbrg==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "css-declaration-sorter": "^7.2.0", @@ -7766,6 +10400,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-4.0.2.tgz", "integrity": "sha512-ZR1jHg+wZ8o4c3zqf1SIUSTIvm/9mU343FMR6Obe/unskbvpGhZOo1J6d/r8D1pzkRQYuwbcH3hToOuoA2G7oQ==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -7777,6 +10412,7 @@ "version": "5.0.5", "resolved": "https://registry.npmjs.org/csso/-/csso-5.0.5.tgz", "integrity": "sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==", + "license": "MIT", "dependencies": { "css-tree": "~2.2.0" }, @@ -7789,6 +10425,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.2.1.tgz", "integrity": "sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==", + "license": "MIT", "dependencies": { "mdn-data": "2.0.28", "source-map-js": "^1.0.1" @@ -7801,44 +10438,32 @@ "node_modules/csso/node_modules/mdn-data": { "version": "2.0.28", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.28.tgz", - "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==" + "integrity": "sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==", + "license": "CC0-1.0" }, "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", + "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==", + "license": "MIT" }, "node_modules/dag-map": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/dag-map/-/dag-map-1.0.2.tgz", "integrity": "sha512-+LSAiGFwQ9dRnRdOeaj7g47ZFJcOUPukAP8J3A3fuZ1g9Y44BG+P1sgApjLXTQPOzC4+7S9Wr8kXsfpINM4jpw==" }, - "node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" - } - }, "node_modules/debounce": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==" }, "node_modules/debug": { - "version": "4.3.4", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", - "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "version": "4.4.3", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz", + "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==", + "license": "MIT", "dependencies": { - "ms": "2.1.2" + "ms": "^2.1.3" }, "engines": { "node": ">=6.0" @@ -7880,34 +10505,41 @@ "node": ">=4.0.0" } }, - "node_modules/deepl": { - "version": "1.0.13", - "resolved": "https://registry.npmjs.org/deepl/-/deepl-1.0.13.tgz", - "integrity": "sha512-ieaHKo+Y2u1jTpbX3SkhFGaOLgXB20gYoLqPhqtjxr612GC9wSMUqrHIfhvQzpevTVcI6H4kgElXActg3DHnqg==", - "dev": true, - "license": "MIT", - "dependencies": { - "axios": "^0.21.1", - "querystring": "^0.2.0" - } - }, "node_modules/deepmerge": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "license": "MIT", "engines": { "node": ">=0.10.0" } }, - "node_modules/default-gateway": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/default-gateway/-/default-gateway-6.0.3.tgz", - "integrity": "sha512-fwSOJsbbNzZ/CUFpqFBqYfYNLj1NbMPm8MMCIzHjC83iSJRBEGmDUxU+WP661BaBQImeC2yHwXtz+P/O9o+XEg==", + "node_modules/default-browser": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz", + "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==", + "license": "MIT", "dependencies": { - "execa": "^5.0.0" + "bundle-name": "^4.1.0", + "default-browser-id": "^5.0.0" }, "engines": { - "node": ">= 10" + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/default-browser-id": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz", + "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/defaults": { @@ -7940,6 +10572,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==", + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0", "es-errors": "^1.3.0", @@ -7956,6 +10589,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz", "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==", + "license": "MIT", "engines": { "node": ">=8" } @@ -7964,6 +10598,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz", "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==", + "license": "MIT", "dependencies": { "define-data-property": "^1.0.1", "has-property-descriptors": "^1.0.0", @@ -7981,32 +10616,11 @@ "resolved": "https://registry.npmjs.org/degit/-/degit-2.8.4.tgz", "integrity": "sha512-vqYuzmSA5I50J882jd+AbAhQtgK6bdKUJIex1JNfEUPENCgYsxugzKVZlFyMwV4i06MmnV47/Iqi5Io86zf3Ng==", "dev": true, - "bin": { - "degit": "degit" - }, - "engines": { - "node": ">=8.0.0" - } - }, - "node_modules/del": { - "version": "6.1.1", - "resolved": "https://registry.npmjs.org/del/-/del-6.1.1.tgz", - "integrity": "sha512-ua8BhapfP0JUJKC/zV9yHHDW/rDoDxP4Zhn3AkA6/xT6gY7jYXJiaeyBZznYVujhZZET+UgcbZiQ7sN3WqcImg==", - "dependencies": { - "globby": "^11.0.1", - "graceful-fs": "^4.2.4", - "is-glob": "^4.0.1", - "is-path-cwd": "^2.2.0", - "is-path-inside": "^3.0.2", - "p-map": "^4.0.0", - "rimraf": "^3.0.2", - "slash": "^3.0.0" + "bin": { + "degit": "degit" }, "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "node": ">=8.0.0" } }, "node_modules/delayed-stream": { @@ -8021,6 +10635,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz", "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -8037,58 +10652,43 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz", "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==", + "license": "MIT", "engines": { "node": ">= 0.8", "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz", + "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=8" + } + }, "node_modules/detect-node": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz", - "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==" + "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", + "license": "MIT" }, "node_modules/detect-port": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-1.5.1.tgz", - "integrity": "sha512-aBzdj76lueB6uUst5iAs7+0H/oOjqI5D16XUWxlWMIMROhcM0rfsNVk93zTngq1dDNpoXRr++Sus7ETAExppAQ==", - "dependencies": { - "address": "^1.0.1", - "debug": "4" - }, - "bin": { - "detect": "bin/detect-port.js", - "detect-port": "bin/detect-port.js" - } - }, - "node_modules/detect-port-alt": { - "version": "1.1.6", - "resolved": "https://registry.npmjs.org/detect-port-alt/-/detect-port-alt-1.1.6.tgz", - "integrity": "sha512-5tQykt+LqfJFBEYaDITx7S7cR7mJ/zQmLXZ2qt5w04ainYZw6tBf9dBunMjVeVOdYVRUzUOE4HkY5J7+uttb5Q==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/detect-port/-/detect-port-2.1.0.tgz", + "integrity": "sha512-epZuWb/6Q62L+nDHJc/hQAqf8pylsqgk3BpZXVBx1CDnr3nkrVNn73Uu1rXcFzkNcc+hkP3whuOg7JZYaQB65Q==", + "license": "MIT", "dependencies": { - "address": "^1.0.1", - "debug": "^2.6.0" + "address": "^2.0.1" }, "bin": { - "detect": "bin/detect-port", - "detect-port": "bin/detect-port" + "detect": "dist/commonjs/bin/detect-port.js", + "detect-port": "dist/commonjs/bin/detect-port.js" }, "engines": { - "node": ">= 4.2.1" + "node": ">= 16.0.0" } }, - "node_modules/detect-port-alt/node_modules/debug": { - "version": "2.6.9", - "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", - "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", - "dependencies": { - "ms": "2.0.0" - } - }, - "node_modules/detect-port-alt/node_modules/ms": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, "node_modules/devlop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", @@ -8101,20 +10701,11 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/diff": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", - "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "dev": true, - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.3.1" - } - }, "node_modules/dir-glob": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz", "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==", + "license": "MIT", "dependencies": { "path-type": "^4.0.0" }, @@ -8126,6 +10717,7 @@ "version": "5.6.1", "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-5.6.1.tgz", "integrity": "sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==", + "license": "MIT", "dependencies": { "@leichtgewicht/ip-codec": "^2.0.1" }, @@ -8133,6 +10725,19 @@ "node": ">=6" } }, + "node_modules/docusaurus-plugin-copy-page-button": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/docusaurus-plugin-copy-page-button/-/docusaurus-plugin-copy-page-button-0.8.2.tgz", + "integrity": "sha512-6flPLd6x5stWlsBmNslh1dTIAUl8U8VwUL5m8rLS23rPtSlemomHP2si/YJvs5dqZc+XlLqR5xOmsRpWznlw0Q==", + "license": "MIT", + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "@docusaurus/core": "^3.0.0", + "react": "^18.0.0 || ^19.0.0" + } + }, "node_modules/docusaurus-plugin-module-alias": { "version": "0.0.2", "resolved": "https://registry.npmjs.org/docusaurus-plugin-module-alias/-/docusaurus-plugin-module-alias-0.0.2.tgz", @@ -8168,6 +10773,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", + "license": "MIT", "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -8192,6 +10798,7 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", + "license": "BSD-2-Clause", "dependencies": { "domelementtype": "^2.3.0" }, @@ -8206,6 +10813,7 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz", "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==", + "license": "BSD-2-Clause", "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -8239,6 +10847,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", @@ -8266,7 +10875,8 @@ "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", - "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==" + "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==", + "license": "MIT" }, "node_modules/ejs": { "version": "3.1.9", @@ -8284,9 +10894,10 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.137", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.137.tgz", - "integrity": "sha512-/QSJaU2JyIuTbbABAo/crOs+SuAZLS+fVVS10PVrIT9hrRkmZl8Hb0xPSkKRUUWHQtYzXHpQUW3Dy5hwMzGZkA==" + "version": "1.5.400", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.400.tgz", + "integrity": "sha512-96EWDNjM59SYflgeV5Ylsf4EMiq1a25YjCnJH7cxn/AF2H3pILRweaUnoLax0yKHWdpOzY6JKEu45e8irqZIHA==", + "license": "ISC" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -8319,6 +10930,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz", "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -8379,6 +10991,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -8387,6 +11000,7 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -8397,9 +11011,10 @@ "integrity": "sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==" }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", + "license": "MIT", "dependencies": { "es-errors": "^1.3.0" }, @@ -8451,6 +11066,12 @@ "node": ">=8.0.0" } }, + "node_modules/esm-env": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz", + "integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==", + "license": "MIT" + }, "node_modules/esprima": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", @@ -8580,6 +11201,7 @@ "version": "2.0.3", "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "license": "BSD-2-Clause", "engines": { "node": ">=0.10.0" } @@ -8599,6 +11221,7 @@ "version": "1.8.1", "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -8618,7 +11241,8 @@ "node_modules/eventemitter3": { "version": "4.0.7", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", - "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "license": "MIT" }, "node_modules/events": { "version": "3.3.0", @@ -8661,39 +11285,50 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/expect-type": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.4.0.tgz", + "integrity": "sha512-KfYbmpRm0VbLjEvVa9yGwCi9GI34xvi7A/HXYWQO65CSD2u3MczUJSuwXKFIxlGsgBQizV9q5J9NHj4VG0n+pA==", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/express": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", - "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz", + "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==", + "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.3", - "content-disposition": "0.5.4", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", "content-type": "~1.0.4", - "cookie": "0.7.1", - "cookie-signature": "1.0.6", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", "debug": "2.6.9", "depd": "2.0.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.3.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", "merge-descriptors": "1.0.3", "methods": "~1.1.2", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.12", + "path-to-regexp": "~0.1.12", "proxy-addr": "~2.0.7", - "qs": "6.13.0", + "qs": "~6.15.1", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.19.0", - "serve-static": "1.16.2", + "send": "~0.19.0", + "serve-static": "~1.16.2", "setprototypeof": "1.2.0", - "statuses": "2.0.1", + "statuses": "~2.0.1", "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" @@ -8710,6 +11345,7 @@ "version": "0.5.4", "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz", "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==", + "license": "MIT", "dependencies": { "safe-buffer": "5.2.1" }, @@ -8721,6 +11357,7 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -8728,17 +11365,20 @@ "node_modules/express/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/express/node_modules/path-to-regexp": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", - "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==" + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", + "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", + "license": "MIT" }, "node_modules/express/node_modules/range-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -8752,6 +11392,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==", + "license": "MIT", "dependencies": { "is-extendable": "^0.1.0" }, @@ -8829,6 +11470,7 @@ "version": "0.11.4", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz", "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==", + "license": "Apache-2.0", "dependencies": { "websocket-driver": ">=0.5.1" }, @@ -8840,6 +11482,7 @@ "version": "4.2.2", "resolved": "https://registry.npmjs.org/feed/-/feed-4.2.2.tgz", "integrity": "sha512-u5/sxGfiMfZNtJ3OvQpXcvotFpYkL0n9u9mM2vkui2nGo8b4wvDkJ8gAkYqbA8QpGyFCv3RK0Z+Iv+9veCS9bQ==", + "license": "MIT", "dependencies": { "xml-js": "^1.6.11" }, @@ -8847,28 +11490,6 @@ "node": ">=0.4.0" } }, - "node_modules/figures": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", - "integrity": "sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==", - "dependencies": { - "escape-string-regexp": "^1.0.5" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/figures/node_modules/escape-string-regexp": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz", - "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==", - "engines": { - "node": ">=0.8.0" - } - }, "node_modules/file-entry-cache": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", @@ -8904,7 +11525,6 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -8976,14 +11596,6 @@ "node": ">=10" } }, - "node_modules/filesize": { - "version": "8.0.7", - "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz", - "integrity": "sha512-pjmC+bkIF8XI7fWaH8KxHcZL3DPybs1roSKP4rKDvy20tAWwIObE4+JIseG2byfGKhud5ZnM4YSGKBz7Sh0ndQ==", - "engines": { - "node": ">= 0.4.0" - } - }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -8996,16 +11608,17 @@ } }, "node_modules/finalhandler": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", - "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", + "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", + "license": "MIT", "dependencies": { "debug": "2.6.9", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "statuses": "2.0.1", + "statuses": "~2.0.2", "unpipe": "~1.0.0" }, "engines": { @@ -9016,6 +11629,7 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -9023,12 +11637,14 @@ "node_modules/finalhandler/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/find-cache-dir": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz", "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==", + "license": "MIT", "dependencies": { "common-path-prefix": "^3.0.0", "pkg-dir": "^7.0.0" @@ -9044,6 +11660,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" @@ -9084,15 +11701,16 @@ "dev": true }, "node_modules/follow-redirects": { - "version": "1.15.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", - "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz", + "integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==", "funding": [ { "type": "individual", "url": "https://github.com/sponsors/RubenVerborgh" } ], + "license": "MIT", "engines": { "node": ">=4.0" }, @@ -9102,113 +11720,6 @@ } } }, - "node_modules/fork-ts-checker-webpack-plugin": { - "version": "6.5.3", - "resolved": "https://registry.npmjs.org/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.3.tgz", - "integrity": "sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==", - "dependencies": { - "@babel/code-frame": "^7.8.3", - "@types/json-schema": "^7.0.5", - "chalk": "^4.1.0", - "chokidar": "^3.4.2", - "cosmiconfig": "^6.0.0", - "deepmerge": "^4.2.2", - "fs-extra": "^9.0.0", - "glob": "^7.1.6", - "memfs": "^3.1.2", - "minimatch": "^3.0.4", - "schema-utils": "2.7.0", - "semver": "^7.3.2", - "tapable": "^1.0.0" - }, - "engines": { - "node": ">=10", - "yarn": ">=1.0.0" - }, - "peerDependencies": { - "eslint": ">= 6", - "typescript": ">= 2.7", - "vue-template-compiler": "*", - "webpack": ">= 4" - }, - "peerDependenciesMeta": { - "eslint": { - "optional": true - }, - "vue-template-compiler": { - "optional": true - } - } - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "peer": true, - "dependencies": { - "fast-deep-equal": "^3.1.1", - "fast-json-stable-stringify": "^2.0.0", - "json-schema-traverse": "^0.4.1", - "uri-js": "^4.2.2" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/epoberezkin" - } - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": { - "version": "3.5.2", - "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", - "peerDependencies": { - "ajv": "^6.9.1" - } - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/cosmiconfig": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz", - "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==", - "dependencies": { - "@types/parse-json": "^4.0.0", - "import-fresh": "^3.1.0", - "parse-json": "^5.0.0", - "path-type": "^4.0.0", - "yaml": "^1.7.2" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": { - "version": "0.4.1", - "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": { - "version": "2.7.0", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz", - "integrity": "sha512-0ilKFI6QQF5nxDZLFn2dMjvc4hjg/Wkg7rHd3jK6/A4a1Hl9VFdQWvgB1UMGoU94pad1P/8N7fMcEnLnSiju8A==", - "dependencies": { - "@types/json-schema": "^7.0.4", - "ajv": "^6.12.2", - "ajv-keywords": "^3.4.1" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/fork-ts-checker-webpack-plugin/node_modules/tapable": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz", - "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==", - "engines": { - "node": ">=6" - } - }, "node_modules/form-data": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.5.1.tgz", @@ -9242,19 +11753,21 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz", "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/fraction.js": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", - "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz", + "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==", + "license": "MIT", "engines": { "node": "*" }, "funding": { - "type": "patreon", + "type": "github", "url": "https://github.com/sponsors/rawify" } }, @@ -9262,6 +11775,7 @@ "version": "0.5.2", "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -9311,15 +11825,11 @@ "node": ">=10" } }, - "node_modules/fs-monkey": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.5.tgz", - "integrity": "sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==" - }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", - "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==" + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true }, "node_modules/fsevents": { "version": "2.3.3", @@ -9338,6 +11848,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -9359,18 +11870,11 @@ "node": ">=6.9.0" } }, - "node_modules/get-caller-file": { - "version": "2.0.5", - "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz", - "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", - "engines": { - "node": "6.* || 8.* || >= 10.*" - } - }, "node_modules/get-intrinsic": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", @@ -9399,6 +11903,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", "dependencies": { "dunder-proto": "^1.0.1", "es-object-atoms": "^1.0.0" @@ -9433,12 +11938,14 @@ "node_modules/github-slugger": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.5.0.tgz", - "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==" + "integrity": "sha512-wIh+gKBI9Nshz2o46B0B3f5k/W+WI9ZAv6y5Dn5WJ5SK1t0TnDimB4WE5rmTD05ZAIn8HALCZVmCsvj0w0v0lw==", + "license": "ISC" }, "node_modules/glob": { "version": "7.2.3", "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", @@ -9465,6 +11972,22 @@ "node": ">= 6" } }, + "node_modules/glob-to-regex.js": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/glob-to-regex.js/-/glob-to-regex.js-1.2.0.tgz", + "integrity": "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, "node_modules/glob-to-regexp": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz", @@ -9482,53 +12005,11 @@ "node": ">=4" } }, - "node_modules/global-modules": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz", - "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==", - "dependencies": { - "global-prefix": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/global-prefix": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz", - "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==", - "dependencies": { - "ini": "^1.3.5", - "kind-of": "^6.0.2", - "which": "^1.3.1" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/global-prefix/node_modules/which": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", - "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==", - "dependencies": { - "isexe": "^2.0.0" - }, - "bin": { - "which": "bin/which" - } - }, - "node_modules/globals": { - "version": "11.12.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz", - "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==", - "engines": { - "node": ">=4" - } - }, "node_modules/globby": { "version": "11.1.0", "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz", "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==", + "license": "MIT", "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", @@ -9548,6 +12029,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -9581,40 +12063,6 @@ "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz", "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==" }, - "node_modules/gray-matter": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-4.0.3.tgz", - "integrity": "sha512-5v6yZd4JK3eMI3FqqCouswVqwugaA9r4dNZB1wwcmrD02QkV5H0y7XBQW8QwQqEaZY1pM9aqORSORhJRdNK44Q==", - "dependencies": { - "js-yaml": "^3.13.1", - "kind-of": "^6.0.2", - "section-matter": "^1.0.0", - "strip-bom-string": "^1.0.0" - }, - "engines": { - "node": ">=6.0" - } - }, - "node_modules/gray-matter/node_modules/argparse": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", - "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", - "dependencies": { - "sprintf-js": "~1.0.2" - } - }, - "node_modules/gray-matter/node_modules/js-yaml": { - "version": "3.14.1", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz", - "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==", - "dependencies": { - "argparse": "^1.0.7", - "esprima": "^4.0.0" - }, - "bin": { - "js-yaml": "bin/js-yaml.js" - } - }, "node_modules/gzip-size": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-6.0.0.tgz", @@ -9632,7 +12080,8 @@ "node_modules/handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", - "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==" + "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==", + "license": "MIT" }, "node_modules/has-flag": { "version": "4.0.0", @@ -9655,6 +12104,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz", "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==", + "license": "MIT", "dependencies": { "es-define-property": "^1.0.0" }, @@ -9666,6 +12116,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -9685,9 +12136,10 @@ } }, "node_modules/hasown": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", - "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "license": "MIT", "dependencies": { "function-bind": "^1.1.2" }, @@ -9941,6 +12393,7 @@ "version": "2.1.6", "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz", "integrity": "sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==", + "license": "MIT", "dependencies": { "inherits": "^2.0.1", "obuf": "^1.0.0", @@ -9951,12 +12404,14 @@ "node_modules/hpack.js/node_modules/isarray": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", - "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==" + "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==", + "license": "MIT" }, "node_modules/hpack.js/node_modules/readable-stream": { "version": "2.3.8", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz", "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==", + "license": "MIT", "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", @@ -9970,31 +12425,18 @@ "node_modules/hpack.js/node_modules/safe-buffer": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", - "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==" + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" }, "node_modules/hpack.js/node_modules/string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "license": "MIT", "dependencies": { "safe-buffer": "~5.1.0" } }, - "node_modules/html-entities": { - "version": "2.6.0", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz", - "integrity": "sha512-kig+rMn/QOVRvr7c86gQ8lWXq+Hkv6CbAH1hLu+RG338StTpE8Z0b44SDVaqVu7HGKf27frdmUYEs9hTUX/cLQ==", - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/mdevils" - }, - { - "type": "patreon", - "url": "https://patreon.com/mdevils" - } - ] - }, "node_modules/html-escaper": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/html-escaper/-/html-escaper-2.0.2.tgz", @@ -10119,6 +12561,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-7.2.0.tgz", "integrity": "sha512-tXgn3QfqPIpGl9o+K5tpcj3/MN4SfLtsx2GWwBC3SSd0tXQGyF3gsSqad8loJgKZGM3ZxbYDd5yhiBIdWpmvLA==", + "license": "MIT", "dependencies": { "camel-case": "^4.1.2", "clean-css": "~5.3.2", @@ -10139,6 +12582,7 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "license": "MIT", "dependencies": { "pascal-case": "^3.1.2", "tslib": "^2.0.3" @@ -10148,6 +12592,7 @@ "version": "10.0.1", "resolved": "https://registry.npmjs.org/commander/-/commander-10.0.1.tgz", "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==", + "license": "MIT", "engines": { "node": ">=14" } @@ -10156,6 +12601,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "license": "MIT", "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -10165,6 +12611,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "license": "MIT", "dependencies": { "tslib": "^2.0.3" } @@ -10173,6 +12620,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "license": "MIT", "dependencies": { "lower-case": "^2.0.2", "tslib": "^2.0.3" @@ -10182,6 +12630,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "license": "MIT", "dependencies": { "dot-case": "^3.0.4", "tslib": "^2.0.3" @@ -10191,6 +12640,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "license": "MIT", "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -10339,6 +12789,7 @@ "url": "https://github.com/sponsors/fb55" } ], + "license": "MIT", "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.3", @@ -10354,32 +12805,40 @@ "node_modules/http-deceiver": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz", - "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==" + "integrity": "sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==", + "license": "MIT" }, "node_modules/http-errors": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", - "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", + "license": "MIT", "dependencies": { - "depd": "2.0.0", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "toidentifier": "1.0.1" + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" }, "engines": { "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/http-parser-js": { "version": "0.5.10", "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz", - "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==" + "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==", + "license": "MIT" }, "node_modules/http-proxy": { "version": "1.18.1", "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "license": "MIT", "dependencies": { "eventemitter3": "^4.0.0", "follow-redirects": "^1.0.0", @@ -10390,9 +12849,10 @@ } }, "node_modules/http-proxy-middleware": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz", - "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==", + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.10.tgz", + "integrity": "sha512-RKzRWNPxUZqbuk3BC5mGVJbBnWgr+diEnjJexIOytFbBzDy88Fbh/YvBr3DsNrl1jYAfjWfpATEv0NO35FDuPQ==", + "license": "MIT", "dependencies": { "@types/http-proxy": "^1.17.8", "http-proxy": "^1.18.1", @@ -10416,6 +12876,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-3.0.0.tgz", "integrity": "sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA==", + "license": "MIT", "engines": { "node": ">=10" }, @@ -10488,10 +12949,20 @@ "node": ">=12" } }, + "node_modules/hyperdyperid": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz", + "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==", + "license": "MIT", + "engines": { + "node": ">=10.18" + } + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "license": "MIT", "dependencies": { "safer-buffer": ">= 2.1.2 < 3" }, @@ -10503,6 +12974,7 @@ "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "license": "ISC", "engines": { "node": "^10 || ^12 || >= 14" }, @@ -10531,9 +13003,10 @@ ] }, "node_modules/ignore": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", - "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==", + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", + "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==", + "license": "MIT", "engines": { "node": ">= 4" } @@ -10551,36 +13024,26 @@ } }, "node_modules/image-size": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/image-size/-/image-size-1.0.2.tgz", - "integrity": "sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==", - "dependencies": { - "queue": "6.0.2" - }, + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-2.0.2.tgz", + "integrity": "sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==", + "license": "MIT", "bin": { "image-size": "bin/image-size.js" }, "engines": { - "node": ">=14.0.0" + "node": ">=16.x" } }, "node_modules/imgix-url-builder": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.3.tgz", - "integrity": "sha512-8Oc2Cn4+jF06sEfJcVPlWYfD2F6RjrwIMbk1xEzux8unoB5LsvFc/GL1BQ47HPaeE12ReX2nMUcjUslGYWLxHA==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/imgix-url-builder/-/imgix-url-builder-0.0.6.tgz", + "integrity": "sha512-lFVbvaE9vMck8qz9j+y6o7vsyc1vZhdqzWu+Wp/nlnOCi9zAErc31QMkZKYUGMNLLzxOO4YIBAUPndTPah8HFg==", + "license": "Apache-2.0", "engines": { "node": ">=12.7.0" } }, - "node_modules/immer": { - "version": "9.0.21", - "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz", - "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/immer" - } - }, "node_modules/immutable": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", @@ -10650,6 +13113,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-4.0.0.tgz", "integrity": "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==", + "license": "MIT", "engines": { "node": ">=8" } @@ -10658,6 +13122,7 @@ "version": "0.2.0-alpha.45", "resolved": "https://registry.npmjs.org/infima/-/infima-0.2.0-alpha.45.tgz", "integrity": "sha512-uyH0zfr1erU1OohLk0fT4Rrb94AOhguWNOcD9uGrSpRvNB+6gZXUoJX5J0NtvzBO10YZ9PgvA4NFgt+fYg8ojw==", + "license": "MIT", "engines": { "node": ">=12" } @@ -10675,6 +13140,7 @@ "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, "dependencies": { "once": "^1.3.0", "wrappy": "1" @@ -10695,14 +13161,6 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.1.1.tgz", "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==" }, - "node_modules/interpret": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", - "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", - "engines": { - "node": ">= 0.10" - } - }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -10712,9 +13170,10 @@ } }, "node_modules/ipaddr.js": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.2.0.tgz", - "integrity": "sha512-Ag3wB2o37wslZS19hZqorUnrnzSkpOVy+IiiDEiTqNubEYpYuHWIf6K4psgN2ZWKExS4xhVCrRVfb/wfW8fWJA==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.5.0.tgz", + "integrity": "sha512-aq+t5NAc+cS6rZQQVWC2x98CPqGtKKTMDd4Gaodv0wShnItdKg/51djkGJ1hqH+Oy0ivDftCbSLCQob8zso01w==", + "license": "MIT", "engines": { "node": ">= 10" } @@ -10774,11 +13233,15 @@ } }, "node_modules/is-core-module": { - "version": "2.13.1", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz", - "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==", + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz", + "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==", + "license": "MIT", "dependencies": { - "hasown": "^2.0.0" + "hasown": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" }, "funding": { "url": "https://github.com/sponsors/ljharb" @@ -10797,6 +13260,7 @@ "version": "2.2.1", "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz", "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==", + "license": "MIT", "bin": { "is-docker": "cli.js" }, @@ -10811,6 +13275,7 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", "integrity": "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -10851,6 +13316,39 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/is-inside-container": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz", + "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==", + "license": "MIT", + "dependencies": { + "is-docker": "^3.0.0" + }, + "bin": { + "is-inside-container": "cli.js" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-inside-container/node_modules/is-docker": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz", + "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==", + "license": "MIT", + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-installed-globally": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.4.0.tgz", @@ -10935,6 +13433,18 @@ "lower-case": "^1.1.0" } }, + "node_modules/is-network-error": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.3.2.tgz", + "integrity": "sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==", + "license": "MIT", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-npm": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-6.0.0.tgz", @@ -10962,14 +13472,6 @@ "node": ">=8" } }, - "node_modules/is-path-cwd": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz", - "integrity": "sha512-w942bTcih8fdJPJmQHFzkS76NEP8Kzzvmw92cXsazb8intwLqPibPPdXf4ANdKV3rYMuuQYGIWtvz9JilB3NFQ==", - "engines": { - "node": ">=6" - } - }, "node_modules/is-path-inside": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", @@ -11016,14 +13518,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-root": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz", - "integrity": "sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==", - "engines": { - "node": ">=6" - } - }, "node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -11075,6 +13569,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==", + "license": "MIT", "dependencies": { "is-docker": "^2.0.0" }, @@ -11130,6 +13625,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-util/-/jest-util-29.7.0.tgz", "integrity": "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==", + "license": "MIT", "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", @@ -11146,6 +13642,7 @@ "version": "29.7.0", "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-29.7.0.tgz", "integrity": "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==", + "license": "MIT", "dependencies": { "@types/node": "*", "jest-util": "^29.7.0", @@ -11160,6 +13657,7 @@ "version": "8.1.1", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz", "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==", + "license": "MIT", "dependencies": { "has-flag": "^4.0.0" }, @@ -11174,6 +13672,7 @@ "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "license": "MIT", "bin": { "jiti": "bin/jiti.js" } @@ -11296,41 +13795,304 @@ "node": ">=6" } }, - "node_modules/latest-version": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz", - "integrity": "sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==", - "dependencies": { - "package-json": "^8.1.0" - }, + "node_modules/latest-version": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-7.0.0.tgz", + "integrity": "sha512-KvNT4XqAMzdcL6ka6Tl3i2lYeFDgXNCuIX+xNx6ZMVR1dFq+idXd9FLKNMOIx0t9mJ9/HudyX4oZWXZQ0UJHeg==", + "dependencies": { + "package-json": "^8.1.0" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/launch-editor": { + "version": "2.14.1", + "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.14.1.tgz", + "integrity": "sha512-QWBrQsMpH7gPr965dsKD/3cKWiNoTjpATQf++Xq63N6sKRGMwlVXz41O1IZTMfZQgBctD/K5Zt06+/I6pP6+HA==", + "license": "MIT", + "dependencies": { + "picocolors": "^1.1.1", + "shell-quote": "^1.8.4" + } + }, + "node_modules/leven": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", + "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==", + "engines": { + "node": ">=6" + } + }, + "node_modules/lightningcss": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.33.0.tgz", + "integrity": "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==", + "license": "MPL-2.0", + "dependencies": { + "detect-libc": "^2.0.3" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + }, + "optionalDependencies": { + "lightningcss-android-arm64": "1.33.0", + "lightningcss-darwin-arm64": "1.33.0", + "lightningcss-darwin-x64": "1.33.0", + "lightningcss-freebsd-x64": "1.33.0", + "lightningcss-linux-arm-gnueabihf": "1.33.0", + "lightningcss-linux-arm64-gnu": "1.33.0", + "lightningcss-linux-arm64-musl": "1.33.0", + "lightningcss-linux-x64-gnu": "1.33.0", + "lightningcss-linux-x64-musl": "1.33.0", + "lightningcss-win32-arm64-msvc": "1.33.0", + "lightningcss-win32-x64-msvc": "1.33.0" + } + }, + "node_modules/lightningcss-android-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.33.0.tgz", + "integrity": "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-arm64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.33.0.tgz", + "integrity": "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-darwin-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.33.0.tgz", + "integrity": "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-freebsd-x64": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.33.0.tgz", + "integrity": "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm-gnueabihf": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.33.0.tgz", + "integrity": "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==", + "cpu": [ + "arm" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.33.0.tgz", + "integrity": "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==", + "cpu": [ + "arm64" + ], + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-arm64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.33.0.tgz", + "integrity": "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==", + "cpu": [ + "arm64" + ], + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-gnu": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.33.0.tgz", + "integrity": "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==", + "cpu": [ + "x64" + ], + "libc": [ + "glibc" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss-linux-x64-musl": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.33.0.tgz", + "integrity": "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==", + "cpu": [ + "x64" + ], + "libc": [ + "musl" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": ">=14.16" + "node": ">= 12.0.0" }, "funding": { - "url": "https://github.com/sponsors/sindresorhus" + "type": "opencollective", + "url": "https://opencollective.com/parcel" } }, - "node_modules/launch-editor": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/launch-editor/-/launch-editor-2.10.0.tgz", - "integrity": "sha512-D7dBRJo/qcGX9xlvt/6wUYzQxjh5G1RvZPgPv8vi4KRU99DVQL/oW7tnVOCCTm2HGeo3C5HvGE5Yrh6UBoZ0vA==", - "dependencies": { - "picocolors": "^1.0.0", - "shell-quote": "^1.8.1" + "node_modules/lightningcss-win32-arm64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.33.0.tgz", + "integrity": "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==", + "cpu": [ + "arm64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" } }, - "node_modules/leven": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz", - "integrity": "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==", + "node_modules/lightningcss-win32-x64-msvc": { + "version": "1.33.0", + "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.33.0.tgz", + "integrity": "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==", + "cpu": [ + "x64" + ], + "license": "MPL-2.0", + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": ">=6" + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" } }, "node_modules/lilconfig": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "license": "MIT", "engines": { "node": ">=14" }, @@ -11368,6 +14130,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, "dependencies": { "p-locate": "^5.0.0" }, @@ -11386,17 +14149,20 @@ "node_modules/lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", - "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==" + "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==", + "license": "MIT" }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", - "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==" + "integrity": "sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==", + "license": "MIT" }, "node_modules/lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", - "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==" + "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==", + "license": "MIT" }, "node_modules/log-symbols": { "version": "4.1.0", @@ -11463,6 +14229,16 @@ "yallist": "^3.0.2" } }, + "node_modules/magic-string": { + "version": "0.30.21", + "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz", + "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, "node_modules/make-dir": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz", @@ -11487,13 +14263,6 @@ "semver": "bin/semver.js" } }, - "node_modules/make-error": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", - "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "dev": true, - "license": "ISC" - }, "node_modules/markdown-extensions": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/markdown-extensions/-/markdown-extensions-2.0.0.tgz", @@ -11518,6 +14287,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -11912,25 +14682,42 @@ "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", - "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==" + "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==", + "license": "CC0-1.0" }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/memfs": { - "version": "3.5.3", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.3.tgz", - "integrity": "sha512-UERzLsxzllchadvbPs5aolHh65ISpKpM+ccLbOJ8/vvpBKmAWf+la7dXFy7Mr0ySHbdHrFv5kGFCUHHe6GFEmw==", - "dependencies": { - "fs-monkey": "^1.0.4" + "version": "4.67.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.67.0.tgz", + "integrity": "sha512-yuwPWDAs2kfwpQFuFNQI2OkiJ4ZqkGvSFq2jbgC9pFPfgh1N1lPxJaBj5rHp9R1wfJlSzUQkFnSw6WYGPwBbRg==", + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-core": "4.67.0", + "@jsonjoy.com/fs-fsa": "4.67.0", + "@jsonjoy.com/fs-node": "4.67.0", + "@jsonjoy.com/fs-node-builtins": "4.67.0", + "@jsonjoy.com/fs-node-to-fsa": "4.67.0", + "@jsonjoy.com/fs-node-utils": "4.67.0", + "@jsonjoy.com/fs-print": "4.67.0", + "@jsonjoy.com/fs-snapshot": "4.67.0", + "@jsonjoy.com/json-pack": "^1.11.0", + "@jsonjoy.com/util": "^1.9.0", + "glob-to-regex.js": "^1.0.1", + "thingies": "^2.5.0", + "tree-dump": "^1.0.3", + "tslib": "^2.0.0" }, - "engines": { - "node": ">= 4.0.0" + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" } }, "node_modules/memory-cache": { @@ -11942,6 +14729,7 @@ "version": "1.0.3", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz", "integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==", + "license": "MIT", "funding": { "url": "https://github.com/sponsors/sindresorhus" } @@ -11963,6 +14751,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", "integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -13654,6 +16443,7 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "license": "MIT", "bin": { "mime": "cli.js" }, @@ -13697,9 +16487,10 @@ } }, "node_modules/mini-css-extract-plugin": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.9.2.tgz", - "integrity": "sha512-GJuACcS//jtq4kCtd5ii/M0SZf7OZRH+BxdqXZHaJfb8TJiVl+NgQRPwiYt2EuqeSkNydn/7vP+bcE27C5mb9w==", + "version": "2.10.2", + "resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-2.10.2.tgz", + "integrity": "sha512-AOSS0IdEB95ayVkxn5oGzNQwqAi2J0Jb/kKm43t7H73s8+f5873g0yuj0PNvK4dO75mu5DHg4nlgp4k6Kga8eg==", + "license": "MIT", "dependencies": { "schema-utils": "^4.0.0", "tapable": "^2.2.1" @@ -13718,12 +16509,14 @@ "node_modules/minimalistic-assert": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz", - "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==" + "integrity": "sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==", + "license": "ISC" }, "node_modules/minimatch": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", - "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz", + "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==", + "license": "ISC", "dependencies": { "brace-expansion": "^1.1.7" }, @@ -13759,14 +16552,16 @@ } }, "node_modules/ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==" + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" }, "node_modules/multicast-dns": { "version": "7.2.5", "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-7.2.5.tgz", "integrity": "sha512-2eznPJP8z2BFLX50tf0LuODrpINqP1RVIm/CObbTcBRITQgmC/TjcREF1NeTBzIcR5XO/ukWo+YHOjBbFwIupg==", + "license": "MIT", "dependencies": { "dns-packet": "^5.2.2", "thunky": "^1.0.2" @@ -13776,15 +16571,16 @@ } }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.17", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.17.tgz", + "integrity": "sha512-xQLf0A3HOMlgHq0n247/LRuAOYmB7dXJ/DvAxGvsSBij45XtBSmQycu+F8ODbHwns/XyFZagyL1+J0Offw1E0g==", "funding": [ { "type": "github", "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -13796,6 +16592,7 @@ "version": "0.6.4", "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.4.tgz", "integrity": "sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -13813,6 +16610,13 @@ "lower-case": "^1.1.1" } }, + "node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "license": "MIT", + "optional": true + }, "node_modules/node-emoji": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-2.1.3.tgz", @@ -13858,19 +16662,15 @@ } } }, - "node_modules/node-forge": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", - "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", + "node_modules/node-releases": { + "version": "2.0.52", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.52.tgz", + "integrity": "sha512-MRlTqhAfoMx/4mhEbPo3Hi02g9LJZaJkka69V6h67Cb1gjrAG0jsTE4CZX1eptNx+VCAwJmfpnDIF4P0Nh1A7A==", + "license": "MIT", "engines": { - "node": ">= 6.13.0" + "node": ">=18" } }, - "node_modules/node-releases": { - "version": "2.0.19", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", - "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==" - }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -13879,14 +16679,6 @@ "node": ">=0.10.0" } }, - "node_modules/normalize-range": { - "version": "0.1.2", - "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz", - "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/normalize-url": { "version": "4.5.1", "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-4.5.1.tgz", @@ -13909,7 +16701,8 @@ "node_modules/nprogress": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz", - "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==" + "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==", + "license": "MIT" }, "node_modules/nth-check": { "version": "2.1.1", @@ -13926,6 +16719,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/null-loader/-/null-loader-4.0.1.tgz", "integrity": "sha512-pxqVbi4U6N26lq+LmgIbB5XATP0VdZKOG25DhHi8btMmJJefGArFyDg1yc4U3hWCJbMqSrw0qyrz1UQX+qYXqg==", + "license": "MIT", "dependencies": { "loader-utils": "^2.0.0", "schema-utils": "^3.0.0" @@ -13942,10 +16736,10 @@ } }, "node_modules/null-loader/node_modules/ajv": { - "version": "6.12.6", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", - "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "peer": true, + "version": "6.15.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.15.0.tgz", + "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==", + "license": "MIT", "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -13961,6 +16755,7 @@ "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "license": "MIT", "peerDependencies": { "ajv": "^6.9.1" } @@ -13968,12 +16763,14 @@ "node_modules/null-loader/node_modules/json-schema-traverse": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", - "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "license": "MIT" }, "node_modules/null-loader/node_modules/schema-utils": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.3.0.tgz", "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==", + "license": "MIT", "dependencies": { "@types/json-schema": "^7.0.8", "ajv": "^6.12.5", @@ -13999,6 +16796,7 @@ "version": "1.13.4", "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -14010,6 +16808,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz", "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==", + "license": "MIT", "engines": { "node": ">= 0.4" } @@ -14018,6 +16817,7 @@ "version": "4.1.7", "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz", "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==", + "license": "MIT", "dependencies": { "call-bind": "^1.0.8", "call-bound": "^1.0.3", @@ -14036,12 +16836,28 @@ "node_modules/obuf": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", - "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" + "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==", + "license": "MIT" + }, + "node_modules/obug": { + "version": "2.1.4", + "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.4.tgz", + "integrity": "sha512-4a+OsYv9UktOJKE+l1A4OufDgdRF9PifWj+tJnHURo/P+WOxpG4GzUFL9qCalmWauao6ogiG+QvnCovwPoyAWA==", + "dev": true, + "funding": [ + "https://github.com/sponsors/sxzz", + "https://opencollective.com/debug" + ], + "license": "MIT", + "engines": { + "node": ">=12.20.0" + } }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==", + "license": "MIT", "dependencies": { "ee-first": "1.1.1" }, @@ -14050,9 +16866,10 @@ } }, "node_modules/on-headers": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz", - "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.1.0.tgz", + "integrity": "sha512-737ZY3yNnXy37FHkQxPzt4UZ2UWPWiCZWLvFZ4fu5cueciegX0zGPnrlY6bwRg4FdQOe9YU8MkmJwGhoMybl8A==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -14083,6 +16900,7 @@ "version": "8.4.2", "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==", + "license": "MIT", "dependencies": { "define-lazy-prop": "^2.0.0", "is-docker": "^2.1.1", @@ -14134,10 +16952,20 @@ "node": ">=6" } }, + "node_modules/p-finally": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz", + "integrity": "sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==", + "license": "MIT", + "engines": { + "node": ">=4" + } + }, "node_modules/p-limit": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, "dependencies": { "yocto-queue": "^0.1.0" }, @@ -14152,6 +16980,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, "dependencies": { "p-limit": "^3.0.2" }, @@ -14166,6 +16995,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz", "integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==", + "license": "MIT", "dependencies": { "aggregate-error": "^3.0.0" }, @@ -14176,24 +17006,49 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/p-queue": { + "version": "6.6.2", + "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz", + "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==", + "license": "MIT", + "dependencies": { + "eventemitter3": "^4.0.4", + "p-timeout": "^3.2.0" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/p-retry": { - "version": "4.6.2", - "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-4.6.2.tgz", - "integrity": "sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==", + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-6.2.1.tgz", + "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==", + "license": "MIT", "dependencies": { - "@types/retry": "0.12.0", + "@types/retry": "0.12.2", + "is-network-error": "^1.0.0", "retry": "^0.13.1" }, "engines": { - "node": ">=8" + "node": ">=16.17" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/p-try": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz", - "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", + "node_modules/p-timeout": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz", + "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==", + "license": "MIT", + "dependencies": { + "p-finally": "^1.0.0" + }, "engines": { - "node": ">=6" + "node": ">=8" } }, "node_modules/package-json": { @@ -14439,7 +17294,8 @@ "node_modules/parse-numeric-range": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz", - "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==" + "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==", + "license": "ISC" }, "node_modules/parse5": { "version": "7.1.2", @@ -14456,6 +17312,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-7.1.0.tgz", "integrity": "sha512-ruw5xyKs6lrpo9x9rCZqZZnIUntICjQAd0Wsmp396Ul9lN/h+ifgVV1x1gZHi8euej6wTfpqX8j+BFQxF0NS/g==", + "license": "MIT", "dependencies": { "domhandler": "^5.0.3", "parse5": "^7.0.0" @@ -14468,6 +17325,7 @@ "version": "1.3.3", "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -14493,6 +17351,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, "engines": { "node": ">=8" } @@ -14501,6 +17360,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -14508,7 +17368,8 @@ "node_modules/path-is-inside": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz", - "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==" + "integrity": "sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==", + "license": "(WTFPL OR MIT)" }, "node_modules/path-key": { "version": "3.1.1", @@ -14521,7 +17382,8 @@ "node_modules/path-parse": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", - "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==" + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "license": "MIT" }, "node_modules/path-to-regexp": { "version": "1.8.0", @@ -14539,6 +17401,13 @@ "node": ">=8" } }, + "node_modules/pathe": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz", + "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==", + "dev": true, + "license": "MIT" + }, "node_modules/periscopic": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz", @@ -14569,6 +17438,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz", "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==", + "license": "MIT", "dependencies": { "find-up": "^6.3.0" }, @@ -14583,6 +17453,7 @@ "version": "6.3.0", "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz", "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==", + "license": "MIT", "dependencies": { "locate-path": "^7.1.0", "path-exists": "^5.0.0" @@ -14598,6 +17469,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz", "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==", + "license": "MIT", "dependencies": { "p-locate": "^6.0.0" }, @@ -14612,6 +17484,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz", "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==", + "license": "MIT", "dependencies": { "yocto-queue": "^1.0.0" }, @@ -14626,6 +17499,7 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz", "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==", + "license": "MIT", "dependencies": { "p-limit": "^4.0.0" }, @@ -14640,14 +17514,16 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz", "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==", + "license": "MIT", "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, "node_modules/pkg-dir/node_modules/yocto-queue": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.1.tgz", - "integrity": "sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.2.2.tgz", + "integrity": "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ==", + "license": "MIT", "engines": { "node": ">=12.20" }, @@ -14655,77 +17531,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/pkg-up": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/pkg-up/-/pkg-up-3.1.0.tgz", - "integrity": "sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==", - "dependencies": { - "find-up": "^3.0.0" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/pkg-up/node_modules/find-up": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/find-up/-/find-up-3.0.0.tgz", - "integrity": "sha512-1yD6RmLI1XBfxugvORwlck6f75tYL+iR0jqwsOrOxMZyGYqUuDhJ0l4AXdO1iX/FTs9cBAMEk1gWSEx1kSbylg==", - "dependencies": { - "locate-path": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/pkg-up/node_modules/locate-path": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-3.0.0.tgz", - "integrity": "sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==", - "dependencies": { - "p-locate": "^3.0.0", - "path-exists": "^3.0.0" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/pkg-up/node_modules/p-limit": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz", - "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==", - "dependencies": { - "p-try": "^2.0.0" - }, - "engines": { - "node": ">=6" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, - "node_modules/pkg-up/node_modules/p-locate": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-3.0.0.tgz", - "integrity": "sha512-x+12w/To+4GFfgJhBEpiDcLozRJGegY+Ei7/z0tSLkMmxGZNybVMSfWj9aJn8Z5Fc7dBUNJOOVgPv2H7IwulSQ==", + "node_modules/pkijs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.4.0.tgz", + "integrity": "sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==", + "license": "BSD-3-Clause", "dependencies": { - "p-limit": "^2.0.0" + "@noble/hashes": "1.4.0", + "asn1js": "^3.0.6", + "bytestreamjs": "^2.0.1", + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.3", + "tslib": "^2.8.1" }, "engines": { - "node": ">=6" - } - }, - "node_modules/pkg-up/node_modules/path-exists": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz", - "integrity": "sha512-bpC7GYwiDYQ4wYLe+FA8lhRjhQCMcQGuSgGGqDkg/QerRWw9CmGRT0iSOVRSZJ29NMLZgIzqaljJ63oaL4NIJQ==", - "engines": { - "node": ">=4" + "node": ">=16.0.0" } }, "node_modules/postcss": { - "version": "8.5.3", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", - "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", + "version": "8.5.25", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.25.tgz", + "integrity": "sha512-DTPx3RWSSnWyzLxQnlH0rJP+EW5ekl16ZU4/psbIhA0e53kJfdgaN5vKM+xP7yJtXVu+nfdVFmlgFDEKAe4Pyw==", "funding": [ { "type": "opencollective", @@ -14740,9 +17566,9 @@ "url": "https://github.com/sponsors/ai" } ], - "peer": true, + "license": "MIT", "dependencies": { - "nanoid": "^3.3.8", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -14764,6 +17590,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -14775,9 +17602,10 @@ } }, "node_modules/postcss-attribute-case-insensitive/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -14790,6 +17618,7 @@ "version": "9.0.1", "resolved": "https://registry.npmjs.org/postcss-calc/-/postcss-calc-9.0.1.tgz", "integrity": "sha512-TipgjGyzP5QzEhsOZUaIkeO5mKeMFpebWzRogWG/ysonUlnHcq5aJe0jOjpfzUU8PeSaBQnrE8ehR0QA5vs8PQ==", + "license": "MIT", "dependencies": { "postcss-selector-parser": "^6.0.11", "postcss-value-parser": "^4.2.0" @@ -14805,6 +17634,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/postcss-clamp/-/postcss-clamp-4.1.0.tgz", "integrity": "sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -14816,9 +17646,9 @@ } }, "node_modules/postcss-color-functional-notation": { - "version": "7.0.8", - "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.8.tgz", - "integrity": "sha512-S/TpMKVKofNvsxfau/+bw+IA6cSfB6/kmzFj5szUofHOVnFFMB2WwK+Zu07BeMD8T0n+ZnTO5uXiMvAKe2dPkA==", + "version": "7.0.12", + "resolved": "https://registry.npmjs.org/postcss-color-functional-notation/-/postcss-color-functional-notation-7.0.12.tgz", + "integrity": "sha512-TLCW9fN5kvO/u38/uesdpbx3e8AkTYhMvDZYa9JpmImWuTE99bDQ7GU7hdOADIZsiI9/zuxfAJxny/khknp1Zw==", "funding": [ { "type": "github", @@ -14829,11 +17659,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -14857,6 +17688,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" @@ -14882,6 +17714,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" @@ -14897,6 +17730,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-6.1.0.tgz", "integrity": "sha512-x9yX7DOxeMAR+BgGVnNSAxmAj98NX/YxEMNFP+SDCEeNLb2r3i6Hh1ksMsnW8Ub5SLCpbescQqn9YEbE9554Sw==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "caniuse-api": "^3.0.0", @@ -14914,6 +17748,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-6.1.0.tgz", "integrity": "sha512-zx8IwP/ts9WvUM6NkVSkiU902QZL1bwPhaVaLynPtCsOTqp+ZKbNi+s6XJg3rfqpKGA/oc7Oxk5t8pOQJcwl/w==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "postcss-value-parser": "^4.2.0" @@ -14926,9 +17761,9 @@ } }, "node_modules/postcss-custom-media": { - "version": "11.0.5", - "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-11.0.5.tgz", - "integrity": "sha512-SQHhayVNgDvSAdX9NQ/ygcDQGEY+aSF4b/96z7QUX6mqL5yl/JgG/DywcF6fW9XbnCRE+aVYk+9/nqGuzOPWeQ==", + "version": "11.0.6", + "resolved": "https://registry.npmjs.org/postcss-custom-media/-/postcss-custom-media-11.0.6.tgz", + "integrity": "sha512-C4lD4b7mUIw+RZhtY7qUbf4eADmb7Ey8BFA2px9jUbwg7pjTZDl4KY4bvlUV+/vXQvzQRfiGEVJyAbtOsCMInw==", "funding": [ { "type": "github", @@ -14939,11 +17774,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { - "@csstools/cascade-layer-name-parser": "^2.0.4", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/media-query-list-parser": "^4.0.2" + "@csstools/cascade-layer-name-parser": "^2.0.5", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/media-query-list-parser": "^4.0.3" }, "engines": { "node": ">=18" @@ -14953,9 +17789,9 @@ } }, "node_modules/postcss-custom-properties": { - "version": "14.0.4", - "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.4.tgz", - "integrity": "sha512-QnW8FCCK6q+4ierwjnmXF9Y9KF8q0JkbgVfvQEMa93x1GT8FvOiUevWCN2YLaOWyByeDX8S6VFbZEeWoAoXs2A==", + "version": "14.0.6", + "resolved": "https://registry.npmjs.org/postcss-custom-properties/-/postcss-custom-properties-14.0.6.tgz", + "integrity": "sha512-fTYSp3xuk4BUeVhxCSJdIPhDLpJfNakZKoiTDx7yRGCdlZrSJR7mWKVOBS4sBF+5poPQFMj2YdXx1VHItBGihQ==", "funding": [ { "type": "github", @@ -14966,10 +17802,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { - "@csstools/cascade-layer-name-parser": "^2.0.4", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", + "@csstools/cascade-layer-name-parser": "^2.0.5", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, @@ -14981,9 +17818,9 @@ } }, "node_modules/postcss-custom-selectors": { - "version": "8.0.4", - "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-8.0.4.tgz", - "integrity": "sha512-ASOXqNvDCE0dAJ/5qixxPeL1aOVGHGW2JwSy7HyjWNbnWTQCl+fDc968HY1jCmZI0+BaYT5CxsOiUhavpG/7eg==", + "version": "8.0.5", + "resolved": "https://registry.npmjs.org/postcss-custom-selectors/-/postcss-custom-selectors-8.0.5.tgz", + "integrity": "sha512-9PGmckHQswiB2usSO6XMSswO2yFWVoCAuih1yl9FVcwkscLjRKjwsjM3t+NIWpSU2Jx3eOiK2+t4vVTQaoCHHg==", "funding": [ { "type": "github", @@ -14994,10 +17831,11 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { - "@csstools/cascade-layer-name-parser": "^2.0.4", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", + "@csstools/cascade-layer-name-parser": "^2.0.5", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", "postcss-selector-parser": "^7.0.0" }, "engines": { @@ -15008,9 +17846,10 @@ } }, "node_modules/postcss-custom-selectors/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15033,6 +17872,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -15044,9 +17884,10 @@ } }, "node_modules/postcss-dir-pseudo-class/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15059,6 +17900,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-6.0.2.tgz", "integrity": "sha512-65w/uIqhSBBfQmYnG92FO1mWZjJ4GL5b8atm5Yw2UgrwD7HiNiSSNwJor1eCFGzUgYnN/iIknhNRVqjrrpuglw==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -15070,6 +17912,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-6.0.3.tgz", "integrity": "sha512-+JA0DCvc5XvFAxwx6f/e68gQu/7Z9ud584VLmcgto28eB8FqSFZwtrLwB5Kcp70eIoWP/HXqz4wpo8rD8gpsTw==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -15081,6 +17924,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-6.0.3.tgz", "integrity": "sha512-znyno9cHKQsK6PtxL5D19Fj9uwSzC2mB74cpT66fhgOadEUPyXFkbgwm5tvc3bt3NAy8ltE5MrghxovZRVnOjQ==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -15092,6 +17936,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-6.0.2.tgz", "integrity": "sha512-j87xzI4LUggC5zND7KdjsI25APtyMuynXZSujByMaav2roV6OZX+8AaCUcZSWqckZpjAjRyFDdpqybgjFO0HJQ==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -15103,6 +17948,7 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-6.0.5.tgz", "integrity": "sha512-wHalBlRHkaNnNwfC8z+ppX57VhvS+HWgjW508esjdaEYr3Mx7Gnn2xA4R/CKf5+Z9S5qsqC+Uzh4ueENWwCVUA==", + "license": "MIT", "dependencies": { "postcss-selector-parser": "^6.0.16" }, @@ -15114,9 +17960,9 @@ } }, "node_modules/postcss-double-position-gradients": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.0.tgz", - "integrity": "sha512-JkIGah3RVbdSEIrcobqj4Gzq0h53GG4uqDPsho88SgY84WnpkTpI0k50MFK/sX7XqVisZ6OqUfFnoUO6m1WWdg==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/postcss-double-position-gradients/-/postcss-double-position-gradients-6.0.4.tgz", + "integrity": "sha512-m6IKmxo7FxSP5nF2l63QbCC3r+bWpFUWmZXZf096WxG0m7Vl1Q1+ruFOhpdDRmKrRS+S3Jtk+TVk/7z0+BVK6g==", "funding": [ { "type": "github", @@ -15127,8 +17973,9 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" }, @@ -15153,6 +18000,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -15164,9 +18012,10 @@ } }, "node_modules/postcss-focus-visible/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15189,6 +18038,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -15200,9 +18050,10 @@ } }, "node_modules/postcss-focus-within/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15215,6 +18066,7 @@ "version": "5.0.0", "resolved": "https://registry.npmjs.org/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz", "integrity": "sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==", + "license": "MIT", "peerDependencies": { "postcss": "^8.1.0" } @@ -15233,6 +18085,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -15254,6 +18107,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "@csstools/utilities": "^2.0.0", "postcss-value-parser": "^4.2.0" @@ -15266,9 +18120,9 @@ } }, "node_modules/postcss-lab-function": { - "version": "7.0.8", - "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.8.tgz", - "integrity": "sha512-plV21I86Hg9q8omNz13G9fhPtLopIWH06bt/Cb5cs1XnaGU2kUtEitvVd4vtQb/VqCdNUHK5swKn3QFmMRbpDg==", + "version": "7.0.12", + "resolved": "https://registry.npmjs.org/postcss-lab-function/-/postcss-lab-function-7.0.12.tgz", + "integrity": "sha512-tUcyRk1ZTPec3OuKFsqtRzW2Go5lehW29XA21lZ65XmzQkz43VY2tyWEC202F7W3mILOjw0voOiuxRGTsN+J9w==", "funding": [ { "type": "github", @@ -15279,11 +18133,12 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/css-color-parser": "^3.0.8", - "@csstools/css-parser-algorithms": "^3.0.4", - "@csstools/css-tokenizer": "^3.0.3", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", + "@csstools/css-color-parser": "^3.1.0", + "@csstools/css-parser-algorithms": "^3.0.5", + "@csstools/css-tokenizer": "^3.0.4", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", "@csstools/utilities": "^2.0.0" }, "engines": { @@ -15297,6 +18152,7 @@ "version": "7.3.4", "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-7.3.4.tgz", "integrity": "sha512-iW5WTTBSC5BfsBJ9daFMPVrLT36MrNiC6fqOZTTaHjBNX6Pfd5p+hSBqe/fEeNd7pc13QiAyGt7VdGMw4eRC4A==", + "license": "MIT", "dependencies": { "cosmiconfig": "^8.3.5", "jiti": "^1.20.0", @@ -15328,6 +18184,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15342,6 +18199,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-6.0.3.tgz", "integrity": "sha512-1oIoAsODUs6IHQZkLQGO15uGEbK3EAl5wi9SS8hs45VgsxQfMnxvt+L+zIr7ifZFIH14cfAeVe2uCTa+SPRa3g==", + "license": "MIT", "dependencies": { "cssnano-utils": "^4.0.2", "postcss-value-parser": "^4.2.0" @@ -15357,6 +18215,7 @@ "version": "6.0.5", "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-6.0.5.tgz", "integrity": "sha512-5LOiordeTfi64QhICp07nzzuTDjNSO8g5Ksdibt44d+uvIIAE1oZdRn8y/W5ZtYgRH/lnLDlvi9F8btZcVzu3w==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0", "stylehacks": "^6.1.1" @@ -15372,6 +18231,7 @@ "version": "6.1.1", "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-6.1.1.tgz", "integrity": "sha512-KOdWF0gju31AQPZiD+2Ar9Qjowz1LTChSjFFbS+e2sFgc4uHOp3ZvVX4sNeTlk0w2O31ecFGgrFzhO0RSWbWwQ==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "caniuse-api": "^3.0.0", @@ -15389,6 +18249,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-minify-font-values/-/postcss-minify-font-values-6.1.0.tgz", "integrity": "sha512-gklfI/n+9rTh8nYaSJXlCo3nOKqMNkxuGpTn/Qm0gstL3ywTr9/WRKznE+oy6fvfolH6dF+QM4nCo8yPLdvGJg==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15403,6 +18264,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-6.0.3.tgz", "integrity": "sha512-4KXAHrYlzF0Rr7uc4VrfwDJ2ajrtNEpNEuLxFgwkhFZ56/7gaE4Nr49nLsQDZyUe+ds+kEhf+YAUolJiYXF8+Q==", + "license": "MIT", "dependencies": { "colord": "^2.9.3", "cssnano-utils": "^4.0.2", @@ -15419,6 +18281,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-6.1.0.tgz", "integrity": "sha512-bmSKnDtyyE8ujHQK0RQJDIKhQ20Jq1LYiez54WiaOoBtcSuflfK3Nm596LvbtlFcpipMjgClQGyGr7GAs+H1uA==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "cssnano-utils": "^4.0.2", @@ -15435,6 +18298,7 @@ "version": "6.0.4", "resolved": "https://registry.npmjs.org/postcss-minify-selectors/-/postcss-minify-selectors-6.0.4.tgz", "integrity": "sha512-L8dZSwNLgK7pjTto9PzWRoMbnLq5vsZSTu8+j1P/2GB8qdtGQfn+K1uSvFgYvgh83cbyxT5m43ZZhUMTJDSClQ==", + "license": "MIT", "dependencies": { "postcss-selector-parser": "^6.0.16" }, @@ -15449,6 +18313,7 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.1.0.tgz", "integrity": "sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==", + "license": "ISC", "engines": { "node": "^10 || ^12 || >= 14" }, @@ -15460,6 +18325,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.2.0.tgz", "integrity": "sha512-5kcJm/zk+GJDSfw+V/42fJ5fhjL5YbFDl8nVdXkJPLLW+Vf9mTD5Xe0wqIaDnLuL2U6cDNpTr+UQ+v2HWIBhzw==", + "license": "MIT", "dependencies": { "icss-utils": "^5.0.0", "postcss-selector-parser": "^7.0.0", @@ -15473,9 +18339,10 @@ } }, "node_modules/postcss-modules-local-by-default/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15488,6 +18355,7 @@ "version": "3.2.1", "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.2.1.tgz", "integrity": "sha512-m9jZstCVaqGjTAuny8MdgE88scJnCiQSlSrOWcTQgM2t32UBe+MUmFSO5t7VMSfAf/FJKImAxBav8ooCHJXCJA==", + "license": "ISC", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -15499,9 +18367,10 @@ } }, "node_modules/postcss-modules-scope/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15514,6 +18383,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz", "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==", + "license": "ISC", "dependencies": { "icss-utils": "^5.0.0" }, @@ -15525,9 +18395,9 @@ } }, "node_modules/postcss-nesting": { - "version": "13.0.1", - "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.1.tgz", - "integrity": "sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==", + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-13.0.2.tgz", + "integrity": "sha512-1YCI290TX+VP0U/K/aFxzHzQWHWURL+CtHMSbex1lCdpXD1SoR2sYuxDu5aNI9lPoXpKTCggFZiDJbwylU0LEQ==", "funding": [ { "type": "github", @@ -15538,8 +18408,9 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { - "@csstools/selector-resolve-nested": "^3.0.0", + "@csstools/selector-resolve-nested": "^3.1.0", "@csstools/selector-specificity": "^5.0.0", "postcss-selector-parser": "^7.0.0" }, @@ -15551,9 +18422,9 @@ } }, "node_modules/postcss-nesting/node_modules/@csstools/selector-resolve-nested": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.0.0.tgz", - "integrity": "sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-3.1.0.tgz", + "integrity": "sha512-mf1LEW0tJLKfWyvn5KdDrhpxHyuxpbNwTIwOYLIvsTffeyOf85j5oIzfG0yosxDgx/sswlqBnESYUcQH0vgZ0g==", "funding": [ { "type": "github", @@ -15564,6 +18435,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -15585,6 +18457,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "engines": { "node": ">=18" }, @@ -15593,10 +18466,10 @@ } }, "node_modules/postcss-nesting/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", - "peer": true, + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15609,6 +18482,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-6.0.2.tgz", "integrity": "sha512-a8N9czmdnrjPHa3DeFlwqst5eaL5W8jYu3EBbTTkI5FHkfMhFZh1EGbku6jhHhIzTA6tquI2P42NtZ59M/H/kQ==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -15620,6 +18494,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-display-values/-/postcss-normalize-display-values-6.0.2.tgz", "integrity": "sha512-8H04Mxsb82ON/aAkPeq8kcBbAtI5Q2a64X/mnRRfPXBq7XeogoQvReqxEfc0B4WPq1KimjezNC8flUtC3Qz6jg==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15634,6 +18509,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-positions/-/postcss-normalize-positions-6.0.2.tgz", "integrity": "sha512-/JFzI441OAB9O7VnLA+RtSNZvQ0NCFZDOtp6QPFo1iIyawyXg0YI3CYM9HBy1WvwCRHnPep/BvI1+dGPKoXx/Q==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15648,6 +18524,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-repeat-style/-/postcss-normalize-repeat-style-6.0.2.tgz", "integrity": "sha512-YdCgsfHkJ2jEXwR4RR3Tm/iOxSfdRt7jplS6XRh9Js9PyCR/aka/FCb6TuHT2U8gQubbm/mPmF6L7FY9d79VwQ==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15662,6 +18539,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-string/-/postcss-normalize-string-6.0.2.tgz", "integrity": "sha512-vQZIivlxlfqqMp4L9PZsFE4YUkWniziKjQWUtsxUiVsSSPelQydwS8Wwcuw0+83ZjPWNTl02oxlIvXsmmG+CiQ==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15676,6 +18554,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-timing-functions/-/postcss-normalize-timing-functions-6.0.2.tgz", "integrity": "sha512-a+YrtMox4TBtId/AEwbA03VcJgtyW4dGBizPl7e88cTFULYsprgHWTbfyjSLyHeBcK/Q9JhXkt2ZXiwaVHoMzA==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15690,6 +18569,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-normalize-unicode/-/postcss-normalize-unicode-6.1.0.tgz", "integrity": "sha512-QVC5TQHsVj33otj8/JD869Ndr5Xcc/+fwRh4HAsFsAeygQQXm+0PySrKbr/8tkDKzW+EVT3QkqZMfFrGiossDg==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "postcss-value-parser": "^4.2.0" @@ -15705,6 +18585,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-6.0.2.tgz", "integrity": "sha512-kVNcWhCeKAzZ8B4pv/DnrU1wNh458zBNp8dh4y5hhxih5RZQ12QWMuQrDgPRw3LRl8mN9vOVfHl7uhvHYMoXsQ==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15719,6 +18600,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-normalize-whitespace/-/postcss-normalize-whitespace-6.0.2.tgz", "integrity": "sha512-sXZ2Nj1icbJOKmdjXVT9pnyHQKiSAyuNQHSgRCUgThn2388Y9cGVDR+E9J9iAYbSbLHI+UUwLVl1Wzco/zgv0Q==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15743,6 +18625,7 @@ "url": "https://liberapay.com/mrcgrtz" } ], + "license": "MIT", "engines": { "node": ">=18" }, @@ -15754,6 +18637,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-ordered-values/-/postcss-ordered-values-6.0.2.tgz", "integrity": "sha512-VRZSOB+JU32RsEAQrO94QPkClGPKJEL/Z9PCBImXMhIeK5KAYo6slP/hBYlLgrCjFxyqvn5VC81tycFEDBLG1Q==", + "license": "MIT", "dependencies": { "cssnano-utils": "^4.0.2", "postcss-value-parser": "^4.2.0" @@ -15779,6 +18663,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15793,6 +18678,7 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/postcss-page-break/-/postcss-page-break-3.0.4.tgz", "integrity": "sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==", + "license": "MIT", "peerDependencies": { "postcss": "^8" } @@ -15811,6 +18697,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15822,9 +18709,9 @@ } }, "node_modules/postcss-preset-env": { - "version": "10.1.5", - "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-10.1.5.tgz", - "integrity": "sha512-LQybafF/K7H+6fAs4SIkgzkSCixJy0/h0gubDIAP3Ihz+IQBRwsjyvBnAZ3JUHD+A/ITaxVRPDxn//a3Qy4pDw==", + "version": "10.6.1", + "resolved": "https://registry.npmjs.org/postcss-preset-env/-/postcss-preset-env-10.6.1.tgz", + "integrity": "sha512-yrk74d9EvY+W7+lO9Aj1QmjWY9q5NsKjK2V9drkOPZB/X6KZ0B3igKsHUYakb7oYVhnioWypQX3xGuePf89f3g==", "funding": [ { "type": "github", @@ -15835,63 +18722,72 @@ "url": "https://opencollective.com/csstools" } ], - "dependencies": { - "@csstools/postcss-cascade-layers": "^5.0.1", - "@csstools/postcss-color-function": "^4.0.8", - "@csstools/postcss-color-mix-function": "^3.0.8", - "@csstools/postcss-content-alt-text": "^2.0.4", - "@csstools/postcss-exponential-functions": "^2.0.7", + "license": "MIT-0", + "dependencies": { + "@csstools/postcss-alpha-function": "^1.0.1", + "@csstools/postcss-cascade-layers": "^5.0.2", + "@csstools/postcss-color-function": "^4.0.12", + "@csstools/postcss-color-function-display-p3-linear": "^1.0.1", + "@csstools/postcss-color-mix-function": "^3.0.12", + "@csstools/postcss-color-mix-variadic-function-arguments": "^1.0.2", + "@csstools/postcss-content-alt-text": "^2.0.8", + "@csstools/postcss-contrast-color-function": "^2.0.12", + "@csstools/postcss-exponential-functions": "^2.0.9", "@csstools/postcss-font-format-keywords": "^4.0.0", - "@csstools/postcss-gamut-mapping": "^2.0.8", - "@csstools/postcss-gradients-interpolation-method": "^5.0.8", - "@csstools/postcss-hwb-function": "^4.0.8", - "@csstools/postcss-ic-unit": "^4.0.0", + "@csstools/postcss-gamut-mapping": "^2.0.11", + "@csstools/postcss-gradients-interpolation-method": "^5.0.12", + "@csstools/postcss-hwb-function": "^4.0.12", + "@csstools/postcss-ic-unit": "^4.0.4", "@csstools/postcss-initial": "^2.0.1", - "@csstools/postcss-is-pseudo-class": "^5.0.1", - "@csstools/postcss-light-dark-function": "^2.0.7", + "@csstools/postcss-is-pseudo-class": "^5.0.3", + "@csstools/postcss-light-dark-function": "^2.0.11", "@csstools/postcss-logical-float-and-clear": "^3.0.0", "@csstools/postcss-logical-overflow": "^2.0.0", "@csstools/postcss-logical-overscroll-behavior": "^2.0.0", "@csstools/postcss-logical-resize": "^3.0.0", - "@csstools/postcss-logical-viewport-units": "^3.0.3", - "@csstools/postcss-media-minmax": "^2.0.7", - "@csstools/postcss-media-queries-aspect-ratio-number-values": "^3.0.4", + "@csstools/postcss-logical-viewport-units": "^3.0.4", + "@csstools/postcss-media-minmax": "^2.0.9", + "@csstools/postcss-media-queries-aspect-ratio-number-values": "^3.0.5", "@csstools/postcss-nested-calc": "^4.0.0", - "@csstools/postcss-normalize-display-values": "^4.0.0", - "@csstools/postcss-oklab-function": "^4.0.8", - "@csstools/postcss-progressive-custom-properties": "^4.0.0", - "@csstools/postcss-random-function": "^1.0.3", - "@csstools/postcss-relative-color-syntax": "^3.0.8", + "@csstools/postcss-normalize-display-values": "^4.0.1", + "@csstools/postcss-oklab-function": "^4.0.12", + "@csstools/postcss-position-area-property": "^1.0.0", + "@csstools/postcss-progressive-custom-properties": "^4.2.1", + "@csstools/postcss-property-rule-prelude-list": "^1.0.0", + "@csstools/postcss-random-function": "^2.0.1", + "@csstools/postcss-relative-color-syntax": "^3.0.12", "@csstools/postcss-scope-pseudo-class": "^4.0.1", - "@csstools/postcss-sign-functions": "^1.1.2", - "@csstools/postcss-stepped-value-functions": "^4.0.7", - "@csstools/postcss-text-decoration-shorthand": "^4.0.2", - "@csstools/postcss-trigonometric-functions": "^4.0.7", + "@csstools/postcss-sign-functions": "^1.1.4", + "@csstools/postcss-stepped-value-functions": "^4.0.9", + "@csstools/postcss-syntax-descriptor-syntax-production": "^1.0.1", + "@csstools/postcss-system-ui-font-family": "^1.0.0", + "@csstools/postcss-text-decoration-shorthand": "^4.0.3", + "@csstools/postcss-trigonometric-functions": "^4.0.9", "@csstools/postcss-unset-value": "^4.0.0", - "autoprefixer": "^10.4.19", - "browserslist": "^4.24.4", + "autoprefixer": "^10.4.23", + "browserslist": "^4.28.1", "css-blank-pseudo": "^7.0.1", - "css-has-pseudo": "^7.0.2", + "css-has-pseudo": "^7.0.3", "css-prefers-color-scheme": "^10.0.0", - "cssdb": "^8.2.3", + "cssdb": "^8.6.0", "postcss-attribute-case-insensitive": "^7.0.1", "postcss-clamp": "^4.1.0", - "postcss-color-functional-notation": "^7.0.8", + "postcss-color-functional-notation": "^7.0.12", "postcss-color-hex-alpha": "^10.0.0", "postcss-color-rebeccapurple": "^10.0.0", - "postcss-custom-media": "^11.0.5", - "postcss-custom-properties": "^14.0.4", - "postcss-custom-selectors": "^8.0.4", + "postcss-custom-media": "^11.0.6", + "postcss-custom-properties": "^14.0.6", + "postcss-custom-selectors": "^8.0.5", "postcss-dir-pseudo-class": "^9.0.1", - "postcss-double-position-gradients": "^6.0.0", + "postcss-double-position-gradients": "^6.0.4", "postcss-focus-visible": "^10.0.1", "postcss-focus-within": "^9.0.1", "postcss-font-variant": "^5.0.0", "postcss-gap-properties": "^6.0.0", "postcss-image-set-function": "^7.0.0", - "postcss-lab-function": "^7.0.8", + "postcss-lab-function": "^7.0.12", "postcss-logical": "^8.1.0", - "postcss-nesting": "^13.0.1", + "postcss-nesting": "^13.0.2", "postcss-opacity-percentage": "^3.0.0", "postcss-overflow-shorthand": "^6.0.0", "postcss-page-break": "^3.0.4", @@ -15921,6 +18817,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT-0", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -15932,9 +18829,10 @@ } }, "node_modules/postcss-pseudo-class-any-link/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -15947,6 +18845,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-6.0.3.tgz", "integrity": "sha512-G3yCqZDpsNPoQgbDUy3T0E6hqOQ5xigUtBQyrmq3tn2GxlyiL0yyl7H+T8ulQR6kOcHJ9t7/9H4/R2tv8tJbMA==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15961,6 +18860,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-6.1.0.tgz", "integrity": "sha512-RarLgBK/CrL1qZags04oKbVbrrVK2wcxhvta3GCxrZO4zveibqbRPmm2VI8sSgCXwoUHEliRSbOfpR0b/VIoiw==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "caniuse-api": "^3.0.0" @@ -15976,6 +18876,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-reduce-transforms/-/postcss-reduce-transforms-6.0.2.tgz", "integrity": "sha512-sB+Ya++3Xj1WaT9+5LOOdirAxP7dJZms3GRcYheSPi1PiTMigsxHAdkrbItHxwYHr4kt1zL7mmcHstgMYT+aiA==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0" }, @@ -15990,6 +18891,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz", "integrity": "sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==", + "license": "MIT", "peerDependencies": { "postcss": "^8.0.3" } @@ -16008,6 +18910,7 @@ "url": "https://opencollective.com/csstools" } ], + "license": "MIT", "dependencies": { "postcss-selector-parser": "^7.0.0" }, @@ -16019,9 +18922,10 @@ } }, "node_modules/postcss-selector-not/node_modules/postcss-selector-parser": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.0.tgz", - "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==", + "version": "7.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.4.tgz", + "integrity": "sha512-HeP7D2wyhkR+XaK6v4W8oRF62Dsz4flyuczALJp61GckGm42u1saSSJ/0auvcBqxs3jMRFEcPK34At/0JBKdOg==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -16031,9 +18935,10 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", - "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz", + "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", + "license": "MIT", "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" @@ -16046,6 +18951,7 @@ "version": "5.2.0", "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-5.2.0.tgz", "integrity": "sha512-AZ5fDMLD8SldlAYlvi8NIqo0+Z8xnXU2ia0jxmuhxAU+Lqt9K+AlmLNJ/zWEnE9x+Zx3qL3+1K20ATgNOr3fAA==", + "license": "MIT", "dependencies": { "sort-css-media-queries": "2.2.0" }, @@ -16060,6 +18966,7 @@ "version": "6.0.3", "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-6.0.3.tgz", "integrity": "sha512-dlrahRmxP22bX6iKEjOM+c8/1p+81asjKT+V5lrgOH944ryx/OHpclnIbGsKVd3uWOXFLYJwCVf0eEkJGvO96g==", + "license": "MIT", "dependencies": { "postcss-value-parser": "^4.2.0", "svgo": "^3.2.0" @@ -16075,6 +18982,7 @@ "version": "6.0.4", "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-6.0.4.tgz", "integrity": "sha512-K38OCaIrO8+PzpArzkLKB42dSARtC2tmG6PvD4b1o1Q2E9Os8jzfWFfSy/rixsHwohtsDdFtAWGjFVFUdwYaMg==", + "license": "MIT", "dependencies": { "postcss-selector-parser": "^6.0.16" }, @@ -16094,6 +19002,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-6.0.2.tgz", "integrity": "sha512-5BxW9l1evPB/4ZIc+2GobEBoKC+h8gPGCMi+jxsYvd2x0mjq7wazk6DrP71pStqxE9Foxh5TVnonbWpFZzXaYg==", + "license": "MIT", "engines": { "node": "^14 || ^16 || >=18.0" }, @@ -16114,7 +19023,6 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, - "peer": true, "bin": { "prettier": "bin-prettier.js" }, @@ -16138,6 +19046,7 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/pretty-time/-/pretty-time-1.1.0.tgz", "integrity": "sha512-28iF6xPQrP8Oa6uxE6a1biz+lWeTOAPKggvjB8HAs6nVMKZwf5bG++632Dx614hIWgUPkgivRfG+a8uAXGTIbA==", + "license": "MIT", "engines": { "node": ">=4" } @@ -16166,6 +19075,7 @@ "version": "1.30.0", "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz", "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==", + "license": "MIT", "engines": { "node": ">=6" } @@ -16173,7 +19083,8 @@ "node_modules/process-nextick-args": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz", - "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==" + "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==", + "license": "MIT" }, "node_modules/prompts": { "version": "2.4.2", @@ -16215,6 +19126,7 @@ "version": "2.0.7", "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz", "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==", + "license": "MIT", "dependencies": { "forwarded": "0.2.0", "ipaddr.js": "1.9.1" @@ -16227,6 +19139,7 @@ "version": "1.9.1", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz", "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==", + "license": "MIT", "engines": { "node": ">= 0.10" } @@ -16251,37 +19164,38 @@ "node": ">=8" } }, - "node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "node_modules/pvtsutils": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz", + "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==", + "license": "MIT", "dependencies": { - "side-channel": "^1.0.6" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" + "tslib": "^2.8.1" } }, - "node_modules/querystring": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz", - "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==", - "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.", - "dev": true, + "node_modules/pvutils": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz", + "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==", "license": "MIT", "engines": { - "node": ">=0.4.x" + "node": ">=16.0.0" } }, - "node_modules/queue": { - "version": "6.0.2", - "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz", - "integrity": "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==", + "node_modules/qs": { + "version": "6.15.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", + "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==", + "license": "BSD-3-Clause", "dependencies": { - "inherits": "~2.0.3" + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" } }, "node_modules/queue-microtask": { @@ -16326,19 +19240,21 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz", "integrity": "sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/raw-body": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", - "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", + "license": "MIT", "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8" @@ -16348,6 +19264,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz", "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -16375,86 +19292,37 @@ } }, "node_modules/react": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", - "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "peer": true, - "dependencies": { - "loose-envify": "^1.1.0" - }, + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", + "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", + "license": "MIT", "engines": { "node": ">=0.10.0" } }, - "node_modules/react-dev-utils": { - "version": "12.0.1", - "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", - "integrity": "sha512-84Ivxmr17KjUupyqzFode6xKhjwuEJDROWKJy/BthkL7Wn6NJ8h4WE6k/exAv6ImS+0oZLRRW5j/aINMHyeGeQ==", - "dependencies": { - "@babel/code-frame": "^7.16.0", - "address": "^1.1.2", - "browserslist": "^4.18.1", - "chalk": "^4.1.2", - "cross-spawn": "^7.0.3", - "detect-port-alt": "^1.1.6", - "escape-string-regexp": "^4.0.0", - "filesize": "^8.0.6", - "find-up": "^5.0.0", - "fork-ts-checker-webpack-plugin": "^6.5.0", - "global-modules": "^2.0.0", - "globby": "^11.0.4", - "gzip-size": "^6.0.0", - "immer": "^9.0.7", - "is-root": "^2.1.0", - "loader-utils": "^3.2.0", - "open": "^8.4.0", - "pkg-up": "^3.1.0", - "prompts": "^2.4.2", - "react-error-overlay": "^6.0.11", - "recursive-readdir": "^2.2.2", - "shell-quote": "^1.7.3", - "strip-ansi": "^6.0.1", - "text-table": "^0.2.0" - }, - "engines": { - "node": ">=14" - } - }, - "node_modules/react-dev-utils/node_modules/loader-utils": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-3.2.1.tgz", - "integrity": "sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==", - "engines": { - "node": ">= 12.13.0" - } - }, "node_modules/react-dom": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", - "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "peer": true, + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", + "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", + "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "scheduler": "^0.23.0" + "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^18.2.0" + "react": "^19.2.8" } }, - "node_modules/react-error-overlay": { - "version": "6.0.11", - "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", - "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" - }, "node_modules/react-fast-compare": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "node_modules/react-helmet-async": { + "name": "@slorber/react-helmet-async", "version": "1.3.0", - "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-1.3.0.tgz", - "integrity": "sha512-9jZ57/dAn9t3q6hneQS0wukqC2ENOBgMNVEhb/ZG9ZSxUetzVIw4iAmEU38IaVg3QGYauQPhSeUTuIUtFglWpg==", + "resolved": "https://registry.npmjs.org/@slorber/react-helmet-async/-/react-helmet-async-1.3.0.tgz", + "integrity": "sha512-e9/OK8VhwUSc67diWI8Rb3I0YgI9/SBQtnhe9aEuK6MhZm7ntZZimXgwXnd8W96YTmSOb9M4d8LwhRZyhWr/1A==", + "license": "Apache-2.0", "dependencies": { "@babel/runtime": "^7.12.5", "invariant": "^2.2.4", @@ -16463,8 +19331,8 @@ "shallowequal": "^1.1.0" }, "peerDependencies": { - "react": "^16.6.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" + "react": "^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/react-is": { @@ -16473,14 +19341,15 @@ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react-json-view-lite": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-1.5.0.tgz", - "integrity": "sha512-nWqA1E4jKPklL2jvHWs6s+7Na0qNgw9HCP6xehdQJeg6nPBTFZgGwyko9Q0oj+jQWKTTVRS30u0toM5wiuL3iw==", + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/react-json-view-lite/-/react-json-view-lite-2.5.0.tgz", + "integrity": "sha512-tk7o7QG9oYyELWHL8xiMQ8x4WzjCzbWNyig3uexmkLb54r8jO0yH3WCWx8UZS0c49eSA4QUmG5caiRJ8fAn58g==", + "license": "MIT", "engines": { - "node": ">=14" + "node": ">=18" }, "peerDependencies": { - "react": "^16.13.1 || ^17.0.0 || ^18.0.0" + "react": "^18.0.0 || ^19.0.0" } }, "node_modules/react-loadable": { @@ -16488,7 +19357,6 @@ "version": "6.0.0", "resolved": "https://registry.npmjs.org/@docusaurus/react-loadable/-/react-loadable-6.0.0.tgz", "integrity": "sha512-YMMxTUQV/QFSnbgrP3tjDzLHRg7vsbMn8e9HAa8o/1iXoiomo48b7sk/kkmWEuWNDPJVlKSJRB6Y2fHqdJk+SQ==", - "peer": true, "dependencies": { "@types/react": "*" }, @@ -16497,9 +19365,10 @@ } }, "node_modules/react-loadable-ssr-addon-v5-slorber": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz", - "integrity": "sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.3.tgz", + "integrity": "sha512-GXfh9VLwB5ERaCsU6RULh7tkemeX15aNh6wuMEBtfdyMa7fFG8TXrhXlx1SoEK2Ty/l6XIkzzYIQmyaWW3JgdQ==", + "license": "MIT", "dependencies": { "@babel/runtime": "^7.10.3" }, @@ -16515,7 +19384,6 @@ "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==", - "peer": true, "dependencies": { "@babel/runtime": "^7.12.13", "history": "^4.9.0", @@ -16584,42 +19452,23 @@ "node": ">=8.10.0" } }, - "node_modules/reading-time": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/reading-time/-/reading-time-1.5.0.tgz", - "integrity": "sha512-onYyVhBNr4CmAxFsKS7bz+uTLRakypIe4R+5A824vBSkQy/hB3fZepoVEf8OVAxzLvK+H/jm9TzpI3ETSm64Kg==" - }, - "node_modules/rechoir": { - "version": "0.6.2", - "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz", - "integrity": "sha512-HFM8rkZ+i3zrV+4LQjwQ0W+ez98pApMGM3HUrN04j3CqzPOzl9nmP15Y8YXNm8QHGv/eacOVEjqhmWpkRV0NAw==", - "dependencies": { - "resolve": "^1.1.6" - }, - "engines": { - "node": ">= 0.10" - } - }, - "node_modules/recursive-readdir": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/recursive-readdir/-/recursive-readdir-2.2.3.tgz", - "integrity": "sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==", - "dependencies": { - "minimatch": "^3.0.5" - }, - "engines": { - "node": ">=6.0.0" - } + "node_modules/reflect-metadata": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz", + "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==", + "license": "Apache-2.0" }, "node_modules/regenerate": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz", - "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==" + "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==", + "license": "MIT" }, "node_modules/regenerate-unicode-properties": { - "version": "10.2.0", - "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.0.tgz", - "integrity": "sha512-DqHn3DwbmmPVzeKj9woBadqmXxLvQoQIwu7nopMc72ztvxVmVk2SBhSnx67zuye5TP+lJsb/TBQsjLKhnDf3MA==", + "version": "10.2.2", + "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz", + "integrity": "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g==", + "license": "MIT", "dependencies": { "regenerate": "^1.4.2" }, @@ -16632,25 +19481,18 @@ "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz", "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==" }, - "node_modules/regenerator-transform": { - "version": "0.15.2", - "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.2.tgz", - "integrity": "sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==", - "dependencies": { - "@babel/runtime": "^7.8.4" - } - }, "node_modules/regexpu-core": { - "version": "6.2.0", - "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.2.0.tgz", - "integrity": "sha512-H66BPQMrv+V16t8xtmq+UC0CBpiTBA60V8ibS1QVReIp8T1z8hwFxqcGzm9K6lgsN7sB5edVH8a+ze6Fqm4weA==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-6.4.0.tgz", + "integrity": "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA==", + "license": "MIT", "dependencies": { "regenerate": "^1.4.2", - "regenerate-unicode-properties": "^10.2.0", + "regenerate-unicode-properties": "^10.2.2", "regjsgen": "^0.8.0", - "regjsparser": "^0.12.0", + "regjsparser": "^0.13.0", "unicode-match-property-ecmascript": "^2.0.0", - "unicode-match-property-value-ecmascript": "^2.1.0" + "unicode-match-property-value-ecmascript": "^2.2.1" }, "engines": { "node": ">=4" @@ -16684,30 +19526,21 @@ "node_modules/regjsgen": { "version": "0.8.0", "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.8.0.tgz", - "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==" + "integrity": "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q==", + "license": "MIT" }, "node_modules/regjsparser": { - "version": "0.12.0", - "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.12.0.tgz", - "integrity": "sha512-cnE+y8bz4NhMjISKbgeVJtqNbtf5QpjZP+Bslo+UqkIt9QPnX9q095eiRRASJG1/tz6dlNr6Z5NsBiWYokp6EQ==", + "version": "0.13.2", + "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.13.2.tgz", + "integrity": "sha512-NgRBy2Nx/bE+9F27nVHnqcN5HjyLmecqsqx2PJHu3/IEtADD4WuxuXIVExD5PoSDFVrl78dOonfcOe5O+5nbzQ==", + "license": "BSD-2-Clause", "dependencies": { - "jsesc": "~3.0.2" + "jsesc": "~3.1.0" }, "bin": { "regjsparser": "bin/parser" } }, - "node_modules/regjsparser/node_modules/jsesc": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz", - "integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==", - "bin": { - "jsesc": "bin/jsesc" - }, - "engines": { - "node": ">=6" - } - }, "node_modules/rehype-raw": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz", @@ -16963,18 +19796,11 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz", "integrity": "sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==", + "dev": true, "engines": { "node": ">=0.10" } }, - "node_modules/require-directory": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", - "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==", - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/require-from-string": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz", @@ -16994,20 +19820,26 @@ "node_modules/requires-port": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", - "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "license": "MIT" }, "node_modules/resolve": { - "version": "1.22.8", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", - "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==", + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "license": "MIT", "dependencies": { - "is-core-module": "^2.13.0", + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" }, + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } @@ -17068,6 +19900,7 @@ "version": "0.13.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.13.1.tgz", "integrity": "sha512-XQBQ3I8W1Cge0Seh+6gjj03LbmRFWuoszgK9ooCpwYIrhhoO80pfq4cUkU5DkknwfOfFteRwlZ56PYOGYyFWdg==", + "license": "MIT", "engines": { "node": ">= 4" } @@ -17085,6 +19918,7 @@ "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, "dependencies": { "glob": "^7.1.3" }, @@ -17095,6 +19929,39 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/rolldown": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.2.3.tgz", + "integrity": "sha512-rn9wpmxplLf7NLNyCk9FyWh3FM43DbY8jOzCdEPzH7uflhTftRbCEpqi6Ly2osgoU8OwObtmavMbWLaWy4LX7A==", + "dev": true, + "license": "MIT", + "dependencies": { + "@oxc-project/types": "=0.143.0", + "@rolldown/pluginutils": "^1.0.0" + }, + "bin": { + "rolldown": "bin/cli.mjs" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "optionalDependencies": { + "@rolldown/binding-android-arm64": "1.2.3", + "@rolldown/binding-darwin-arm64": "1.2.3", + "@rolldown/binding-darwin-x64": "1.2.3", + "@rolldown/binding-freebsd-x64": "1.2.3", + "@rolldown/binding-linux-arm-gnueabihf": "1.2.3", + "@rolldown/binding-linux-arm64-gnu": "1.2.3", + "@rolldown/binding-linux-arm64-musl": "1.2.3", + "@rolldown/binding-linux-ppc64-gnu": "1.2.3", + "@rolldown/binding-linux-s390x-gnu": "1.2.3", + "@rolldown/binding-linux-x64-gnu": "1.2.3", + "@rolldown/binding-linux-x64-musl": "1.2.3", + "@rolldown/binding-openharmony-arm64": "1.2.3", + "@rolldown/binding-win32-arm64-msvc": "1.2.3", + "@rolldown/binding-win32-x64-msvc": "1.2.3" + } + }, "node_modules/rollup": { "version": "2.79.1", "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz", @@ -17114,6 +19981,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-4.3.0.tgz", "integrity": "sha512-FI+pHEn7Wc4NqKXMXFM+VAYKEj/mRIcW4h24YVwVtyjI+EqGrLc2Hx/Ny0lrZ21cBWU2goLy36eqMcNj3AQJig==", + "license": "MIT", "dependencies": { "escalade": "^3.1.1", "picocolors": "^1.0.0", @@ -17127,6 +19995,18 @@ "node": ">=12.0.0" } }, + "node_modules/run-applescript": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz", + "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", @@ -17149,22 +20029,6 @@ "queue-microtask": "^1.2.2" } }, - "node_modules/rxjs": { - "version": "6.6.7", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz", - "integrity": "sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==", - "dependencies": { - "tslib": "^1.9.0" - }, - "engines": { - "npm": ">=2.0.0" - } - }, - "node_modules/rxjs/node_modules/tslib": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", - "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" - }, "node_modules/safe-buffer": { "version": "5.2.1", "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz", @@ -17187,13 +20051,13 @@ "node_modules/safer-buffer": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", - "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==" + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "license": "MIT" }, "node_modules/sass": { "version": "1.69.5", "resolved": "https://registry.npmjs.org/sass/-/sass-1.69.5.tgz", "integrity": "sha512-qg2+UCJibLr2LCVOt3OlPhr/dqVHWOa9XtZf2OjbLs/T4VPSJ00udtgJxH3neXZm+QqX8B+3cU7RaLqp1iVfcQ==", - "peer": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", "immutable": "^4.0.0", @@ -17245,18 +20109,54 @@ } } }, + "node_modules/sass/node_modules/chokidar": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-5.0.0.tgz", + "integrity": "sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==", + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-5.1.1.tgz", + "integrity": "sha512-Kko+Y5XQ6fM+Ce3dq3m9YGxnacYZYl9cA1wZjaF3Vbry2L3i1qVg8+CAgNPsXRArPMUMCaOR7oa9Nqntc43JKA==", + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/sax": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz", - "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==" + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.6.1.tgz", + "integrity": "sha512-42tBVwLWnaQvW5zc4HbZrTuWccECCZfBi92FDuwtqxasH+JbPB3/FOKb1m222K42R4WxuxzzMsTswfzgtSu64Q==", + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=11.0.0" + } }, "node_modules/scheduler": { - "version": "0.23.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", - "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dependencies": { - "loose-envify": "^1.1.0" - } + "version": "0.27.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" + }, + "node_modules/schema-dts": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/schema-dts/-/schema-dts-1.1.5.tgz", + "integrity": "sha512-RJr9EaCmsLzBX2NDiO5Z3ux2BVosNZN5jo0gWgsyKvxKIUL5R3swNvoorulAeL9kLB0iTSX7V6aokhla2m7xbg==", + "license": "Apache-2.0" }, "node_modules/schema-utils": { "version": "4.3.0", @@ -17280,12 +20180,14 @@ "version": "2.17.3", "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.17.3.tgz", "integrity": "sha512-RQPdCYTa8A68uM2jwxoY842xDhvx3E5LFL1LxvxCNMev4o5mLuokczhzjAgGwUZBAmOKZknArSxLKmXtIi2AxQ==", + "license": "MIT", "peer": true }, "node_modules/section-matter": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz", "integrity": "sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==", + "license": "MIT", "dependencies": { "extend-shallow": "^2.0.1", "kind-of": "^6.0.0" @@ -17297,18 +20199,20 @@ "node_modules/select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", - "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==" + "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==", + "license": "MIT" }, "node_modules/selfsigned": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz", - "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-5.5.0.tgz", + "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==", + "license": "MIT", "dependencies": { - "@types/node-forge": "^1.3.0", - "node-forge": "^1" + "@peculiar/x509": "^1.14.2", + "pkijs": "^3.3.3" }, "engines": { - "node": ">=10" + "node": ">=18" } }, "node_modules/semver": { @@ -17356,23 +20260,24 @@ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" }, "node_modules/send": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", - "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", + "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", + "license": "MIT", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "range-parser": "~1.2.1", - "statuses": "2.0.1" + "statuses": "~2.0.2" }, "engines": { "node": ">= 0.8.0" @@ -17382,6 +20287,7 @@ "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -17389,25 +20295,14 @@ "node_modules/send/node_modules/debug/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, - "node_modules/send/node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", - "engines": { - "node": ">= 0.8" - } - }, - "node_modules/send/node_modules/ms": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", - "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/send/node_modules/range-parser": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -17430,14 +20325,15 @@ } }, "node_modules/serve-handler": { - "version": "6.1.6", - "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.6.tgz", - "integrity": "sha512-x5RL9Y2p5+Sh3D38Fh9i/iQ5ZK+e4xuXRd/pGbM4D13tgo/MGwbttUk8emytcr1YYzBYs+apnUngBDFYfpjPuQ==", + "version": "6.1.7", + "resolved": "https://registry.npmjs.org/serve-handler/-/serve-handler-6.1.7.tgz", + "integrity": "sha512-CinAq1xWb0vR3twAv9evEU8cNWkXCb9kd5ePAHUKJBkOsUpR1wt/CvGdeca7vqumL1U5cSaeVQ6zZMxiJ3yWsg==", + "license": "MIT", "dependencies": { "bytes": "3.0.0", "content-disposition": "0.5.2", "mime-types": "2.1.18", - "minimatch": "3.1.2", + "minimatch": "3.1.5", "path-is-inside": "1.0.2", "path-to-regexp": "3.3.0", "range-parser": "1.2.0" @@ -17447,6 +20343,7 @@ "version": "1.33.0", "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz", "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ==", + "license": "MIT", "engines": { "node": ">= 0.6" } @@ -17455,6 +20352,7 @@ "version": "2.1.18", "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz", "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==", + "license": "MIT", "dependencies": { "mime-db": "~1.33.0" }, @@ -17465,29 +20363,36 @@ "node_modules/serve-handler/node_modules/path-to-regexp": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.3.0.tgz", - "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==" + "integrity": "sha512-qyCH421YQPS2WFDxDjftfc1ZR5WKQzVzqsp4n9M2kQhVOo/ByahFoUNJfl58kOcEGfQ//7weFTDhm+ss8Ecxgw==", + "license": "MIT" }, "node_modules/serve-index": { - "version": "1.9.1", - "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", - "integrity": "sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==", + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.2.tgz", + "integrity": "sha512-KDj11HScOaLmrPxl70KYNW1PksP4Nb/CLL2yvC+Qd2kHMPEEpfc4Re2e4FOay+bC/+XQl/7zAcWON3JVo5v3KQ==", + "license": "MIT", "dependencies": { - "accepts": "~1.3.4", + "accepts": "~1.3.8", "batch": "0.6.1", "debug": "2.6.9", "escape-html": "~1.0.3", - "http-errors": "~1.6.2", - "mime-types": "~2.1.17", - "parseurl": "~1.3.2" + "http-errors": "~1.8.0", + "mime-types": "~2.1.35", + "parseurl": "~1.3.3" }, "engines": { "node": ">= 0.8.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/serve-index/node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", + "license": "MIT", "dependencies": { "ms": "2.0.0" } @@ -17496,56 +20401,52 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", "integrity": "sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/serve-index/node_modules/http-errors": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", - "integrity": "sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.8.1.tgz", + "integrity": "sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==", + "license": "MIT", "dependencies": { "depd": "~1.1.2", - "inherits": "2.0.3", - "setprototypeof": "1.1.0", - "statuses": ">= 1.4.0 < 2" + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.1" }, "engines": { "node": ">= 0.6" } }, - "node_modules/serve-index/node_modules/inherits": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", - "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==" - }, "node_modules/serve-index/node_modules/ms": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", - "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==" - }, - "node_modules/serve-index/node_modules/setprototypeof": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", - "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" + "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==", + "license": "MIT" }, "node_modules/serve-index/node_modules/statuses": { "version": "1.5.0", "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==", + "license": "MIT", "engines": { "node": ">= 0.6" } }, "node_modules/serve-static": { - "version": "1.16.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", - "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", + "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", + "license": "MIT", "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.19.0" + "send": "~0.19.1" }, "engines": { "node": ">= 0.8.0" @@ -17555,6 +20456,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz", "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==", + "license": "MIT", "dependencies": { "define-data-property": "^1.1.4", "es-errors": "^1.3.0", @@ -17570,7 +20472,8 @@ "node_modules/setprototypeof": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", - "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" + "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", + "license": "ISC" }, "node_modules/shallow-clone": { "version": "3.0.1", @@ -17608,37 +20511,26 @@ } }, "node_modules/shell-quote": { - "version": "1.8.1", - "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz", - "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==", + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.10.0.tgz", + "integrity": "sha512-w1aiOKwKuRgtwAReIIj89puqg+I7GvX4IbLrvmhXbzQsj1+Zwi4VO3+fa6ZF91TWSjIxoEkKnMeHcLEODK5ZXA==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, "funding": { "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/shelljs": { - "version": "0.8.5", - "resolved": "https://registry.npmjs.org/shelljs/-/shelljs-0.8.5.tgz", - "integrity": "sha512-TiwcRcrkhHvbrZbnRcFYMLl30Dfov3HKqzp5tO5b4pt6G/SezKcYhmDg15zXVBswHmctSAQKznqNW2LO5tTDow==", - "dependencies": { - "glob": "^7.0.0", - "interpret": "^1.0.0", - "rechoir": "^0.6.2" - }, - "bin": { - "shjs": "bin/shjs" - }, - "engines": { - "node": ">=4" - } - }, "node_modules/side-channel": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", - "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", + "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -17650,12 +20542,13 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", + "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -17668,6 +20561,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "license": "MIT", "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", @@ -17685,6 +20579,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "license": "MIT", "dependencies": { "call-bound": "^1.0.2", "es-errors": "^1.3.0", @@ -17699,6 +20594,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/siginfo": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz", + "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==", + "dev": true, + "license": "ISC" + }, "node_modules/signal-exit": { "version": "3.0.7", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz", @@ -17723,9 +20625,10 @@ "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==" }, "node_modules/sitemap": { - "version": "7.1.2", - "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.2.tgz", - "integrity": "sha512-ARCqzHJ0p4gWt+j7NlU5eDlIO9+Rkr/JhPFZKKQ1l5GCus7rJH4UdrlVAh0xC/gDS/Qir2UMxqYNHtsKr2rpCw==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.3.tgz", + "integrity": "sha512-tAjEd+wt/YwnEbfNB2ht51ybBJxbEWwe5ki/Z//Wh0rpBFTCUSj46GnxUKEWzhfuJTsee8x3lybHxFgUMig2hw==", + "license": "MIT", "dependencies": { "@types/node": "^17.0.5", "@types/sax": "^1.2.1", @@ -17743,7 +20646,8 @@ "node_modules/sitemap/node_modules/@types/node": { "version": "17.0.45", "resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz", - "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==" + "integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==", + "license": "MIT" }, "node_modules/skin-tone": { "version": "2.0.0", @@ -17760,6 +20664,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "license": "MIT", "engines": { "node": ">=8" } @@ -17776,6 +20681,7 @@ "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", "integrity": "sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==", + "license": "MIT", "dependencies": { "faye-websocket": "^0.11.3", "uuid": "^8.3.2", @@ -17786,6 +20692,7 @@ "version": "2.2.0", "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.2.0.tgz", "integrity": "sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA==", + "license": "MIT", "engines": { "node": ">= 6.3.0" } @@ -17832,15 +20739,11 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/spawn-command": { - "version": "0.0.2-1", - "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz", - "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg==" - }, "node_modules/spdy": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz", "integrity": "sha512-r46gZQZQV+Kl9oItvl1JZZqJKGr+oEkB08A6BzkiR7593/7IbtuncXHd2YoYeTsG4157ZssMu9KYvUHLcjcDoA==", + "license": "MIT", "dependencies": { "debug": "^4.1.0", "handle-thing": "^2.0.0", @@ -17856,6 +20759,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/spdy-transport/-/spdy-transport-3.0.0.tgz", "integrity": "sha512-hsLVFE5SjA6TCisWeJXFKniGGOpBgMLmerfO2aCyCU5s7nJ/rpAepqmFifv/GCbSbueEeAJJnmSQ2rKC/g8Fcw==", + "license": "MIT", "dependencies": { "debug": "^4.1.0", "detect-node": "^2.0.4", @@ -17874,6 +20778,7 @@ "version": "4.0.0", "resolved": "https://registry.npmjs.org/srcset/-/srcset-4.0.0.tgz", "integrity": "sha512-wvLeHgcVHKO8Sc/H/5lkGreJQVeYMm9rlmt8PuR1xE31rIuXhuzznUUqAt8MqLhB3MqJdFzlNAfpcWnxiFUcPw==", + "license": "MIT", "engines": { "node": ">=12" }, @@ -17881,18 +20786,27 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/stackback": { + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz", + "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==", + "dev": true, + "license": "MIT" + }, "node_modules/statuses": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", - "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.2.tgz", + "integrity": "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw==", + "license": "MIT", "engines": { "node": ">= 0.8" } }, "node_modules/std-env": { - "version": "3.9.0", - "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.9.0.tgz", - "integrity": "sha512-UGvjygr6F6tpH7o2qyqR6QYpwraIjKSdtzyBdyytFOHmPZY917kwdwLG0RbOjWOnKmnm3PeHjaoLLMie7kPLQw==" + "version": "3.10.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-3.10.0.tgz", + "integrity": "sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==", + "license": "MIT" }, "node_modules/string_decoder": { "version": "1.3.0", @@ -17992,6 +20906,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/strip-bom-string/-/strip-bom-string-1.0.0.tgz", "integrity": "sha512-uCC2VHvQRYu+lMh4My/sFNmF2klFymLX1wHJeXnbEJERpV/ZsVuonzerjfrGpIGF7LBVa1O7i9kjiWvJiFck8g==", + "license": "MIT", "engines": { "node": ">=0.10.0" } @@ -18008,6 +20923,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "license": "MIT", "engines": { "node": ">=8" }, @@ -18055,6 +20971,7 @@ "version": "6.1.1", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-6.1.1.tgz", "integrity": "sha512-gSTTEQ670cJNoaeIp9KX6lZmm8LJ3jPB5yJmX8Zq/wQxOsAFXV3qjWzHas3YYk1qesuVIyYWWUpZ0vSE/dTSGg==", + "license": "MIT", "dependencies": { "browserslist": "^4.23.0", "postcss-selector-parser": "^6.0.16" @@ -18069,7 +20986,8 @@ "node_modules/stylis": { "version": "4.3.0", "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.0.tgz", - "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==" + "integrity": "sha512-E87pIogpwUsUwXw7dNyU4QDjdgVMy52m+XEOPEKUn161cCzWjjhPSQhByfd1CcNvrOLnXQ6OnnZDwnJrz/Z4YQ==", + "peer": true }, "node_modules/supports-color": { "version": "7.2.0", @@ -18086,6 +21004,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "license": "MIT", "engines": { "node": ">= 0.4" }, @@ -18096,20 +21015,22 @@ "node_modules/svg-parser": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", - "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "license": "MIT" }, "node_modules/svgo": { - "version": "3.3.2", - "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz", - "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.4.tgz", + "integrity": "sha512-GsNRis4e8jxn2Y9ENz/8lbJ93CstG8svtMnuRaHbiF2LTJ5tK0/q3t/URPq9Zc7zVWBJnNnJMIp6bevK7bSmNg==", + "license": "MIT", "dependencies": { - "@trysound/sax": "0.2.0", "commander": "^7.2.0", "css-select": "^5.1.0", "css-tree": "^2.3.1", "css-what": "^6.1.0", "csso": "^5.0.5", - "picocolors": "^1.0.0" + "picocolors": "^1.0.0", + "sax": "^1.5.0" }, "bin": { "svgo": "bin/svgo" @@ -18126,6 +21047,7 @@ "version": "7.2.0", "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz", "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==", + "license": "MIT", "engines": { "node": ">= 10" } @@ -18139,6 +21061,25 @@ "upper-case": "^1.1.1" } }, + "node_modules/swc-loader": { + "version": "0.2.7", + "resolved": "https://registry.npmjs.org/swc-loader/-/swc-loader-0.2.7.tgz", + "integrity": "sha512-nwYWw3Fh9ame3Rtm7StS9SBLpHRRnYcK7bnpF3UKZmesAK0gw2/ADvlURFAINmPvKtDLzp+GBiP9yLoEjg6S9w==", + "license": "MIT", + "dependencies": { + "@swc/counter": "^0.1.3" + }, + "peerDependencies": { + "@swc/core": "^1.2.147", + "webpack": ">=2" + } + }, + "node_modules/tabbable": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.5.0.tgz", + "integrity": "sha512-wieBHXygIm7OyQOu5hQlkk62/WyCFYGlWg7L6/ZCUZwx0o398Zkn4pVmMyfYhfMG8kGrj/Krt8eIk6UKC6VzwA==", + "license": "MIT" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", @@ -18229,15 +21170,27 @@ "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz", "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==" }, - "node_modules/text-table": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", - "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==" + "node_modules/thingies": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/thingies/-/thingies-2.6.1.tgz", + "integrity": "sha512-cV/CMGTK3M4MlnJ/0At6ismOw/A0EEniDNScajjz/Br3c1sqE72YD01rGpPTKwd27wAxI5Pr+6+0w8yofzFRYw==", + "license": "MIT", + "engines": { + "node": ">=10.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "^2" + } }, "node_modules/thunky": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz", - "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==" + "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", + "license": "MIT" }, "node_modules/tiny-invariant": { "version": "1.3.1", @@ -18249,12 +21202,88 @@ "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==" }, - "node_modules/tippy.js": { - "version": "6.3.7", - "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", - "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "node_modules/tinybench": { + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz", + "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyexec": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.3.0.tgz", + "integrity": "sha512-QKAl9m8gWWGHV8jZcPeym6j+XULi6tOf1mT83WYJ4Lk2ytW/uwAWkrP0uFsdoYMdueVJ0qs26wZ+23xeB4ibNQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", "dependencies": { - "@popperjs/core": "^2.9.0" + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/tinypool": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.1.1.tgz", + "integrity": "sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==", + "license": "MIT", + "engines": { + "node": "^18.0.0 || >=20.0.0" + } + }, + "node_modules/tinyrainbow": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.1.tgz", + "integrity": "sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.0.0" } }, "node_modules/title-case": { @@ -18289,6 +21318,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==", + "license": "MIT", "engines": { "node": ">=0.6" } @@ -18315,12 +21345,20 @@ "url": "https://github.com/sponsors/ljharb" } }, - "node_modules/tree-kill": { - "version": "1.2.2", - "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz", - "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==", - "bin": { - "tree-kill": "cli.js" + "node_modules/tree-dump": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.1.0.tgz", + "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==", + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" } }, "node_modules/trim-lines": { @@ -18341,61 +21379,29 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/ts-node": { - "version": "10.9.2", - "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", - "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "dev": true, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, + "node_modules/tsyringe": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz", + "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==", "license": "MIT", "dependencies": { - "@cspotcode/source-map-support": "^0.8.0", - "@tsconfig/node10": "^1.0.7", - "@tsconfig/node12": "^1.0.7", - "@tsconfig/node14": "^1.0.0", - "@tsconfig/node16": "^1.0.2", - "acorn": "^8.4.1", - "acorn-walk": "^8.1.1", - "arg": "^4.1.0", - "create-require": "^1.1.0", - "diff": "^4.0.1", - "make-error": "^1.1.1", - "v8-compile-cache-lib": "^3.0.1", - "yn": "3.1.1" + "tslib": "^1.9.3" }, - "bin": { - "ts-node": "dist/bin.js", - "ts-node-cwd": "dist/bin-cwd.js", - "ts-node-esm": "dist/bin-esm.js", - "ts-node-script": "dist/bin-script.js", - "ts-node-transpile-only": "dist/bin-transpile.js", - "ts-script": "dist/bin-script-deprecated.js" - }, - "peerDependencies": { - "@swc/core": ">=1.2.50", - "@swc/wasm": ">=1.2.50", - "@types/node": "*", - "typescript": ">=2.7" - }, - "peerDependenciesMeta": { - "@swc/core": { - "optional": true - }, - "@swc/wasm": { - "optional": true - } + "engines": { + "node": ">= 6.0.0" } }, - "node_modules/ts-node/node_modules/arg": { - "version": "4.1.3", - "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", - "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "dev": true, - "license": "MIT" - }, - "node_modules/tslib": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + "node_modules/tsyringe/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "license": "0BSD" }, "node_modules/type-fest": { "version": "2.19.0", @@ -18412,6 +21418,7 @@ "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", + "license": "MIT", "dependencies": { "media-typer": "0.3.0", "mime-types": "~2.1.24" @@ -18432,7 +21439,7 @@ "version": "5.3.3", "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.3.3.tgz", "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", - "peer": true, + "devOptional": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -18450,6 +21457,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz", "integrity": "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg==", + "license": "MIT", "engines": { "node": ">=4" } @@ -18466,6 +21474,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz", "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==", + "license": "MIT", "dependencies": { "unicode-canonical-property-names-ecmascript": "^2.0.0", "unicode-property-aliases-ecmascript": "^2.0.0" @@ -18475,17 +21484,19 @@ } }, "node_modules/unicode-match-property-value-ecmascript": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.0.tgz", - "integrity": "sha512-4IehN3V/+kkr5YeSSDDQG8QLqO26XpL2XP3GQtqwlT/QYSECAwFztxVHjlbh0+gjJ3XmNLS0zDsbgs9jWKExLg==", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.2.1.tgz", + "integrity": "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg==", + "license": "MIT", "engines": { "node": ">=4" } }, "node_modules/unicode-property-aliases-ecmascript": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz", - "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.2.0.tgz", + "integrity": "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ==", + "license": "MIT", "engines": { "node": ">=4" } @@ -18620,14 +21631,15 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==", + "license": "MIT", "engines": { "node": ">= 0.8" } }, "node_modules/update-browserslist-db": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", - "integrity": "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==", + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz", + "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==", "funding": [ { "type": "opencollective", @@ -18642,6 +21654,7 @@ "url": "https://github.com/sponsors/ai" } ], + "license": "MIT", "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" @@ -18889,7 +21902,6 @@ "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", - "peer": true, "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", @@ -18956,6 +21968,7 @@ "version": "3.11.0", "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz", "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==", + "license": "MIT", "engines": { "node": ">= 4" } @@ -18964,6 +21977,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==", + "license": "MIT", "engines": { "node": ">= 0.4.0" } @@ -18972,17 +21986,12 @@ "version": "8.3.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "deprecated": "uuid@10 and below is no longer supported. For ESM codebases, update to uuid@latest. For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).", + "license": "MIT", "bin": { "uuid": "dist/bin/uuid" } }, - "node_modules/v8-compile-cache-lib": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", - "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "dev": true, - "license": "MIT" - }, "node_modules/valid-url": { "version": "1.0.9", "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz", @@ -18997,6 +22006,7 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==", + "license": "MIT", "engines": { "node": ">= 0.8" } @@ -19015,32 +22025,240 @@ "url": "https://opencollective.com/unified" } }, - "node_modules/vfile-location": { - "version": "5.0.2", - "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz", - "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==", + "node_modules/vfile-location": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz", + "integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==", + "dependencies": { + "@types/unist": "^3.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vite": { + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/vite/-/vite-8.2.1.tgz", + "integrity": "sha512-EU/eS7BH3XROHh2YnBefjM6DBKA6ZeMZEYQbj7NLWg5wHYlhB8B/Mayd5XsgWq+NFYccDOTemRpdETWR6Ka/lw==", + "dev": true, + "license": "MIT", + "dependencies": { + "lightningcss": "^1.33.0", + "picomatch": "^4.0.5", + "postcss": "^8.5.25", + "rolldown": "~1.2.1", + "tinyglobby": "^0.2.17" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "@vitejs/devtools": "^0.4.0", + "esbuild": "^0.27.0 || ^0.28.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "@vitejs/devtools": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/vitest": { + "version": "4.1.10", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.10.tgz", + "integrity": "sha512-R9jUTe5S4Qb0HCd4TNqpC7oGcrMssMRGXLW80ubjWsW9VH5GF8y1Y0SFLY9AbqSk6nt0PnOx4H4WNJYZ13GUPw==", + "dev": true, + "license": "MIT", "dependencies": { - "@types/unist": "^3.0.0", - "vfile": "^6.0.0" + "@vitest/expect": "4.1.10", + "@vitest/mocker": "4.1.10", + "@vitest/pretty-format": "4.1.10", + "@vitest/runner": "4.1.10", + "@vitest/snapshot": "4.1.10", + "@vitest/spy": "4.1.10", + "@vitest/utils": "4.1.10", + "es-module-lexer": "^2.0.0", + "expect-type": "^1.3.0", + "magic-string": "^0.30.21", + "obug": "^2.1.1", + "pathe": "^2.0.3", + "picomatch": "^4.0.3", + "std-env": "^4.0.0-rc.1", + "tinybench": "^2.9.0", + "tinyexec": "^1.0.2", + "tinyglobby": "^0.2.15", + "tinyrainbow": "^3.1.0", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0", + "why-is-node-running": "^2.3.0" + }, + "bin": { + "vitest": "vitest.mjs" + }, + "engines": { + "node": "^20.0.0 || ^22.0.0 || >=24.0.0" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "url": "https://opencollective.com/vitest" + }, + "peerDependencies": { + "@edge-runtime/vm": "*", + "@opentelemetry/api": "^1.9.0", + "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", + "@vitest/browser-playwright": "4.1.10", + "@vitest/browser-preview": "4.1.10", + "@vitest/browser-webdriverio": "4.1.10", + "@vitest/coverage-istanbul": "4.1.10", + "@vitest/coverage-v8": "4.1.10", + "@vitest/ui": "4.1.10", + "happy-dom": "*", + "jsdom": "*", + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + }, + "peerDependenciesMeta": { + "@edge-runtime/vm": { + "optional": true + }, + "@opentelemetry/api": { + "optional": true + }, + "@types/node": { + "optional": true + }, + "@vitest/browser-playwright": { + "optional": true + }, + "@vitest/browser-preview": { + "optional": true + }, + "@vitest/browser-webdriverio": { + "optional": true + }, + "@vitest/coverage-istanbul": { + "optional": true + }, + "@vitest/coverage-v8": { + "optional": true + }, + "@vitest/ui": { + "optional": true + }, + "happy-dom": { + "optional": true + }, + "jsdom": { + "optional": true + }, + "vite": { + "optional": false + } } }, - "node_modules/vfile-message": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", - "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", - "dependencies": { - "@types/unist": "^3.0.0", - "unist-util-stringify-position": "^4.0.0" + "node_modules/vitest/node_modules/es-module-lexer": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.3.1.tgz", + "integrity": "sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==", + "dev": true, + "license": "MIT" + }, + "node_modules/vitest/node_modules/picomatch": { + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" }, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/vitest/node_modules/std-env": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.2.0.tgz", + "integrity": "sha512-oCUKSupKTHX53EyjDtuZQ64pjLJ6yYCtpmEw0goYxtjG9KpbRe8KAsl2tBUGU9DyMcJ0RwJ8GqJAFzMXcXW1Rw==", + "dev": true, + "license": "MIT" + }, "node_modules/vscode-languageserver-textdocument": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/vscode-languageserver-textdocument/-/vscode-languageserver-textdocument-1.0.11.tgz", @@ -19069,6 +22287,7 @@ "version": "1.7.3", "resolved": "https://registry.npmjs.org/wbuf/-/wbuf-1.7.3.tgz", "integrity": "sha512-O84QOnr0icsbFGLS0O3bI5FswxzRr8/gHwWkDlQFskhSPryQXvrTMxjxGP4+iWYoauLoBvfDpkrOauZ+0iZpDA==", + "license": "MIT", "dependencies": { "minimalistic-assert": "^1.0.0" } @@ -19101,7 +22320,6 @@ "version": "5.99.5", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.99.5.tgz", "integrity": "sha512-q+vHBa6H9qwBLUlHL4Y7L0L1/LlyBKZtS9FHNCQmtayxjI5RKC9yD8gpvLeqGv5lCQp1Re04yi0MF40pf30Pvg==", - "peer": true, "dependencies": { "@types/eslint-scope": "^3.7.7", "@types/estree": "^1.0.6", @@ -19177,83 +22395,119 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "5.3.4", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", - "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", + "version": "7.4.5", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.4.5.tgz", + "integrity": "sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==", + "license": "MIT", "dependencies": { "colorette": "^2.0.10", - "memfs": "^3.4.3", - "mime-types": "^2.1.31", + "memfs": "^4.43.1", + "mime-types": "^3.0.1", + "on-finished": "^2.4.1", "range-parser": "^1.2.1", "schema-utils": "^4.0.0" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "webpack": { + "optional": true + } + } + }, + "node_modules/webpack-dev-middleware/node_modules/mime-db": { + "version": "1.54.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.54.0.tgz", + "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-middleware/node_modules/mime-types": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-3.0.2.tgz", + "integrity": "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A==", + "license": "MIT", + "dependencies": { + "mime-db": "^1.54.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/webpack-dev-middleware/node_modules/range-parser": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", - "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.3.0.tgz", + "integrity": "sha512-hek2mFQpPuI4E1BBKrSto+BU3e3x4xuarsbiwr3+lf7p44juvFMV0XFWQAP3xUyqXA4RrXLIoaSUGbSt056ZMw==", + "license": "MIT", "engines": { "node": ">= 0.6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/webpack-dev-server": { - "version": "4.15.2", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.15.2.tgz", - "integrity": "sha512-0XavAZbNJ5sDrCbkpWL8mia0o5WPOd2YGtxrEiZkBK9FjLppIUK2TgxK6qGD2P3hUXTJNNPVibrerKcx5WkR1g==", - "dependencies": { - "@types/bonjour": "^3.5.9", - "@types/connect-history-api-fallback": "^1.3.5", - "@types/express": "^4.17.13", - "@types/serve-index": "^1.9.1", - "@types/serve-static": "^1.13.10", - "@types/sockjs": "^0.3.33", - "@types/ws": "^8.5.5", + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.6.tgz", + "integrity": "sha512-HNLRmamRvVavZQ+avceZifmv8hmdUjg43t6MI4SqJDwFdW7RPQwH5vzGhDRZSX59SgfbeHhLnq3g+uooWo7pVw==", + "license": "MIT", + "dependencies": { + "@types/bonjour": "^3.5.13", + "@types/connect-history-api-fallback": "^1.5.4", + "@types/express": "^4.17.25", + "@types/express-serve-static-core": "^4.17.21", + "@types/serve-index": "^1.9.4", + "@types/serve-static": "^1.15.5", + "@types/sockjs": "^0.3.36", + "@types/ws": "^8.5.10", "ansi-html-community": "^0.0.8", - "bonjour-service": "^1.0.11", - "chokidar": "^3.5.3", + "bonjour-service": "^1.2.1", + "chokidar": "^3.6.0", "colorette": "^2.0.10", - "compression": "^1.7.4", + "compression": "^1.8.1", "connect-history-api-fallback": "^2.0.0", - "default-gateway": "^6.0.3", - "express": "^4.17.3", + "express": "^4.22.1", "graceful-fs": "^4.2.6", - "html-entities": "^2.3.2", - "http-proxy-middleware": "^2.0.3", - "ipaddr.js": "^2.0.1", - "launch-editor": "^2.6.0", - "open": "^8.0.9", - "p-retry": "^4.5.0", - "rimraf": "^3.0.2", - "schema-utils": "^4.0.0", - "selfsigned": "^2.1.1", + "http-proxy-middleware": "^2.0.9", + "ipaddr.js": "^2.1.0", + "launch-editor": "^2.14.1", + "open": "^10.0.3", + "p-retry": "^6.2.0", + "schema-utils": "^4.2.0", + "selfsigned": "^5.5.0", "serve-index": "^1.9.1", "sockjs": "^0.3.24", "spdy": "^4.0.2", - "webpack-dev-middleware": "^5.3.4", - "ws": "^8.13.0" + "webpack-dev-middleware": "^7.4.2", + "ws": "^8.18.0" }, "bin": { "webpack-dev-server": "bin/webpack-dev-server.js" }, "engines": { - "node": ">= 12.13.0" + "node": ">= 18.12.0" }, "funding": { "type": "opencollective", "url": "https://opencollective.com/webpack" }, "peerDependencies": { - "webpack": "^4.37.0 || ^5.0.0" + "webpack": "^5.0.0" }, "peerDependenciesMeta": { "webpack": { @@ -19264,10 +22518,41 @@ } } }, + "node_modules/webpack-dev-server/node_modules/define-lazy-prop": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz", + "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/webpack-dev-server/node_modules/open": { + "version": "10.2.0", + "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz", + "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==", + "license": "MIT", + "dependencies": { + "default-browser": "^5.2.1", + "define-lazy-prop": "^3.0.0", + "is-inside-container": "^1.0.0", + "wsl-utils": "^0.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/webpack-dev-server/node_modules/ws": { - "version": "8.18.1", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.1.tgz", - "integrity": "sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==", + "version": "8.21.2", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.2.tgz", + "integrity": "sha512-54dMVAo4WIe6SKy3vBgN+9bJZqqQ8IMRevAkOLQALhi49qkkQDQfWdAZ8KQlXiEabw88ARXXdUrlvtbKQX+aKw==", + "license": "MIT", "engines": { "node": ">=10.0.0" }, @@ -19306,76 +22591,37 @@ } }, "node_modules/webpackbar": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-6.0.1.tgz", - "integrity": "sha512-TnErZpmuKdwWBdMoexjio3KKX6ZtoKHRVvLIU0A47R0VVBDtx3ZyOJDktgYixhoJokZTYTt1Z37OkO9pnGJa9Q==", + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/webpackbar/-/webpackbar-7.0.0.tgz", + "integrity": "sha512-aS9soqSO2iCHgqHoCrj4LbfGQUboDCYJPSFOAchEK+9psIjNrfSWW4Y0YEz67MKURNvMmfo0ycOg9d/+OOf9/Q==", + "license": "MIT", "dependencies": { - "ansi-escapes": "^4.3.2", - "chalk": "^4.1.2", + "ansis": "^3.2.0", "consola": "^3.2.3", - "figures": "^3.2.0", - "markdown-table": "^2.0.0", "pretty-time": "^1.1.0", - "std-env": "^3.7.0", - "wrap-ansi": "^7.0.0" + "std-env": "^3.7.0" }, "engines": { "node": ">=14.21.3" }, "peerDependencies": { + "@rspack/core": "*", "webpack": "3 || 4 || 5" - } - }, - "node_modules/webpackbar/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/webpackbar/node_modules/markdown-table": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", - "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==", - "dependencies": { - "repeat-string": "^1.0.0" - }, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "node_modules/webpackbar/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/webpackbar/node_modules/wrap-ansi": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", - "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", - "dependencies": { - "ansi-styles": "^4.0.0", - "string-width": "^4.1.0", - "strip-ansi": "^6.0.0" - }, - "engines": { - "node": ">=10" }, - "funding": { - "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } } }, "node_modules/websocket-driver": { - "version": "0.7.4", - "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", - "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==", + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.5.tgz", + "integrity": "sha512-ZL2+3c7kMBdIRCMz6l8jQMHyGVxj+UL+xVk74Ombiciboca8rHa15L86B19E5oh1pL9Ii/uj54gtsIrZGMo6zA==", + "license": "Apache-2.0", "dependencies": { "http-parser-js": ">=0.5.1", "safe-buffer": ">=5.1.0", @@ -19389,6 +22635,7 @@ "version": "0.1.4", "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz", "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", + "license": "Apache-2.0", "engines": { "node": ">=0.8.0" } @@ -19417,6 +22664,23 @@ "node": ">= 8" } }, + "node_modules/why-is-node-running": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz", + "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==", + "dev": true, + "license": "MIT", + "dependencies": { + "siginfo": "^2.0.0", + "stackback": "0.0.2" + }, + "bin": { + "why-is-node-running": "cli.js" + }, + "engines": { + "node": ">=8" + } + }, "node_modules/widest-line": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/widest-line/-/widest-line-4.0.1.tgz", @@ -19524,6 +22788,36 @@ } } }, + "node_modules/wsl-utils": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz", + "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==", + "license": "MIT", + "dependencies": { + "is-wsl": "^3.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/wsl-utils/node_modules/is-wsl": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz", + "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==", + "license": "MIT", + "dependencies": { + "is-inside-container": "^1.0.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/xdg-basedir": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-4.0.0.tgz", @@ -19537,6 +22831,7 @@ "version": "1.6.11", "resolved": "https://registry.npmjs.org/xml-js/-/xml-js-1.6.11.tgz", "integrity": "sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==", + "license": "MIT", "dependencies": { "sax": "^1.2.4" }, @@ -19544,44 +22839,11 @@ "xml-js": "bin/cli.js" } }, - "node_modules/y18n": { - "version": "5.0.8", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", - "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==", - "engines": { - "node": ">=10" - } - }, "node_modules/yallist": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz", "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==" }, - "node_modules/yaml": { - "version": "1.10.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", - "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", - "engines": { - "node": ">= 6" - } - }, - "node_modules/yargs": { - "version": "16.2.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz", - "integrity": "sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==", - "dependencies": { - "cliui": "^7.0.2", - "escalade": "^3.1.1", - "get-caller-file": "^2.0.5", - "require-directory": "^2.1.1", - "string-width": "^4.2.0", - "y18n": "^5.0.5", - "yargs-parser": "^20.2.2" - }, - "engines": { - "node": ">=10" - } - }, "node_modules/yargs-parser": { "version": "21.1.1", "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz", @@ -19591,46 +22853,11 @@ "node": ">=12" } }, - "node_modules/yargs/node_modules/emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==" - }, - "node_modules/yargs/node_modules/string-width": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", - "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", - "dependencies": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.1" - }, - "engines": { - "node": ">=8" - } - }, - "node_modules/yargs/node_modules/yargs-parser": { - "version": "20.2.9", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz", - "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==", - "engines": { - "node": ">=10" - } - }, - "node_modules/yn": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", - "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/yocto-queue": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, "engines": { "node": ">=10" }, diff --git a/package.json b/package.json index 44c33506590..24f9b175e02 100644 --- a/package.json +++ b/package.json @@ -6,28 +6,24 @@ "node": ">=20.0.0" }, "scripts": { - "prebuild": "npm run generate-markdown; scripts/i18n.sh; if [ -n \"$CROWDIN_PERSONAL_TOKEN\" ]; then npm run crowdin:sync; fi", + "prebuild": "npm run generate-markdown && scripts/i18n.sh && if [ -n \"$CROWDIN_PERSONAL_TOKEN\" ]; then npm run crowdin:sync; fi", "build": "npm run build:${VERCEL_ENV:-preview}", "build:preview": "docusaurus build --locale en", "build:production": "docusaurus build", - "build:ci": "npm run build:production && npm run netlify-redirect && mkdir www && mv build www/docs", "clear": "docusaurus clear", "crowdin:sync": "docusaurus write-translations && crowdin upload && crowdin download", "deploy": "docusaurus deploy", "docusaurus": "docusaurus", - "generate-markdown": "node scripts/native.mjs && concurrently \"node scripts/cli.mjs\" \"node scripts/release-notes.mjs\"", + "generate-markdown": "node scripts/native.mjs && node scripts/cli.mjs && node scripts/release-notes.mjs", "lint": "npm run prettier -- --write", "serve": "docusaurus serve", "playground:new": "hygen playground new", "prestart": "npm run generate-markdown", - "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md}\" --cache", + "prettier": "prettier \"./**/*.{html,ts,tsx,js,jsx,md,mdx}\" --cache", "start": "docusaurus start", + "test": "vitest run", "swizzle": "docusaurus swizzle", - "translate": "ts-node -P scripts/build-translate/tsconfig.json scripts/build-translate apply", - "translate:create": "ts-node -P scripts/build-translate/tsconfig.json scripts/build-translate create && ts-node -P scripts/build-translate/tsconfig.json scripts/build-translate diff", - "netlify-redirect": "cp redirects build/_redirects", - "build-site": "git clone https://github.com/ionic-jp/community-site.git site && cd site && npm install && npm run build.ci && cd .. && mv site/www/* www/ && rm -rf site", - "spellcheck": "cspell --no-progress \"**/*.md\"" + "spellcheck": "cspell --no-progress \"**/*.{md,mdx}\"" }, "browserslist": { "production": [ @@ -42,43 +38,43 @@ ] }, "dependencies": { - "@docusaurus/core": "^3.7.0", - "@docusaurus/mdx-loader": "^3.7.0", - "@docusaurus/plugin-client-redirects": "^3.7.0", - "@docusaurus/preset-classic": "^3.7.0", + "@docusaurus/core": "^3.10.2", + "@docusaurus/faster": "^3.10.2", + "@docusaurus/mdx-loader": "^3.10.2", + "@docusaurus/plugin-client-redirects": "^3.10.2", + "@docusaurus/preset-classic": "^3.10.2", + "@floating-ui/react": "^0.27.20", "@ionic-internal/ionic-ds": "^7.0.0", "@mdx-js/react": "^3.0.0", - "@prismicio/client": "^6.4.2", - "@prismicio/react": "^2.2.0", + "@prismicio/client": "^7.21.8", + "@prismicio/react": "^3.4.1", "@stackblitz/sdk": "^1.6.0", - "@tippyjs/react": "^4.2.6", "clsx": "^1.1.1", - "concurrently": "^6.2.0", "crowdin": "^3.5.0", + "docusaurus-plugin-copy-page-button": "^0.8.2", "docusaurus-plugin-module-alias": "^0.0.2", "docusaurus-plugin-sass": "^0.2.6", "fs-extra": "^9.1.0", "modern-normalize": "^1.1.0", "prism-react-renderer": "^2.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", + "react": "^19.2.8", + "react-dom": "^19.2.8", "remark-html": "^16.0.1", "remark-parse": "^11.0.0", "sass": "^1.44.0", "semver": "^7.3.5" }, "devDependencies": { - "@docusaurus/module-type-aliases": "^3.7.0", - "@docusaurus/tsconfig": "^3.7.0", + "@docusaurus/module-type-aliases": "^3.10.2", + "@docusaurus/tsconfig": "^3.10.2", "@ionic/prettier-config": "^3.0.0", - "@types/react": "^18.2.29", + "@types/react": "^19.2.18", "cspell": "^6.31.3", - "deepl": "^1.0.13", "html-loader": "^3.1.0", "hygen": "^6.2.11", "prettier": "^2.8.8", - "ts-node": "^10.4.0", - "typescript": "^5.2.2" + "typescript": "^5.2.2", + "vitest": "^4.1.7" }, "prettier": "@ionic/prettier-config" } diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index c8ee274f07b..38636dd98a2 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -141,6 +141,38 @@ function formatMultiline(str) { return str.split('\n\n').join('

').split('\n').join(' '); } +/** + * Kebab-case slug for API identifiers (camelCase props, method names). + */ +function apiIdentifierSlug(name) { + return name + .replace(/([a-z0-9])([A-Z])/g, '$1-$2') + .replace(/_/g, '-') + .toLowerCase(); +} + +/** + * Heading id for Properties subheadings. + * Prefixes IDs with `prop-` so they never collide with narrative sections on the same + * doc page that use headings like "Shape", "Fill", or "Size". + * + * Anchors become `#prop-${slug}` rather than `#${slug}`. + */ +function propertyHeadingId(propName) { + return `prop-${apiIdentifierSlug(propName)}`; +} + +/** + * Heading id for Methods subheadings. + * Prefixes IDs with `method-` so they never collide with narrative sections on the same + * doc page that use headings like "Dismiss", "Present", or "Close". + * + * Anchors become `#method-${slug}` rather than `#${slug}`. + */ +function methodHeadingId(methodName) { + return `method-${apiIdentifierSlug(methodName)}`; +} + function formatType(attr, type) { if (attr === 'color') { /** @@ -190,7 +222,7 @@ ${properties } return ` -### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} +### ${prop.name} ${isDeprecated ? '(deprecated)' : ''} {#${propertyHeadingId(prop.name)}} | | | | --- | --- | @@ -252,7 +284,7 @@ function renderMethods({ methods }) { ${methods .map( (method) => ` -### ${method.name} +### ${method.name} {#${methodHeadingId(method.name)}} | | | | --- | --- | @@ -340,7 +372,12 @@ function renderSlots({ slots }) { return ` | Name | Description | | --- | --- | -${slots.map((slot) => `| \`${slot.name}\` | ${formatMultiline(slot.docs)} |`).join('\n')} - +${slots + .map((slot) => { + const slotName = slot.name?.trim(); + const displayedSlotName = slotName ? `\`${slotName}\`` : ''; + return `| ${displayedSlotName} | ${formatMultiline(slot.docs)} |`; + }) + .join('\n')} `; } diff --git a/renovate.json b/renovate.json index 2e83911a07d..e27fdf6f194 100644 --- a/renovate.json +++ b/renovate.json @@ -43,6 +43,22 @@ "static/code/stackblitz/**/vue/package.json" ] }, + { + "matchPackageNames": ["vite"], + "allowedVersions": "^7.0.0", + "matchFileNames": [ + "static/code/stackblitz/**/html/package.json", + "static/code/stackblitz/**/react/package.json", + "static/code/stackblitz/**/vue/package.json" + ] + }, + { + "matchPackageNames": ["@vitejs/plugin-react"], + "allowedVersions": "^5.0.0", + "matchFileNames": [ + "static/code/stackblitz/**/react/package.json" + ] + }, { "matchPackagePatterns": ["@ionic/"], "minimumReleaseAge": "0 days", @@ -74,7 +90,8 @@ "schedule": ["every weekday before 11am"], "semanticCommits": "enabled", "includePaths": [ - "static/code/stackblitz/**/*/package.json" + "static/code/stackblitz/**/*/package.json", + ".github/workflows/**" ], "ignorePaths": [ "static/code/stackblitz/v6/**" diff --git a/scripts/cli.mjs b/scripts/cli.mjs index 168c918225f..6f023147ef8 100644 --- a/scripts/cli.mjs +++ b/scripts/cli.mjs @@ -15,6 +15,7 @@ const commandToKebab = (str) => const { commands } = cliJSON; commands.map(writePage); + console.log(`📟 CLI Commands Generated`); })(); function writePage(page) { @@ -31,6 +32,7 @@ function writePage(page) { writeFileSync(`docs/${path}`, data); writeFileSync(`versioned_docs/version-v6/${path}`, data); writeFileSync(`versioned_docs/version-v7/${path}`, data); + writeFileSync(`versioned_docs/version-v8/${path}`, data); } function renderFrontmatter({ name, groups }) { diff --git a/scripts/native.mjs b/scripts/native.mjs index 631f32c0f19..670c05bbe14 100644 --- a/scripts/native.mjs +++ b/scripts/native.mjs @@ -1,7 +1,6 @@ import { writeFileSync } from 'fs'; import fetch from 'node-fetch'; -// replace with latest once it's relased const tag = 'latest'; const pluginApis = [ @@ -40,6 +39,7 @@ async function buildPluginApiDocs(pluginId) { writeFileSync(`docs/native/${fileName}`, apiContent); writeFileSync(`versioned_docs/version-v6/native/${fileName}`, apiContent); writeFileSync(`versioned_docs/version-v7/native/${fileName}`, apiContent); + writeFileSync(`versioned_docs/version-v8/native/${fileName}`, apiContent); } function createApiPage(pluginId, readme, pkgJson) { @@ -51,7 +51,7 @@ function createApiPage(pluginId, readme, pkgJson) { /** * Cleanup and transform JSDoc content for compatibility with MDX/Docusaurus: - * + * * - Remove HTML comments (``) which are not valid in MDX and will cause parsing errors. * - Escape `{` characters inside blocks because MDX treats `{}` as JavaScript expressions. Unescaped `{` inside code blocks can cause parsing errors. * - Convert JSDoc-style {@link URL|Text} and {@link URL} to proper Markdown links: @@ -97,7 +97,7 @@ async function getPkgJsonData(pluginId) { async function main() { await Promise.all(pluginApis.map(buildPluginApiDocs)); - console.log(`Plugin API Files Updated 🎸`); + console.log(`🔌 Capacitor Plugins Generated`); } function toTitleCase(str) { diff --git a/scripts/release-notes.mjs b/scripts/release-notes.mjs index a4e82310881..57d7db58e36 100644 --- a/scripts/release-notes.mjs +++ b/scripts/release-notes.mjs @@ -10,64 +10,60 @@ const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const OUTPUT_PATH = resolve(__dirname, '../src/components/page/reference/ReleaseNotes/release-notes.json'); -// export default { -// title: 'Build Release Notes data', -// task: async () => outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 }) -// }; - -// Get the GitHub Releases from Ionic +// Get the GitHub Releases from Ionic Framework // ------------------------------------------------------------------------------- -// This requires an environment GITHUB_TOKEN otherwise it may fail -// -// To add a GITHUB_TOKEN, follow the steps to create a personal access token: -// https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token -// and then authorize it to work with SSO: -// https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on +// Requires a GITHUB_TOKEN environment variable. Refer to +// https://github.com/ionic-team/ionic-docs/blob/main/CONTRIBUTING.md#github-token +// for setup instructions. const getReleases = async () => { - try { - const request = await fetch(new URL('repos/ionic-team/ionic/releases', 'https://api.github.com'), { - headers: { - Authorization: process.env.GITHUB_TOKEN !== undefined ? `token ${process.env.GITHUB_TOKEN}` : '', - }, - }); - - const releases = await request.json(); - - // Check that the response is an array in case it was - // successful but returned an object - if (Array.isArray(releases)) { - return releases - .filter((release) => { - const releasePattern = /^v(\d+)\.(\d+)\.(\d+)$/; - - // All non-prerelease, non-alpha, non-beta, non-rc release - return releasePattern.test(release.tag_name); - }) - .map((release) => { - const body = renderMarkdown(release.body.replace(/^#.*/, '')).value; - const published_at = parseDate(release.published_at); - const version = release.tag_name.replace('v', ''); - const type = getVersionType(version); - const { name, tag_name } = release; - - return { - body, - name, - published_at, - tag_name, - type, - version, - }; - }) - .sort((a, b) => { - return -compare(a.tag_name, b.tag_name); - }); - } else { - console.error('There was an issue getting releases:', releases); - return []; + if (!process.env.GITHUB_TOKEN) { + throw new Error('GITHUB_TOKEN environment variable is required.'); + } + + const url = new URL('repos/ionic-team/ionic-framework/releases', 'https://api.github.com'); + const headers = { Authorization: `token ${process.env.GITHUB_TOKEN}` }; + const request = await fetch(url, { headers }); + + if (!request.ok) { + const error = await request.json().catch(() => ({})); + let message = `GitHub API returned ${request.status} ${request.statusText}: ${error.message ?? 'Unknown error'}.`; + + if (request.status === 401 && error.message?.includes('Bad credentials')) { + message += ' Check that GITHUB_TOKEN is set and is a valid GitHub Personal Access Token.'; } - } catch (error) { - return []; + + throw new Error(message); + } + + const releases = await request.json(); + + // Check that the response is an array in case it was + // successful but returned an object + if (Array.isArray(releases)) { + return releases + .filter((release) => { + const releasePattern = /^v(\d+)\.(\d+)\.(\d+)$/; + return releasePattern.test(release.tag_name); + }) + .map((release) => { + const body = renderMarkdown((release.body ?? '').replace(/^#.*/, '')).value; + const published_at = parseDate(release.published_at); + const version = release.tag_name.replace('v', ''); + const type = getVersionType(version); + const { name, tag_name } = release; + + return { + body, + name, + published_at, + tag_name, + type, + version, + }; + }) + .sort((a, b) => -compare(a.tag_name, b.tag_name)); + } else { + throw new Error('GitHub API returned an unexpected response format.'); } }; @@ -98,7 +94,21 @@ function getVersionType(version) { async function run() { const { outputJson } = pkg; - outputJson(OUTPUT_PATH, await getReleases(), { spaces: 2 }); + try { + const releases = await getReleases(); + outputJson(OUTPUT_PATH, releases, { spaces: 2 }); + console.log(`🚀 Release Notes Generated`); + } catch (error) { + // Only fail the build in CI environments and the preview + // or production Vercel environments. + const shouldFail = process.env.CI || ['production', 'preview'].includes(process.env.VERCEL_ENV); + if (shouldFail) { + console.error(`\n❌ Release Notes Failed\n ⇢ ${error.message}\n`); + process.exit(1); + } + console.warn(`\n⚠️ Release Notes Failed\n ⇢ ${error.message}`); + outputJson(OUTPUT_PATH, [], { spaces: 2 }); + } } run(); diff --git a/sidebars.js b/sidebars.js index 229d8701709..b66d083c6d6 100644 --- a/sidebars.js +++ b/sidebars.js @@ -10,7 +10,7 @@ module.exports = { type: 'category', label: 'アップグレードガイド', collapsed: false, - items: ['updating/8-0', 'updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'], + items: ['updating/9-0', 'updating/8-0', 'updating/7-0', 'updating/6-0', 'updating/5-0', 'updating/4-0'], }, { type: 'category', @@ -72,6 +72,7 @@ module.exports = { { type: 'category', label: 'Build Your First App', + key: 'angular-your-first-app', items: [ 'angular/your-first-app', 'angular/your-first-app/taking-photos', @@ -95,6 +96,7 @@ module.exports = { 'angular/testing', 'angular/storage', 'angular/performance', + 'angular/zoneless', 'angular/pwa', ], }, @@ -114,6 +116,7 @@ module.exports = { { type: 'category', label: 'Build Your First App', + key: 'react-your-first-app', items: [ 'react/your-first-app', 'react/your-first-app/taking-photos', @@ -130,6 +133,7 @@ module.exports = { 'react/navigation', 'react/virtual-scroll', 'react/slides', + 'react/utility-functions', 'react/platform', 'react/pwa', 'react/overlays', @@ -164,6 +168,7 @@ module.exports = { { type: 'category', label: 'Build Your First App', + key: 'vue-your-first-app', items: [ 'vue/your-first-app', 'vue/your-first-app/taking-photos', @@ -183,6 +188,7 @@ module.exports = { 'vue/slides', 'vue/utility-functions', 'vue/platform', + 'vue/testing', 'vue/pwa', 'vue/storage', 'vue/troubleshooting', @@ -197,7 +203,7 @@ module.exports = { }, { type: 'category', - label: '開発', + label: 'デプロイ', collapsed: false, items: ['deployment/app-store', 'deployment/play-store', 'deployment/progressive-web-app'], }, @@ -326,14 +332,7 @@ module.exports = { type: 'category', label: '日付 & タイムピッカー', collapsed: false, - items: [ - 'api/datetime', - 'api/datetime-button', - 'api/picker', - 'api/picker-column', - 'api/picker-column-option', - 'api/picker-legacy', - ], + items: ['api/datetime', 'api/datetime-button', 'api/picker', 'api/picker-column', 'api/picker-column-option'], }, { type: 'category', diff --git a/src/components/global/Codepen/index.tsx b/src/components/global/Codepen/index.tsx index 6251784aa86..8b7b8854da9 100644 --- a/src/components/global/Codepen/index.tsx +++ b/src/components/global/Codepen/index.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { type ReactNode } from 'react'; import { useScript } from '@site/src/utils/hooks'; -function CodePen(props): JSX.Element { +function CodePen(props): ReactNode { const status = useScript('https://static.codepen.io/assets/embed/ei.js'); // console.log('test',status, props) return ( diff --git a/src/components/global/DocsCard/index.tsx b/src/components/global/DocsCard/index.tsx index 0ca705cd4c0..0e191ae6618 100644 --- a/src/components/global/DocsCard/index.tsx +++ b/src/components/global/DocsCard/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { type ReactNode } from 'react'; import clsx from 'clsx'; import Link from '@docusaurus/Link'; import useBaseUrl from '@docusaurus/useBaseUrl'; @@ -16,7 +16,7 @@ interface Props extends React.HTMLAttributes { size?: 'md' | 'lg'; } -function DocsCard(props: Props): JSX.Element { +function DocsCard(props: Props): ReactNode { const isStatic = typeof props.href === 'undefined'; const isOutbound = typeof props.href !== 'undefined' ? /^http/.test(props.href) : false; const header = props.header === 'undefined' ? null :
{props.header}
; diff --git a/src/components/global/DocsCards/index.tsx b/src/components/global/DocsCards/index.tsx index 102e13826a1..ea2d310e791 100644 --- a/src/components/global/DocsCards/index.tsx +++ b/src/components/global/DocsCards/index.tsx @@ -1,8 +1,8 @@ -import React from 'react'; +import React, { type ReactNode } from 'react'; import './cards.css'; -function DocsCards(props): JSX.Element { +function DocsCards(props): ReactNode { return {props.children}; } diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index 3489ae7840b..e47a69075ca 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -6,10 +6,9 @@ import { EditorOptions, openAngularEditor, openHtmlEditor, openReactEditor, open import { useColorMode } from '@docusaurus/theme-common'; import { ConsoleItem, Mode, UsageTarget } from './playground.types'; -import Tippy from '@tippyjs/react'; -import 'tippy.js/dist/tippy.css'; +import Tooltip from '../Tooltip'; import PlaygroundTabs from '../PlaygroundTabs'; -import TabItem from '@theme/TabItem'; +import TabItem from '../PlaygroundTabs/TabItem'; import { IconHtml, IconTs, IconVue, IconDefault, IconCss, IconDots } from './icons'; @@ -47,10 +46,10 @@ const ControlButton = forwardRef( ); if (disabled) { return ( - - {/* Tippy requires a wrapper element for disabled elements: https://atomiks.github.io/tippyjs/v5/creating-tooltips/#disabled-elements */} + + {/* Disabled elements do not emit pointer events, so the wrapper is what triggers the tooltip. */}
{controlButton}
- + ); } return controlButton; @@ -120,8 +119,13 @@ interface UsageTargetOptions { * @param description Optional description of the generated playground example. Specify to customize the StackBlitz description. * @param src The absolute path to the playground demo. For example: `/usage/button/basic/demo.html` * @param size The height of the playground. Supports `xsmall`, `small`, `medium`, `large`, 'xlarge' or any string value. + * @param mode Restricts the playground to a single specified mode. Acceptable values are: `ios` or `md`. * @param devicePreview `true` if the playground example should render in a device frame (iOS/MD). * @param showConsole `true` if the playground should render a console UI that reflects console logs, warnings, and errors. + * @param includeIonContent Whether to include the `ion-app` and `ion-content` elements in the generated StackBlitz example. + * @param version The major version of Ionic to use in the generated StackBlitz example. + * @param defaultFramework The framework to select by default when no user preference is stored. + * @returns The generated StackBlitz example. */ export default function Playground({ code, @@ -134,6 +138,7 @@ export default function Playground({ showConsole, includeIonContent = true, version, + defaultFramework, }: { code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions }; title?: string; @@ -154,6 +159,11 @@ export default function Playground({ * This will also load assets for StackBlitz from the specified version directory. */ version: string; + /** + * The framework to select by default when no user preference is stored. + * If not specified, defaults to Angular when available, then the first available framework. + */ + defaultFramework?: UsageTarget; }) { if (!code || Object.keys(code).length === 0) { console.warn('No code usage examples provided for this Playground example.'); @@ -207,6 +217,13 @@ export default function Playground({ }; const getDefaultUsageTarget = () => { + /** + * If a default framework was specified and code exists for it, use that. + */ + if (defaultFramework && code[defaultFramework] !== undefined) { + return defaultFramework; + } + /** * If there is a saved target from previously clicking the * framework buttons, and there is code for it, use that. @@ -431,10 +448,15 @@ export default function Playground({ /** * Load the stored mode and/or usage target, if present - * from previously being toggled. + * from previously being toggled. Skip the usage target + * reset when defaultFramework is set, since the initial + * value is already correct and user tab clicks should + * be preserved. */ setIonicMode(getDefaultMode()); - setUsageTarget(getDefaultUsageTarget()); + if (!defaultFramework) { + setUsageTarget(getDefaultUsageTarget()); + } /** * If the iframes weren't already loaded, load them now. @@ -652,9 +674,7 @@ export default function Playground({ value={fileName} label={fileName} key={fileName} - {...{ - icon: getFileIcon(fileName), - }} + icon={getFileIcon(fileName)} >
{codeSnippets[usageTarget][fileName]}
 @@ -742,7 +762,7 @@ export default function Playground({ />
- + - - + - - + + - - + + - +
{renderIframes diff --git a/src/components/global/Playground/playground.css b/src/components/global/Playground/playground.css index 79e33680792..1a29ce6c356 100644 --- a/src/components/global/Playground/playground.css +++ b/src/components/global/Playground/playground.css @@ -383,19 +383,6 @@ background: var(--playground-code-background); } -/* Tooltip styling */ -.tippy-box[data-theme="playground"] { - background-color: var(--c-carbon-90); - border-radius: 8px; - line-height: initial; - font-size: 12px; -} - -.tippy-box[data-theme="playground"] .tippy-content { - padding: 6px 10px; -} - - /* Loading Screen */ .playground .playground__loading { position: absolute; diff --git a/src/components/global/Playground/stackblitz.utils.spec.ts b/src/components/global/Playground/stackblitz.utils.spec.ts new file mode 100644 index 00000000000..02a166894fe --- /dev/null +++ b/src/components/global/Playground/stackblitz.utils.spec.ts @@ -0,0 +1,580 @@ +import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'; + +vi.mock('@stackblitz/sdk', () => ({ + default: { + openProject: vi.fn(), + }, +})); + +import sdk from '@stackblitz/sdk'; + +import { + extractHtmlIonicConfig, + getFormattedIonicConfig, + mergeFormattedIonicConfig, + openAngularEditor, + openHtmlEditor, + openReactEditor, + openVueEditor, +} from './stackblitz.utils'; + +const createMockFetch = (files: Record, version = 'v9') => + vi.fn(async (input: string | URL | Request) => { + const path = String(input).replace(`/docs/code/stackblitz/${version}/`, ''); + return { text: async () => files[path] ?? '' } as Response; + }) as typeof fetch; + +describe('stackblitz.utils', () => { + const originalFetch = global.fetch; + + beforeEach(() => { + vi.clearAllMocks(); + }); + + afterEach(() => { + global.fetch = originalFetch; + }); + + describe('getFormattedIonicConfig()', () => { + it('formats mode config with canonical 2-space indentation', () => { + expect(getFormattedIonicConfig({ mode: 'md' })).toBe('{\n mode: "md"\n}'); + }); + + it('returns "{}" when no mode is provided', () => { + expect(getFormattedIonicConfig()).toBe('{}'); + }); + }); + + describe('mergeFormattedIonicConfig()', () => { + it('merges existing config and mode into canonical 2-space format', () => { + const existingConfig = `{ + innerHTMLTemplatesEnabled: true, + }`; + + const merged = mergeFormattedIonicConfig(existingConfig, getFormattedIonicConfig({ mode: 'md' })); + + expect(merged).toBe(`{ + innerHTMLTemplatesEnabled: true, + mode: "md" +}`); + }); + + it('returns only the mode config when the existing config is malformed', () => { + expect(mergeFormattedIonicConfig('not an object', getFormattedIonicConfig({ mode: 'md' }))).toBe( + '{\n mode: "md"\n}' + ); + }); + + it('returns only the mode config when the existing config has only whitespace inside braces', () => { + expect(mergeFormattedIonicConfig('{ }', getFormattedIonicConfig({ mode: 'md' }))).toBe('{\n mode: "md"\n}'); + }); + }); + + describe('extractHtmlIonicConfig()', () => { + it('extracts inline window.Ionic config and merges it with mode config', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toBe(''); + expect(transformed.ionicConfig).toBe(`{ + innerHTMLTemplatesEnabled: true, + mode: "md" +}`); + }); + + it('keeps passed JavaScript when no window.Ionic config assignment exists', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toBe(source); + expect(transformed.ionicConfig).toBe('{\n mode: "md"\n}'); + }); + + it('does not combine an unrelated script block', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toBe(source); + expect(transformed.ionicConfig).toBe('{\n mode: "md"\n}'); + }); + + it('keeps unrelated scripts when extracting window.Ionic config script', () => { + const source = ` +`; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toContain(`console.log('keep me');`); + expect(transformed.code).not.toContain('window.Ionic = {'); + expect(transformed.ionicConfig).toBe(`{ + innerHTMLTemplatesEnabled: true, + mode: "md" +}`); + }); + + it('captures a block-comment block attached to the window.Ionic assignment', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toContain(`console.log('keep me');`); + expect(transformed.code).not.toContain('window.Ionic = {'); + expect(transformed.code).not.toContain('innerHTMLTemplatesEnabled'); + expect(transformed.code).not.toContain('must be enabled for rich-content'); + expect(transformed.leadingComment).toContain('must be enabled for rich-content'); + expect(transformed.ionicConfig).toBe(`{ + innerHTMLTemplatesEnabled: true, + mode: "md" +}`); + }); + + it('captures leading // comments attached to the window.Ionic assignment', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toContain(`console.log('keep me');`); + expect(transformed.code).not.toContain('window.Ionic = {'); + expect(transformed.code).not.toContain('innerHTMLTemplatesEnabled'); + expect(transformed.code).not.toContain('must be enabled for rich-content'); + expect(transformed.leadingComment).toContain('must be enabled for rich-content'); + expect(transformed.ionicConfig).toBe(`{ + innerHTMLTemplatesEnabled: true, + mode: "md" +}`); + }); + + it('does not leave blank lines before remaining script content', () => { + const source = ``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toContain(``; + + const transformed = extractHtmlIonicConfig(source, getFormattedIonicConfig({ mode: 'md' })); + + expect(transformed.code).toContain(`/g; +// Matches a live `window.Ionic = { config: ... }` assignment. +// Also captures JS comments directly above it (// or /* */). +// Captures: (1) leading indent, (2) optional comment block, +// and (3) inner config object so comments can be re-attached +// when the assignment is moved into the generated head script. +const WINDOW_IONIC_CONFIG_ASSIGNMENT_REGEX = + /^([ \t]*)((?:\/\/[^\n]*\n[ \t]*)+|\/\*[\s\S]*?\*\/\s*)?window\.Ionic\s*=\s*\{\s*config\s*:\s*(\{[\s\S]*?\})\s*,?\s*\};?[ \t]*/m; export interface EditorOptions { /** @@ -31,23 +41,221 @@ export interface EditorOptions { * `true` if `ion-app` and `ion-content` should automatically be injected into the * StackBlitz example. */ - includeIonContent: boolean; + includeIonContent?: boolean; /** * The mode of the StackBlitz example. */ mode?: string; - version?: string; + /** + * The major version of Ionic to use in the generated StackBlitz example. + * For example: `9` for Ionic 9. + */ + version: string; } +// Returns the inner content of a `{ ... }` config string. +// If braces are missing or malformed, returns an empty string. +const getConfigInnerContent = (config: string) => { + const firstBrace = config.indexOf('{'); + const lastBrace = config.lastIndexOf('}'); + if (firstBrace === -1 || lastBrace === -1 || firstBrace >= lastBrace) { + return ''; + } + return config.slice(firstBrace + 1, lastBrace); +}; + +/** + * Formats the Ionic config object for the generated StackBlitz example. + * Always emits canonical 2-space indentation, and returns `{}` when mode is missing. + */ +const getFormattedIonicConfig = (options?: Pick) => { + if (!options?.mode) { + return '{}'; + } + return `{\n mode: ${JSON.stringify(options.mode)}\n}`; +}; + +// Merges the generated mode config into an existing config object string. +// The existing inner content is re-indented to canonical 2 spaces so embedded +// comments and properties align consistently, regardless of how deep the source +// snippet's config was nested. +const mergeFormattedIonicConfig = (existingConfig: string | undefined, modeConfig: string) => { + if (!existingConfig) { + return modeConfig; + } + + const modeInner = getConfigInnerContent(modeConfig).trim(); + if (modeInner.length === 0) { + return existingConfig; + } + + const existingLines = getConfigInnerContent(existingConfig) + .split('\n') + .filter((line) => line.trim().length > 0); + if (existingLines.length === 0) { + return `{\n ${modeInner}\n}`; + } + + const minIndent = Math.min(...existingLines.map((line) => line.match(/^\s*/)?.[0].length ?? 0)); + const normalizedInner = existingLines + .map((line) => ` ${line.slice(minIndent)}`) + .join('\n') + .replace(/,$/, ''); + + return `{\n${normalizedInner},\n ${modeInner}\n}`; +}; + +// Indents every line after the first so a multi-line config can be +// safely inlined after `config:` without shifting the first line. +const indentConfig = (config: string, baseIndent: string) => + config + .split('\n') + .map((line, index) => (index === 0 ? line : `${baseIndent}${line}`)) + .join('\n'); + +// Normalizes a captured comment block to a target indent while preserving +// relative spacing inside the block (for example `*` alignment in JSDoc). +const reindentCommentBlock = (comment: string | undefined, indent: string) => { + if (!comment) return ''; + const lines = comment.split('\n').filter((line) => line.trim().length > 0); + if (lines.length === 0) return ''; + const minIndent = Math.min(...lines.map((line) => line.match(/^\s*/)?.[0].length ?? 0)); + return lines.map((line) => `${indent}${line.slice(minIndent)}`).join('\n'); +}; + +// Inserts the final Ionic config object into the generated framework code. +// The merged config is re-indented to align with the call expression's own +// indentation in the source, so deeply nested calls (e.g. provideIonicAngular +// inside a providers array) stay visually consistent. +const injectFrameworkIonicConfig = ( + source: string, + pattern: RegExp, + ionicConfig: string, + rebuild: (mergedConfig: string) => string +) => + source.replace(pattern, (...args: unknown[]) => { + const existing = args[1] as string | undefined; + const offset = args[args.length - 2] as number; + const full = args[args.length - 1] as string; + + const lineStart = full.lastIndexOf('\n', offset - 1) + 1; + const callIndent = full.slice(lineStart, offset).match(/^[ \t]*/)?.[0] ?? ''; + + const merged = mergeFormattedIonicConfig(existing, ionicConfig); + return rebuild(indentConfig(merged, callIndent)); + }); + +// Temporarily masks HTML comments so window.Ionic extraction does not parse +// commented-out script blocks as live code. +const maskHtmlComments = (html: string) => { + const commentPlaceholders: string[] = []; + const maskedHtml = html.replace(HTML_COMMENT_REGEX, (commentBlock) => { + const placeholder = `${HTML_COMMENT_PLACEHOLDER}${commentPlaceholders.length}__`; + commentPlaceholders.push(commentBlock); + return placeholder; + }); + + return { + maskedHtml, + restore: (text: string) => + text.replace( + new RegExp(`${HTML_COMMENT_PLACEHOLDER}(\\d+)__`, 'g'), + (_, index: string) => commentPlaceholders[Number(index)] + ), + }; +}; + +// Extracts live `window.Ionic = { config: ... }` assignments from snippet code. +// Returns cleaned source, merged config payload, and an attached leading +// JS comment (if present) so callers can re-inject it in generated output. +const extractHtmlIonicConfig = (code: string, ionicConfig: string) => { + let existingConfig: string | undefined; + let leadingComment: string | undefined; + const { maskedHtml, restore } = maskHtmlComments(code); + + let cleanedCode = maskedHtml.replace( + WINDOW_IONIC_CONFIG_ASSIGNMENT_REGEX, + (_, indent: string, comment: string | undefined, config: string) => { + if (comment && comment.trim().length > 0) { + // Re-attach the leading indent that `^[ \t]*` consumed so the + // comment's first line stays aligned with the rest of the block. + leadingComment = `${indent}${comment.trim()}`; + } + existingConfig = config; + return ''; + } + ); + + cleanedCode = cleanedCode + .replace(/ + +` + ); +}; + +// Merges playground-specific dependency overrides +// into package.json dependencies. +const mergeEditorDependencies = (packageJson: any, dependencies?: Record) => { + if (!dependencies) { + return packageJson; + } + + return { + ...packageJson, + dependencies: { + ...packageJson.dependencies, + ...dependencies, + }, + }; +}; + +// Opens a StackBlitz project with shared template/title/description defaults. +const openStackBlitzProject = (files: Record, options?: EditorOptions) => { + sdk.openProject({ + template: 'node', + title: options?.title ?? DEFAULT_EDITOR_TITLE, + description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, + files, + }); +}; + +// Loads framework template files from static StackBlitz scaffolds +// for a docs version. const loadSourceFiles = async (files: string[], version: string) => { const versionDir = `v${version}`; const sourceFiles = await Promise.all(files.map((f) => fetch(`/docs/code/stackblitz/${versionDir}/${f}`))); return await Promise.all(sourceFiles.map((res) => res.text())); }; -const openHtmlEditor = async (code: string, options?: EditorOptions) => { +// Builds and opens the HTML playground project. +const openHtmlEditor = async (code: string, options: EditorOptions) => { const defaultFiles = await loadSourceFiles( [ 'html/index.ts', @@ -61,14 +269,7 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { options.version ); - const package_json = JSON.parse(defaultFiles[3]); - - if (options?.dependencies) { - package_json.dependencies = { - ...package_json.dependencies, - ...options.dependencies, - }; - } + const package_json = mergeEditorDependencies(JSON.parse(defaultFiles[3]), options?.dependencies); const indexHtml = 'index.html'; const files = { @@ -82,29 +283,13 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { ...options?.files, }; - files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace( - '', - ` - - -` - ); + files[indexHtml] = injectHtmlIonicConfig(defaultFiles[1], code, options); - sdk.openProject({ - template: 'node', - title: options?.title ?? DEFAULT_EDITOR_TITLE, - description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files, - }); + openStackBlitzProject(files, options); }; -const openAngularEditor = async (code: string, options?: EditorOptions) => { +// Builds and opens the Angular playground project. +const openAngularEditor = async (code: string, options: EditorOptions) => { const defaultFiles = await loadSourceFiles( [ 'angular/package.json', @@ -126,14 +311,7 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { options.version ); - const package_json = JSON.parse(defaultFiles[0]); - - if (options?.dependencies) { - package_json.dependencies = { - ...package_json.dependencies, - ...options.dependencies, - }; - } + const package_json = mergeEditorDependencies(JSON.parse(defaultFiles[0]), options?.dependencies); const main = 'src/main.ts'; @@ -145,7 +323,9 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { 'tsconfig.app.json': defaultFiles[4], [main]: defaultFiles[5], 'src/index.html': defaultFiles[6], - 'src/polyfills.ts': `import 'zone.js';`, + // Ionic v9's playground runs on a zoneless Angular 22 setup, so it needs no Zone.js polyfill. + // Earlier versions are zone-based and still require it. + 'src/polyfills.ts': options.version === '9' ? '' : `import 'zone.js';`, 'src/app/app.routes.ts': defaultFiles[7], 'src/app/app.component.ts': defaultFiles[8], 'src/app/app.component.css': defaultFiles[9], @@ -159,24 +339,28 @@ const openAngularEditor = async (code: string, options?: EditorOptions) => { ...options?.files, }; - if (options?.version === '6') { - files[main] = files[main].replace( - 'importProvidersFrom(IonicModule.forRoot({ }))', - `importProvidersFrom(IonicModule.forRoot({ mode: '${options?.mode}' }))` - ); - } else { - files[main] = files[main].replace('provideIonicAngular()', `provideIonicAngular({ mode: '${options?.mode}' })`); - } - - sdk.openProject({ - template: 'node', - title: options?.title ?? DEFAULT_EDITOR_TITLE, - description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files, - }); + const ionicConfig = getFormattedIonicConfig(options); + // Angular v6 uses IonicModule.forRoot. Angular v7+ use provideIonicAngular. + files[main] = + options.version === '6' + ? injectFrameworkIonicConfig( + files[main], + /IonicModule\.forRoot\(\s*(\{[\s\S]*?\})?\s*\)/s, + ionicConfig, + (c) => `IonicModule.forRoot(${c})` + ) + : injectFrameworkIonicConfig( + files[main], + /provideIonicAngular\(\s*(\{[\s\S]*?\})?\s*\)/s, + ionicConfig, + (c) => `provideIonicAngular(${c})` + ); + + openStackBlitzProject(files, options); }; -const openReactEditor = async (code: string, options?: EditorOptions) => { +// Builds and opens the React playground project. +const openReactEditor = async (code: string, options: EditorOptions) => { const defaultFiles = await loadSourceFiles( [ 'react/index.tsx', @@ -193,14 +377,7 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { options.version ); - const package_json = JSON.parse(defaultFiles[4]); - - if (options?.dependencies) { - package_json.dependencies = { - ...package_json.dependencies, - ...options.dependencies, - }; - } + const package_json = mergeEditorDependencies(JSON.parse(defaultFiles[4]), options?.dependencies); const appTsx = 'src/App.tsx'; const files = { @@ -221,17 +398,18 @@ const openReactEditor = async (code: string, options?: EditorOptions) => { }`, }; - files[appTsx] = files[appTsx].replace('setupIonicReact()', `setupIonicReact({ mode: '${options?.mode}' })`); + files[appTsx] = injectFrameworkIonicConfig( + files[appTsx], + /setupIonicReact\(\s*(\{[\s\S]*?\})?\s*\)/s, + getFormattedIonicConfig(options), + (c) => `setupIonicReact(${c})` + ); - sdk.openProject({ - template: 'node', - title: options?.title ?? DEFAULT_EDITOR_TITLE, - description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files, - }); + openStackBlitzProject(files, options); }; -const openVueEditor = async (code: string, options?: EditorOptions) => { +// Builds and opens the Vue playground project. +const openVueEditor = async (code: string, options: EditorOptions) => { const defaultFiles = await loadSourceFiles( [ 'vue/package.json', @@ -247,14 +425,7 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { options.version ); - const package_json = JSON.parse(defaultFiles[0]); - - if (options?.dependencies) { - package_json.dependencies = { - ...package_json.dependencies, - ...options.dependencies, - }; - } + const package_json = mergeEditorDependencies(JSON.parse(defaultFiles[0]), options?.dependencies); const mainTs = 'src/main.ts'; const files = { @@ -274,11 +445,11 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { }`, }; - files[mainTs] = files[mainTs].replace( - '.use(IonicVue)', - `.use(IonicVue, { - mode: '${options?.mode}' -})` + files[mainTs] = injectFrameworkIonicConfig( + files[mainTs], + /\.use\(IonicVue(?:,\s*(\{[\s\S]*?\}))?\)/s, + getFormattedIonicConfig(options), + (c) => `.use(IonicVue, ${c})` ); /** @@ -287,12 +458,8 @@ const openVueEditor = async (code: string, options?: EditorOptions) => { * * https://github.com/stackblitz/core/issues/1308 */ - sdk.openProject({ - template: 'node', - title: options?.title ?? DEFAULT_EDITOR_TITLE, - description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, - files, - }); + openStackBlitzProject(files, options); }; export { openAngularEditor, openHtmlEditor, openReactEditor, openVueEditor }; +export { getFormattedIonicConfig, mergeFormattedIonicConfig, extractHtmlIonicConfig }; diff --git a/src/components/global/PlaygroundTabs/TabItem.tsx b/src/components/global/PlaygroundTabs/TabItem.tsx new file mode 100644 index 00000000000..88fe23723e3 --- /dev/null +++ b/src/components/global/PlaygroundTabs/TabItem.tsx @@ -0,0 +1,35 @@ +/** + * A single tab panel within PlaygroundTabs. + * + * PlaygroundTabs decides which panel is visible by cloning these with a + * className, so this renders the panel and nothing else. Use it in place of + * `@theme/TabItem`, which only works inside Docusaurus' own Tabs. + */ + +import React, { type ReactNode } from 'react'; +import clsx from 'clsx'; + +import styles from './styles.module.css'; + +export interface TabItemProps { + /** Identifies the tab. Must be unique among sibling tabs. */ + value: string; + /** Text shown in the tab. Falls back to `value`. */ + label?: string; + /** Rendered before the label in the tab. */ + icon?: ReactNode; + /** Selects this tab when nothing else is selected. */ + default?: boolean; + /** Extra attributes spread onto the tab itself. */ + attributes?: { [key: string]: unknown }; + className?: string; + children?: ReactNode; +} + +export default function TabItem({ children, className }: TabItemProps): ReactNode { + return ( +
+ {children} +
+ ); +} diff --git a/src/components/global/PlaygroundTabs/index.tsx b/src/components/global/PlaygroundTabs/index.tsx index 2ebe280d354..c131254671e 100644 --- a/src/components/global/PlaygroundTabs/index.tsx +++ b/src/components/global/PlaygroundTabs/index.tsx @@ -5,12 +5,21 @@ * LICENSE file in the root directory of this source tree. */ -import React, { useState, cloneElement, isValidElement, type ReactElement, useRef, createRef, useEffect } from 'react'; +import React, { + useState, + cloneElement, + isValidElement, + type ReactElement, + type ReactNode, + useRef, + createRef, + useEffect, +} from 'react'; import useIsBrowser from '@docusaurus/useIsBrowser'; import { duplicates } from '@docusaurus/theme-common'; import { useScrollPositionBlocker } from '@docusaurus/theme-common/internal'; import type { Props } from '@theme/Tabs'; -import type { Props as TabItemProps } from '@theme/TabItem'; +import type { TabItemProps } from './TabItem'; import clsx from 'clsx'; @@ -18,11 +27,12 @@ import styles from './styles.module.css'; // A very rough duck type, but good enough to guard against mistakes while // allowing customization -function isTabItem(comp: ReactElement): comp is ReactElement { - return typeof comp.props.value !== 'undefined'; +function isTabItem(comp: ReactElement): comp is ReactElement { + const { props } = comp; + return !!props && typeof props === 'object' && 'value' in props; } -function TabsComponent(props: Props): JSX.Element { +function TabsComponent(props: Props): ReactNode { const { lazy, block, defaultValue: defaultValueProp, values: valuesProp, groupId, className } = props; const [leftNavVisible, setLeftNavVisible] = useState(false); const [rightNavVisible, setRightNavVisible] = useState(false); @@ -233,7 +243,7 @@ function TabsComponent(props: Props): JSX.Element { ); } -export default function PlaygroundTabs(props: Props): JSX.Element { +export default function PlaygroundTabs(props: Props): ReactNode { const isBrowser = useIsBrowser(); return ( *:last-child { + margin-bottom: 0; +} + .tabIcon { display: inline-flex; padding: 0 8px; diff --git a/src/components/global/Tooltip/index.tsx b/src/components/global/Tooltip/index.tsx new file mode 100644 index 00000000000..c53a7947363 --- /dev/null +++ b/src/components/global/Tooltip/index.tsx @@ -0,0 +1,74 @@ +/** + * A hover/focus tooltip for a single child element. + * + * The child becomes the trigger, so it must be an element that accepts a ref + * and DOM props. Disabled elements never emit pointer events, so wrap those in + * a plain element (e.g. `
`) and pass that as the child instead. + */ + +import React, { cloneElement, useState, type ReactElement, type ReactNode, type Ref } from 'react'; +import { + autoUpdate, + flip, + offset, + shift, + useDismiss, + useFloating, + useFocus, + useHover, + useInteractions, + useMergeRefs, + useRole, + useTransitionStyles, + FloatingPortal, +} from '@floating-ui/react'; + +import './tooltip.css'; + +interface TooltipProps { + content: ReactNode; + /** The trigger element. Its `ref` is declared here because it arrives as a prop. */ + children: ReactElement<{ ref?: Ref } & Record>; +} + +export default function Tooltip({ content, children }: TooltipProps): ReactNode { + const [open, setOpen] = useState(false); + + const { refs, floatingStyles, context } = useFloating({ + open, + onOpenChange: setOpen, + placement: 'bottom', + middleware: [offset(10), flip(), shift({ padding: 5 })], + whileElementsMounted: autoUpdate, + }); + + const { getReferenceProps, getFloatingProps } = useInteractions([ + useHover(context, { move: false }), + useFocus(context), + useDismiss(context), + useRole(context, { role: 'tooltip' }), + ]); + + // Fade in/out rather than appearing instantly. + const { isMounted, styles: transitionStyles } = useTransitionStyles(context, { + duration: { open: 300, close: 250 }, + }); + + // Preserve any ref the trigger already carries. + const referenceRef = useMergeRefs([refs.setReference, children.props.ref]); + + return ( + <> + {cloneElement(children, getReferenceProps({ ...children.props, ref: referenceRef }))} + {isMounted && ( + +
+
+ {content} +
+
+ + )} + + ); +} diff --git a/src/components/global/Tooltip/tooltip.css b/src/components/global/Tooltip/tooltip.css new file mode 100644 index 00000000000..72510f32e9b --- /dev/null +++ b/src/components/global/Tooltip/tooltip.css @@ -0,0 +1,21 @@ +/** + * Styles for the Tooltip component. The library positions the floating element + * but gives it no appearance, so all of it lives here. + */ + +.tooltip__root { + z-index: 9999; + max-width: min(350px, calc(100vw - 10px)); + pointer-events: none; +} + +.tooltip { + background-color: var(--c-carbon-90); + color: #fff; + border-radius: 8px; + padding: 6px 10px; + font-size: 12px; + line-height: initial; + white-space: normal; + outline: 0; +} diff --git a/src/components/page/api/APIList/index.tsx b/src/components/page/api/APIList/index.tsx index d54a5cca518..dfcdc60a80d 100644 --- a/src/components/page/api/APIList/index.tsx +++ b/src/components/page/api/APIList/index.tsx @@ -1,9 +1,9 @@ -import React from 'react'; +import React, { type ReactNode } from 'react'; import sidebars from '@site/sidebars'; import clsx from 'clsx'; -function APIList({ sidebar, ...props }): JSX.Element { +function APIList({ sidebar, ...props }): ReactNode { return (
{sidebars.api.map((section) => { diff --git a/src/components/page/reference/ReleaseNotes/index.tsx b/src/components/page/reference/ReleaseNotes/index.tsx index c1402d63d1c..eb3d3757c7a 100644 --- a/src/components/page/reference/ReleaseNotes/index.tsx +++ b/src/components/page/reference/ReleaseNotes/index.tsx @@ -15,18 +15,14 @@ interface Release { export default function ReleaseNotes(props: { [key: string]: any }) { if (releases.length === 0) { - console.warn(`Could not load release notes data. Make sure that you have a valid GITHUB_TOKEN. - -Create a personal access token by following the below guide: -https://docs.github.com/en/enterprise-cloud@latest/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token - -and then authorize it to work with SSO: -https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating-with-saml-single-sign-on/authorizing-a-personal-access-token-for-use-with-saml-single-sign-on`); + console.warn( + `Could not load release notes data. Refer to https://github.com/ionic-team/ionic-docs/blob/main/CONTRIBUTING.md#github-token for setup instructions.` + ); return [ -

+

Unable to load Releases. Please see all releases{' '} - + on GitHub . @@ -38,7 +34,7 @@ https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating

A complete release history for Ionic Framework is available{' '} - + on GitHub . Documentation for recent releases can also be found below. @@ -50,10 +46,13 @@ https://docs.github.com/en/enterprise-cloud@latest/authentication/authenticating

{releases.map((release: Release, index) => ( -
+
To see more releases, visit{' '} - + GitHub . diff --git a/src/components/page/theming/CodeColor/index.tsx b/src/components/page/theming/CodeColor/index.tsx index f6a35396539..688e49fb139 100644 --- a/src/components/page/theming/CodeColor/index.tsx +++ b/src/components/page/theming/CodeColor/index.tsx @@ -1,9 +1,9 @@ import clsx from 'clsx'; -import React from 'react'; +import React, { type ReactNode } from 'react'; import styles from './index.module.scss'; -function CodeColor({ color, ...props }): JSX.Element { +function CodeColor({ color, ...props }): ReactNode { return ( .menu__list-item-collapsible { .menu__link { color: var(--sidebar-category-c); - + font-weight: 600; font-size: 0.938rem; line-height: 100%; diff --git a/src/styles/components/_edit-this-page.scss b/src/styles/components/_edit-this-page.scss index 09ff54bd567..68a6c29cb3b 100644 --- a/src/styles/components/_edit-this-page.scss +++ b/src/styles/components/_edit-this-page.scss @@ -1,5 +1,6 @@ :root { --edit-this-page-c: var(--ifm-link-color); + --edit-this-page-opacity: 0.7; } .theme-edit-this-page { @@ -9,8 +10,6 @@ grid-template-columns: 0.875rem 1fr; - margin-block-start: 1.25rem; - color: var(--edit-this-page-c); transition: opacity 0.2s ease-out; @@ -19,6 +18,6 @@ &:active, &:focus { color: var(--edit-this-page-c); - opacity: 0.7; + opacity: var(--edit-this-page-opacity); } } diff --git a/src/styles/components/_search.scss b/src/styles/components/_search.scss index 12d9db38322..b4c9f141eee 100644 --- a/src/styles/components/_search.scss +++ b/src/styles/components/_search.scss @@ -1,10 +1,9 @@ :root:root { --docsearch-searchbox-background: var(--token-primary-bg-c); - --docsearch-searchbox-height: 2.25rem; --docsearch-searchbox-focus-background: var(--token-primary-bg-c); - --docsearch-key-gradient: var(--token-primary-bg-c); - --docsearch-key-shadow: none; + --docsearch-key-background: var(--token-primary-bg-c); + --docsearch-search-button-background: var(--token-primary-bg-c); } html[data-theme='light'] { @@ -46,7 +45,12 @@ html[data-theme='dark'] { } .DocSearch-Button { + // DocSearch resets the button with `all: unset`. box-sizing needs to be set to inherit. + box-sizing: inherit; width: 100%; + // The border is drawn by the inset box-shadow below, so drop the one + // DocSearch applies or the two stack into a thicker edge. + border: 0; border-radius: 8px; box-shadow: var(--docsearch-searchbox-shadow); @@ -66,17 +70,18 @@ html[data-theme='dark'] { padding-block-end: 0; width: auto; + // DocSearch sizes these keys at 24px with its own font; keep them + // sized to the surrounding text so the keys stay inside the field. + height: 18px; color: var(--c-indigo-50); border-radius: 0; + font-family: inherit; + font-size: inherit; font-weight: 400; - // Targets the `CMD/CTRL` symbol - &:first-child { - font-size: 1.4em; - margin-inline-end: 0.0625rem; - } + border: none; } } diff --git a/src/styles/components/_toc.scss b/src/styles/components/_toc.scss index 9c464abc045..82e1b39f694 100644 --- a/src/styles/components/_toc.scss +++ b/src/styles/components/_toc.scss @@ -62,6 +62,7 @@ html[data-theme='dark'] { .theme-edit-this-page { --edit-this-page-c: var(--ifm-heading-color); + margin-block-start: 1.25rem; font-weight: 600; font-size: 0.875rem; } diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx index 218f71d0fc6..4e64afe30e9 100644 --- a/src/theme/DocItem/Layout/index.tsx +++ b/src/theme/DocItem/Layout/index.tsx @@ -1,15 +1,15 @@ /** * DocItemLayout is a component that renders the layout of a page like * the individual component pages, guide pages, etc. - * + * * Original source: * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/DocItem/Layout/index.tsx - * + * * Reason for overriding: * - Add a phone demo to the right of the page, e.g. /docs */ -import React from 'react'; +import React, {type ReactNode} from 'react'; import clsx from 'clsx'; import {useWindowSize} from '@docusaurus/theme-common'; import {useDoc} from '@docusaurus/plugin-content-docs/client'; @@ -66,7 +66,7 @@ function useDocDemo() { } // CUSTOM CODE END -export default function DocItemLayout({children, ...props}: Props): JSX.Element { +export default function DocItemLayout({children, ...props}: Props): ReactNode { const docTOC = useDocTOC(); const {metadata} = useDoc(); // CUSTOM CODE @@ -95,8 +95,8 @@ export default function DocItemLayout({children, ...props}: Props): JSX.Element {/* ------- CUSTOM CODE -------- */} {/* Ideally this would only render if there is a demoUrl and the it's a mobile device. However,the `windowSize` does not provide a tablet so we have to hide it through CSS. */} {demoUrl && ( -
-
+
+
diff --git a/src/theme/DocRoot/Layout/Main/index.tsx b/src/theme/DocRoot/Layout/Main/index.tsx index 980de526a1d..1675410fc68 100644 --- a/src/theme/DocRoot/Layout/Main/index.tsx +++ b/src/theme/DocRoot/Layout/Main/index.tsx @@ -5,12 +5,12 @@ * - Moved the navbar to the top of the page. Originally, the navbar would be placed along the top of the entire site, but we want it to be placed along the top of the docs page only. */ -import React from 'react'; +import React, { type ReactNode } from 'react'; import Main from '@theme-original/DocRoot/Layout/Main'; import Navbar from '@theme/Navbar'; -import type {Props} from '@theme/DocRoot/Layout/Main'; +import type { Props } from '@theme/DocRoot/Layout/Main'; -export default function MainWrapper(props: Props): JSX.Element { +export default function MainWrapper(props: Props): ReactNode { return (
diff --git a/src/theme/DocSidebar/index.tsx b/src/theme/DocSidebar/index.tsx index 5267a996e0e..e3e9c290b4e 100644 --- a/src/theme/DocSidebar/index.tsx +++ b/src/theme/DocSidebar/index.tsx @@ -6,14 +6,14 @@ * - Scroll to the active item in the sidebar */ -import React, { useEffect } from 'react'; +import React, { useEffect, type ReactNode } from 'react'; import { useLocation } from '@docusaurus/router'; import DocSidebar from '@theme-original/DocSidebar'; import type { Props } from '@theme/DocSidebar'; import Logo from '@theme-original/Logo'; -export default function DocSidebarWrapper(props: Props): JSX.Element { +export default function DocSidebarWrapper(props: Props): ReactNode { const location = useLocation(); useEffect(() => { diff --git a/src/theme/EditMetaRow/index.tsx b/src/theme/EditMetaRow/index.tsx new file mode 100644 index 00000000000..9cf50b7229f --- /dev/null +++ b/src/theme/EditMetaRow/index.tsx @@ -0,0 +1,61 @@ +/** + * EditMetaRow is a component that renders the edit and last updated + * metadata for a page. This component is displayed at the bottom of + * each page. + * + * Original source: + * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx + * + * Reason for overriding: + * - Add a copy page button next to the edit this page link + * - Wrap the whole last updated section in a conditional, not just + * its contents. Otherwise the empty column still reserves half the + * row. + */ + +import React, {type ReactNode} from 'react'; +import clsx from 'clsx'; +// CUSTOM CODE +import CopyPageButton from 'docusaurus-plugin-copy-page-button/react'; +// CUSTOM CODE END +import EditThisPage from '@theme/EditThisPage'; +import type {Props} from '@theme/EditMetaRow'; + +import LastUpdated from '@theme/LastUpdated'; + +import globalStyles from '@docusaurus/theme-classic/lib/theme/EditMetaRow/styles.module.css'; +import styles from './styles.module.css'; + +export default function EditMetaRow({ + className, + editUrl, + lastUpdatedAt, + lastUpdatedBy, +}: Props): ReactNode { + return ( +
+ {/* CUSTOM CODE — "Edit this page | Copy page" as peer links on one row */} +
+ {editUrl && } + +
+ {/* CUSTOM CODE END */} + {/* CUSTOM CODE — wrap the whole column in the conditional, not just its contents */} + {(lastUpdatedAt || lastUpdatedBy) && ( +
+ +
+ )} + {/* CUSTOM CODE END */} +
+ ); +} diff --git a/src/theme/EditMetaRow/styles.module.css b/src/theme/EditMetaRow/styles.module.css new file mode 100644 index 00000000000..4f10b3935f4 --- /dev/null +++ b/src/theme/EditMetaRow/styles.module.css @@ -0,0 +1,42 @@ +.editMetaActions { + display: inline-flex; + align-items: center; +} + +.editMetaActions > :not(:first-child) { + margin-inline-start: 0.85rem; + padding-inline-start: 0.85rem; + border-inline-start: 1px solid var(--ifm-color-emphasis-300); +} + +.copyPageContainer { + display: inline-flex; + align-items: center; +} + +/* Make the "Copy page" button look like the "Edit this page" link */ +.copyPageButton { + display: inline-flex; + align-items: center; + gap: 0.3rem; + border: none; + background: transparent !important; + padding: 0; + margin: 0; + color: var(--edit-this-page-c) !important; + font: inherit; +} + +.copyPageButton:hover, +.copyPageButton:active, +.copyPageButton:focus { + opacity: var(--edit-this-page-opacity); +} + +/* The plugin hides the button's text label for small screens; keep it visible at all sizes. */ +@media (max-width: 767px) { + .copyPageButton [class*='copyPageText'] { + display: inline; + } +} +/* CUSTOM CODE END */ diff --git a/src/theme/Icon/Edit/index.tsx b/src/theme/Icon/Edit/index.tsx index dfadeaab866..c598a12f2e0 100644 --- a/src/theme/Icon/Edit/index.tsx +++ b/src/theme/Icon/Edit/index.tsx @@ -6,13 +6,13 @@ * - Changed the icon to be the GitHub icon since the icon is used on the `Edit this page` link, which links to the GitHub repo. */ -import React, { type ReactNode } from 'react'; +import React, {type ReactNode} from 'react'; import clsx from 'clsx'; -import type { Props } from '@theme/Icon/Edit'; +import type {Props} from '@theme/Icon/Edit'; import styles from '@docusaurus/theme-classic/src/theme/Icon/Edit/styles.module.css'; -export default function IconEdit({ className, ...restProps }: Props): ReactNode { +export default function IconEdit({className, ...restProps}: Props): ReactNode { return (
- }>{children} + className={clsx( + ThemeClassNames.layout.main.container, + ThemeClassNames.wrapper.main, + styles.mainWrapper, + wrapperClassName, + )}> + }> + {children} +
{!noFooter &&
} diff --git a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx index 9ea75d94089..dc5469c2383 100644 --- a/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx +++ b/src/theme/NavbarItem/LocaleDropdownNavbarItem/index.tsx @@ -7,43 +7,94 @@ * - Removed the original styles that were applied to the language icon. We want to use our own styles. */ -import React, { type ReactNode } from 'react'; +import React, {type ReactNode} from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import { useAlternatePageUtils } from '@docusaurus/theme-common/internal'; -import { translate } from '@docusaurus/Translate'; -import { useLocation } from '@docusaurus/router'; +import {useAlternatePageUtils} from '@docusaurus/theme-common/internal'; +import {translate} from '@docusaurus/Translate'; +import {mergeSearchStrings, useHistorySelector} from '@docusaurus/theme-common'; import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; import IconLanguage from '@theme/Icon/Language'; -import type { LinkLikeNavbarItemProps } from '@theme/NavbarItem'; -import type { Props } from '@theme/NavbarItem/LocaleDropdownNavbarItem'; +import type {LinkLikeNavbarItemProps} from '@theme/NavbarItem'; +import type {Props} from '@theme/NavbarItem/LocaleDropdownNavbarItem'; import styles from '@docusaurus/theme-classic/lib/theme/NavbarItem/LocaleDropdownNavbarItem/styles.module.css'; import customStyles from './styles.module.css'; +function useLocaleDropdownUtils() { + const { + siteConfig, + i18n: {localeConfigs}, + } = useDocusaurusContext(); + const alternatePageUtils = useAlternatePageUtils(); + const search = useHistorySelector((history) => history.location.search); + const hash = useHistorySelector((history) => history.location.hash); + + const getLocaleConfig = (locale: string) => { + const localeConfig = localeConfigs[locale]; + if (!localeConfig) { + throw new Error( + `Docusaurus bug, no locale config found for locale=${locale}`, + ); + } + return localeConfig; + }; + + const getBaseURLForLocale = (locale: string) => { + const localeConfig = getLocaleConfig(locale); + const isSameDomain = localeConfig.url === siteConfig.url; + if (isSameDomain) { + // Shorter paths if localized sites are hosted on the same domain + // This reduces HTML size a bit + return `pathname://${alternatePageUtils.createUrl({ + locale, + fullyQualified: false, + })}`; + } + return alternatePageUtils.createUrl({ + locale, + fullyQualified: true, + }); + }; + + return { + getURL: (locale: string, options: {queryString: string | undefined}) => { + // We have 2 query strings because + // - there's the current one + // - there's one user can provide through navbar config + // see https://github.com/facebook/docusaurus/pull/8915 + const finalSearch = mergeSearchStrings( + [search, options.queryString], + 'append', + ); + return `${getBaseURLForLocale(locale)}${finalSearch}${hash}`; + }, + getLabel: (locale: string) => { + return getLocaleConfig(locale).label; + }, + getLang: (locale: string) => { + return getLocaleConfig(locale).htmlLang; + }, + }; +} + export default function LocaleDropdownNavbarItem({ mobile, dropdownItemsBefore, dropdownItemsAfter, - queryString = '', + queryString, ...props }: Props): ReactNode { + const utils = useLocaleDropdownUtils(); + const { - i18n: { currentLocale, locales, localeConfigs }, + i18n: {currentLocale, locales}, } = useDocusaurusContext(); - const alternatePageUtils = useAlternatePageUtils(); - const { search, hash } = useLocation(); const localeItems = locales.map((locale): LinkLikeNavbarItemProps => { - const baseTo = `pathname://${alternatePageUtils.createUrl({ - locale, - fullyQualified: false, - })}`; - // preserve ?search#hash suffix on locale switches - const to = `${baseTo}${search}${hash}${queryString}`; return { - label: localeConfigs[locale]!.label, - lang: localeConfigs[locale]!.htmlLang, - to, + label: utils.getLabel(locale), + lang: utils.getLang(locale), + to: utils.getURL(locale, {queryString}), target: '_self', autoAddBaseUrl: false, className: @@ -68,7 +119,7 @@ export default function LocaleDropdownNavbarItem({ id: 'theme.navbar.mobileLanguageDropdown.label', description: 'The label for the mobile language switcher dropdown', }) - : localeConfigs[currentLocale]!.label; + : utils.getLabel(currentLocale); return ( {/* CUSTOM CODE - added span in order to hide the text */} - {dropdownLabel} + + {dropdownLabel} + } items={items} diff --git a/src/theme/README.md b/src/theme/README.md index 2fed55ad2ea..c831a53cc71 100644 --- a/src/theme/README.md +++ b/src/theme/README.md @@ -1,6 +1,10 @@ # Theme folder -This folder is used to override the base docusaurus theme. It houses [swizzled components](https://docusaurus.io/docs/swizzling). Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the `@theme-original` alias, then that should be heavily considered. Swizzled components should be added to the prettier ignore and all code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzle should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components). +This folder is used to override the base docusaurus theme. It houses [swizzled components](https://docusaurus.io/docs/swizzling). Components should NOT be swizzled unless absolutely necessary to allow for changes in future versions. If it is possible to shallow swizzle a component using the `@theme-original` alias, then that should be heavily considered. + +Wrapped components import from `@theme-original` and are our own code, so they follow the repo's Prettier config. Ejected components are full copies of upstream, so each one is listed in `.prettierignore` by path to keep upstream's formatting so the copy can still be compared against `@docusaurus/theme-classic`. Add that entry as part of ejecting a component. Nothing in CI checks for it, so a missing entry means Prettier reformats the copy and the difference from upstream is lost without anyone noticing. + +All code updates should be marked with comments to allow more seamless version updating. The styles file for components that have been unsafely swizzled should absolutely not be edited. All styling should be done from the [component partials](/src/styles/components). - Original theme: [`@docusaurus/theme-classic`](https://docusaurus.io/docs/api/themes/@docusaurus/theme-classic) -- [Original theme source](https://github.com/facebook/docusaurus/tree/26ae4164d6f90c231c6687363a3907b5f9f172b8/packages/docusaurus-theme-classic/src/theme) +- [Original theme source](https://github.com/facebook/docusaurus/tree/v3.10.2/packages/docusaurus-theme-classic/src/theme) diff --git a/src/theme/TOC/index.tsx b/src/theme/TOC/index.tsx index f86a1aa134a..a399275a026 100644 --- a/src/theme/TOC/index.tsx +++ b/src/theme/TOC/index.tsx @@ -7,7 +7,7 @@ * - Add a random internal ad to the bottom of the TOC. */ -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, type ReactNode } from 'react'; import TOC from '@theme-original/TOC'; import type { Props } from '@theme/TOC'; @@ -21,7 +21,7 @@ interface TOCProps extends Props { editUrl: string; } -export default function TOCWrapper(props: TOCProps): JSX.Element { +export default function TOCWrapper(props: TOCProps): ReactNode { const { prismicAds } = usePluginData('ionic-docs-ads') as any; const [activeAd, setActiveAd] = useState(); const location = useLocation(); diff --git a/src/theme/prism-include-languages.ts b/src/theme/prism-include-languages.ts index 032dfd597e3..d60b064eba5 100644 --- a/src/theme/prism-include-languages.ts +++ b/src/theme/prism-include-languages.ts @@ -10,13 +10,15 @@ import siteConfig from '@generated/docusaurus.config'; import type * as PrismNamespace from 'prismjs'; -import type { Optional } from 'utility-types'; +import type {Optional} from 'utility-types'; -export default function prismIncludeLanguages(PrismObject: typeof PrismNamespace): void { +export default function prismIncludeLanguages( + PrismObject: typeof PrismNamespace, +): void { const { - themeConfig: { prism }, + themeConfig: {prism}, } = siteConfig; - const { additionalLanguages } = prism as { additionalLanguages: string[] }; + const {additionalLanguages} = prism as {additionalLanguages: string[]}; // Prism components work on the Prism instance on the window, while prism- // react-renderer uses its own Prism instance. We temporarily mount the diff --git a/static/code/stackblitz/README.md b/static/code/stackblitz/README.md index ff888ecb78a..f349c5b1684 100644 --- a/static/code/stackblitz/README.md +++ b/static/code/stackblitz/README.md @@ -4,7 +4,7 @@ This directory contains the source files for generating the individual framework ## Structure -The files are organized by Ionic version (`v6`, `v7`, `v8`) and framework (`angular`, `html`, `react`, `vue`): +The files are organized by Ionic version (`v6`, `v7`, `v8`, `v9`) and framework (`angular`, `html`, `react`, `vue`): ``` stackblitz/ @@ -19,6 +19,11 @@ stackblitz/ │ ├── react/ │ └── vue/ └── v8/ +│ ├── angular/ +│ ├── html/ +│ ├── react/ +│ └── vue/ +└── v9/ ├── angular/ ├── html/ ├── react/ diff --git a/static/code/stackblitz/v7/angular/package-lock.json b/static/code/stackblitz/v7/angular/package-lock.json index 72cb62e99de..533da15d96d 100644 --- a/static/code/stackblitz/v7/angular/package-lock.json +++ b/static/code/stackblitz/v7/angular/package-lock.json @@ -16,7 +16,7 @@ "@angular/router": "^20.0.0", "@ionic/angular": "^7.0.0", "@ionic/core": "^7.0.0", - "ionicons": "8.0.13", + "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" @@ -253,13 +253,13 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.2003.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.17.tgz", - "integrity": "sha512-e6Mo4xFIhmtPLhjeai3kBW0yViHEtZ+210tcWfuEnPGRgr8X4rMxkYQRAT2X9dqgtsG+TmVZFHAN/Gbs6Tvr7Q==", + "version": "0.2003.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.32.tgz", + "integrity": "sha512-V5d531w97LENARKdYk5Km0F2rt8NPEL3rXUQk7+gbo9r/jgLWn9GU3VHQ30oBWXnU7Vu00Hdp/8yFeYgpWqSow==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.17", + "@angular-devkit/core": "20.3.32", "rxjs": "7.8.2" }, "engines": { @@ -269,18 +269,18 @@ } }, "node_modules/@angular-devkit/build-angular": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-20.3.17.tgz", - "integrity": "sha512-WfwNWvceo7kF2+4zaJHhZ7dwG5rjCkHgrGQF15cJbCOp81dTu4nmDCfU0ndB1knisg4ObE6HYUb6lFUNaZ5VCQ==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-20.3.32.tgz", + "integrity": "sha512-1prN/HmTkL2TTd4zoNz/fFOds9eUc78winkjvBRxTL+OuUQMIeWIjpUui53mk2qdeW9ImiITcqCQVpZL95fLvQ==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2003.17", - "@angular-devkit/build-webpack": "0.2003.17", - "@angular-devkit/core": "20.3.17", - "@angular/build": "20.3.17", - "@babel/core": "7.28.3", + "@angular-devkit/architect": "0.2003.32", + "@angular-devkit/build-webpack": "0.2003.32", + "@angular-devkit/core": "20.3.32", + "@angular/build": "20.3.32", + "@babel/core": "7.29.7", "@babel/generator": "7.28.3", "@babel/helper-annotate-as-pure": "7.27.3", "@babel/helper-split-export-declaration": "7.24.7", @@ -290,16 +290,16 @@ "@babel/preset-env": "7.28.3", "@babel/runtime": "7.28.3", "@discoveryjs/json-ext": "0.6.3", - "@ngtools/webpack": "20.3.17", + "@ngtools/webpack": "20.3.32", "ansi-colors": "4.1.3", "autoprefixer": "10.4.21", "babel-loader": "10.0.0", "browserslist": "^4.21.5", - "copy-webpack-plugin": "13.0.1", + "copy-webpack-plugin": "14.0.0", "css-loader": "7.1.2", - "esbuild-wasm": "0.25.9", + "esbuild-wasm": "0.28.1", "fast-glob": "3.3.3", - "http-proxy-middleware": "3.0.5", + "http-proxy-middleware": "3.0.7", "istanbul-lib-instrument": "6.0.3", "jsonc-parser": "3.3.1", "karma-source-map-support": "1.4.0", @@ -310,9 +310,9 @@ "mini-css-extract-plugin": "2.9.4", "open": "10.2.0", "ora": "8.2.0", - "picomatch": "4.0.3", - "piscina": "5.1.3", - "postcss": "8.5.6", + "picomatch": "4.0.4", + "piscina": "5.2.0", + "postcss": "8.5.12", "postcss-loader": "8.1.1", "resolve-url-loader": "5.0.0", "rxjs": "7.8.2", @@ -326,7 +326,7 @@ "tslib": "2.8.1", "webpack": "5.105.0", "webpack-dev-middleware": "7.4.2", - "webpack-dev-server": "5.2.2", + "webpack-dev-server": "5.2.5", "webpack-merge": "6.0.1", "webpack-subresource-integrity": "5.1.0" }, @@ -336,7 +336,7 @@ "yarn": ">= 1.13.0" }, "optionalDependencies": { - "esbuild": "0.25.9" + "esbuild": "0.28.1" }, "peerDependencies": { "@angular/compiler-cli": "^20.0.0", @@ -345,7 +345,7 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-server": "^20.0.0", "@angular/service-worker": "^20.0.0", - "@angular/ssr": "^20.3.17", + "@angular/ssr": "^20.3.32", "@web/test-runner": "^0.20.0", "browser-sync": "^3.0.2", "jest": "^29.5.0 || ^30.2.0", @@ -401,208 +401,1178 @@ } } }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" + } + }, "node_modules/@angular-devkit/build-webpack": { - "version": "0.2003.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2003.17.tgz", - "integrity": "sha512-hN8C+fg16RQN7YfoevhhjU57yrpo5/861KvFvLlohAjC9JovqN66fFPQ2O5nHIJvjSwa7QLsoeLyrGFQ0mtvOQ==", + "version": "0.2003.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2003.32.tgz", + "integrity": "sha512-dFyM5Qkgl6wgSb8EJF8uZCt9K+VUsDP8APS5siCNHyhjzjACqDevk5RwqWCfPU/QjzlgCp11MbkKr/Y2sgaDcw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/architect": "0.2003.32", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "webpack": "^5.30.0", + "webpack-dev-server": "^5.0.2" + } + }, + "node_modules/@angular-devkit/core": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.32.tgz", + "integrity": "sha512-pXipSsYP/XTEAljmwqgy1u3GR/ZzSMg1FERINekGT61Th1pGhzjs02rPgbyftqz2e5/tfQ6XgTP7xYzm3+S35Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "8.18.0", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.4", + "rxjs": "7.8.2", + "source-map": "0.7.6" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^4.0.0" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/@angular-devkit/schematics": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.32.tgz", + "integrity": "sha512-UxWncmJTcYMDEaAKRi3QHU3qXivIcIOulFOKozW8svfs/A43Oq1GG4kvDZ+WVf/w2UWTmMaSlfFa4KIQciSIDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "20.3.32", + "jsonc-parser": "3.3.1", + "magic-string": "0.30.17", + "ora": "8.2.0", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular/animations": { + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.26.tgz", + "integrity": "sha512-hfNrX19v8xs/usNkELSqc6q5IwBfS2GGW8sQ4OMpxAmLZDJwaLUxkj48t8VYhUFezsIfzR+sDEi6ZQBOaMIYug==", + "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/core": "20.3.26" + } + }, + "node_modules/@angular/build": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.32.tgz", + "integrity": "sha512-ph/qcT6C7RYriU5dxXfNrYBEvCwU4acxTNoxkdGQHYxM7iOKT0K1YO6v5JBNRZ1S4LOJhWmGaWzJ+sRei0iGsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "2.3.0", + "@angular-devkit/architect": "0.2003.32", + "@babel/core": "7.29.7", + "@babel/helper-annotate-as-pure": "7.27.3", + "@babel/helper-split-export-declaration": "7.24.7", + "@inquirer/confirm": "5.1.14", + "@vitejs/plugin-basic-ssl": "2.1.0", + "beasties": "0.3.5", + "browserslist": "^4.23.0", + "esbuild": "0.28.1", + "https-proxy-agent": "7.0.6", + "istanbul-lib-instrument": "6.0.3", + "jsonc-parser": "3.3.1", + "listr2": "9.0.1", + "magic-string": "0.30.17", + "mrmime": "2.0.1", + "parse5-html-rewriting-stream": "8.0.0", + "picomatch": "4.0.4", + "piscina": "5.2.0", + "rollup": "4.59.0", + "sass": "1.90.0", + "semver": "7.7.2", + "source-map-support": "0.5.21", + "tinyglobby": "0.2.14", + "vite": "7.3.6", + "watchpack": "2.4.4" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "optionalDependencies": { + "lmdb": "3.4.2" + }, + "peerDependencies": { + "@angular/compiler": "^20.0.0", + "@angular/compiler-cli": "^20.0.0", + "@angular/core": "^20.0.0", + "@angular/localize": "^20.0.0", + "@angular/platform-browser": "^20.0.0", + "@angular/platform-server": "^20.0.0", + "@angular/service-worker": "^20.0.0", + "@angular/ssr": "^20.3.32", + "karma": "^6.4.0", + "less": "^4.2.0", + "ng-packagr": "^20.0.0", + "postcss": "^8.4.0", + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "tslib": "^2.3.0", + "typescript": ">=5.8 <6.0", + "vitest": "^3.1.1" + }, + "peerDependenciesMeta": { + "@angular/core": { + "optional": true + }, + "@angular/localize": { + "optional": true + }, + "@angular/platform-browser": { + "optional": true + }, + "@angular/platform-server": { + "optional": true + }, + "@angular/service-worker": { + "optional": true + }, + "@angular/ssr": { + "optional": true + }, + "karma": { + "optional": true + }, + "less": { + "optional": true + }, + "ng-packagr": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tailwindcss": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "node_modules/@angular/build/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], "dev": true, "license": "MIT", - "dependencies": { - "@angular-devkit/architect": "0.2003.17", - "rxjs": "7.8.2" - }, + "optional": true, + "os": [ + "freebsd" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "webpack": "^5.30.0", - "webpack-dev-server": "^5.0.2" + "node": ">=18" } }, - "node_modules/@angular-devkit/core": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.17.tgz", - "integrity": "sha512-xlBT8rmyTjb5P/p6wDHp0EleagptjSHGNsJwqSY4FdIG0p59ezAbb2wbQGqkYDxuoptFSLUpAGE7sNWZ5OiLWw==", + "node_modules/@angular/build/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], "dev": true, "license": "MIT", - "dependencies": { - "ajv": "8.17.1", - "ajv-formats": "3.0.1", - "jsonc-parser": "3.3.1", - "picomatch": "4.0.3", - "rxjs": "7.8.2", - "source-map": "0.7.6" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^4.0.0" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } + "node": ">=18" } }, - "node_modules/@angular-devkit/schematics": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.17.tgz", - "integrity": "sha512-aqvxNwBbRKmbQfv/j6e0ddTjhs2vIoQnzIVAqFLMvuAQmnTCHP+Kw26wS4OQMuGbDTUZ9SxPy4eSNu+vBoc3fA==", + "node_modules/@angular/build/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], "dev": true, "license": "MIT", - "dependencies": { - "@angular-devkit/core": "20.3.17", - "jsonc-parser": "3.3.1", - "magic-string": "0.30.17", - "ora": "8.2.0", - "rxjs": "7.8.2" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" } }, - "node_modules/@angular/animations": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.17.tgz", - "integrity": "sha512-KvdgFjCTkOD3WVt4gzmJOoX914eey/Efu2Pb/KUM0Bqp1ZoXiFpI48GCd1b6Ks8JlDBeAfgjtpdSUB2aLnMRZQ==", + "node_modules/@angular/build/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, "license": "MIT", - "dependencies": { - "tslib": "^2.3.0" - }, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0" - }, - "peerDependencies": { - "@angular/core": "20.3.17" + "node": ">=18" } }, - "node_modules/@angular/build": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.17.tgz", - "integrity": "sha512-HCHFZrBEyR1aWwkWH1MnSFAIwgzU31bEYbB4cFeOR+HKFJwglMamkv1MPHsF3+TZxYioJa5ieF/ipI1KTXZLUg==", + "node_modules/@angular/build/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "dev": true, + "hasInstallScript": true, "license": "MIT", - "dependencies": { - "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2003.17", - "@babel/core": "7.28.3", - "@babel/helper-annotate-as-pure": "7.27.3", - "@babel/helper-split-export-declaration": "7.24.7", - "@inquirer/confirm": "5.1.14", - "@vitejs/plugin-basic-ssl": "2.1.0", - "beasties": "0.3.5", - "browserslist": "^4.23.0", - "esbuild": "0.25.9", - "https-proxy-agent": "7.0.6", - "istanbul-lib-instrument": "6.0.3", - "jsonc-parser": "3.3.1", - "listr2": "9.0.1", - "magic-string": "0.30.17", - "mrmime": "2.0.1", - "parse5-html-rewriting-stream": "8.0.0", - "picomatch": "4.0.3", - "piscina": "5.1.3", - "rollup": "4.52.3", - "sass": "1.90.0", - "semver": "7.7.2", - "source-map-support": "0.5.21", - "tinyglobby": "0.2.14", - "vite": "7.1.11", - "watchpack": "2.4.4" + "bin": { + "esbuild": "bin/esbuild" }, "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" + "node": ">=18" }, "optionalDependencies": { - "lmdb": "3.4.2" - }, - "peerDependencies": { - "@angular/compiler": "^20.0.0", - "@angular/compiler-cli": "^20.0.0", - "@angular/core": "^20.0.0", - "@angular/localize": "^20.0.0", - "@angular/platform-browser": "^20.0.0", - "@angular/platform-server": "^20.0.0", - "@angular/service-worker": "^20.0.0", - "@angular/ssr": "^20.3.17", - "karma": "^6.4.0", - "less": "^4.2.0", - "ng-packagr": "^20.0.0", - "postcss": "^8.4.0", - "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", - "tslib": "^2.3.0", - "typescript": ">=5.8 <6.0", - "vitest": "^3.1.1" - }, - "peerDependenciesMeta": { - "@angular/core": { - "optional": true - }, - "@angular/localize": { - "optional": true - }, - "@angular/platform-browser": { - "optional": true - }, - "@angular/platform-server": { - "optional": true - }, - "@angular/service-worker": { - "optional": true - }, - "@angular/ssr": { - "optional": true - }, - "karma": { - "optional": true - }, - "less": { - "optional": true - }, - "ng-packagr": { - "optional": true - }, - "postcss": { - "optional": true - }, - "tailwindcss": { - "optional": true - }, - "vitest": { - "optional": true - } + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/@angular/cli": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.17.tgz", - "integrity": "sha512-JunMKV78Eo7qXRISgDZb35i/Khoq+5JSfNia7ngoIrEIOxcdY+xeeHt3SV1KCfyu9/gkLWEyZMulI5L7+hTVbw==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.32.tgz", + "integrity": "sha512-WIMbTrEJYVVz4Phs8nn6yK/bzCSt1dDlxtAEnS2melTWXKGF6WK/OqVaH0+Cox0SNagA81dvvSbGlFYCxncYfQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.2003.17", - "@angular-devkit/core": "20.3.17", - "@angular-devkit/schematics": "20.3.17", + "@angular-devkit/architect": "0.2003.32", + "@angular-devkit/core": "20.3.32", + "@angular-devkit/schematics": "20.3.32", "@inquirer/prompts": "7.8.2", "@listr2/prompt-adapter-inquirer": "3.0.1", "@modelcontextprotocol/sdk": "1.26.0", - "@schematics/angular": "20.3.17", + "@schematics/angular": "20.3.32", "@yarnpkg/lockfile": "1.1.0", "algoliasearch": "5.35.0", "ini": "5.0.0", "jsonc-parser": "3.3.1", "listr2": "9.0.1", "npm-package-arg": "13.0.0", - "pacote": "21.0.4", + "pacote": "21.5.1", "resolve": "1.22.10", "semver": "7.7.2", "yargs": "18.0.0", @@ -618,9 +1588,9 @@ } }, "node_modules/@angular/common": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.17.tgz", - "integrity": "sha512-Dqd8f8o9MehszTZIB7o7jrERlwLOSK64gNngK14DCQazz5lpIhAF6hBjx7zjHpa7L9eAYPK1TaxQUXypjzj18Q==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.26.tgz", + "integrity": "sha512-35+aHaCmldFZ2qFiH83+cHcDXwUqSEuUR5DVApcd+Ku8PfIIGo8uMiD5++Qq7QIUTbZCD2glAiE9jLroGrf1Cw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -629,14 +1599,14 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/core": "20.3.17", + "@angular/core": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/compiler": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.17.tgz", - "integrity": "sha512-cj3x6aFk9xOOxX+qEdeN8T5YbnBNWJ4UMHB/LQoDr7/xCJJGa40IhcOAuJeuF2kGqTwx6MCXnvjO8XOQfHhe9g==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.26.tgz", + "integrity": "sha512-H4DVTBCiyM4dGytFi2C8sMGflxXzPnoQ6Ajfs4hJ/Dekg6ypfvW5Ze7BDh4TaMQvaX2joM5LhBYW5jTxBx66hA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -646,13 +1616,13 @@ } }, "node_modules/@angular/compiler-cli": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.17.tgz", - "integrity": "sha512-w5pmO1pXO9tUMgUMWstpDmAWh5s1lJWo+2GI/ByaUEgBZkXd2S92sWoDL+bhy+JSvFzdLGdua6BncHBOX7hEjA==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.26.tgz", + "integrity": "sha512-3rHtC87ecldvaiFHwQEZ6Wx3QaZ/Q7b0Gb7XORDOjn/M+5CYZ4rQsvbxE5TUjwreg07oQ4Y2h8ADESXTJEUYOQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/core": "7.28.3", + "@babel/core": "7.29.7", "@jridgewell/sourcemap-codec": "^1.4.14", "chokidar": "^4.0.0", "convert-source-map": "^1.5.1", @@ -669,7 +1639,7 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/compiler": "20.3.17", + "@angular/compiler": "20.3.26", "typescript": ">=5.8 <6.0" }, "peerDependenciesMeta": { @@ -679,9 +1649,9 @@ } }, "node_modules/@angular/core": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.17.tgz", - "integrity": "sha512-YlQqxMeHI9XJw7I7oM3hYFQd4lQbK37IdlD9ztROIw5FjX6i6lmLU7+X1MQGSRi2r+X9l3IZtl33hRTNvkoUBw==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.26.tgz", + "integrity": "sha512-v+YtZ9eQVDb6v3V1TbUUBHU63FEp8Hqqqb3UhM4MLAOm0chyyh9jah7FiHr3HbCKrV1f4long1coftFK/KThog==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -690,7 +1660,7 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/compiler": "20.3.17", + "@angular/compiler": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0", "zone.js": "~0.15.0" }, @@ -704,9 +1674,9 @@ } }, "node_modules/@angular/forms": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.17.tgz", - "integrity": "sha512-iGS6NwzcyJzinbPMapsQtcN0ZJ62vr6hcul+FNa40CaK2ePC04S+C5n+DIphzwnwsFHDBIWuTQRfk/lNYdN1JA==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.26.tgz", + "integrity": "sha512-ia0YaPVjlG2oBFKCfaAgqQ0jGRrhGTAcrbZG3tVeFDpi7LQ6WdP3Syw2H+0D3GPyzpl/5UqU10Fum5Wr1br4QQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -715,16 +1685,16 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/platform-browser": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.17.tgz", - "integrity": "sha512-GA8pK+0F2/KGdYn5LMpLBrPTkQUwGjQE8Q+qsivOa150cK3OuD0po5PvYK58l+niGIVvm0wB1xGKTHTOiX/+4A==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.26.tgz", + "integrity": "sha512-In4wUiLUUT9LqyV9Rjz78k/dsnKAwec4AtDmwZoX8/ZmeJOSH7g5X1gTM+hxTxmifmZkrapQjXR299IcfIkzrw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -733,9 +1703,9 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/animations": "20.3.17", - "@angular/common": "20.3.17", - "@angular/core": "20.3.17" + "@angular/animations": "20.3.26", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26" }, "peerDependenciesMeta": { "@angular/animations": { @@ -744,9 +1714,10 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.17.tgz", - "integrity": "sha512-yTxFuGQ+z0J9khNIhfFZ+kkT7TOFb8kFZKyUz0DxHOmE0q/TEvNZoy3jXOs8xCBFf1+6BY0NqFNlPna+uw36FQ==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.26.tgz", + "integrity": "sha512-/9eq0GGmtMoBV5UvcjvhnV4ZDcgZr15h+dzoxkZodUncb2z7fxybSyha7wWD9aTeabZ/q/KYVUSnoYqVyBhbVQ==", + "deprecated": "@angular/platform-browser-dynamic is deprecated. Use `@angular/platform-browser` instead.", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -755,16 +1726,16 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/compiler": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17" + "@angular/common": "20.3.26", + "@angular/compiler": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26" } }, "node_modules/@angular/router": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.17.tgz", - "integrity": "sha512-p0r0IOJhUcn8WHx4gkSlfwifkkYO5mSDtq4iM5OunZTlSaeSxLb1vTRg2VBgwdzpgAM+eZSMBTTVF/M3pdoELQ==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.26.tgz", + "integrity": "sha512-q0k0b5uuQx93Trk4qEMYe8LoPOozheRBIjze51q+LUTlLXWik4W0ughXLiTJL346KRudR/vB5ksfZP8b6WlQyA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -773,20 +1744,20 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@babel/code-frame": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", - "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.27.1", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -795,9 +1766,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz", - "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", "dev": true, "license": "MIT", "engines": { @@ -805,22 +1776,22 @@ } }, "node_modules/@babel/core": { - "version": "7.28.3", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz", - "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.27.1", - "@babel/generator": "^7.28.3", - "@babel/helper-compilation-targets": "^7.27.2", - "@babel/helper-module-transforms": "^7.28.3", - "@babel/helpers": "^7.28.3", - "@babel/parser": "^7.28.3", - "@babel/template": "^7.27.2", - "@babel/traverse": "^7.28.3", - "@babel/types": "^7.28.2", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -835,6 +1806,23 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/core/node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/core/node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -883,14 +1871,14 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.27.2", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz", - "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", "dev": true, "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.27.2", - "@babel/helper-validator-option": "^7.27.1", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -987,9 +1975,9 @@ } }, "node_modules/@babel/helper-globals": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz", - "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", "dev": true, "license": "MIT", "engines": { @@ -1011,29 +1999,29 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz", - "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", "dev": true, "license": "MIT", "dependencies": { - "@babel/traverse": "^7.27.1", - "@babel/types": "^7.27.1" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.28.3", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz", - "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1", - "@babel/traverse": "^7.28.3" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1129,9 +2117,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "dev": true, "license": "MIT", "engines": { @@ -1139,9 +2127,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", - "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "dev": true, "license": "MIT", "engines": { @@ -1149,9 +2137,9 @@ } }, "node_modules/@babel/helper-validator-option": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", - "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", "dev": true, "license": "MIT", "engines": { @@ -1174,27 +2162,27 @@ } }, "node_modules/@babel/helpers": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz", - "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/template": "^7.27.2", - "@babel/types": "^7.28.4" + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", - "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.28.4" + "@babel/types": "^7.29.7" }, "bin": { "parser": "bin/babel-parser.js" @@ -2357,48 +3345,65 @@ } }, "node_modules/@babel/template": { - "version": "7.27.2", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", - "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.27.1", - "@babel/parser": "^7.27.2", - "@babel/types": "^7.27.1" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz", - "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.27.1", - "@babel/generator": "^7.28.3", - "@babel/helper-globals": "^7.28.0", - "@babel/parser": "^7.28.4", - "@babel/template": "^7.27.2", - "@babel/types": "^7.28.4", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", "debug": "^4.3.1" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/types": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", - "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -2415,9 +3420,9 @@ } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz", - "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz", + "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==", "cpu": [ "ppc64" ], @@ -2432,9 +3437,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz", - "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz", + "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==", "cpu": [ "arm" ], @@ -2449,9 +3454,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz", - "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz", + "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==", "cpu": [ "arm64" ], @@ -2466,9 +3471,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz", - "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz", + "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==", "cpu": [ "x64" ], @@ -2483,9 +3488,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz", - "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz", + "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==", "cpu": [ "arm64" ], @@ -2500,9 +3505,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz", - "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz", + "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==", "cpu": [ "x64" ], @@ -2517,9 +3522,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz", - "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz", + "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==", "cpu": [ "arm64" ], @@ -2534,9 +3539,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz", - "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz", + "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==", "cpu": [ "x64" ], @@ -2551,9 +3556,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz", - "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz", + "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==", "cpu": [ "arm" ], @@ -2568,9 +3573,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz", - "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz", + "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==", "cpu": [ "arm64" ], @@ -2585,9 +3590,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz", - "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz", + "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==", "cpu": [ "ia32" ], @@ -2602,9 +3607,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz", - "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz", + "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==", "cpu": [ "loong64" ], @@ -2619,9 +3624,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz", - "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz", + "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==", "cpu": [ "mips64el" ], @@ -2636,9 +3641,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz", - "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz", + "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==", "cpu": [ "ppc64" ], @@ -2653,9 +3658,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz", - "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz", + "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==", "cpu": [ "riscv64" ], @@ -2670,9 +3675,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz", - "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz", + "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==", "cpu": [ "s390x" ], @@ -2687,9 +3692,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz", - "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz", + "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==", "cpu": [ "x64" ], @@ -2704,9 +3709,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz", - "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz", + "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==", "cpu": [ "arm64" ], @@ -2721,9 +3726,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz", - "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz", + "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==", "cpu": [ "x64" ], @@ -2738,9 +3743,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz", - "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz", + "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==", "cpu": [ "arm64" ], @@ -2755,9 +3760,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz", - "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz", + "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==", "cpu": [ "x64" ], @@ -2772,9 +3777,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz", - "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz", + "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==", "cpu": [ "arm64" ], @@ -2789,9 +3794,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz", - "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz", + "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==", "cpu": [ "x64" ], @@ -2806,9 +3811,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz", - "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz", + "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==", "cpu": [ "arm64" ], @@ -2823,9 +3828,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz", - "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz", + "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==", "cpu": [ "ia32" ], @@ -2840,9 +3845,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz", - "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz", + "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==", "cpu": [ "x64" ], @@ -2856,6 +3861,16 @@ "node": ">=18" } }, + "node_modules/@gar/promise-retry": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@gar/promise-retry/-/promise-retry-1.0.3.tgz", + "integrity": "sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, "node_modules/@hono/node-server": { "version": "1.19.9", "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz", @@ -3324,6 +4339,17 @@ "@jridgewell/trace-mapping": "^0.3.24" } }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", @@ -4053,9 +5079,9 @@ } }, "node_modules/@ngtools/webpack": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-20.3.17.tgz", - "integrity": "sha512-cfV7hdA1QkykNqegBu07KOQEeHzOwBV52snFz9gFSYLCqP669D8OqEzdRktYMgpGc7ZBOia7IC4gwhHkM3gOfg==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-20.3.32.tgz", + "integrity": "sha512-a3KWNfv3NEyNHdGusIP/+lfLtjH7L5rcqgouBm6v3t1vHQ4zg2sNgoYIQIJCAJnFI2b080YrP9jh2FqKTCJlug==", "dev": true, "license": "MIT", "engines": { @@ -4069,6 +5095,19 @@ "webpack": "^5.54.0" } }, + "node_modules/@noble/hashes": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz", + "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4692,32 +5731,201 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/watcher/node_modules/detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "node_modules/@parcel/watcher/node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/@parcel/watcher/node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/@peculiar/asn1-cms": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.8.0.tgz", + "integrity": "sha512-NgekZOrSJFSBFLFoLfwePguAWAx7z1+f2TEsWFUMyiqqfntZ4+S/S5hzqME3q4pCA0iOsFKdwiQ35dwY24eVqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-csr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.8.0.tgz", + "integrity": "sha512-akbF8+uvleHs8sejNPQxwmVFuInAg6FMNHOwMILXfP518YfFJwdR3jr6oNUPOaEJfuEhn/vkNOCIT6ASUd4mbg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-ecc": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.8.0.tgz", + "integrity": "sha512-ohwlk+u9Rv2NOAY1c6MfHj45ATVF8R1DUN/WCgABiRtLi2ZftlZWZX7KvpAbU8v9xPcmoILfELeEABj/rn18AQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pfx": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.8.0.tgz", + "integrity": "sha512-5yof1ytoB++RQtaFbqSUJ8pxDJtZT6vbVqZ8XoJ61ph7UjNVvfFwAilnCodqkNsAodpy13gDhoxZXw00pghnyg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-rsa": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs8": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.8.0.tgz", + "integrity": "sha512-qAKXtLpBEw9LqhKpjw3ajZSXlBur+ipW+y2ivVBQAG6F6qRx94yO+1ZR4mvw+YaCfKSaOzLeYEzsPaBp4SJELA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs9": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.8.0.tgz", + "integrity": "sha512-b5nDWCnkV60+cQ141D6sVVwK9nz64R5n3zSVnklGd+ECdkW2Ol3U1a6yYFlalpSOaD557yuJB64A+q42jG7lUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pfx": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-rsa": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.8.0.tgz", + "integrity": "sha512-zHEUlCqB2mk7x2lxDwHHJy7hWZOPdGHVlsmITWKB5/PbQo61atbu9PJ/0r9dQNMwFzbKPXZ8uK8/91eUhRznSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-schema": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.8.0.tgz", + "integrity": "sha512-7YT0U/ze0tF2QOBbE15gKZwy5tvgGyLRiRHLzhlbOpf7BT032oBSd0haZqXn5W6l26WLlu3dyxzjM+2638/z2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.8.0.tgz", + "integrity": "sha512-N0CMuhWUzsWEVq6F1q9X6+VKUnWzSW+cSVg+aPaGGwDdbFoFWTYgin5MHwXgpWd6y9COMBxnfy/Qc+Xc7F0Zwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509-attr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.8.0.tgz", + "integrity": "sha512-tHjkfS/qhMnmrlB2J9NhflQlQ7In3khO3CfmVrriOlpTeErY9ZIKOso1hQ5JQiyrJ7ShvqVPk7E5fQmbclkSKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/utils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz", + "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/x509": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz", + "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==", "dev": true, - "license": "Apache-2.0", - "optional": true, - "bin": { - "detect-libc": "bin/detect-libc.js" + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.6.0", + "@peculiar/asn1-csr": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.0", + "@peculiar/asn1-pkcs9": "^2.6.0", + "@peculiar/asn1-rsa": "^2.6.0", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.0", + "pvtsutils": "^1.3.6", + "reflect-metadata": "^0.2.2", + "tslib": "^2.8.1", + "tsyringe": "^4.10.0" }, "engines": { - "node": ">=0.10" + "node": ">=20.0.0" } }, - "node_modules/@parcel/watcher/node_modules/node-addon-api": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", - "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "dev": true, - "license": "MIT", - "optional": true - }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.3.tgz", - "integrity": "sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz", + "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==", "cpu": [ "arm" ], @@ -4729,9 +5937,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.3.tgz", - "integrity": "sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz", + "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==", "cpu": [ "arm64" ], @@ -4743,9 +5951,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -4756,9 +5964,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -4769,9 +5977,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.3.tgz", - "integrity": "sha512-u9Xg2FavYbD30g3DSfNhxgNrxhi6xVG4Y6i9Ur1C7xUuGDW3banRbXj+qgnIrwRN4KeJ396jchwy9bCIzbyBEQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz", + "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==", "cpu": [ "arm64" ], @@ -4783,9 +5991,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.3.tgz", - "integrity": "sha512-5M8kyi/OX96wtD5qJR89a/3x5x8x5inXBZO04JWhkQb2JWavOWfjgkdvUqibGJeNNaz1/Z1PPza5/tAPXICI6A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz", + "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==", "cpu": [ "x64" ], @@ -4797,13 +6005,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.3.tgz", - "integrity": "sha512-IoerZJ4l1wRMopEHRKOO16e04iXRDyZFZnNZKrWeNquh5d6bucjezgd+OxG03mOMTnS1x7hilzb3uURPkJ0OfA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz", + "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4811,13 +6022,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.3.tgz", - "integrity": "sha512-ZYdtqgHTDfvrJHSh3W22TvjWxwOgc3ThK/XjgcNGP2DIwFIPeAPNsQxrJO5XqleSlgDux2VAoWQ5iJrtaC1TbA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz", + "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4825,12 +6039,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4838,12 +6055,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4851,13 +6071,33 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.3.tgz", - "integrity": "sha512-3y5GA0JkBuirLqmjwAKwB0keDlI6JfGYduMlJD/Rl7fvb4Ni8iKdQs1eiunMZJhwDWdCvrcqXRY++VEBbvk6Eg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz", + "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==", + "cpu": [ + "loong64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz", + "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==", "cpu": [ "loong64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4865,13 +6105,33 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.3.tgz", - "integrity": "sha512-AUUH65a0p3Q0Yfm5oD2KVgzTKgwPyp9DSXc3UA7DtxhEb/WSPfbG4wqXeSN62OG5gSo18em4xv6dbfcUGXcagw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz", + "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz", + "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==", "cpu": [ "ppc64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4879,13 +6139,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.3.tgz", - "integrity": "sha512-1makPhFFVBqZE+XFg3Dkq+IkQ7JvmUrwwqaYBL2CE+ZpxPaqkGaiWFEWVGyvTwZace6WLJHwjVh/+CXbKDGPmg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz", + "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4893,13 +6156,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.3.tgz", - "integrity": "sha512-OOFJa28dxfl8kLOPMUOQBCO6z3X2SAfzIE276fwT52uXDWUS178KWq0pL7d6p1kz7pkzA0yQwtqL0dEPoVcRWg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz", + "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4907,13 +6173,16 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.3.tgz", - "integrity": "sha512-jMdsML2VI5l+V7cKfZx3ak+SLlJ8fKvLJ0Eoa4b9/vCUrzXKgoKxvHqvJ/mkWhFiyp88nCkM5S2v6nIwRtPcgg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz", + "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==", "cpu": [ "s390x" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4921,12 +6190,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4934,22 +6206,39 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz", + "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.3.tgz", - "integrity": "sha512-KTD/EqjZF3yvRaWUJdD1cW+IQBk4fbQaHYJUmP8N4XoKFZilVL8cobFSTDnjTtxWJQ3JYaMgF4nObY/+nYkumA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz", + "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==", "cpu": [ "arm64" ], @@ -4961,9 +6250,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -4974,9 +6263,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.3.tgz", - "integrity": "sha512-of1iHkTQSo3kr6dTIRX6t81uj/c/b15HXVsPcEElN5sS859qHrOepM5p9G41Hah+CTqSh2r8Bm56dL2z9UQQ7g==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz", + "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==", "cpu": [ "ia32" ], @@ -4988,9 +6277,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.3.tgz", - "integrity": "sha512-s0hybmlHb56mWVZQj8ra9048/WZTPLILKxcvcq+8awSZmyiSUZjjem1AhU3Tf4ZKpYhK4mg36HtHDOe8QJS5PQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz", + "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==", "cpu": [ "x64" ], @@ -5002,9 +6291,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -5015,14 +6304,14 @@ ] }, "node_modules/@schematics/angular": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.17.tgz", - "integrity": "sha512-cTqiKBXZRxRfmV6rzjceu7swQ1N/KUMuS+jgoLqRZqPFNIfe7SDk4L5ou889q4wyfEMO4tED4dzjK30jLJ98SA==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.32.tgz", + "integrity": "sha512-asporFGNP/U4p/A6jHqRmC8zGBxsSbjA/17I0p1tIW4HLbDTwJ0Z1gTSGpkHGRGTeowPZZSCj7s0IWVoaBCjnA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.17", - "@angular-devkit/schematics": "20.3.17", + "@angular-devkit/core": "20.3.32", + "@angular-devkit/schematics": "20.3.32", "jsonc-parser": "3.3.1" }, "engines": { @@ -5122,9 +6411,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.38.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.1.tgz", - "integrity": "sha512-qImplYLSp2wSZJo3oMZ3HrTaI+uULcRB4Knrua7UT9VjN/va+TDfk4JAKwDyDfTDkD2laDPcy6QJP2S3hVxZFQ==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -5134,14 +6423,14 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@tufjs/canonical-json": { @@ -5240,16 +6529,16 @@ "license": "MIT" }, "node_modules/@types/express": { - "version": "4.17.23", - "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz", - "integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==", + "version": "4.17.25", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz", + "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==", "dev": true, "license": "MIT", "dependencies": { "@types/body-parser": "*", "@types/express-serve-static-core": "^4.17.33", "@types/qs": "*", - "@types/serve-static": "*" + "@types/serve-static": "^1" } }, "node_modules/@types/express-serve-static-core": { @@ -5306,16 +6595,6 @@ "undici-types": "~7.14.0" } }, - "node_modules/@types/node-forge": { - "version": "1.3.14", - "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.14.tgz", - "integrity": "sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz", @@ -5685,9 +6964,9 @@ } }, "node_modules/ajv": { - "version": "8.17.1", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", - "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz", + "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", "dev": true, "license": "MIT", "dependencies": { @@ -5864,6 +7143,21 @@ "dev": true, "license": "MIT" }, + "node_modules/asn1js": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz", + "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.5", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/autoprefixer": { "version": "10.4.21", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", @@ -6154,6 +7448,16 @@ "node": ">= 0.8" } }, + "node_modules/bytestreamjs": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz", + "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/cacache": { "version": "20.0.3", "resolved": "https://registry.npmjs.org/cacache/-/cacache-20.0.3.tgz", @@ -6590,20 +7894,20 @@ } }, "node_modules/copy-webpack-plugin": { - "version": "13.0.1", - "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.1.tgz", - "integrity": "sha512-J+YV3WfhY6W/Xf9h+J1znYuqTye2xkBUIGyTPWuBAT27qajBa5mR4f8WBmfDY3YjRftT2kqZZiLi1qf0H+UOFw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-14.0.0.tgz", + "integrity": "sha512-3JLW90aBGeaTLpM7mYQKpnVdgsUZRExY55giiZgLuX/xTQRUs1dOCwbBnWnvY6Q6rfZoXMNwzOQJCSZPppfqXA==", "dev": true, "license": "MIT", "dependencies": { "glob-parent": "^6.0.1", "normalize-path": "^3.0.0", "schema-utils": "^4.2.0", - "serialize-javascript": "^6.0.2", + "serialize-javascript": "^7.0.3", "tinyglobby": "^0.2.12" }, "engines": { - "node": ">= 18.12.0" + "node": ">= 20.9.0" }, "funding": { "type": "opencollective", @@ -6613,6 +7917,16 @@ "webpack": "^5.1.0" } }, + "node_modules/copy-webpack-plugin/node_modules/serialize-javascript": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz", + "integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/core-js-compat": { "version": "3.46.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.46.0.tgz", @@ -7131,9 +8445,9 @@ "license": "MIT" }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", "dev": true, "license": "MIT", "dependencies": { @@ -7144,9 +8458,9 @@ } }, "node_modules/esbuild": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz", - "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz", + "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -7157,38 +8471,38 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.25.9", - "@esbuild/android-arm": "0.25.9", - "@esbuild/android-arm64": "0.25.9", - "@esbuild/android-x64": "0.25.9", - "@esbuild/darwin-arm64": "0.25.9", - "@esbuild/darwin-x64": "0.25.9", - "@esbuild/freebsd-arm64": "0.25.9", - "@esbuild/freebsd-x64": "0.25.9", - "@esbuild/linux-arm": "0.25.9", - "@esbuild/linux-arm64": "0.25.9", - "@esbuild/linux-ia32": "0.25.9", - "@esbuild/linux-loong64": "0.25.9", - "@esbuild/linux-mips64el": "0.25.9", - "@esbuild/linux-ppc64": "0.25.9", - "@esbuild/linux-riscv64": "0.25.9", - "@esbuild/linux-s390x": "0.25.9", - "@esbuild/linux-x64": "0.25.9", - "@esbuild/netbsd-arm64": "0.25.9", - "@esbuild/netbsd-x64": "0.25.9", - "@esbuild/openbsd-arm64": "0.25.9", - "@esbuild/openbsd-x64": "0.25.9", - "@esbuild/openharmony-arm64": "0.25.9", - "@esbuild/sunos-x64": "0.25.9", - "@esbuild/win32-arm64": "0.25.9", - "@esbuild/win32-ia32": "0.25.9", - "@esbuild/win32-x64": "0.25.9" + "@esbuild/aix-ppc64": "0.27.7", + "@esbuild/android-arm": "0.27.7", + "@esbuild/android-arm64": "0.27.7", + "@esbuild/android-x64": "0.27.7", + "@esbuild/darwin-arm64": "0.27.7", + "@esbuild/darwin-x64": "0.27.7", + "@esbuild/freebsd-arm64": "0.27.7", + "@esbuild/freebsd-x64": "0.27.7", + "@esbuild/linux-arm": "0.27.7", + "@esbuild/linux-arm64": "0.27.7", + "@esbuild/linux-ia32": "0.27.7", + "@esbuild/linux-loong64": "0.27.7", + "@esbuild/linux-mips64el": "0.27.7", + "@esbuild/linux-ppc64": "0.27.7", + "@esbuild/linux-riscv64": "0.27.7", + "@esbuild/linux-s390x": "0.27.7", + "@esbuild/linux-x64": "0.27.7", + "@esbuild/netbsd-arm64": "0.27.7", + "@esbuild/netbsd-x64": "0.27.7", + "@esbuild/openbsd-arm64": "0.27.7", + "@esbuild/openbsd-x64": "0.27.7", + "@esbuild/openharmony-arm64": "0.27.7", + "@esbuild/sunos-x64": "0.27.7", + "@esbuild/win32-arm64": "0.27.7", + "@esbuild/win32-ia32": "0.27.7", + "@esbuild/win32-x64": "0.27.7" } }, "node_modules/esbuild-wasm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.25.9.tgz", - "integrity": "sha512-Jpv5tCSwQg18aCqCRD3oHIX/prBhXMDapIoG//A+6+dV0e7KQMGFg85ihJ5T1EeMjbZjON3TqFy0VrGAnIHLDA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.28.1.tgz", + "integrity": "sha512-p/GD4E8oYRjg3kjdKrnMb0s4PzXgJF42e0MF4H0+ACyK/kIlFRp3e0fzOleIG+wBBm6MM3XQrbpe7soEA+vJIA==", "dev": true, "license": "MIT", "bin": { @@ -7969,30 +9283,24 @@ "license": "MIT" }, "node_modules/http-errors": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", - "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", "dev": true, "license": "MIT", "dependencies": { - "depd": "2.0.0", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "toidentifier": "1.0.1" + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" }, "engines": { "node": ">= 0.8" - } - }, - "node_modules/http-errors/node_modules/statuses": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", - "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/http-parser-js": { @@ -8032,9 +9340,9 @@ } }, "node_modules/http-proxy-middleware": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz", - "integrity": "sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.7.tgz", + "integrity": "sha512-iwbQltVlx8bCrqePUM8C+hllHvdawVhQJaLrj1X7qllkvFQdXFsr16pW/mo9+JDVjN+QO2XUx9jd8SmoFkE5qw==", "dev": true, "license": "MIT", "dependencies": { @@ -8046,7 +9354,7 @@ "micromatch": "^4.0.8" }, "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + "node": "^14.18.0 || ^16.10.0 || >=18.0.0" } }, "node_modules/https-proxy-agent": { @@ -8182,12 +9490,12 @@ } }, "node_modules/ionicons": { - "version": "8.0.13", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", - "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", "license": "MIT", "dependencies": { - "@stencil/core": "^4.35.3" + "@stencil/core": "^4.43.5" } }, "node_modules/ip-address": { @@ -9517,16 +10825,6 @@ "license": "MIT", "optional": true }, - "node_modules/node-forge": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", - "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", - "dev": true, - "license": "(BSD-3-Clause OR GPL-2.0)", - "engines": { - "node": ">= 6.13.0" - } - }, "node_modules/node-gyp": { "version": "12.2.0", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.2.0.tgz", @@ -9976,12 +11274,13 @@ } }, "node_modules/pacote": { - "version": "21.0.4", - "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.0.4.tgz", - "integrity": "sha512-RplP/pDW0NNNDh3pnaoIWYPvNenS7UqMbXyvMqJczosiFWTeGGwJC2NQBLqKf4rGLFfwCOnntw1aEp9Jiqm1MA==", + "version": "21.5.1", + "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.5.1.tgz", + "integrity": "sha512-KvcJ9iy3crysCsgqc4+PknH/w6jkrp8JN36mpZBPwNaDRwTfMZD37YzRazNstiZUOhuF5pno9f78n9mEJBavwg==", "dev": true, "license": "ISC", "dependencies": { + "@gar/promise-retry": "^1.0.0", "@npmcli/git": "^7.0.0", "@npmcli/installed-package-contents": "^4.0.0", "@npmcli/package-json": "^7.0.0", @@ -9995,7 +11294,6 @@ "npm-pick-manifest": "^11.0.1", "npm-registry-fetch": "^19.0.0", "proc-log": "^6.0.0", - "promise-retry": "^2.0.1", "sigstore": "^4.0.0", "ssri": "^13.0.0", "tar": "^7.4.3" @@ -10216,9 +11514,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", "engines": { @@ -10240,9 +11538,9 @@ } }, "node_modules/piscina": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.3.tgz", - "integrity": "sha512-0u3N7H4+hbr40KjuVn2uNhOcthu/9usKhnw5vT3J7ply79v3D3M8naI00el9Klcy16x557VsEkkUQaHCWFXC/g==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.2.0.tgz", + "integrity": "sha512-DszUCKeVN/5G5QKo6jAVHL8fmKnkJvQ0ACiVgY7YGCq3TUB2oznAOayvZPIAdEThvhczkXR+qm3IHsNXpFCYfA==", "dev": true, "license": "MIT", "engines": { @@ -10262,10 +11560,28 @@ "node": ">=16.20.0" } }, + "node_modules/pkijs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.4.0.tgz", + "integrity": "sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@noble/hashes": "1.4.0", + "asn1js": "^3.0.6", + "bytestreamjs": "^2.0.1", + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.3", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.12", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz", + "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==", "dev": true, "funding": [ { @@ -10467,14 +11783,35 @@ "license": "MIT", "optional": true }, + "node_modules/pvtsutils": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz", + "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/pvutils": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz", + "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/qs": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz", - "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==", + "version": "6.15.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", + "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==", "dev": true, "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.1.0" + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" }, "engines": { "node": ">=0.6" @@ -10540,27 +11877,6 @@ "node": ">= 0.10" } }, - "node_modules/raw-body/node_modules/http-errors": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", - "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "depd": "~2.0.0", - "inherits": "~2.0.4", - "setprototypeof": "~1.2.0", - "statuses": "~2.0.2", - "toidentifier": "~1.0.1" - }, - "engines": { - "node": ">= 0.8" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -10798,9 +12114,9 @@ "license": "MIT" }, "node_modules/rollup": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz", - "integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz", + "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==", "dev": true, "license": "MIT", "dependencies": { @@ -10814,35 +12130,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.3", - "@rollup/rollup-android-arm64": "4.52.3", - "@rollup/rollup-darwin-arm64": "4.52.3", - "@rollup/rollup-darwin-x64": "4.52.3", - "@rollup/rollup-freebsd-arm64": "4.52.3", - "@rollup/rollup-freebsd-x64": "4.52.3", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.3", - "@rollup/rollup-linux-arm-musleabihf": "4.52.3", - "@rollup/rollup-linux-arm64-gnu": "4.52.3", - "@rollup/rollup-linux-arm64-musl": "4.52.3", - "@rollup/rollup-linux-loong64-gnu": "4.52.3", - "@rollup/rollup-linux-ppc64-gnu": "4.52.3", - "@rollup/rollup-linux-riscv64-gnu": "4.52.3", - "@rollup/rollup-linux-riscv64-musl": "4.52.3", - "@rollup/rollup-linux-s390x-gnu": "4.52.3", - "@rollup/rollup-linux-x64-gnu": "4.52.3", - "@rollup/rollup-linux-x64-musl": "4.52.3", - "@rollup/rollup-openharmony-arm64": "4.52.3", - "@rollup/rollup-win32-arm64-msvc": "4.52.3", - "@rollup/rollup-win32-ia32-msvc": "4.52.3", - "@rollup/rollup-win32-x64-gnu": "4.52.3", - "@rollup/rollup-win32-x64-msvc": "4.52.3", + "@rollup/rollup-android-arm-eabi": "4.59.0", + "@rollup/rollup-android-arm64": "4.59.0", + "@rollup/rollup-darwin-arm64": "4.59.0", + "@rollup/rollup-darwin-x64": "4.59.0", + "@rollup/rollup-freebsd-arm64": "4.59.0", + "@rollup/rollup-freebsd-x64": "4.59.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", + "@rollup/rollup-linux-arm-musleabihf": "4.59.0", + "@rollup/rollup-linux-arm64-gnu": "4.59.0", + "@rollup/rollup-linux-arm64-musl": "4.59.0", + "@rollup/rollup-linux-loong64-gnu": "4.59.0", + "@rollup/rollup-linux-loong64-musl": "4.59.0", + "@rollup/rollup-linux-ppc64-gnu": "4.59.0", + "@rollup/rollup-linux-ppc64-musl": "4.59.0", + "@rollup/rollup-linux-riscv64-gnu": "4.59.0", + "@rollup/rollup-linux-riscv64-musl": "4.59.0", + "@rollup/rollup-linux-s390x-gnu": "4.59.0", + "@rollup/rollup-linux-x64-gnu": "4.59.0", + "@rollup/rollup-linux-x64-musl": "4.59.0", + "@rollup/rollup-openbsd-x64": "4.59.0", + "@rollup/rollup-openharmony-arm64": "4.59.0", + "@rollup/rollup-win32-arm64-msvc": "4.59.0", + "@rollup/rollup-win32-ia32-msvc": "4.59.0", + "@rollup/rollup-win32-x64-gnu": "4.59.0", + "@rollup/rollup-win32-x64-msvc": "4.59.0", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.3.tgz", - "integrity": "sha512-lj9ViATR1SsqycwFkJCtYfQTheBdvlWJqzqxwc9f2qrcVrQaF/gCuBRTiTolkRWS6KvNxSk4KHZWG7tDktLgjg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz", + "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==", "cpu": [ "arm64" ], @@ -10854,9 +12173,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.3.tgz", - "integrity": "sha512-+Dyo7O1KUmIsbzx1l+4V4tvEVnVQqMOIYtrxK7ncLSknl1xnMHLgn7gddJVrYPNZfEB8CIi3hK8gq8bDhb3h5A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz", + "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==", "cpu": [ "x64" ], @@ -10868,13 +12187,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.3.tgz", - "integrity": "sha512-NcViG7A0YtuFDA6xWSgmFb6iPFzHlf5vcqb2p0lGEbT+gjrEEz8nC/EeDHvx6mnGXnGCC1SeVV+8u+smj0CeGQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz", + "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -10882,13 +12204,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.3.tgz", - "integrity": "sha512-d3pY7LWno6SYNXRm6Ebsq0DJGoiLXTb83AIPCXl9fmtIQs/rXoS8SJxxUNtFbJ5MiOvs+7y34np77+9l4nfFMw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz", + "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -10896,13 +12221,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.3.tgz", - "integrity": "sha512-tPgGd6bY2M2LJTA1uGq8fkSPK8ZLYjDjY+ZLK9WHncCnfIz29LIXIqUgzCR0hIefzy6Hpbe8Th5WOSwTM8E7LA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz", + "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -10910,13 +12238,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.3.tgz", - "integrity": "sha512-BCFkJjgk+WFzP+tcSMXq77ymAPIxsX9lFJWs+2JzuZTLtksJ2o5hvgTdIcZ5+oKzUDMwI0PfWzRBYAydAHF2Mw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz", + "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -10924,9 +12255,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.3.tgz", - "integrity": "sha512-+zteHZdoUYLkyYKObGHieibUFLbttX2r+58l27XZauq0tcWYYuKUwY2wjeCN9oK1Um2YgH2ibd6cnX/wFD7DuA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz", + "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==", "cpu": [ "arm64" ], @@ -10938,9 +12269,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.3.tgz", - "integrity": "sha512-zGIbEVVXVtauFgl3MRwGWEN36P5ZGenHRMgNw88X5wEhEBpq0XrMEZwOn07+ICrwM17XO5xfMZqh0OldCH5VTA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz", + "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==", "cpu": [ "x64" ], @@ -11157,17 +12488,17 @@ "license": "MIT" }, "node_modules/selfsigned": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz", - "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-5.5.0.tgz", + "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==", "dev": true, "license": "MIT", "dependencies": { - "@types/node-forge": "^1.3.0", - "node-forge": "^1" + "@peculiar/x509": "^1.14.2", + "pkijs": "^3.3.3" }, "engines": { - "node": ">=10" + "node": ">=18" } }, "node_modules/semver": { @@ -11210,27 +12541,6 @@ "url": "https://opencollective.com/express" } }, - "node_modules/send/node_modules/http-errors": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", - "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "depd": "~2.0.0", - "inherits": "~2.0.4", - "setprototypeof": "~1.2.0", - "statuses": "~2.0.2", - "toidentifier": "~1.0.1" - }, - "engines": { - "node": ">= 0.8" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" - } - }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -11451,15 +12761,15 @@ } }, "node_modules/side-channel": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", - "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -11471,14 +12781,14 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -12071,6 +13381,26 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/tsyringe": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz", + "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^1.9.3" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/tsyringe/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true, + "license": "0BSD" + }, "node_modules/tuf-js": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-4.1.0.tgz", @@ -12299,13 +13629,13 @@ } }, "node_modules/vite": { - "version": "7.1.11", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz", - "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "dev": true, "license": "MIT", "dependencies": { - "esbuild": "^0.25.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -12525,15 +13855,15 @@ } }, "node_modules/webpack-dev-server": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.2.tgz", - "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==", + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.5.tgz", + "integrity": "sha512-4wZtCquSuv9CKX8oybo+mqxtxZqWz47uM1Ch94lxowBztOhWCbhqvRbfC/mODOwxgV2brY+JGZpHq58/SuVFYg==", "dev": true, "license": "MIT", "dependencies": { "@types/bonjour": "^3.5.13", "@types/connect-history-api-fallback": "^1.5.4", - "@types/express": "^4.17.21", + "@types/express": "^4.17.25", "@types/express-serve-static-core": "^4.17.21", "@types/serve-index": "^1.9.4", "@types/serve-static": "^1.15.5", @@ -12543,9 +13873,9 @@ "bonjour-service": "^1.2.1", "chokidar": "^3.6.0", "colorette": "^2.0.10", - "compression": "^1.7.4", + "compression": "^1.8.1", "connect-history-api-fallback": "^2.0.0", - "express": "^4.21.2", + "express": "^4.22.1", "graceful-fs": "^4.2.6", "http-proxy-middleware": "^2.0.9", "ipaddr.js": "^2.1.0", @@ -12553,7 +13883,7 @@ "open": "^10.0.3", "p-retry": "^6.2.0", "schema-utils": "^4.2.0", - "selfsigned": "^2.4.1", + "selfsigned": "^5.5.0", "serve-index": "^1.9.1", "sockjs": "^0.3.24", "spdy": "^4.0.2", @@ -12597,24 +13927,24 @@ } }, "node_modules/webpack-dev-server/node_modules/body-parser": { - "version": "1.20.3", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", - "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", + "version": "1.20.5", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.5.tgz", + "integrity": "sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", + "bytes": "~3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.13.0", - "raw-body": "2.5.2", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", "type-is": "~1.6.18", - "unpipe": "1.0.0" + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8", @@ -12659,20 +13989,10 @@ "node": ">= 0.6" } }, - "node_modules/webpack-dev-server/node_modules/cookie": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", - "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/webpack-dev-server/node_modules/cookie-signature": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", + "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", "dev": true, "license": "MIT" }, @@ -12694,40 +14014,40 @@ "license": "MIT" }, "node_modules/webpack-dev-server/node_modules/express": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", - "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz", + "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==", "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.3", - "content-disposition": "0.5.4", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", "content-type": "~1.0.4", - "cookie": "0.7.1", - "cookie-signature": "1.0.6", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", "debug": "2.6.9", "depd": "2.0.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.3.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", "merge-descriptors": "1.0.3", "methods": "~1.1.2", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.12", + "path-to-regexp": "~0.1.12", "proxy-addr": "~2.0.7", - "qs": "6.13.0", + "qs": "~6.15.1", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.19.0", - "serve-static": "1.16.2", + "send": "~0.19.0", + "serve-static": "~1.16.2", "setprototypeof": "1.2.0", - "statuses": "2.0.1", + "statuses": "~2.0.1", "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" @@ -12741,18 +14061,18 @@ } }, "node_modules/webpack-dev-server/node_modules/finalhandler": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", - "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", + "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "statuses": "2.0.1", + "statuses": "~2.0.2", "unpipe": "~1.0.0" }, "engines": { @@ -12884,9 +14204,9 @@ } }, "node_modules/webpack-dev-server/node_modules/path-to-regexp": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", - "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", + "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", "dev": true, "license": "MIT" }, @@ -12903,33 +14223,17 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/webpack-dev-server/node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.6" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/webpack-dev-server/node_modules/raw-body": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", - "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8" @@ -12949,66 +14253,46 @@ } }, "node_modules/webpack-dev-server/node_modules/send": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", - "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", + "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "range-parser": "~1.2.1", - "statuses": "2.0.1" + "statuses": "~2.0.2" }, "engines": { "node": ">= 0.8.0" } }, - "node_modules/webpack-dev-server/node_modules/send/node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/webpack-dev-server/node_modules/serve-static": { - "version": "1.16.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", - "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", + "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", "dev": true, "license": "MIT", "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.19.0" + "send": "~0.19.1" }, "engines": { "node": ">= 0.8.0" } }, - "node_modules/webpack-dev-server/node_modules/statuses": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", - "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/webpack-dev-server/node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json index 4928aafecca..bf5b8a18c0c 100644 --- a/static/code/stackblitz/v7/angular/package.json +++ b/static/code/stackblitz/v7/angular/package.json @@ -17,7 +17,7 @@ "@angular/router": "^20.0.0", "@ionic/angular": "^7.0.0", "@ionic/core": "^7.0.0", - "ionicons": "8.0.13", + "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" diff --git a/static/code/stackblitz/v7/html/package-lock.json b/static/code/stackblitz/v7/html/package-lock.json index f7cf2310a5f..4c8eb081da7 100644 --- a/static/code/stackblitz/v7/html/package-lock.json +++ b/static/code/stackblitz/v7/html/package-lock.json @@ -7,18 +7,18 @@ "name": "html-starter", "dependencies": { "@ionic/core": "^7.0.0", - "ionicons": "8.0.13" + "ionicons": "8.1.0" }, "devDependencies": { "typescript": "~5.9.0", "vite": "^7.0.0", - "vite-plugin-static-copy": "^3.1.0" + "vite-plugin-static-copy": "^4.0.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], @@ -33,9 +33,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], @@ -50,9 +50,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], @@ -67,9 +67,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], @@ -84,9 +84,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], @@ -101,9 +101,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], @@ -118,9 +118,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], @@ -135,9 +135,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], @@ -152,9 +152,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], @@ -169,9 +169,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], @@ -186,9 +186,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], @@ -203,9 +203,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], @@ -220,9 +220,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], @@ -237,9 +237,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], @@ -254,9 +254,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], @@ -271,9 +271,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], @@ -288,9 +288,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], @@ -305,9 +305,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], @@ -322,9 +322,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], @@ -339,9 +339,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], @@ -356,9 +356,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], @@ -373,9 +373,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], @@ -390,9 +390,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], @@ -407,9 +407,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], @@ -424,9 +424,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], @@ -441,9 +441,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], @@ -478,9 +478,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], @@ -492,9 +492,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], @@ -506,9 +506,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -519,9 +519,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -532,9 +532,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], @@ -546,9 +546,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], @@ -560,13 +560,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -574,13 +577,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -588,12 +594,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -601,12 +610,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -614,13 +626,33 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", "cpu": [ "loong64" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", + "cpu": [ + "loong64" + ], + "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -628,13 +660,33 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", "cpu": [ "ppc64" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -642,13 +694,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -656,13 +711,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -670,13 +728,16 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -684,12 +745,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -697,22 +761,39 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], @@ -724,9 +805,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -737,9 +818,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], @@ -751,9 +832,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], @@ -765,9 +846,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -778,9 +859,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.38.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.1.tgz", - "integrity": "sha512-qImplYLSp2wSZJo3oMZ3HrTaI+uULcRB4Knrua7UT9VjN/va+TDfk4JAKwDyDfTDkD2laDPcy6QJP2S3hVxZFQ==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -790,20 +871,20 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", "dev": true, "license": "MIT" }, @@ -822,9 +903,9 @@ } }, "node_modules/anymatch/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true, "license": "MIT", "engines": { @@ -886,9 +967,9 @@ } }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -899,32 +980,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/fdir": { @@ -987,12 +1068,12 @@ } }, "node_modules/ionicons": { - "version": "8.0.13", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", - "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", "license": "MIT", "dependencies": { - "@stencil/core": "^4.35.3" + "@stencil/core": "^4.43.5" } }, "node_modules/is-binary-path": { @@ -1042,9 +1123,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "dev": true, "funding": [ { @@ -1071,9 +1152,9 @@ } }, "node_modules/p-map": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz", - "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.6.tgz", + "integrity": "sha512-I4Prw6ivkd6p8PiYR1tXASOAOBzIJwu0TB7fqaX0c/8c3QAehNYmX57EijyGGGBt3c/BIowGwV03RVBtXvHEVg==", "dev": true, "license": "MIT", "engines": { @@ -1091,9 +1172,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -1104,9 +1185,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "dev": true, "funding": [ { @@ -1124,7 +1205,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1146,9 +1227,9 @@ } }, "node_modules/readdirp/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true, "license": "MIT", "engines": { @@ -1159,13 +1240,13 @@ } }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", "dev": true, "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1175,35 +1256,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], @@ -1215,9 +1299,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], @@ -1229,13 +1313,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1243,13 +1330,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1257,13 +1347,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1271,13 +1364,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1285,9 +1381,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], @@ -1299,9 +1395,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], @@ -1323,14 +1419,14 @@ } }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1373,14 +1469,13 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -1449,26 +1544,26 @@ } }, "node_modules/vite-plugin-static-copy": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.2.0.tgz", - "integrity": "sha512-g2k9z8B/1Bx7D4wnFjPLx9dyYGrqWMLTpwTtPHhcU+ElNZP2O4+4OsyaficiDClus0dzVhdGvoGFYMJxoXZ12Q==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-4.1.1.tgz", + "integrity": "sha512-GrlA8YklrAfSyxJ4M3fdQLOo9oNkp56IM9FYgX/WtEgeIFkPwhu4wzpufBCIuNKCa6Fn77FkRdYxkHqV0FwjAw==", "dev": true, "license": "MIT", "dependencies": { "chokidar": "^3.6.0", "p-map": "^7.0.4", "picocolors": "^1.1.1", - "tinyglobby": "^0.2.15" + "tinyglobby": "^0.2.17" }, "engines": { - "node": "^18.0.0 || >=20.0.0" + "node": "^22.0.0 || >=24.0.0" }, "funding": { "type": "github", "url": "https://github.com/sponsors/sapphi-red" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" } } } diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json index 8e811d749e2..ec28f19c59d 100644 --- a/static/code/stackblitz/v7/html/package.json +++ b/static/code/stackblitz/v7/html/package.json @@ -10,11 +10,11 @@ }, "dependencies": { "@ionic/core": "^7.0.0", - "ionicons": "8.0.13" + "ionicons": "8.1.0" }, "devDependencies": { "typescript": "~5.9.0", "vite": "^7.0.0", - "vite-plugin-static-copy": "^3.1.0" + "vite-plugin-static-copy": "^4.0.0" } } diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json index 48c93ebbfba..9203d4a0efb 100644 --- a/static/code/stackblitz/v7/react/package-lock.json +++ b/static/code/stackblitz/v7/react/package-lock.json @@ -23,16 +23,16 @@ "react-router-dom": "^5.2.0", "typescript": "~5.9.0", "vite": "^7.0.0", - "web-vitals": "^5.0.0" + "web-vitals": "^6.0.0" } }, "node_modules/@babel/code-frame": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", - "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.28.5", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -41,29 +41,29 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz", - "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", - "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-compilation-targets": "^7.28.6", - "@babel/helper-module-transforms": "^7.28.6", - "@babel/helpers": "^7.28.6", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/traverse": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", @@ -80,13 +80,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.29.1", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz", - "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" @@ -96,13 +96,13 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz", - "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.28.6", - "@babel/helper-validator-option": "^7.27.1", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -112,36 +112,36 @@ } }, "node_modules/@babel/helper-globals": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz", - "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-imports": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz", - "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", "license": "MIT", "dependencies": { - "@babel/traverse": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz", - "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.28.6", - "@babel/helper-validator-identifier": "^7.28.5", - "@babel/traverse": "^7.28.6" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -151,61 +151,61 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz", - "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", - "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helpers": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz", - "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", "license": "MIT", "dependencies": { - "@babel/template": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz", - "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.29.7" }, "bin": { "parser": "bin/babel-parser.js" @@ -215,12 +215,12 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-self": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz", - "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.27.1" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -230,12 +230,12 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-source": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz", - "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.27.1" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -245,40 +245,40 @@ } }, "node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/template": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", - "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.28.6", - "@babel/parser": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz", - "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-globals": "^7.28.0", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", "debug": "^4.3.1" }, "engines": { @@ -286,22 +286,22 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], @@ -315,9 +315,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], @@ -331,9 +331,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], @@ -347,9 +347,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], @@ -363,9 +363,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], @@ -379,9 +379,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], @@ -395,9 +395,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], @@ -411,9 +411,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], @@ -427,9 +427,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], @@ -443,9 +443,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], @@ -459,9 +459,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], @@ -475,9 +475,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], @@ -491,9 +491,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], @@ -507,9 +507,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], @@ -523,9 +523,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], @@ -539,9 +539,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], @@ -555,9 +555,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], @@ -571,9 +571,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], @@ -587,9 +587,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], @@ -603,9 +603,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], @@ -619,9 +619,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], @@ -635,9 +635,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], @@ -651,9 +651,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], @@ -667,9 +667,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], @@ -683,9 +683,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], @@ -699,9 +699,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], @@ -808,9 +808,9 @@ "license": "MIT" }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], @@ -821,9 +821,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], @@ -834,9 +834,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -847,9 +847,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -860,9 +860,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], @@ -873,9 +873,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], @@ -886,12 +886,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -899,12 +902,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -912,12 +918,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -925,12 +934,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -938,12 +950,31 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", + "cpu": [ + "loong64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", "cpu": [ "loong64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -951,12 +982,31 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", "cpu": [ "ppc64" ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", + "cpu": [ + "ppc64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -964,12 +1014,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -977,12 +1030,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -990,12 +1046,15 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1003,12 +1062,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1016,22 +1078,38 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], @@ -1042,9 +1120,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -1055,9 +1133,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], @@ -1068,9 +1146,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], @@ -1081,9 +1159,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -1094,9 +1172,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.38.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.1.tgz", - "integrity": "sha512-qImplYLSp2wSZJo3oMZ3HrTaI+uULcRB4Knrua7UT9VjN/va+TDfk4JAKwDyDfTDkD2laDPcy6QJP2S3hVxZFQ==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -1106,14 +1184,14 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/babel__core": { @@ -1158,9 +1236,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", "license": "MIT" }, "node_modules/@types/history": { @@ -1170,27 +1248,27 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.11.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.11.0.tgz", - "integrity": "sha512-fPxQqz4VTgPI/IQ+lj9r0h+fDR66bzoeMGHp8ASee+32OSGIkeASsoZuJixsQoVef1QJbeubcPBxKk22QVoWdw==", + "version": "24.13.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz", + "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==", "license": "MIT", "dependencies": { - "undici-types": "~7.16.0" + "undici-types": "~7.18.0" } }, "node_modules/@types/react": { - "version": "19.2.14", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", - "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "version": "19.2.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", + "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", "license": "MIT", "dependencies": { "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "19.2.3", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", - "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==", "license": "MIT", "peerDependencies": { "@types/react": "^19.2.0" @@ -1218,9 +1296,9 @@ } }, "node_modules/@vitejs/plugin-react": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz", - "integrity": "sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz", + "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==", "license": "MIT", "dependencies": { "@babel/core": "^7.29.0", @@ -1234,22 +1312,25 @@ "node": "^20.19.0 || >=22.12.0" }, "peerDependencies": { - "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "node_modules/baseline-browser-mapping": { - "version": "2.9.19", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz", - "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==", + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.6.tgz", + "integrity": "sha512-69D/imtToCsIcAl8WBS2YaRwA4jO/j0HhU+hELqMEu9f54MoUtI6+XH5mrKU8rEFNEk/Ui1I2MK4/JkWacclGw==", "license": "Apache-2.0", "bin": { - "baseline-browser-mapping": "dist/cli.js" + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" } }, "node_modules/browserslist": { - "version": "4.28.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", - "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", + "version": "4.28.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz", + "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==", "funding": [ { "type": "opencollective", @@ -1266,11 +1347,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.9.0", - "caniuse-lite": "^1.0.30001759", - "electron-to-chromium": "^1.5.263", - "node-releases": "^2.0.27", - "update-browserslist-db": "^1.2.0" + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" @@ -1280,9 +1361,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001768", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz", - "integrity": "sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==", + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", "funding": [ { "type": "opencollective", @@ -1338,15 +1419,15 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.286", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz", - "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==", + "version": "1.5.397", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.397.tgz", + "integrity": "sha512-khGTy9U9x02KEtsKM8vx5A62BsRmcOsIgDpWr1ImE32Ax8GxHGPHZf+Eu9H8zOOyHJnB0jTbseyTHbq2XCT8yw==", "license": "ISC" }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "hasInstallScript": true, "license": "MIT", "bin": { @@ -1356,32 +1437,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/escalade": { @@ -1505,6 +1586,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -1528,9 +1610,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "funding": [ { "type": "github", @@ -1546,10 +1628,13 @@ } }, "node_modules/node-releases": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", - "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==", - "license": "MIT" + "version": "2.0.51", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz", + "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==", + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/object-assign": { "version": "4.1.1", @@ -1576,9 +1661,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "license": "MIT", "engines": { "node": ">=12" @@ -1588,9 +1673,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "funding": [ { "type": "opencollective", @@ -1607,7 +1692,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1627,30 +1712,31 @@ } }, "node_modules/react": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", - "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", + "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", - "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", + "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", "license": "MIT", "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^19.2.4" + "react": "^19.2.8" } }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "license": "MIT" }, "node_modules/react-refresh": { "version": "0.18.0", @@ -1706,12 +1792,12 @@ "license": "MIT" }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1721,35 +1807,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], @@ -1760,9 +1849,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], @@ -1773,12 +1862,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1786,12 +1878,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1799,12 +1894,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1812,12 +1910,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1825,9 +1926,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], @@ -1838,9 +1939,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], @@ -1853,7 +1954,8 @@ "node_modules/scheduler": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", - "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==" + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", @@ -1886,13 +1988,13 @@ "license": "MIT" }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1921,9 +2023,9 @@ } }, "node_modules/undici-types": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", - "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", + "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", "license": "MIT" }, "node_modules/update-browserslist-db": { @@ -1963,12 +2065,12 @@ "license": "MIT" }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -2037,9 +2139,9 @@ } }, "node_modules/web-vitals": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz", - "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.1.0.tgz", + "integrity": "sha512-ZNoJ/MbU6aaR2WjKrFVUvy5WQx+G96YvXQFSsmKTz3A/0VlAFywjUcxl00hc/S6wef2stfgQ4yWYIJCWCNudkA==", "license": "Apache-2.0" }, "node_modules/yallist": { diff --git a/static/code/stackblitz/v7/react/package.json b/static/code/stackblitz/v7/react/package.json index ae780b73811..ca9aaf826de 100644 --- a/static/code/stackblitz/v7/react/package.json +++ b/static/code/stackblitz/v7/react/package.json @@ -18,7 +18,7 @@ "react-router-dom": "^5.2.0", "typescript": "~5.9.0", "vite": "^7.0.0", - "web-vitals": "^5.0.0" + "web-vitals": "^6.0.0" }, "scripts": { "start": "vite", diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json index 192086b84cc..59d67a60ea3 100644 --- a/static/code/stackblitz/v7/vue/package-lock.json +++ b/static/code/stackblitz/v7/vue/package-lock.json @@ -11,7 +11,7 @@ "@ionic/vue": "^7.4.0", "@ionic/vue-router": "^7.4.0", "vue": "^3.2.25", - "vue-router": "5.0.3" + "vue-router": "5.2.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.0", @@ -21,46 +21,93 @@ } }, "node_modules/@babel/generator": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz", - "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz", + "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/parser": "^8.0.0", + "@babel/types": "^8.0.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", + "@types/jsesc": "^2.5.0", "jsesc": "^3.0.2" }, "engines": { - "node": ">=6.9.0" + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz", + "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz", + "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/parser": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz", + "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==", + "license": "MIT", + "dependencies": { + "@babel/types": "^8.0.4" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/types": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz", + "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^8.0.0", + "@babel/helper-validator-identifier": "^8.0.4" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz", - "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz", + "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.29.8" }, "bin": { "parser": "bin/babel-parser.js" @@ -70,26 +117,25 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -100,13 +146,12 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -117,13 +162,12 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -134,13 +178,12 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -151,13 +194,12 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -168,13 +210,12 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -185,13 +226,12 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -202,13 +242,12 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -219,13 +258,12 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -236,13 +274,12 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -253,13 +290,12 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -270,13 +306,12 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -287,13 +322,12 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -304,13 +338,12 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -321,13 +354,12 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -338,13 +370,12 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -355,13 +386,12 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -372,13 +402,12 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -389,13 +418,12 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -406,13 +434,12 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -423,13 +450,12 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -440,13 +466,12 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -457,13 +482,12 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -474,13 +498,12 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -491,13 +514,12 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -508,13 +530,12 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -600,20 +621,19 @@ } }, "node_modules/@rolldown/pluginutils": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz", - "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", "dev": true, "license": "MIT" }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -621,13 +641,12 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -635,9 +654,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -648,9 +667,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -661,13 +680,12 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -675,13 +693,12 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -689,13 +706,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -703,13 +722,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -717,12 +738,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -730,12 +754,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -743,13 +770,31 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", "cpu": [ "loong64" ], - "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", + "cpu": [ + "loong64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -757,13 +802,31 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", "cpu": [ "ppc64" ], - "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", + "cpu": [ + "ppc64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -771,13 +834,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -785,13 +850,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -799,13 +866,15 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -813,12 +882,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -826,26 +898,41 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -853,9 +940,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -866,13 +953,12 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -880,13 +966,12 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -894,9 +979,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -907,9 +992,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.38.1", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.38.1.tgz", - "integrity": "sha512-qImplYLSp2wSZJo3oMZ3HrTaI+uULcRB4Knrua7UT9VjN/va+TDfk4JAKwDyDfTDkD2laDPcy6QJP2S3hVxZFQ==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -919,37 +1004,43 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "devOptional": true, + "license": "MIT" + }, + "node_modules/@types/jsesc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz", + "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==", "license": "MIT" }, "node_modules/@vitejs/plugin-vue": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz", - "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==", + "version": "6.0.8", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz", + "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==", "dev": true, "license": "MIT", "dependencies": { - "@rolldown/pluginutils": "1.0.0-rc.2" + "@rolldown/pluginutils": "^1.0.1" }, "engines": { "node": "^20.19.0 || >=22.12.0" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, @@ -983,9 +1074,9 @@ } }, "node_modules/@vue-macros/common": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.2.tgz", - "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.4.tgz", + "integrity": "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==", "license": "MIT", "dependencies": { "@vue/compiler-sfc": "^3.5.22", @@ -1010,158 +1101,150 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz", - "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz", + "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/shared": "3.5.29", + "@babel/parser": "^7.29.8", + "@vue/shared": "3.5.41", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz", - "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz", + "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-core": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz", - "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz", + "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/compiler-core": "3.5.29", - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29", + "@babel/parser": "^7.29.8", + "@vue/compiler-core": "3.5.41", + "@vue/compiler-dom": "3.5.41", + "@vue/compiler-ssr": "3.5.41", + "@vue/shared": "3.5.41", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", - "postcss": "^8.5.6", + "postcss": "^8.5.19", "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz", - "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz", + "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/devtools-api": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.6.tgz", - "integrity": "sha512-+lGBI+WTvJmnU2FZqHhEB8J1DXcvNlDeEalz77iYgOdY1jTj1ipSBaKj3sRhYcy+kqA8v/BSuvOz1XJucfQmUA==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.2.1.tgz", + "integrity": "sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==", "license": "MIT", "dependencies": { - "@vue/devtools-kit": "^8.0.6" + "@vue/devtools-kit": "^8.2.1" } }, "node_modules/@vue/devtools-kit": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.6.tgz", - "integrity": "sha512-9zXZPTJW72OteDXeSa5RVML3zWDCRcO5t77aJqSs228mdopYj5AiTpihozbsfFJ0IodfNs7pSgOGO3qfCuxDtw==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz", + "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==", "license": "MIT", "dependencies": { - "@vue/devtools-shared": "^8.0.6", + "@vue/devtools-shared": "^8.2.1", "birpc": "^2.6.1", "hookable": "^5.5.3", - "mitt": "^3.0.1", - "perfect-debounce": "^2.0.0", - "speakingurl": "^14.0.1", - "superjson": "^2.2.2" + "perfect-debounce": "^2.0.0" } }, "node_modules/@vue/devtools-shared": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.6.tgz", - "integrity": "sha512-Pp1JylTqlgMJvxW6MGyfTF8vGvlBSCAvMFaDCYa82Mgw7TT5eE5kkHgDvmOGHWeJE4zIDfCpCxHapsK2LtIAJg==", - "license": "MIT", - "dependencies": { - "rfdc": "^1.4.1" - } + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz", + "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==", + "license": "MIT" }, "node_modules/@vue/language-core": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.5.tgz", - "integrity": "sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g==", + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.9.tgz", + "integrity": "sha512-in/68oAa4BCtVY6n/nkuhLIkV8DHYd2UivedJ6cMZ6UYtlq9jaoaSNUBHYCVO44z3nKg7MdE5OBoHKt5SxeBKQ==", "dev": true, "license": "MIT", "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", - "alien-signals": "^3.0.0", + "alien-signals": "^3.2.1", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", - "picomatch": "^4.0.2" + "picomatch": "^4.0.4" } }, "node_modules/@vue/reactivity": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz", - "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz", + "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.29" + "@vue/shared": "3.5.41" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz", - "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz", + "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/reactivity": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz", - "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz", + "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/runtime-core": "3.5.29", - "@vue/shared": "3.5.29", + "@vue/reactivity": "3.5.41", + "@vue/runtime-core": "3.5.41", + "@vue/shared": "3.5.41", "csstype": "^3.2.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz", - "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz", + "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29" - }, - "peerDependencies": { - "vue": "3.5.29" + "@vue/compiler-ssr": "3.5.41", + "@vue/runtime-dom": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/shared": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz", - "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz", + "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==", "license": "MIT" }, "node_modules/acorn": { - "version": "8.15.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", - "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz", + "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==", "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -1171,9 +1254,9 @@ } }, "node_modules/alien-signals": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.0.tgz", - "integrity": "sha512-JHoRJf18Y6HN4/KZALr3iU+0vW9LKG+8FMThQlbn4+gv8utsLIkwpomjElGPccGeNwh0FI2HN6BLnyFLo6OyLQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz", + "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==", "dev": true, "license": "MIT" }, @@ -1194,13 +1277,14 @@ } }, "node_modules/ast-walker-scope": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz", - "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.9.0.tgz", + "integrity": "sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.28.4", - "ast-kit": "^2.1.3" + "@babel/parser": "^7.29.2", + "@babel/types": "^7.29.0", + "ast-kit": "^2.2.0" }, "engines": { "node": ">=20.19.0" @@ -1234,26 +1318,11 @@ } }, "node_modules/confbox": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz", - "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz", + "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==", "license": "MIT" }, - "node_modules/copy-anything": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz", - "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==", - "license": "MIT", - "dependencies": { - "is-what": "^5.2.0" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -1273,10 +1342,10 @@ } }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", - "dev": true, + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "devOptional": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -1286,43 +1355,44 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "license": "MIT" }, "node_modules/exsolve": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz", - "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz", + "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==", "license": "MIT" }, "node_modules/fdir": { @@ -1346,7 +1416,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -1372,18 +1441,6 @@ "@stencil/core": "^4.0.3" } }, - "node_modules/is-what": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz", - "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==", - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -1409,9 +1466,9 @@ } }, "node_modules/local-pkg": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz", - "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz", + "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==", "license": "MIT", "dependencies": { "mlly": "^1.7.4", @@ -1449,22 +1506,16 @@ "url": "https://github.com/sponsors/sxzz" } }, - "node_modules/mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", - "license": "MIT" - }, "node_modules/mlly": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz", - "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==", + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz", + "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==", "license": "MIT", "dependencies": { - "acorn": "^8.15.0", + "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", - "ufo": "^1.6.1" + "ufo": "^1.6.3" } }, "node_modules/mlly/node_modules/confbox": { @@ -1491,9 +1542,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "funding": [ { "type": "github", @@ -1508,6 +1559,12 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nostics": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz", + "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==", + "license": "MIT" + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -1534,9 +1591,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "license": "MIT", "engines": { "node": ">=12" @@ -1546,20 +1603,20 @@ } }, "node_modules/pkg-types": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz", - "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz", + "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==", "license": "MIT", "dependencies": { - "confbox": "^0.2.2", - "exsolve": "^1.0.7", + "confbox": "^0.2.4", + "exsolve": "^1.0.8", "pathe": "^2.0.3" } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "funding": [ { "type": "opencollective", @@ -1576,7 +1633,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1613,20 +1670,14 @@ "url": "https://paulmillr.com/funding/" } }, - "node_modules/rfdc": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz", - "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", - "license": "MIT" - }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", - "dev": true, + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", + "devOptional": true, "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1636,39 +1687,41 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1676,13 +1729,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1690,13 +1742,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1704,13 +1758,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1718,13 +1774,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1732,13 +1790,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1746,13 +1806,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1760,13 +1819,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1788,35 +1846,14 @@ "node": ">=0.10.0" } }, - "node_modules/speakingurl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", - "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/superjson": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz", - "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==", - "license": "MIT", - "dependencies": { - "copy-anything": "^4" - }, - "engines": { - "node": ">=16" - } - }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1846,33 +1883,73 @@ } }, "node_modules/ufo": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz", - "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==", + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz", + "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==", "license": "MIT" }, "node_modules/unplugin": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz", - "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz", + "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==", "license": "MIT", "dependencies": { "@jridgewell/remapping": "^2.3.5", - "picomatch": "^4.0.3", + "picomatch": "^4.0.4", "webpack-virtual-modules": "^0.6.2" }, "engines": { "node": "^20.19.0 || >=22.12.0" + }, + "peerDependencies": { + "@farmfe/core": "*", + "@rspack/core": "*", + "bun-types-no-globals": "*", + "esbuild": "*", + "rolldown": "*", + "rollup": "*", + "unloader": "*", + "vite": "*", + "webpack": "*" + }, + "peerDependenciesMeta": { + "@farmfe/core": { + "optional": true + }, + "@rspack/core": { + "optional": true + }, + "bun-types-no-globals": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "rolldown": { + "optional": true + }, + "rollup": { + "optional": true + }, + "unloader": { + "optional": true + }, + "vite": { + "optional": true + }, + "webpack": { + "optional": true + } } }, "node_modules/unplugin-utils": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz", - "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz", + "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==", "license": "MIT", "dependencies": { "pathe": "^2.0.3", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=20.19.0" @@ -1882,13 +1959,13 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", - "dev": true, + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", + "devOptional": true, "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -1964,16 +2041,16 @@ "license": "MIT" }, "node_modules/vue": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz", - "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz", + "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-sfc": "3.5.29", - "@vue/runtime-dom": "3.5.29", - "@vue/server-renderer": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.41", + "@vue/compiler-sfc": "3.5.41", + "@vue/runtime-dom": "3.5.41", + "@vue/server-renderer": "3.5.41", + "@vue/shared": "3.5.41" }, "peerDependencies": { "typescript": "*" @@ -1985,37 +2062,39 @@ } }, "node_modules/vue-router": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz", - "integrity": "sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz", + "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==", "license": "MIT", "dependencies": { - "@babel/generator": "^7.28.6", - "@vue-macros/common": "^3.1.1", - "@vue/devtools-api": "^8.0.6", - "ast-walker-scope": "^0.8.3", + "@babel/generator": "^8.0.0", + "@vue-macros/common": "^3.1.3", + "@vue/devtools-api": "^8.1.5", + "ast-walker-scope": "^0.9.0", "chokidar": "^5.0.0", "json5": "^2.2.3", - "local-pkg": "^1.1.2", + "local-pkg": "^1.2.1", "magic-string": "^0.30.21", - "mlly": "^1.8.0", + "mlly": "^1.8.2", "muggle-string": "^0.4.1", + "nostics": "^1.1.4", "pathe": "^2.0.3", - "picomatch": "^4.0.3", + "picomatch": "^4.0.5", "scule": "^1.3.0", - "tinyglobby": "^0.2.15", - "unplugin": "^3.0.0", - "unplugin-utils": "^0.3.1", - "yaml": "^2.8.2" + "tinyglobby": "^0.2.17", + "unplugin": "^3.3.0", + "unplugin-utils": "^0.3.2", + "yaml": "^2.9.0" }, "funding": { "url": "https://github.com/sponsors/posva" }, "peerDependencies": { "@pinia/colada": ">=0.21.2", - "@vue/compiler-sfc": "^3.5.17", - "pinia": "^3.0.4", - "vue": "^3.5.0" + "@vue/compiler-sfc": "^3.5.34 || ^4.0.0", + "pinia": "^3.0.4 || ^4.0.2", + "vite": "^7.3.0 || ^8.0.0", + "vue": "^3.5.34 || ^4.0.0" }, "peerDependenciesMeta": { "@pinia/colada": { @@ -2026,18 +2105,21 @@ }, "pinia": { "optional": true + }, + "vite": { + "optional": true } } }, "node_modules/vue-tsc": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.5.tgz", - "integrity": "sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA==", + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.9.tgz", + "integrity": "sha512-TS3Y1ux/IRoE8OCP2PpACAeOseuIs0UvWrcr7u+w3PmfY+SlCfEf8zjrBgnQksHUgLpthi5vHlffcQTQTdPBZA==", "dev": true, "license": "MIT", "dependencies": { "@volar/typescript": "2.4.28", - "@vue/language-core": "3.2.5" + "@vue/language-core": "3.3.9" }, "bin": { "vue-tsc": "bin/vue-tsc.js" @@ -2053,9 +2135,9 @@ "license": "MIT" }, "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz", + "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==", "license": "ISC", "bin": { "yaml": "bin.mjs" diff --git a/static/code/stackblitz/v7/vue/package.json b/static/code/stackblitz/v7/vue/package.json index a2b8183f09e..be28adaa95b 100644 --- a/static/code/stackblitz/v7/vue/package.json +++ b/static/code/stackblitz/v7/vue/package.json @@ -11,7 +11,7 @@ "@ionic/vue": "^7.4.0", "@ionic/vue-router": "^7.4.0", "vue": "^3.2.25", - "vue-router": "5.0.3" + "vue-router": "5.2.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.0", diff --git a/static/code/stackblitz/v8/angular/package-lock.json b/static/code/stackblitz/v8/angular/package-lock.json index 03ed2f5c515..f1ffe61adde 100644 --- a/static/code/stackblitz/v8/angular/package-lock.json +++ b/static/code/stackblitz/v8/angular/package-lock.json @@ -14,9 +14,9 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-browser-dynamic": "^20.0.0", "@angular/router": "^20.0.0", - "@ionic/angular": "8.8.1", - "@ionic/core": "8.8.1", - "ionicons": "8.0.13", + "@ionic/angular": "8.8.18", + "@ionic/core": "8.8.18", + "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" @@ -253,13 +253,13 @@ } }, "node_modules/@angular-devkit/architect": { - "version": "0.2003.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.17.tgz", - "integrity": "sha512-e6Mo4xFIhmtPLhjeai3kBW0yViHEtZ+210tcWfuEnPGRgr8X4rMxkYQRAT2X9dqgtsG+TmVZFHAN/Gbs6Tvr7Q==", + "version": "0.2003.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.2003.32.tgz", + "integrity": "sha512-V5d531w97LENARKdYk5Km0F2rt8NPEL3rXUQk7+gbo9r/jgLWn9GU3VHQ30oBWXnU7Vu00Hdp/8yFeYgpWqSow==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.17", + "@angular-devkit/core": "20.3.32", "rxjs": "7.8.2" }, "engines": { @@ -269,18 +269,18 @@ } }, "node_modules/@angular-devkit/build-angular": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-20.3.17.tgz", - "integrity": "sha512-WfwNWvceo7kF2+4zaJHhZ7dwG5rjCkHgrGQF15cJbCOp81dTu4nmDCfU0ndB1knisg4ObE6HYUb6lFUNaZ5VCQ==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-angular/-/build-angular-20.3.32.tgz", + "integrity": "sha512-1prN/HmTkL2TTd4zoNz/fFOds9eUc78winkjvBRxTL+OuUQMIeWIjpUui53mk2qdeW9ImiITcqCQVpZL95fLvQ==", "dev": true, "license": "MIT", "dependencies": { "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2003.17", - "@angular-devkit/build-webpack": "0.2003.17", - "@angular-devkit/core": "20.3.17", - "@angular/build": "20.3.17", - "@babel/core": "7.28.3", + "@angular-devkit/architect": "0.2003.32", + "@angular-devkit/build-webpack": "0.2003.32", + "@angular-devkit/core": "20.3.32", + "@angular/build": "20.3.32", + "@babel/core": "7.29.7", "@babel/generator": "7.28.3", "@babel/helper-annotate-as-pure": "7.27.3", "@babel/helper-split-export-declaration": "7.24.7", @@ -290,16 +290,16 @@ "@babel/preset-env": "7.28.3", "@babel/runtime": "7.28.3", "@discoveryjs/json-ext": "0.6.3", - "@ngtools/webpack": "20.3.17", + "@ngtools/webpack": "20.3.32", "ansi-colors": "4.1.3", "autoprefixer": "10.4.21", "babel-loader": "10.0.0", "browserslist": "^4.21.5", - "copy-webpack-plugin": "13.0.1", + "copy-webpack-plugin": "14.0.0", "css-loader": "7.1.2", - "esbuild-wasm": "0.25.9", + "esbuild-wasm": "0.28.1", "fast-glob": "3.3.3", - "http-proxy-middleware": "3.0.5", + "http-proxy-middleware": "3.0.7", "istanbul-lib-instrument": "6.0.3", "jsonc-parser": "3.3.1", "karma-source-map-support": "1.4.0", @@ -310,9 +310,9 @@ "mini-css-extract-plugin": "2.9.4", "open": "10.2.0", "ora": "8.2.0", - "picomatch": "4.0.3", - "piscina": "5.1.3", - "postcss": "8.5.6", + "picomatch": "4.0.4", + "piscina": "5.2.0", + "postcss": "8.5.12", "postcss-loader": "8.1.1", "resolve-url-loader": "5.0.0", "rxjs": "7.8.2", @@ -326,7 +326,7 @@ "tslib": "2.8.1", "webpack": "5.105.0", "webpack-dev-middleware": "7.4.2", - "webpack-dev-server": "5.2.2", + "webpack-dev-server": "5.2.5", "webpack-merge": "6.0.1", "webpack-subresource-integrity": "5.1.0" }, @@ -336,7 +336,7 @@ "yarn": ">= 1.13.0" }, "optionalDependencies": { - "esbuild": "0.25.9" + "esbuild": "0.28.1" }, "peerDependencies": { "@angular/compiler-cli": "^20.0.0", @@ -345,7 +345,7 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-server": "^20.0.0", "@angular/service-worker": "^20.0.0", - "@angular/ssr": "^20.3.17", + "@angular/ssr": "^20.3.32", "@web/test-runner": "^0.20.0", "browser-sync": "^3.0.2", "jest": "^29.5.0 || ^30.2.0", @@ -401,208 +401,1178 @@ } } }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular-devkit/build-angular/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" + } + }, "node_modules/@angular-devkit/build-webpack": { - "version": "0.2003.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2003.17.tgz", - "integrity": "sha512-hN8C+fg16RQN7YfoevhhjU57yrpo5/861KvFvLlohAjC9JovqN66fFPQ2O5nHIJvjSwa7QLsoeLyrGFQ0mtvOQ==", + "version": "0.2003.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/build-webpack/-/build-webpack-0.2003.32.tgz", + "integrity": "sha512-dFyM5Qkgl6wgSb8EJF8uZCt9K+VUsDP8APS5siCNHyhjzjACqDevk5RwqWCfPU/QjzlgCp11MbkKr/Y2sgaDcw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/architect": "0.2003.32", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "webpack": "^5.30.0", + "webpack-dev-server": "^5.0.2" + } + }, + "node_modules/@angular-devkit/core": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.32.tgz", + "integrity": "sha512-pXipSsYP/XTEAljmwqgy1u3GR/ZzSMg1FERINekGT61Th1pGhzjs02rPgbyftqz2e5/tfQ6XgTP7xYzm3+S35Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "8.18.0", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.4", + "rxjs": "7.8.2", + "source-map": "0.7.6" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^4.0.0" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/@angular-devkit/schematics": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.32.tgz", + "integrity": "sha512-UxWncmJTcYMDEaAKRi3QHU3qXivIcIOulFOKozW8svfs/A43Oq1GG4kvDZ+WVf/w2UWTmMaSlfFa4KIQciSIDA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "20.3.32", + "jsonc-parser": "3.3.1", + "magic-string": "0.30.17", + "ora": "8.2.0", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular/animations": { + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.26.tgz", + "integrity": "sha512-hfNrX19v8xs/usNkELSqc6q5IwBfS2GGW8sQ4OMpxAmLZDJwaLUxkj48t8VYhUFezsIfzR+sDEi6ZQBOaMIYug==", + "deprecated": "@angular/animations is deprecated. Use `animate.enter` and `animate.leave` instead. For more information see: https://v22.angular.dev/guide/animations.", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0" + }, + "peerDependencies": { + "@angular/core": "20.3.26" + } + }, + "node_modules/@angular/build": { + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.32.tgz", + "integrity": "sha512-ph/qcT6C7RYriU5dxXfNrYBEvCwU4acxTNoxkdGQHYxM7iOKT0K1YO6v5JBNRZ1S4LOJhWmGaWzJ+sRei0iGsQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "2.3.0", + "@angular-devkit/architect": "0.2003.32", + "@babel/core": "7.29.7", + "@babel/helper-annotate-as-pure": "7.27.3", + "@babel/helper-split-export-declaration": "7.24.7", + "@inquirer/confirm": "5.1.14", + "@vitejs/plugin-basic-ssl": "2.1.0", + "beasties": "0.3.5", + "browserslist": "^4.23.0", + "esbuild": "0.28.1", + "https-proxy-agent": "7.0.6", + "istanbul-lib-instrument": "6.0.3", + "jsonc-parser": "3.3.1", + "listr2": "9.0.1", + "magic-string": "0.30.17", + "mrmime": "2.0.1", + "parse5-html-rewriting-stream": "8.0.0", + "picomatch": "4.0.4", + "piscina": "5.2.0", + "rollup": "4.59.0", + "sass": "1.90.0", + "semver": "7.7.2", + "source-map-support": "0.5.21", + "tinyglobby": "0.2.14", + "vite": "7.3.6", + "watchpack": "2.4.4" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=24.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "optionalDependencies": { + "lmdb": "3.4.2" + }, + "peerDependencies": { + "@angular/compiler": "^20.0.0", + "@angular/compiler-cli": "^20.0.0", + "@angular/core": "^20.0.0", + "@angular/localize": "^20.0.0", + "@angular/platform-browser": "^20.0.0", + "@angular/platform-server": "^20.0.0", + "@angular/service-worker": "^20.0.0", + "@angular/ssr": "^20.3.32", + "karma": "^6.4.0", + "less": "^4.2.0", + "ng-packagr": "^20.0.0", + "postcss": "^8.4.0", + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "tslib": "^2.3.0", + "typescript": ">=5.8 <6.0", + "vitest": "^3.1.1" + }, + "peerDependenciesMeta": { + "@angular/core": { + "optional": true + }, + "@angular/localize": { + "optional": true + }, + "@angular/platform-browser": { + "optional": true + }, + "@angular/platform-server": { + "optional": true + }, + "@angular/service-worker": { + "optional": true + }, + "@angular/ssr": { + "optional": true + }, + "karma": { + "optional": true + }, + "less": { + "optional": true + }, + "ng-packagr": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tailwindcss": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "node_modules/@angular/build/node_modules/@esbuild/aix-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "aix" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", + "cpu": [ + "arm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/android-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/darwin-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/darwin-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/freebsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/freebsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", + "cpu": [ + "x64" + ], "dev": true, "license": "MIT", - "dependencies": { - "@angular-devkit/architect": "0.2003.17", - "rxjs": "7.8.2" - }, + "optional": true, + "os": [ + "freebsd" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "webpack": "^5.30.0", - "webpack-dev-server": "^5.0.2" + "node": ">=18" } }, - "node_modules/@angular-devkit/core": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-20.3.17.tgz", - "integrity": "sha512-xlBT8rmyTjb5P/p6wDHp0EleagptjSHGNsJwqSY4FdIG0p59ezAbb2wbQGqkYDxuoptFSLUpAGE7sNWZ5OiLWw==", + "node_modules/@angular/build/node_modules/@esbuild/linux-arm": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", + "cpu": [ + "arm" + ], "dev": true, "license": "MIT", - "dependencies": { - "ajv": "8.17.1", - "ajv-formats": "3.0.1", - "jsonc-parser": "3.3.1", - "picomatch": "4.0.3", - "rxjs": "7.8.2", - "source-map": "0.7.6" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" - }, - "peerDependencies": { - "chokidar": "^4.0.0" - }, - "peerDependenciesMeta": { - "chokidar": { - "optional": true - } + "node": ">=18" } }, - "node_modules/@angular-devkit/schematics": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-20.3.17.tgz", - "integrity": "sha512-aqvxNwBbRKmbQfv/j6e0ddTjhs2vIoQnzIVAqFLMvuAQmnTCHP+Kw26wS4OQMuGbDTUZ9SxPy4eSNu+vBoc3fA==", + "node_modules/@angular/build/node_modules/@esbuild/linux-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", + "cpu": [ + "arm64" + ], "dev": true, "license": "MIT", - "dependencies": { - "@angular-devkit/core": "20.3.17", - "jsonc-parser": "3.3.1", - "magic-string": "0.30.17", - "ora": "8.2.0", - "rxjs": "7.8.2" - }, + "optional": true, + "os": [ + "linux" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-loong64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", + "cpu": [ + "loong64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-mips64el": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", + "cpu": [ + "mips64el" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-ppc64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", + "cpu": [ + "ppc64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-riscv64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", + "cpu": [ + "riscv64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-s390x": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", + "cpu": [ + "s390x" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/linux-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/netbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/netbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openbsd-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openbsd-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/openharmony-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openharmony" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/sunos-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/win32-arm64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" + } + }, + "node_modules/@angular/build/node_modules/@esbuild/win32-ia32": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", + "cpu": [ + "ia32" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=18" } }, - "node_modules/@angular/animations": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-20.3.17.tgz", - "integrity": "sha512-KvdgFjCTkOD3WVt4gzmJOoX914eey/Efu2Pb/KUM0Bqp1ZoXiFpI48GCd1b6Ks8JlDBeAfgjtpdSUB2aLnMRZQ==", + "node_modules/@angular/build/node_modules/@esbuild/win32-x64": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", + "cpu": [ + "x64" + ], + "dev": true, "license": "MIT", - "dependencies": { - "tslib": "^2.3.0" - }, + "optional": true, + "os": [ + "win32" + ], "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0" - }, - "peerDependencies": { - "@angular/core": "20.3.17" + "node": ">=18" } }, - "node_modules/@angular/build": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/build/-/build-20.3.17.tgz", - "integrity": "sha512-HCHFZrBEyR1aWwkWH1MnSFAIwgzU31bEYbB4cFeOR+HKFJwglMamkv1MPHsF3+TZxYioJa5ieF/ipI1KTXZLUg==", + "node_modules/@angular/build/node_modules/esbuild": { + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "dev": true, + "hasInstallScript": true, "license": "MIT", - "dependencies": { - "@ampproject/remapping": "2.3.0", - "@angular-devkit/architect": "0.2003.17", - "@babel/core": "7.28.3", - "@babel/helper-annotate-as-pure": "7.27.3", - "@babel/helper-split-export-declaration": "7.24.7", - "@inquirer/confirm": "5.1.14", - "@vitejs/plugin-basic-ssl": "2.1.0", - "beasties": "0.3.5", - "browserslist": "^4.23.0", - "esbuild": "0.25.9", - "https-proxy-agent": "7.0.6", - "istanbul-lib-instrument": "6.0.3", - "jsonc-parser": "3.3.1", - "listr2": "9.0.1", - "magic-string": "0.30.17", - "mrmime": "2.0.1", - "parse5-html-rewriting-stream": "8.0.0", - "picomatch": "4.0.3", - "piscina": "5.1.3", - "rollup": "4.52.3", - "sass": "1.90.0", - "semver": "7.7.2", - "source-map-support": "0.5.21", - "tinyglobby": "0.2.14", - "vite": "7.1.11", - "watchpack": "2.4.4" + "bin": { + "esbuild": "bin/esbuild" }, "engines": { - "node": "^20.19.0 || ^22.12.0 || >=24.0.0", - "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", - "yarn": ">= 1.13.0" + "node": ">=18" }, "optionalDependencies": { - "lmdb": "3.4.2" - }, - "peerDependencies": { - "@angular/compiler": "^20.0.0", - "@angular/compiler-cli": "^20.0.0", - "@angular/core": "^20.0.0", - "@angular/localize": "^20.0.0", - "@angular/platform-browser": "^20.0.0", - "@angular/platform-server": "^20.0.0", - "@angular/service-worker": "^20.0.0", - "@angular/ssr": "^20.3.17", - "karma": "^6.4.0", - "less": "^4.2.0", - "ng-packagr": "^20.0.0", - "postcss": "^8.4.0", - "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", - "tslib": "^2.3.0", - "typescript": ">=5.8 <6.0", - "vitest": "^3.1.1" - }, - "peerDependenciesMeta": { - "@angular/core": { - "optional": true - }, - "@angular/localize": { - "optional": true - }, - "@angular/platform-browser": { - "optional": true - }, - "@angular/platform-server": { - "optional": true - }, - "@angular/service-worker": { - "optional": true - }, - "@angular/ssr": { - "optional": true - }, - "karma": { - "optional": true - }, - "less": { - "optional": true - }, - "ng-packagr": { - "optional": true - }, - "postcss": { - "optional": true - }, - "tailwindcss": { - "optional": true - }, - "vitest": { - "optional": true - } + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/@angular/cli": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.17.tgz", - "integrity": "sha512-JunMKV78Eo7qXRISgDZb35i/Khoq+5JSfNia7ngoIrEIOxcdY+xeeHt3SV1KCfyu9/gkLWEyZMulI5L7+hTVbw==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-20.3.32.tgz", + "integrity": "sha512-WIMbTrEJYVVz4Phs8nn6yK/bzCSt1dDlxtAEnS2melTWXKGF6WK/OqVaH0+Cox0SNagA81dvvSbGlFYCxncYfQ==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/architect": "0.2003.17", - "@angular-devkit/core": "20.3.17", - "@angular-devkit/schematics": "20.3.17", + "@angular-devkit/architect": "0.2003.32", + "@angular-devkit/core": "20.3.32", + "@angular-devkit/schematics": "20.3.32", "@inquirer/prompts": "7.8.2", "@listr2/prompt-adapter-inquirer": "3.0.1", "@modelcontextprotocol/sdk": "1.26.0", - "@schematics/angular": "20.3.17", + "@schematics/angular": "20.3.32", "@yarnpkg/lockfile": "1.1.0", "algoliasearch": "5.35.0", "ini": "5.0.0", "jsonc-parser": "3.3.1", "listr2": "9.0.1", "npm-package-arg": "13.0.0", - "pacote": "21.0.4", + "pacote": "21.5.1", "resolve": "1.22.10", "semver": "7.7.2", "yargs": "18.0.0", @@ -618,9 +1588,9 @@ } }, "node_modules/@angular/common": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.17.tgz", - "integrity": "sha512-Dqd8f8o9MehszTZIB7o7jrERlwLOSK64gNngK14DCQazz5lpIhAF6hBjx7zjHpa7L9eAYPK1TaxQUXypjzj18Q==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.26.tgz", + "integrity": "sha512-35+aHaCmldFZ2qFiH83+cHcDXwUqSEuUR5DVApcd+Ku8PfIIGo8uMiD5++Qq7QIUTbZCD2glAiE9jLroGrf1Cw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -629,14 +1599,14 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/core": "20.3.17", + "@angular/core": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/compiler": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.17.tgz", - "integrity": "sha512-cj3x6aFk9xOOxX+qEdeN8T5YbnBNWJ4UMHB/LQoDr7/xCJJGa40IhcOAuJeuF2kGqTwx6MCXnvjO8XOQfHhe9g==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.26.tgz", + "integrity": "sha512-H4DVTBCiyM4dGytFi2C8sMGflxXzPnoQ6Ajfs4hJ/Dekg6ypfvW5Ze7BDh4TaMQvaX2joM5LhBYW5jTxBx66hA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -646,13 +1616,13 @@ } }, "node_modules/@angular/compiler-cli": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.17.tgz", - "integrity": "sha512-w5pmO1pXO9tUMgUMWstpDmAWh5s1lJWo+2GI/ByaUEgBZkXd2S92sWoDL+bhy+JSvFzdLGdua6BncHBOX7hEjA==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-20.3.26.tgz", + "integrity": "sha512-3rHtC87ecldvaiFHwQEZ6Wx3QaZ/Q7b0Gb7XORDOjn/M+5CYZ4rQsvbxE5TUjwreg07oQ4Y2h8ADESXTJEUYOQ==", "dev": true, "license": "MIT", "dependencies": { - "@babel/core": "7.28.3", + "@babel/core": "7.29.7", "@jridgewell/sourcemap-codec": "^1.4.14", "chokidar": "^4.0.0", "convert-source-map": "^1.5.1", @@ -669,7 +1639,7 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/compiler": "20.3.17", + "@angular/compiler": "20.3.26", "typescript": ">=5.8 <6.0" }, "peerDependenciesMeta": { @@ -679,9 +1649,9 @@ } }, "node_modules/@angular/core": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.17.tgz", - "integrity": "sha512-YlQqxMeHI9XJw7I7oM3hYFQd4lQbK37IdlD9ztROIw5FjX6i6lmLU7+X1MQGSRi2r+X9l3IZtl33hRTNvkoUBw==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.26.tgz", + "integrity": "sha512-v+YtZ9eQVDb6v3V1TbUUBHU63FEp8Hqqqb3UhM4MLAOm0chyyh9jah7FiHr3HbCKrV1f4long1coftFK/KThog==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -690,7 +1660,7 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/compiler": "20.3.17", + "@angular/compiler": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0", "zone.js": "~0.15.0" }, @@ -704,9 +1674,9 @@ } }, "node_modules/@angular/forms": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.17.tgz", - "integrity": "sha512-iGS6NwzcyJzinbPMapsQtcN0ZJ62vr6hcul+FNa40CaK2ePC04S+C5n+DIphzwnwsFHDBIWuTQRfk/lNYdN1JA==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.26.tgz", + "integrity": "sha512-ia0YaPVjlG2oBFKCfaAgqQ0jGRrhGTAcrbZG3tVeFDpi7LQ6WdP3Syw2H+0D3GPyzpl/5UqU10Fum5Wr1br4QQ==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -715,16 +1685,16 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@angular/platform-browser": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.17.tgz", - "integrity": "sha512-GA8pK+0F2/KGdYn5LMpLBrPTkQUwGjQE8Q+qsivOa150cK3OuD0po5PvYK58l+niGIVvm0wB1xGKTHTOiX/+4A==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.26.tgz", + "integrity": "sha512-In4wUiLUUT9LqyV9Rjz78k/dsnKAwec4AtDmwZoX8/ZmeJOSH7g5X1gTM+hxTxmifmZkrapQjXR299IcfIkzrw==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -733,9 +1703,9 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/animations": "20.3.17", - "@angular/common": "20.3.17", - "@angular/core": "20.3.17" + "@angular/animations": "20.3.26", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26" }, "peerDependenciesMeta": { "@angular/animations": { @@ -744,9 +1714,10 @@ } }, "node_modules/@angular/platform-browser-dynamic": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.17.tgz", - "integrity": "sha512-yTxFuGQ+z0J9khNIhfFZ+kkT7TOFb8kFZKyUz0DxHOmE0q/TEvNZoy3jXOs8xCBFf1+6BY0NqFNlPna+uw36FQ==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/platform-browser-dynamic/-/platform-browser-dynamic-20.3.26.tgz", + "integrity": "sha512-/9eq0GGmtMoBV5UvcjvhnV4ZDcgZr15h+dzoxkZodUncb2z7fxybSyha7wWD9aTeabZ/q/KYVUSnoYqVyBhbVQ==", + "deprecated": "@angular/platform-browser-dynamic is deprecated. Use `@angular/platform-browser` instead.", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -755,16 +1726,16 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/compiler": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17" + "@angular/common": "20.3.26", + "@angular/compiler": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26" } }, "node_modules/@angular/router": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.17.tgz", - "integrity": "sha512-p0r0IOJhUcn8WHx4gkSlfwifkkYO5mSDtq4iM5OunZTlSaeSxLb1vTRg2VBgwdzpgAM+eZSMBTTVF/M3pdoELQ==", + "version": "20.3.26", + "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.26.tgz", + "integrity": "sha512-q0k0b5uuQx93Trk4qEMYe8LoPOozheRBIjze51q+LUTlLXWik4W0ughXLiTJL346KRudR/vB5ksfZP8b6WlQyA==", "license": "MIT", "dependencies": { "tslib": "^2.3.0" @@ -773,20 +1744,20 @@ "node": "^20.19.0 || ^22.12.0 || >=24.0.0" }, "peerDependencies": { - "@angular/common": "20.3.17", - "@angular/core": "20.3.17", - "@angular/platform-browser": "20.3.17", + "@angular/common": "20.3.26", + "@angular/core": "20.3.26", + "@angular/platform-browser": "20.3.26", "rxjs": "^6.5.3 || ^7.4.0" } }, "node_modules/@babel/code-frame": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", - "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.27.1", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -795,9 +1766,9 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.28.4.tgz", - "integrity": "sha512-YsmSKC29MJwf0gF8Rjjrg5LQCmyh+j/nD8/eP7f+BeoQTKYqs9RoWbjGOdy0+1Ekr68RJZMUOPVQaQisnIo4Rw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", "dev": true, "license": "MIT", "engines": { @@ -805,22 +1776,22 @@ } }, "node_modules/@babel/core": { - "version": "7.28.3", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.3.tgz", - "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "@ampproject/remapping": "^2.2.0", - "@babel/code-frame": "^7.27.1", - "@babel/generator": "^7.28.3", - "@babel/helper-compilation-targets": "^7.27.2", - "@babel/helper-module-transforms": "^7.28.3", - "@babel/helpers": "^7.28.3", - "@babel/parser": "^7.28.3", - "@babel/template": "^7.27.2", - "@babel/traverse": "^7.28.3", - "@babel/types": "^7.28.2", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", @@ -835,6 +1806,23 @@ "url": "https://opencollective.com/babel" } }, + "node_modules/@babel/core/node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/core/node_modules/convert-source-map": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz", @@ -883,14 +1871,14 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.27.2", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.27.2.tgz", - "integrity": "sha512-2+1thGUUWWjLTYTHZWK1n8Yga0ijBz1XAhUXcKy81rd5g6yh7hGqMp45v7cadSbEHc9G3OTv45SyneRN3ps4DQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", "dev": true, "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.27.2", - "@babel/helper-validator-option": "^7.27.1", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -987,9 +1975,9 @@ } }, "node_modules/@babel/helper-globals": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz", - "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", "dev": true, "license": "MIT", "engines": { @@ -1011,29 +1999,29 @@ } }, "node_modules/@babel/helper-module-imports": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz", - "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", "dev": true, "license": "MIT", "dependencies": { - "@babel/traverse": "^7.27.1", - "@babel/types": "^7.27.1" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.28.3", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.3.tgz", - "integrity": "sha512-gytXUbs8k2sXS9PnQptz5o0QnpLL51SwASIORY6XaBKF88nsOT0Zw9szLqlSGQDP/4TljBAD5y98p2U1fqkdsw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1", - "@babel/traverse": "^7.28.3" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -1129,9 +2117,9 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "dev": true, "license": "MIT", "engines": { @@ -1139,9 +2127,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", - "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "dev": true, "license": "MIT", "engines": { @@ -1149,9 +2137,9 @@ } }, "node_modules/@babel/helper-validator-option": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", - "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", "dev": true, "license": "MIT", "engines": { @@ -1174,27 +2162,27 @@ } }, "node_modules/@babel/helpers": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.4.tgz", - "integrity": "sha512-HFN59MmQXGHVyYadKLVumYsA9dBFun/ldYxipEjzA4196jpLZd8UjEEBLkbEkvfYreDqJhZxYAWFPtrfhNpj4w==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/template": "^7.27.2", - "@babel/types": "^7.28.4" + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", - "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.28.4" + "@babel/types": "^7.29.7" }, "bin": { "parser": "bin/babel-parser.js" @@ -2357,48 +3345,65 @@ } }, "node_modules/@babel/template": { - "version": "7.27.2", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", - "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.27.1", - "@babel/parser": "^7.27.2", - "@babel/types": "^7.27.1" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.4.tgz", - "integrity": "sha512-YEzuboP2qvQavAcjgQNVgsvHIDv6ZpwXvcvjmyySP2DIMuByS/6ioU5G9pYrWHM6T2YDfc7xga9iNzYOs12CFQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", "dev": true, "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.27.1", - "@babel/generator": "^7.28.3", - "@babel/helper-globals": "^7.28.0", - "@babel/parser": "^7.28.4", - "@babel/template": "^7.27.2", - "@babel/types": "^7.28.4", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", "debug": "^4.3.1" }, "engines": { "node": ">=6.9.0" } }, + "node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@babel/types": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", - "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", "dev": true, "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -2415,9 +3420,9 @@ } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz", - "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.7.tgz", + "integrity": "sha512-EKX3Qwmhz1eMdEJokhALr0YiD0lhQNwDqkPYyPhiSwKrh7/4KRjQc04sZ8db+5DVVnZ1LmbNDI1uAMPEUBnQPg==", "cpu": [ "ppc64" ], @@ -2432,9 +3437,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz", - "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.7.tgz", + "integrity": "sha512-jbPXvB4Yj2yBV7HUfE2KHe4GJX51QplCN1pGbYjvsyCZbQmies29EoJbkEc+vYuU5o45AfQn37vZlyXy4YJ8RQ==", "cpu": [ "arm" ], @@ -2449,9 +3454,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz", - "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.7.tgz", + "integrity": "sha512-62dPZHpIXzvChfvfLJow3q5dDtiNMkwiRzPylSCfriLvZeq0a1bWChrGx/BbUbPwOrsWKMn8idSllklzBy+dgQ==", "cpu": [ "arm64" ], @@ -2466,9 +3471,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz", - "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.7.tgz", + "integrity": "sha512-x5VpMODneVDb70PYV2VQOmIUUiBtY3D3mPBG8NxVk5CogneYhkR7MmM3yR/uMdITLrC1ml/NV1rj4bMJuy9MCg==", "cpu": [ "x64" ], @@ -2483,9 +3488,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz", - "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.7.tgz", + "integrity": "sha512-5lckdqeuBPlKUwvoCXIgI2D9/ABmPq3Rdp7IfL70393YgaASt7tbju3Ac+ePVi3KDH6N2RqePfHnXkaDtY9fkw==", "cpu": [ "arm64" ], @@ -2500,9 +3505,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz", - "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.7.tgz", + "integrity": "sha512-rYnXrKcXuT7Z+WL5K980jVFdvVKhCHhUwid+dDYQpH+qu+TefcomiMAJpIiC2EM3Rjtq0sO3StMV/+3w3MyyqQ==", "cpu": [ "x64" ], @@ -2517,9 +3522,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz", - "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.7.tgz", + "integrity": "sha512-B48PqeCsEgOtzME2GbNM2roU29AMTuOIN91dsMO30t+Ydis3z/3Ngoj5hhnsOSSwNzS+6JppqWsuhTp6E82l2w==", "cpu": [ "arm64" ], @@ -2534,9 +3539,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz", - "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.7.tgz", + "integrity": "sha512-jOBDK5XEjA4m5IJK3bpAQF9/Lelu/Z9ZcdhTRLf4cajlB+8VEhFFRjWgfy3M1O4rO2GQ/b2dLwCUGpiF/eATNQ==", "cpu": [ "x64" ], @@ -2551,9 +3556,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz", - "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.7.tgz", + "integrity": "sha512-RkT/YXYBTSULo3+af8Ib0ykH8u2MBh57o7q/DAs3lTJlyVQkgQvlrPTnjIzzRPQyavxtPtfg0EopvDyIt0j1rA==", "cpu": [ "arm" ], @@ -2568,9 +3573,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz", - "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.7.tgz", + "integrity": "sha512-RZPHBoxXuNnPQO9rvjh5jdkRmVizktkT7TCDkDmQ0W2SwHInKCAV95GRuvdSvA7w4VMwfCjUiPwDi0ZO6Nfe9A==", "cpu": [ "arm64" ], @@ -2585,9 +3590,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz", - "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.7.tgz", + "integrity": "sha512-GA48aKNkyQDbd3KtkplYWT102C5sn/EZTY4XROkxONgruHPU72l+gW+FfF8tf2cFjeHaRbWpOYa/uRBz/Xq1Pg==", "cpu": [ "ia32" ], @@ -2602,9 +3607,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz", - "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.7.tgz", + "integrity": "sha512-a4POruNM2oWsD4WKvBSEKGIiWQF8fZOAsycHOt6JBpZ+JN2n2JH9WAv56SOyu9X5IqAjqSIPTaJkqN8F7XOQ5Q==", "cpu": [ "loong64" ], @@ -2619,9 +3624,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz", - "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.7.tgz", + "integrity": "sha512-KabT5I6StirGfIz0FMgl1I+R1H73Gp0ofL9A3nG3i/cYFJzKHhouBV5VWK1CSgKvVaG4q1RNpCTR2LuTVB3fIw==", "cpu": [ "mips64el" ], @@ -2636,9 +3641,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz", - "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.7.tgz", + "integrity": "sha512-gRsL4x6wsGHGRqhtI+ifpN/vpOFTQtnbsupUF5R5YTAg+y/lKelYR1hXbnBdzDjGbMYjVJLJTd2OFmMewAgwlQ==", "cpu": [ "ppc64" ], @@ -2653,9 +3658,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz", - "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.7.tgz", + "integrity": "sha512-hL25LbxO1QOngGzu2U5xeXtxXcW+/GvMN3ejANqXkxZ/opySAZMrc+9LY/WyjAan41unrR3YrmtTsUpwT66InQ==", "cpu": [ "riscv64" ], @@ -2670,9 +3675,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz", - "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.7.tgz", + "integrity": "sha512-2k8go8Ycu1Kb46vEelhu1vqEP+UeRVj2zY1pSuPdgvbd5ykAw82Lrro28vXUrRmzEsUV0NzCf54yARIK8r0fdw==", "cpu": [ "s390x" ], @@ -2687,9 +3692,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz", - "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.7.tgz", + "integrity": "sha512-hzznmADPt+OmsYzw1EE33ccA+HPdIqiCRq7cQeL1Jlq2gb1+OyWBkMCrYGBJ+sxVzve2ZJEVeePbLM2iEIZSxA==", "cpu": [ "x64" ], @@ -2704,9 +3709,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz", - "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.7.tgz", + "integrity": "sha512-b6pqtrQdigZBwZxAn1UpazEisvwaIDvdbMbmrly7cDTMFnw/+3lVxxCTGOrkPVnsYIosJJXAsILG9XcQS+Yu6w==", "cpu": [ "arm64" ], @@ -2721,9 +3726,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz", - "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.7.tgz", + "integrity": "sha512-OfatkLojr6U+WN5EDYuoQhtM+1xco+/6FSzJJnuWiUw5eVcicbyK3dq5EeV/QHT1uy6GoDhGbFpprUiHUYggrw==", "cpu": [ "x64" ], @@ -2738,9 +3743,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz", - "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.7.tgz", + "integrity": "sha512-AFuojMQTxAz75Fo8idVcqoQWEHIXFRbOc1TrVcFSgCZtQfSdc1RXgB3tjOn/krRHENUB4j00bfGjyl2mJrU37A==", "cpu": [ "arm64" ], @@ -2755,9 +3760,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz", - "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.7.tgz", + "integrity": "sha512-+A1NJmfM8WNDv5CLVQYJ5PshuRm/4cI6WMZRg1by1GwPIQPCTs1GLEUHwiiQGT5zDdyLiRM/l1G0Pv54gvtKIg==", "cpu": [ "x64" ], @@ -2772,9 +3777,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz", - "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.7.tgz", + "integrity": "sha512-+KrvYb/C8zA9CU/g0sR6w2RBw7IGc5J2BPnc3dYc5VJxHCSF1yNMxTV5LQ7GuKteQXZtspjFbiuW5/dOj7H4Yw==", "cpu": [ "arm64" ], @@ -2789,9 +3794,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz", - "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.7.tgz", + "integrity": "sha512-ikktIhFBzQNt/QDyOL580ti9+5mL/YZeUPKU2ivGtGjdTYoqz6jObj6nOMfhASpS4GU4Q/Clh1QtxWAvcYKamA==", "cpu": [ "x64" ], @@ -2806,9 +3811,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz", - "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.7.tgz", + "integrity": "sha512-7yRhbHvPqSpRUV7Q20VuDwbjW5kIMwTHpptuUzV+AA46kiPze5Z7qgt6CLCK3pWFrHeNfDd1VKgyP4O+ng17CA==", "cpu": [ "arm64" ], @@ -2823,9 +3828,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz", - "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.7.tgz", + "integrity": "sha512-SmwKXe6VHIyZYbBLJrhOoCJRB/Z1tckzmgTLfFYOfpMAx63BJEaL9ExI8x7v0oAO3Zh6D/Oi1gVxEYr5oUCFhw==", "cpu": [ "ia32" ], @@ -2840,9 +3845,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz", - "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.7.tgz", + "integrity": "sha512-56hiAJPhwQ1R4i+21FVF7V8kSD5zZTdHcVuRFMW0hn753vVfQN8xlx4uOPT4xoGH0Z/oVATuR82AiqSTDIpaHg==", "cpu": [ "x64" ], @@ -2856,6 +3861,16 @@ "node": ">=18" } }, + "node_modules/@gar/promise-retry": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@gar/promise-retry/-/promise-retry-1.0.3.tgz", + "integrity": "sha512-GmzA9ckNokPypTg10pgpeHNQe7ph+iIKKmhKu3Ob9ANkswreCx7R3cKmY781K8QK3AqVL3xVh9A42JvIAbkkSA==", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, "node_modules/@hono/node-server": { "version": "1.19.9", "resolved": "https://registry.npmjs.org/@hono/node-server/-/node-server-1.19.9.tgz", @@ -3220,12 +4235,12 @@ } }, "node_modules/@ionic/angular": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.1.tgz", - "integrity": "sha512-Jp7LbouSHAnR00Dsa8qE1CSOZNqAfBCO0XKXScJNz8NKVoZe5fPGy/CboehGtAQ1xgzh2eDa15zMmyetXjAkYA==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-8.8.18.tgz", + "integrity": "sha512-sY3CJiJ75xivCXd0SA/OTzys1EhichoX+DfAMyeliyWNuE8NsWhaTTAH1ghU6EI52+O0PbafhwmaA1/vUl9yTA==", "license": "MIT", "dependencies": { - "@ionic/core": "8.8.1", + "@ionic/core": "8.8.18", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -3239,12 +4254,12 @@ } }, "node_modules/@ionic/core": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz", - "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz", + "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==", "license": "MIT", "dependencies": { - "@stencil/core": "4.43.0", + "@stencil/core": "4.43.5", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -3309,6 +4324,17 @@ "@jridgewell/trace-mapping": "^0.3.24" } }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz", + "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, "node_modules/@jridgewell/resolve-uri": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", @@ -4038,9 +5064,9 @@ } }, "node_modules/@ngtools/webpack": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-20.3.17.tgz", - "integrity": "sha512-cfV7hdA1QkykNqegBu07KOQEeHzOwBV52snFz9gFSYLCqP669D8OqEzdRktYMgpGc7ZBOia7IC4gwhHkM3gOfg==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-20.3.32.tgz", + "integrity": "sha512-a3KWNfv3NEyNHdGusIP/+lfLtjH7L5rcqgouBm6v3t1vHQ4zg2sNgoYIQIJCAJnFI2b080YrP9jh2FqKTCJlug==", "dev": true, "license": "MIT", "engines": { @@ -4054,6 +5080,19 @@ "webpack": "^5.54.0" } }, + "node_modules/@noble/hashes": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@noble/hashes/-/hashes-1.4.0.tgz", + "integrity": "sha512-V1JJ1WTRUqHHrOSh597hURcMqVKVGL/ea3kv0gSnEdsEZ0/+VyPghM1lMNGc00z7CIQorSvbKpuJkxvuHbvdbg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -4677,32 +5716,201 @@ "url": "https://opencollective.com/parcel" } }, - "node_modules/@parcel/watcher/node_modules/detect-libc": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", - "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "node_modules/@parcel/watcher/node_modules/detect-libc": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz", + "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "bin": { + "detect-libc": "bin/detect-libc.js" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/@parcel/watcher/node_modules/node-addon-api": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", + "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/@peculiar/asn1-cms": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-cms/-/asn1-cms-2.8.0.tgz", + "integrity": "sha512-NgekZOrSJFSBFLFoLfwePguAWAx7z1+f2TEsWFUMyiqqfntZ4+S/S5hzqME3q4pCA0iOsFKdwiQ35dwY24eVqA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-csr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-csr/-/asn1-csr-2.8.0.tgz", + "integrity": "sha512-akbF8+uvleHs8sejNPQxwmVFuInAg6FMNHOwMILXfP518YfFJwdR3jr6oNUPOaEJfuEhn/vkNOCIT6ASUd4mbg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-ecc": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-ecc/-/asn1-ecc-2.8.0.tgz", + "integrity": "sha512-ohwlk+u9Rv2NOAY1c6MfHj45ATVF8R1DUN/WCgABiRtLi2ZftlZWZX7KvpAbU8v9xPcmoILfELeEABj/rn18AQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pfx": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pfx/-/asn1-pfx-2.8.0.tgz", + "integrity": "sha512-5yof1ytoB++RQtaFbqSUJ8pxDJtZT6vbVqZ8XoJ61ph7UjNVvfFwAilnCodqkNsAodpy13gDhoxZXw00pghnyg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-rsa": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs8": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs8/-/asn1-pkcs8-2.8.0.tgz", + "integrity": "sha512-qAKXtLpBEw9LqhKpjw3ajZSXlBur+ipW+y2ivVBQAG6F6qRx94yO+1ZR4mvw+YaCfKSaOzLeYEzsPaBp4SJELA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs9": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-pkcs9/-/asn1-pkcs9-2.8.0.tgz", + "integrity": "sha512-b5nDWCnkV60+cQ141D6sVVwK9nz64R5n3zSVnklGd+ECdkW2Ol3U1a6yYFlalpSOaD557yuJB64A+q42jG7lUQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.8.0", + "@peculiar/asn1-pfx": "^2.8.0", + "@peculiar/asn1-pkcs8": "^2.8.0", + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "@peculiar/asn1-x509-attr": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-rsa": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-rsa/-/asn1-rsa-2.8.0.tgz", + "integrity": "sha512-zHEUlCqB2mk7x2lxDwHHJy7hWZOPdGHVlsmITWKB5/PbQo61atbu9PJ/0r9dQNMwFzbKPXZ8uK8/91eUhRznSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-schema": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-schema/-/asn1-schema-2.8.0.tgz", + "integrity": "sha512-7YT0U/ze0tF2QOBbE15gKZwy5tvgGyLRiRHLzhlbOpf7BT032oBSd0haZqXn5W6l26WLlu3dyxzjM+2638/z2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509/-/asn1-x509-2.8.0.tgz", + "integrity": "sha512-N0CMuhWUzsWEVq6F1q9X6+VKUnWzSW+cSVg+aPaGGwDdbFoFWTYgin5MHwXgpWd6y9COMBxnfy/Qc+Xc7F0Zwg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509-attr": { + "version": "2.8.0", + "resolved": "https://registry.npmjs.org/@peculiar/asn1-x509-attr/-/asn1-x509-attr-2.8.0.tgz", + "integrity": "sha512-tHjkfS/qhMnmrlB2J9NhflQlQ7In3khO3CfmVrriOlpTeErY9ZIKOso1hQ5JQiyrJ7ShvqVPk7E5fQmbclkSKA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.8.0", + "@peculiar/asn1-x509": "^2.8.0", + "asn1js": "^3.0.10", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/utils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@peculiar/utils/-/utils-2.0.3.tgz", + "integrity": "sha512-+oL3HPFRIZ1St2K50lWCXiioIgSoxzz7R1J3uF6neO2yl1sgmpgY6XXJH4BdpoDkMWznQTeYF6oWNDZLCdQ4eQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/x509": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/@peculiar/x509/-/x509-1.14.3.tgz", + "integrity": "sha512-C2Xj8FZ0uHWeCXXqX5B4/gVFQmtSkiuOolzAgutjTfseNOHT3pUjljDZsTSxXFGgio54bCzVFqmEOUrIVk8RDA==", "dev": true, - "license": "Apache-2.0", - "optional": true, - "bin": { - "detect-libc": "bin/detect-libc.js" + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.6.0", + "@peculiar/asn1-csr": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.0", + "@peculiar/asn1-pkcs9": "^2.6.0", + "@peculiar/asn1-rsa": "^2.6.0", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.0", + "pvtsutils": "^1.3.6", + "reflect-metadata": "^0.2.2", + "tslib": "^2.8.1", + "tsyringe": "^4.10.0" }, "engines": { - "node": ">=0.10" + "node": ">=20.0.0" } }, - "node_modules/@parcel/watcher/node_modules/node-addon-api": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz", - "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==", - "dev": true, - "license": "MIT", - "optional": true - }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.3.tgz", - "integrity": "sha512-h6cqHGZ6VdnwliFG1NXvMPTy/9PS3h8oLh7ImwR+kl+oYnQizgjxsONmmPSb2C66RksfkfIxEVtDSEcJiO0tqw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.59.0.tgz", + "integrity": "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg==", "cpu": [ "arm" ], @@ -4714,9 +5922,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.3.tgz", - "integrity": "sha512-wd+u7SLT/u6knklV/ifG7gr5Qy4GUbH2hMWcDauPFJzmCZUAJ8L2bTkVXC2niOIxp8lk3iH/QX8kSrUxVZrOVw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.59.0.tgz", + "integrity": "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q==", "cpu": [ "arm64" ], @@ -4728,9 +5936,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -4741,9 +5949,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -4754,9 +5962,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.3.tgz", - "integrity": "sha512-u9Xg2FavYbD30g3DSfNhxgNrxhi6xVG4Y6i9Ur1C7xUuGDW3banRbXj+qgnIrwRN4KeJ396jchwy9bCIzbyBEQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.59.0.tgz", + "integrity": "sha512-EsKaJ5ytAu9jI3lonzn3BgG8iRBjV4LxZexygcQbpiU0wU0ATxhNVEpXKfUa0pS05gTcSDMKpn3Sx+QB9RlTTA==", "cpu": [ "arm64" ], @@ -4768,9 +5976,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.3.tgz", - "integrity": "sha512-5M8kyi/OX96wtD5qJR89a/3x5x8x5inXBZO04JWhkQb2JWavOWfjgkdvUqibGJeNNaz1/Z1PPza5/tAPXICI6A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.59.0.tgz", + "integrity": "sha512-d3DuZi2KzTMjImrxoHIAODUZYoUUMsuUiY4SRRcJy6NJoZ6iIqWnJu9IScV9jXysyGMVuW+KNzZvBLOcpdl3Vg==", "cpu": [ "x64" ], @@ -4782,13 +5990,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.3.tgz", - "integrity": "sha512-IoerZJ4l1wRMopEHRKOO16e04iXRDyZFZnNZKrWeNquh5d6bucjezgd+OxG03mOMTnS1x7hilzb3uURPkJ0OfA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.59.0.tgz", + "integrity": "sha512-t4ONHboXi/3E0rT6OZl1pKbl2Vgxf9vJfWgmUoCEVQVxhW6Cw/c8I6hbbu7DAvgp82RKiH7TpLwxnJeKv2pbsw==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4796,13 +6007,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.3.tgz", - "integrity": "sha512-ZYdtqgHTDfvrJHSh3W22TvjWxwOgc3ThK/XjgcNGP2DIwFIPeAPNsQxrJO5XqleSlgDux2VAoWQ5iJrtaC1TbA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.59.0.tgz", + "integrity": "sha512-CikFT7aYPA2ufMD086cVORBYGHffBo4K8MQ4uPS/ZnY54GKj36i196u8U+aDVT2LX4eSMbyHtyOh7D7Zvk2VvA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4810,12 +6024,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4823,12 +6040,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4836,13 +6056,33 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.3.tgz", - "integrity": "sha512-3y5GA0JkBuirLqmjwAKwB0keDlI6JfGYduMlJD/Rl7fvb4Ni8iKdQs1eiunMZJhwDWdCvrcqXRY++VEBbvk6Eg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.59.0.tgz", + "integrity": "sha512-gbUSW/97f7+r4gHy3Jlup8zDG190AuodsWnNiXErp9mT90iCy9NKKU0Xwx5k8VlRAIV2uU9CsMnEFg/xXaOfXg==", + "cpu": [ + "loong64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.59.0.tgz", + "integrity": "sha512-yTRONe79E+o0FWFijasoTjtzG9EBedFXJMl888NBEDCDV9I2wGbFFfJQQe63OijbFCUZqxpHz1GzpbtSFikJ4Q==", "cpu": [ "loong64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4850,13 +6090,33 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.3.tgz", - "integrity": "sha512-AUUH65a0p3Q0Yfm5oD2KVgzTKgwPyp9DSXc3UA7DtxhEb/WSPfbG4wqXeSN62OG5gSo18em4xv6dbfcUGXcagw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.59.0.tgz", + "integrity": "sha512-sw1o3tfyk12k3OEpRddF68a1unZ5VCN7zoTNtSn2KndUE+ea3m3ROOKRCZxEpmT9nsGnogpFP9x6mnLTCaoLkA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.59.0.tgz", + "integrity": "sha512-+2kLtQ4xT3AiIxkzFVFXfsmlZiG5FXYW7ZyIIvGA7Bdeuh9Z0aN4hVyXS/G1E9bTP/vqszNIN/pUKCk/BTHsKA==", "cpu": [ "ppc64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4864,13 +6124,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.3.tgz", - "integrity": "sha512-1makPhFFVBqZE+XFg3Dkq+IkQ7JvmUrwwqaYBL2CE+ZpxPaqkGaiWFEWVGyvTwZace6WLJHwjVh/+CXbKDGPmg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.59.0.tgz", + "integrity": "sha512-NDYMpsXYJJaj+I7UdwIuHHNxXZ/b/N2hR15NyH3m2qAtb/hHPA4g4SuuvrdxetTdndfj9b1WOmy73kcPRoERUg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4878,13 +6141,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.3.tgz", - "integrity": "sha512-OOFJa28dxfl8kLOPMUOQBCO6z3X2SAfzIE276fwT52uXDWUS178KWq0pL7d6p1kz7pkzA0yQwtqL0dEPoVcRWg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.59.0.tgz", + "integrity": "sha512-nLckB8WOqHIf1bhymk+oHxvM9D3tyPndZH8i8+35p/1YiVoVswPid2yLzgX7ZJP0KQvnkhM4H6QZ5m0LzbyIAg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -4892,13 +6158,16 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.3.tgz", - "integrity": "sha512-jMdsML2VI5l+V7cKfZx3ak+SLlJ8fKvLJ0Eoa4b9/vCUrzXKgoKxvHqvJ/mkWhFiyp88nCkM5S2v6nIwRtPcgg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.59.0.tgz", + "integrity": "sha512-oF87Ie3uAIvORFBpwnCvUzdeYUqi2wY6jRFWJAy1qus/udHFYIkplYRW+wo+GRUP4sKzYdmE1Y3+rY5Gc4ZO+w==", "cpu": [ "s390x" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4906,12 +6175,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -4919,22 +6191,39 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.59.0.tgz", + "integrity": "sha512-M3bLRAVk6GOwFlPTIxVBSYKUaqfLrn8l0psKinkCFxl4lQvOSz8ZrKDz2gxcBwHFpci0B6rttydI4IpS4IS/jQ==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.3.tgz", - "integrity": "sha512-KTD/EqjZF3yvRaWUJdD1cW+IQBk4fbQaHYJUmP8N4XoKFZilVL8cobFSTDnjTtxWJQ3JYaMgF4nObY/+nYkumA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.59.0.tgz", + "integrity": "sha512-tt9KBJqaqp5i5HUZzoafHZX8b5Q2Fe7UjYERADll83O4fGqJ49O1FsL6LpdzVFQcpwvnyd0i+K/VSwu/o/nWlA==", "cpu": [ "arm64" ], @@ -4946,9 +6235,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -4959,9 +6248,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.3.tgz", - "integrity": "sha512-of1iHkTQSo3kr6dTIRX6t81uj/c/b15HXVsPcEElN5sS859qHrOepM5p9G41Hah+CTqSh2r8Bm56dL2z9UQQ7g==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.59.0.tgz", + "integrity": "sha512-UKFMHPuM9R0iBegwzKF4y0C4J9u8C6MEJgFuXTBerMk7EJ92GFVFYBfOZaSGLu6COf7FxpQNqhNS4c4icUPqxA==", "cpu": [ "ia32" ], @@ -4973,9 +6262,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.3.tgz", - "integrity": "sha512-s0hybmlHb56mWVZQj8ra9048/WZTPLILKxcvcq+8awSZmyiSUZjjem1AhU3Tf4ZKpYhK4mg36HtHDOe8QJS5PQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.59.0.tgz", + "integrity": "sha512-laBkYlSS1n2L8fSo1thDNGrCTQMmxjYY5G0WFWjFFYZkKPjsMBsgJfGf4TLxXrF6RyhI60L8TMOjBMvXiTcxeA==", "cpu": [ "x64" ], @@ -4987,9 +6276,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -5000,14 +6289,14 @@ ] }, "node_modules/@schematics/angular": { - "version": "20.3.17", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.17.tgz", - "integrity": "sha512-cTqiKBXZRxRfmV6rzjceu7swQ1N/KUMuS+jgoLqRZqPFNIfe7SDk4L5ou889q4wyfEMO4tED4dzjK30jLJ98SA==", + "version": "20.3.32", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-20.3.32.tgz", + "integrity": "sha512-asporFGNP/U4p/A6jHqRmC8zGBxsSbjA/17I0p1tIW4HLbDTwJ0Z1gTSGpkHGRGTeowPZZSCj7s0IWVoaBCjnA==", "dev": true, "license": "MIT", "dependencies": { - "@angular-devkit/core": "20.3.17", - "@angular-devkit/schematics": "20.3.17", + "@angular-devkit/core": "20.3.32", + "@angular-devkit/schematics": "20.3.32", "jsonc-parser": "3.3.1" }, "engines": { @@ -5107,9 +6396,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.43.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", - "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -5119,14 +6408,14 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@tufjs/canonical-json": { @@ -5225,16 +6514,16 @@ "license": "MIT" }, "node_modules/@types/express": { - "version": "4.17.23", - "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.23.tgz", - "integrity": "sha512-Crp6WY9aTYP3qPi2wGDo9iUe/rceX01UMhnF1jmwDcKCFM6cx7YhGP/Mpr3y9AASpfHixIG0E6azCcL5OcDHsQ==", + "version": "4.17.25", + "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.25.tgz", + "integrity": "sha512-dVd04UKsfpINUnK0yBoYHDF3xu7xVH4BuDotC/xGuycx4CgbP48X/KF/586bcObxT0HENHXEU8Nqtu6NR+eKhw==", "dev": true, "license": "MIT", "dependencies": { "@types/body-parser": "*", "@types/express-serve-static-core": "^4.17.33", "@types/qs": "*", - "@types/serve-static": "*" + "@types/serve-static": "^1" } }, "node_modules/@types/express-serve-static-core": { @@ -5291,16 +6580,6 @@ "undici-types": "~7.14.0" } }, - "node_modules/@types/node-forge": { - "version": "1.3.14", - "resolved": "https://registry.npmjs.org/@types/node-forge/-/node-forge-1.3.14.tgz", - "integrity": "sha512-mhVF2BnD4BO+jtOp7z1CdzaK4mbuK0LLQYAvdOLqHTavxFNq4zA1EmYkpnFjP8HOUzedfQkRnp0E2ulSAYSzAw==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/node": "*" - } - }, "node_modules/@types/qs": { "version": "6.14.0", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.14.0.tgz", @@ -5670,9 +6949,9 @@ } }, "node_modules/ajv": { - "version": "8.17.1", - "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz", - "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz", + "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==", "dev": true, "license": "MIT", "dependencies": { @@ -5849,6 +7128,21 @@ "dev": true, "license": "MIT" }, + "node_modules/asn1js": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/asn1js/-/asn1js-3.0.10.tgz", + "integrity": "sha512-S2s3aOytiKdFRdulw2qPE51MzjzVOisppcVv7jVFR+Kw0kxwvFrDcYA0h7Ndqbmj0HkMIXYWaoj7fli8kgx1eg==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.5", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/autoprefixer": { "version": "10.4.21", "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.21.tgz", @@ -6139,6 +7433,16 @@ "node": ">= 0.8" } }, + "node_modules/bytestreamjs": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/bytestreamjs/-/bytestreamjs-2.0.1.tgz", + "integrity": "sha512-U1Z/ob71V/bXfVABvNr/Kumf5VyeQRBEm6Txb0PQ6S7V5GpBM3w4Cbqz/xPDicR5tN0uvDifng8C+5qECeGwyQ==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/cacache": { "version": "20.0.3", "resolved": "https://registry.npmjs.org/cacache/-/cacache-20.0.3.tgz", @@ -6575,20 +7879,20 @@ } }, "node_modules/copy-webpack-plugin": { - "version": "13.0.1", - "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.1.tgz", - "integrity": "sha512-J+YV3WfhY6W/Xf9h+J1znYuqTye2xkBUIGyTPWuBAT27qajBa5mR4f8WBmfDY3YjRftT2kqZZiLi1qf0H+UOFw==", + "version": "14.0.0", + "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-14.0.0.tgz", + "integrity": "sha512-3JLW90aBGeaTLpM7mYQKpnVdgsUZRExY55giiZgLuX/xTQRUs1dOCwbBnWnvY6Q6rfZoXMNwzOQJCSZPppfqXA==", "dev": true, "license": "MIT", "dependencies": { "glob-parent": "^6.0.1", "normalize-path": "^3.0.0", "schema-utils": "^4.2.0", - "serialize-javascript": "^6.0.2", + "serialize-javascript": "^7.0.3", "tinyglobby": "^0.2.12" }, "engines": { - "node": ">= 18.12.0" + "node": ">= 20.9.0" }, "funding": { "type": "opencollective", @@ -6598,6 +7902,16 @@ "webpack": "^5.1.0" } }, + "node_modules/copy-webpack-plugin/node_modules/serialize-javascript": { + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-7.0.5.tgz", + "integrity": "sha512-F4LcB0UqUl1zErq+1nYEEzSHJnIwb3AF2XWB94b+afhrekOUijwooAYqFyRbjYkm2PAKBabx6oYv/xDxNi8IBw==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=20.0.0" + } + }, "node_modules/core-js-compat": { "version": "3.46.0", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.46.0.tgz", @@ -7116,9 +8430,9 @@ "license": "MIT" }, "node_modules/es-object-atoms": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", - "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.2.tgz", + "integrity": "sha512-HWcBoN6NileqtSydK2FqHbS/LoDd2pqrnQHLyJzBj4kOp/ky2MWMN694xOfkK8/SnUsW2DH7EfyVlydKCsm1Zw==", "dev": true, "license": "MIT", "dependencies": { @@ -7129,9 +8443,9 @@ } }, "node_modules/esbuild": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz", - "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==", + "version": "0.27.7", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.7.tgz", + "integrity": "sha512-IxpibTjyVnmrIQo5aqNpCgoACA/dTKLTlhMHihVHhdkxKyPO1uBBthumT0rdHmcsk9uMonIWS0m4FljWzILh3w==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -7142,38 +8456,38 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.25.9", - "@esbuild/android-arm": "0.25.9", - "@esbuild/android-arm64": "0.25.9", - "@esbuild/android-x64": "0.25.9", - "@esbuild/darwin-arm64": "0.25.9", - "@esbuild/darwin-x64": "0.25.9", - "@esbuild/freebsd-arm64": "0.25.9", - "@esbuild/freebsd-x64": "0.25.9", - "@esbuild/linux-arm": "0.25.9", - "@esbuild/linux-arm64": "0.25.9", - "@esbuild/linux-ia32": "0.25.9", - "@esbuild/linux-loong64": "0.25.9", - "@esbuild/linux-mips64el": "0.25.9", - "@esbuild/linux-ppc64": "0.25.9", - "@esbuild/linux-riscv64": "0.25.9", - "@esbuild/linux-s390x": "0.25.9", - "@esbuild/linux-x64": "0.25.9", - "@esbuild/netbsd-arm64": "0.25.9", - "@esbuild/netbsd-x64": "0.25.9", - "@esbuild/openbsd-arm64": "0.25.9", - "@esbuild/openbsd-x64": "0.25.9", - "@esbuild/openharmony-arm64": "0.25.9", - "@esbuild/sunos-x64": "0.25.9", - "@esbuild/win32-arm64": "0.25.9", - "@esbuild/win32-ia32": "0.25.9", - "@esbuild/win32-x64": "0.25.9" + "@esbuild/aix-ppc64": "0.27.7", + "@esbuild/android-arm": "0.27.7", + "@esbuild/android-arm64": "0.27.7", + "@esbuild/android-x64": "0.27.7", + "@esbuild/darwin-arm64": "0.27.7", + "@esbuild/darwin-x64": "0.27.7", + "@esbuild/freebsd-arm64": "0.27.7", + "@esbuild/freebsd-x64": "0.27.7", + "@esbuild/linux-arm": "0.27.7", + "@esbuild/linux-arm64": "0.27.7", + "@esbuild/linux-ia32": "0.27.7", + "@esbuild/linux-loong64": "0.27.7", + "@esbuild/linux-mips64el": "0.27.7", + "@esbuild/linux-ppc64": "0.27.7", + "@esbuild/linux-riscv64": "0.27.7", + "@esbuild/linux-s390x": "0.27.7", + "@esbuild/linux-x64": "0.27.7", + "@esbuild/netbsd-arm64": "0.27.7", + "@esbuild/netbsd-x64": "0.27.7", + "@esbuild/openbsd-arm64": "0.27.7", + "@esbuild/openbsd-x64": "0.27.7", + "@esbuild/openharmony-arm64": "0.27.7", + "@esbuild/sunos-x64": "0.27.7", + "@esbuild/win32-arm64": "0.27.7", + "@esbuild/win32-ia32": "0.27.7", + "@esbuild/win32-x64": "0.27.7" } }, "node_modules/esbuild-wasm": { - "version": "0.25.9", - "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.25.9.tgz", - "integrity": "sha512-Jpv5tCSwQg18aCqCRD3oHIX/prBhXMDapIoG//A+6+dV0e7KQMGFg85ihJ5T1EeMjbZjON3TqFy0VrGAnIHLDA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild-wasm/-/esbuild-wasm-0.28.1.tgz", + "integrity": "sha512-p/GD4E8oYRjg3kjdKrnMb0s4PzXgJF42e0MF4H0+ACyK/kIlFRp3e0fzOleIG+wBBm6MM3XQrbpe7soEA+vJIA==", "dev": true, "license": "MIT", "bin": { @@ -7954,30 +9268,24 @@ "license": "MIT" }, "node_modules/http-errors": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz", - "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==", + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", + "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", "dev": true, "license": "MIT", "dependencies": { - "depd": "2.0.0", - "inherits": "2.0.4", - "setprototypeof": "1.2.0", - "statuses": "2.0.1", - "toidentifier": "1.0.1" + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" }, "engines": { "node": ">= 0.8" - } - }, - "node_modules/http-errors/node_modules/statuses": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", - "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" } }, "node_modules/http-parser-js": { @@ -8017,9 +9325,9 @@ } }, "node_modules/http-proxy-middleware": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.5.tgz", - "integrity": "sha512-GLZZm1X38BPY4lkXA01jhwxvDoOkkXqjgVyUzVxiEK4iuRu03PZoYHhHRwxnfhQMDuaxi3vVri0YgSro/1oWqg==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-3.0.7.tgz", + "integrity": "sha512-iwbQltVlx8bCrqePUM8C+hllHvdawVhQJaLrj1X7qllkvFQdXFsr16pW/mo9+JDVjN+QO2XUx9jd8SmoFkE5qw==", "dev": true, "license": "MIT", "dependencies": { @@ -8031,7 +9339,7 @@ "micromatch": "^4.0.8" }, "engines": { - "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + "node": "^14.18.0 || ^16.10.0 || >=18.0.0" } }, "node_modules/https-proxy-agent": { @@ -8167,12 +9475,12 @@ } }, "node_modules/ionicons": { - "version": "8.0.13", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", - "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", "license": "MIT", "dependencies": { - "@stencil/core": "^4.35.3" + "@stencil/core": "^4.43.5" } }, "node_modules/ip-address": { @@ -9502,16 +10810,6 @@ "license": "MIT", "optional": true }, - "node_modules/node-forge": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz", - "integrity": "sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==", - "dev": true, - "license": "(BSD-3-Clause OR GPL-2.0)", - "engines": { - "node": ">= 6.13.0" - } - }, "node_modules/node-gyp": { "version": "12.2.0", "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-12.2.0.tgz", @@ -9961,12 +11259,13 @@ } }, "node_modules/pacote": { - "version": "21.0.4", - "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.0.4.tgz", - "integrity": "sha512-RplP/pDW0NNNDh3pnaoIWYPvNenS7UqMbXyvMqJczosiFWTeGGwJC2NQBLqKf4rGLFfwCOnntw1aEp9Jiqm1MA==", + "version": "21.5.1", + "resolved": "https://registry.npmjs.org/pacote/-/pacote-21.5.1.tgz", + "integrity": "sha512-KvcJ9iy3crysCsgqc4+PknH/w6jkrp8JN36mpZBPwNaDRwTfMZD37YzRazNstiZUOhuF5pno9f78n9mEJBavwg==", "dev": true, "license": "ISC", "dependencies": { + "@gar/promise-retry": "^1.0.0", "@npmcli/git": "^7.0.0", "@npmcli/installed-package-contents": "^4.0.0", "@npmcli/package-json": "^7.0.0", @@ -9980,7 +11279,6 @@ "npm-pick-manifest": "^11.0.1", "npm-registry-fetch": "^19.0.0", "proc-log": "^6.0.0", - "promise-retry": "^2.0.1", "sigstore": "^4.0.0", "ssri": "^13.0.0", "tar": "^7.4.3" @@ -10201,9 +11499,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz", + "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==", "dev": true, "license": "MIT", "engines": { @@ -10225,9 +11523,9 @@ } }, "node_modules/piscina": { - "version": "5.1.3", - "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.1.3.tgz", - "integrity": "sha512-0u3N7H4+hbr40KjuVn2uNhOcthu/9usKhnw5vT3J7ply79v3D3M8naI00el9Klcy16x557VsEkkUQaHCWFXC/g==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/piscina/-/piscina-5.2.0.tgz", + "integrity": "sha512-DszUCKeVN/5G5QKo6jAVHL8fmKnkJvQ0ACiVgY7YGCq3TUB2oznAOayvZPIAdEThvhczkXR+qm3IHsNXpFCYfA==", "dev": true, "license": "MIT", "engines": { @@ -10247,10 +11545,28 @@ "node": ">=16.20.0" } }, + "node_modules/pkijs": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/pkijs/-/pkijs-3.4.0.tgz", + "integrity": "sha512-emEcLuomt2j03vxD54giVB4SxTjnsqkU692xZOZXHDVoYyypEm+b3jpiTcc+Cf+myooc+/Ly0z01jqeNHVgJGw==", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@noble/hashes": "1.4.0", + "asn1js": "^3.0.6", + "bytestreamjs": "^2.0.1", + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.3", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.12", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.12.tgz", + "integrity": "sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==", "dev": true, "funding": [ { @@ -10452,14 +11768,35 @@ "license": "MIT", "optional": true }, + "node_modules/pvtsutils": { + "version": "1.3.6", + "resolved": "https://registry.npmjs.org/pvtsutils/-/pvtsutils-1.3.6.tgz", + "integrity": "sha512-PLgQXQ6H2FWCaeRak8vvk1GW462lMxB5s3Jm673N82zI4vqtVUPuZdffdZbPDFRoU8kAhItWFtPCWiPpp4/EDg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/pvutils": { + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/pvutils/-/pvutils-1.1.5.tgz", + "integrity": "sha512-KTqnxsgGiQ6ZAzZCVlJH5eOjSnvlyEgx1m8bkRJfOhmGRqfo5KLvmAlACQkrjEtOQ4B7wF9TdSLIs9O90MX9xA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.0.0" + } + }, "node_modules/qs": { - "version": "6.15.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.0.tgz", - "integrity": "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ==", + "version": "6.15.3", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.15.3.tgz", + "integrity": "sha512-O9gl3zCl5h5blw1KGUzQKhA5oUXSl8rwUIM5o0S3nCXMliSvy5Dzx7/DJcI+SwgICv+IneSZwhBh1oSyEHA71A==", "dev": true, "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.1.0" + "es-define-property": "^1.0.1", + "side-channel": "^1.1.1" }, "engines": { "node": ">=0.6" @@ -10525,27 +11862,6 @@ "node": ">= 0.10" } }, - "node_modules/raw-body/node_modules/http-errors": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", - "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "depd": "~2.0.0", - "inherits": "~2.0.4", - "setprototypeof": "~1.2.0", - "statuses": "~2.0.2", - "toidentifier": "~1.0.1" - }, - "engines": { - "node": ">= 0.8" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" - } - }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -10783,9 +12099,9 @@ "license": "MIT" }, "node_modules/rollup": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.3.tgz", - "integrity": "sha512-RIDh866U8agLgiIcdpB+COKnlCreHJLfIhWC3LVflku5YHfpnsIKigRZeFfMfCc4dVcqNVfQQ5gO/afOck064A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.59.0.tgz", + "integrity": "sha512-2oMpl67a3zCH9H79LeMcbDhXW/UmWG/y2zuqnF2jQq5uq9TbM9TVyXvA4+t+ne2IIkBdrLpAaRQAvo7YI/Yyeg==", "dev": true, "license": "MIT", "dependencies": { @@ -10799,35 +12115,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.3", - "@rollup/rollup-android-arm64": "4.52.3", - "@rollup/rollup-darwin-arm64": "4.52.3", - "@rollup/rollup-darwin-x64": "4.52.3", - "@rollup/rollup-freebsd-arm64": "4.52.3", - "@rollup/rollup-freebsd-x64": "4.52.3", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.3", - "@rollup/rollup-linux-arm-musleabihf": "4.52.3", - "@rollup/rollup-linux-arm64-gnu": "4.52.3", - "@rollup/rollup-linux-arm64-musl": "4.52.3", - "@rollup/rollup-linux-loong64-gnu": "4.52.3", - "@rollup/rollup-linux-ppc64-gnu": "4.52.3", - "@rollup/rollup-linux-riscv64-gnu": "4.52.3", - "@rollup/rollup-linux-riscv64-musl": "4.52.3", - "@rollup/rollup-linux-s390x-gnu": "4.52.3", - "@rollup/rollup-linux-x64-gnu": "4.52.3", - "@rollup/rollup-linux-x64-musl": "4.52.3", - "@rollup/rollup-openharmony-arm64": "4.52.3", - "@rollup/rollup-win32-arm64-msvc": "4.52.3", - "@rollup/rollup-win32-ia32-msvc": "4.52.3", - "@rollup/rollup-win32-x64-gnu": "4.52.3", - "@rollup/rollup-win32-x64-msvc": "4.52.3", + "@rollup/rollup-android-arm-eabi": "4.59.0", + "@rollup/rollup-android-arm64": "4.59.0", + "@rollup/rollup-darwin-arm64": "4.59.0", + "@rollup/rollup-darwin-x64": "4.59.0", + "@rollup/rollup-freebsd-arm64": "4.59.0", + "@rollup/rollup-freebsd-x64": "4.59.0", + "@rollup/rollup-linux-arm-gnueabihf": "4.59.0", + "@rollup/rollup-linux-arm-musleabihf": "4.59.0", + "@rollup/rollup-linux-arm64-gnu": "4.59.0", + "@rollup/rollup-linux-arm64-musl": "4.59.0", + "@rollup/rollup-linux-loong64-gnu": "4.59.0", + "@rollup/rollup-linux-loong64-musl": "4.59.0", + "@rollup/rollup-linux-ppc64-gnu": "4.59.0", + "@rollup/rollup-linux-ppc64-musl": "4.59.0", + "@rollup/rollup-linux-riscv64-gnu": "4.59.0", + "@rollup/rollup-linux-riscv64-musl": "4.59.0", + "@rollup/rollup-linux-s390x-gnu": "4.59.0", + "@rollup/rollup-linux-x64-gnu": "4.59.0", + "@rollup/rollup-linux-x64-musl": "4.59.0", + "@rollup/rollup-openbsd-x64": "4.59.0", + "@rollup/rollup-openharmony-arm64": "4.59.0", + "@rollup/rollup-win32-arm64-msvc": "4.59.0", + "@rollup/rollup-win32-ia32-msvc": "4.59.0", + "@rollup/rollup-win32-x64-gnu": "4.59.0", + "@rollup/rollup-win32-x64-msvc": "4.59.0", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.3.tgz", - "integrity": "sha512-lj9ViATR1SsqycwFkJCtYfQTheBdvlWJqzqxwc9f2qrcVrQaF/gCuBRTiTolkRWS6KvNxSk4KHZWG7tDktLgjg==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.59.0.tgz", + "integrity": "sha512-W2Psnbh1J8ZJw0xKAd8zdNgF9HRLkdWwwdWqubSVk0pUuQkoHnv7rx4GiF9rT4t5DIZGAsConRE3AxCdJ4m8rg==", "cpu": [ "arm64" ], @@ -10839,9 +12158,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.3.tgz", - "integrity": "sha512-+Dyo7O1KUmIsbzx1l+4V4tvEVnVQqMOIYtrxK7ncLSknl1xnMHLgn7gddJVrYPNZfEB8CIi3hK8gq8bDhb3h5A==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.59.0.tgz", + "integrity": "sha512-ZW2KkwlS4lwTv7ZVsYDiARfFCnSGhzYPdiOU4IM2fDbL+QGlyAbjgSFuqNRbSthybLbIJ915UtZBtmuLrQAT/w==", "cpu": [ "x64" ], @@ -10853,13 +12172,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.3.tgz", - "integrity": "sha512-NcViG7A0YtuFDA6xWSgmFb6iPFzHlf5vcqb2p0lGEbT+gjrEEz8nC/EeDHvx6mnGXnGCC1SeVV+8u+smj0CeGQ==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.59.0.tgz", + "integrity": "sha512-jYgUGk5aLd1nUb1CtQ8E+t5JhLc9x5WdBKew9ZgAXg7DBk0ZHErLHdXM24rfX+bKrFe+Xp5YuJo54I5HFjGDAA==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -10867,13 +12189,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.3.tgz", - "integrity": "sha512-d3pY7LWno6SYNXRm6Ebsq0DJGoiLXTb83AIPCXl9fmtIQs/rXoS8SJxxUNtFbJ5MiOvs+7y34np77+9l4nfFMw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.59.0.tgz", + "integrity": "sha512-peZRVEdnFWZ5Bh2KeumKG9ty7aCXzzEsHShOZEFiCQlDEepP1dpUl/SrUNXNg13UmZl+gzVDPsiCwnV1uI0RUA==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -10881,13 +12206,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.3.tgz", - "integrity": "sha512-tPgGd6bY2M2LJTA1uGq8fkSPK8ZLYjDjY+ZLK9WHncCnfIz29LIXIqUgzCR0hIefzy6Hpbe8Th5WOSwTM8E7LA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.59.0.tgz", + "integrity": "sha512-3AHmtQq/ppNuUspKAlvA8HtLybkDflkMuLK4DPo77DfthRb71V84/c4MlWJXixZz4uruIH4uaa07IqoAkG64fg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -10895,13 +12223,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.3.tgz", - "integrity": "sha512-BCFkJjgk+WFzP+tcSMXq77ymAPIxsX9lFJWs+2JzuZTLtksJ2o5hvgTdIcZ5+oKzUDMwI0PfWzRBYAydAHF2Mw==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.59.0.tgz", + "integrity": "sha512-2UdiwS/9cTAx7qIUZB/fWtToJwvt0Vbo0zmnYt7ED35KPg13Q0ym1g442THLC7VyI6JfYTP4PiSOWyoMdV2/xg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -10909,9 +12240,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.3.tgz", - "integrity": "sha512-+zteHZdoUYLkyYKObGHieibUFLbttX2r+58l27XZauq0tcWYYuKUwY2wjeCN9oK1Um2YgH2ibd6cnX/wFD7DuA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.59.0.tgz", + "integrity": "sha512-V5B6mG7OrGTwnxaNUzZTDTjDS7F75PO1ae6MJYdiMu60sq0CqN5CVeVsbhPxalupvTX8gXVSU9gq+Rx1/hvu6A==", "cpu": [ "arm64" ], @@ -10923,9 +12254,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.3", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.3.tgz", - "integrity": "sha512-zGIbEVVXVtauFgl3MRwGWEN36P5ZGenHRMgNw88X5wEhEBpq0XrMEZwOn07+ICrwM17XO5xfMZqh0OldCH5VTA==", + "version": "4.59.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.59.0.tgz", + "integrity": "sha512-2HRCml6OztYXyJXAvdDXPKcawukWY2GpR5/nxKp4iBgiO3wcoEGkAaqctIbZcNB6KlUQBIqt8VYkNSj2397EfA==", "cpu": [ "x64" ], @@ -11142,17 +12473,17 @@ "license": "MIT" }, "node_modules/selfsigned": { - "version": "2.4.1", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz", - "integrity": "sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==", + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-5.5.0.tgz", + "integrity": "sha512-ftnu3TW4+3eBfLRFnDEkzGxSF/10BJBkaLJuBHZX0kiPS7bRdlpZGu6YGt4KngMkdTwJE6MbjavFpqHvqVt+Ew==", "dev": true, "license": "MIT", "dependencies": { - "@types/node-forge": "^1.3.0", - "node-forge": "^1" + "@peculiar/x509": "^1.14.2", + "pkijs": "^3.3.3" }, "engines": { - "node": ">=10" + "node": ">=18" } }, "node_modules/semver": { @@ -11195,27 +12526,6 @@ "url": "https://opencollective.com/express" } }, - "node_modules/send/node_modules/http-errors": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.1.tgz", - "integrity": "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==", - "dev": true, - "license": "MIT", - "dependencies": { - "depd": "~2.0.0", - "inherits": "~2.0.4", - "setprototypeof": "~1.2.0", - "statuses": "~2.0.2", - "toidentifier": "~1.0.1" - }, - "engines": { - "node": ">= 0.8" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/express" - } - }, "node_modules/serialize-javascript": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-6.0.2.tgz", @@ -11436,15 +12746,15 @@ } }, "node_modules/side-channel": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", - "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.1.tgz", + "integrity": "sha512-6x6dK6zJdpTzF4sQeNYxwtvBzf6Eg4GtlesS94HOvTudUeyK2WXAaIfmDgsyslYrRBeFIlsi54AYsFGUuhmvrQ==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3", - "side-channel-list": "^1.0.0", + "object-inspect": "^1.13.4", + "side-channel-list": "^1.0.1", "side-channel-map": "^1.0.1", "side-channel-weakmap": "^1.0.2" }, @@ -11456,14 +12766,14 @@ } }, "node_modules/side-channel-list": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", - "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz", + "integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==", "dev": true, "license": "MIT", "dependencies": { "es-errors": "^1.3.0", - "object-inspect": "^1.13.3" + "object-inspect": "^1.13.4" }, "engines": { "node": ">= 0.4" @@ -12056,6 +13366,26 @@ "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", "license": "0BSD" }, + "node_modules/tsyringe": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/tsyringe/-/tsyringe-4.10.0.tgz", + "integrity": "sha512-axr3IdNuVIxnaK5XGEUFTu3YmAQ6lllgrvqfEoR16g/HGnYY/6We4oWENtAnzK6/LpJ2ur9PAb80RBt7/U4ugw==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^1.9.3" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/tsyringe/node_modules/tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", + "dev": true, + "license": "0BSD" + }, "node_modules/tuf-js": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/tuf-js/-/tuf-js-4.1.0.tgz", @@ -12284,13 +13614,13 @@ } }, "node_modules/vite": { - "version": "7.1.11", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.11.tgz", - "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "dev": true, "license": "MIT", "dependencies": { - "esbuild": "^0.25.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -12510,15 +13840,15 @@ } }, "node_modules/webpack-dev-server": { - "version": "5.2.2", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.2.tgz", - "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==", + "version": "5.2.5", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.2.5.tgz", + "integrity": "sha512-4wZtCquSuv9CKX8oybo+mqxtxZqWz47uM1Ch94lxowBztOhWCbhqvRbfC/mODOwxgV2brY+JGZpHq58/SuVFYg==", "dev": true, "license": "MIT", "dependencies": { "@types/bonjour": "^3.5.13", "@types/connect-history-api-fallback": "^1.5.4", - "@types/express": "^4.17.21", + "@types/express": "^4.17.25", "@types/express-serve-static-core": "^4.17.21", "@types/serve-index": "^1.9.4", "@types/serve-static": "^1.15.5", @@ -12528,9 +13858,9 @@ "bonjour-service": "^1.2.1", "chokidar": "^3.6.0", "colorette": "^2.0.10", - "compression": "^1.7.4", + "compression": "^1.8.1", "connect-history-api-fallback": "^2.0.0", - "express": "^4.21.2", + "express": "^4.22.1", "graceful-fs": "^4.2.6", "http-proxy-middleware": "^2.0.9", "ipaddr.js": "^2.1.0", @@ -12538,7 +13868,7 @@ "open": "^10.0.3", "p-retry": "^6.2.0", "schema-utils": "^4.2.0", - "selfsigned": "^2.4.1", + "selfsigned": "^5.5.0", "serve-index": "^1.9.1", "sockjs": "^0.3.24", "spdy": "^4.0.2", @@ -12582,24 +13912,24 @@ } }, "node_modules/webpack-dev-server/node_modules/body-parser": { - "version": "1.20.3", - "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz", - "integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==", + "version": "1.20.5", + "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.5.tgz", + "integrity": "sha512-3grm+/2tUOvu2cjJkvsIxrv/wVpfXQW4PsQHYm7yk4vfpu7Ekl6nEsYBoJUL6qDwZUx8wUhQ8tR2qz+ad9c9OA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", + "bytes": "~3.1.2", "content-type": "~1.0.5", "debug": "2.6.9", "depd": "2.0.0", - "destroy": "1.2.0", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "on-finished": "2.4.1", - "qs": "6.13.0", - "raw-body": "2.5.2", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", "type-is": "~1.6.18", - "unpipe": "1.0.0" + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8", @@ -12644,20 +13974,10 @@ "node": ">= 0.6" } }, - "node_modules/webpack-dev-server/node_modules/cookie": { - "version": "0.7.1", - "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz", - "integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.6" - } - }, "node_modules/webpack-dev-server/node_modules/cookie-signature": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", - "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.7.tgz", + "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==", "dev": true, "license": "MIT" }, @@ -12679,40 +13999,40 @@ "license": "MIT" }, "node_modules/webpack-dev-server/node_modules/express": { - "version": "4.21.2", - "resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz", - "integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==", + "version": "4.22.2", + "resolved": "https://registry.npmjs.org/express/-/express-4.22.2.tgz", + "integrity": "sha512-IuL+Elrou2ZvCFHs18/CIzy2Nzvo25nZ1/D2eIZlz7c+QUayAcYoiM2BthCjs+EBHVpjYjcuLDAiCWgeIX3X1Q==", "dev": true, "license": "MIT", "dependencies": { "accepts": "~1.3.8", "array-flatten": "1.1.1", - "body-parser": "1.20.3", - "content-disposition": "0.5.4", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", "content-type": "~1.0.4", - "cookie": "0.7.1", - "cookie-signature": "1.0.6", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", "debug": "2.6.9", "depd": "2.0.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "finalhandler": "1.3.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", "merge-descriptors": "1.0.3", "methods": "~1.1.2", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "path-to-regexp": "0.1.12", + "path-to-regexp": "~0.1.12", "proxy-addr": "~2.0.7", - "qs": "6.13.0", + "qs": "~6.15.1", "range-parser": "~1.2.1", "safe-buffer": "5.2.1", - "send": "0.19.0", - "serve-static": "1.16.2", + "send": "~0.19.0", + "serve-static": "~1.16.2", "setprototypeof": "1.2.0", - "statuses": "2.0.1", + "statuses": "~2.0.1", "type-is": "~1.6.18", "utils-merge": "1.0.1", "vary": "~1.1.2" @@ -12726,18 +14046,18 @@ } }, "node_modules/webpack-dev-server/node_modules/finalhandler": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz", - "integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==", + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.2.tgz", + "integrity": "sha512-aA4RyPcd3badbdABGDuTXCMTtOneUCAYH/gxoYRTZlIJdF0YPWuGqiAsIrhNnnqdXGswYk6dGujem4w80UJFhg==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "parseurl": "~1.3.3", - "statuses": "2.0.1", + "statuses": "~2.0.2", "unpipe": "~1.0.0" }, "engines": { @@ -12869,9 +14189,9 @@ } }, "node_modules/webpack-dev-server/node_modules/path-to-regexp": { - "version": "0.1.12", - "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz", - "integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==", + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.13.tgz", + "integrity": "sha512-A/AGNMFN3c8bOlvV9RreMdrv7jsmF9XIfDeCd87+I8RNg6s78BhJxMu69NEMHBSJFxKidViTEdruRwEk/WIKqA==", "dev": true, "license": "MIT" }, @@ -12888,33 +14208,17 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, - "node_modules/webpack-dev-server/node_modules/qs": { - "version": "6.13.0", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", - "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", - "dev": true, - "license": "BSD-3-Clause", - "dependencies": { - "side-channel": "^1.0.6" - }, - "engines": { - "node": ">=0.6" - }, - "funding": { - "url": "https://github.com/sponsors/ljharb" - } - }, "node_modules/webpack-dev-server/node_modules/raw-body": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz", - "integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==", + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.3.tgz", + "integrity": "sha512-s4VSOf6yN0rvbRZGxs8Om5CWj6seneMwK3oDb4lWDH0UPhWcxwOWw5+qk24bxq87szX1ydrwylIOp2uG1ojUpA==", "dev": true, "license": "MIT", "dependencies": { - "bytes": "3.1.2", - "http-errors": "2.0.0", - "iconv-lite": "0.4.24", - "unpipe": "1.0.0" + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" }, "engines": { "node": ">= 0.8" @@ -12934,66 +14238,46 @@ } }, "node_modules/webpack-dev-server/node_modules/send": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz", - "integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==", + "version": "0.19.2", + "resolved": "https://registry.npmjs.org/send/-/send-0.19.2.tgz", + "integrity": "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg==", "dev": true, "license": "MIT", "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", - "encodeurl": "~1.0.2", + "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", - "fresh": "0.5.2", - "http-errors": "2.0.0", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", - "on-finished": "2.4.1", + "on-finished": "~2.4.1", "range-parser": "~1.2.1", - "statuses": "2.0.1" + "statuses": "~2.0.2" }, "engines": { "node": ">= 0.8.0" } }, - "node_modules/webpack-dev-server/node_modules/send/node_modules/encodeurl": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", - "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/webpack-dev-server/node_modules/serve-static": { - "version": "1.16.2", - "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz", - "integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==", + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.3.tgz", + "integrity": "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA==", "dev": true, "license": "MIT", "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", - "send": "0.19.0" + "send": "~0.19.1" }, "engines": { "node": ">= 0.8.0" } }, - "node_modules/webpack-dev-server/node_modules/statuses": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz", - "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">= 0.8" - } - }, "node_modules/webpack-dev-server/node_modules/type-is": { "version": "1.6.18", "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index fbc20f9d3f2..13e3d9b603c 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,9 +15,9 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-browser-dynamic": "^20.0.0", "@angular/router": "^20.0.0", - "@ionic/angular": "8.8.1", - "@ionic/core": "8.8.1", - "ionicons": "8.0.13", + "@ionic/angular": "8.8.18", + "@ionic/core": "8.8.18", + "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" diff --git a/static/code/stackblitz/v8/html/package-lock.json b/static/code/stackblitz/v8/html/package-lock.json index 1b60861a2c7..f6698d31cda 100644 --- a/static/code/stackblitz/v8/html/package-lock.json +++ b/static/code/stackblitz/v8/html/package-lock.json @@ -6,19 +6,19 @@ "": { "name": "html-starter", "dependencies": { - "@ionic/core": "8.8.1", - "ionicons": "8.0.13" + "@ionic/core": "8.8.18", + "ionicons": "8.1.0" }, "devDependencies": { "typescript": "~5.9.0", "vite": "^7.0.0", - "vite-plugin-static-copy": "^3.1.0" + "vite-plugin-static-copy": "^4.0.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], @@ -33,9 +33,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], @@ -50,9 +50,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], @@ -67,9 +67,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], @@ -84,9 +84,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], @@ -101,9 +101,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], @@ -118,9 +118,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], @@ -135,9 +135,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], @@ -152,9 +152,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], @@ -169,9 +169,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], @@ -186,9 +186,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], @@ -203,9 +203,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], @@ -220,9 +220,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], @@ -237,9 +237,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], @@ -254,9 +254,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], @@ -271,9 +271,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], @@ -288,9 +288,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], @@ -305,9 +305,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], @@ -322,9 +322,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], @@ -339,9 +339,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], @@ -356,9 +356,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], @@ -373,9 +373,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], @@ -390,9 +390,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], @@ -407,9 +407,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], @@ -424,9 +424,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], @@ -441,9 +441,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], @@ -458,12 +458,12 @@ } }, "node_modules/@ionic/core": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz", - "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz", + "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==", "license": "MIT", "dependencies": { - "@stencil/core": "4.43.0", + "@stencil/core": "4.43.5", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -472,9 +472,9 @@ } }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], @@ -486,9 +486,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], @@ -500,9 +500,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -513,9 +513,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -526,9 +526,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], @@ -540,9 +540,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], @@ -554,13 +554,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -568,13 +571,16 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -582,12 +588,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -595,12 +604,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -608,13 +620,33 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", "cpu": [ "loong64" ], "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", + "cpu": [ + "loong64" + ], + "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -622,13 +654,33 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", + "cpu": [ + "ppc64" + ], + "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", "cpu": [ "ppc64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -636,13 +688,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -650,13 +705,16 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -664,13 +722,16 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -678,12 +739,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -691,22 +755,39 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], @@ -718,9 +799,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -731,9 +812,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], @@ -745,9 +826,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], @@ -759,9 +840,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -772,9 +853,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.43.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", - "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -784,20 +865,20 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", "dev": true, "license": "MIT" }, @@ -816,9 +897,9 @@ } }, "node_modules/anymatch/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true, "license": "MIT", "engines": { @@ -859,6 +940,7 @@ "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", "dev": true, + "license": "MIT", "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", @@ -879,9 +961,9 @@ } }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "dev": true, "hasInstallScript": true, "license": "MIT", @@ -892,32 +974,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/fdir": { @@ -980,12 +1062,12 @@ } }, "node_modules/ionicons": { - "version": "8.0.13", - "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.0.13.tgz", - "integrity": "sha512-2QQVyG2P4wszne79jemMjWYLp0DBbDhr4/yFroPCxvPP1wtMxgdIV3l5n+XZ5E9mgoXU79w7yTWpm2XzJsISxQ==", + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", "license": "MIT", "dependencies": { - "@stencil/core": "^4.35.3" + "@stencil/core": "^4.43.5" } }, "node_modules/is-binary-path": { @@ -1035,9 +1117,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "dev": true, "funding": [ { @@ -1064,9 +1146,9 @@ } }, "node_modules/p-map": { - "version": "7.0.4", - "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.4.tgz", - "integrity": "sha512-tkAQEw8ysMzmkhgw8k+1U/iPhWNhykKnSk4Rd5zLoPJCuJaGRPo6YposrZgaxHKzDHdDWWZvE/Sk7hsL2X/CpQ==", + "version": "7.0.6", + "resolved": "https://registry.npmjs.org/p-map/-/p-map-7.0.6.tgz", + "integrity": "sha512-I4Prw6ivkd6p8PiYR1tXASOAOBzIJwu0TB7fqaX0c/8c3QAehNYmX57EijyGGGBt3c/BIowGwV03RVBtXvHEVg==", "dev": true, "license": "MIT", "engines": { @@ -1084,9 +1166,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "dev": true, "license": "MIT", "engines": { @@ -1097,9 +1179,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "dev": true, "funding": [ { @@ -1117,7 +1199,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1139,9 +1221,9 @@ } }, "node_modules/readdirp/node_modules/picomatch": { - "version": "2.3.1", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", - "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", "dev": true, "license": "MIT", "engines": { @@ -1152,13 +1234,13 @@ } }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", "dev": true, "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1168,35 +1250,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], @@ -1208,9 +1293,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], @@ -1222,13 +1307,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1236,13 +1324,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1250,13 +1341,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1264,13 +1358,16 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1278,9 +1375,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], @@ -1292,9 +1389,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], @@ -1316,14 +1413,14 @@ } }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "dev": true, "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1366,13 +1463,13 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "dev": true, "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -1441,26 +1538,26 @@ } }, "node_modules/vite-plugin-static-copy": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-3.2.0.tgz", - "integrity": "sha512-g2k9z8B/1Bx7D4wnFjPLx9dyYGrqWMLTpwTtPHhcU+ElNZP2O4+4OsyaficiDClus0dzVhdGvoGFYMJxoXZ12Q==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-4.1.1.tgz", + "integrity": "sha512-GrlA8YklrAfSyxJ4M3fdQLOo9oNkp56IM9FYgX/WtEgeIFkPwhu4wzpufBCIuNKCa6Fn77FkRdYxkHqV0FwjAw==", "dev": true, "license": "MIT", "dependencies": { "chokidar": "^3.6.0", "p-map": "^7.0.4", "picocolors": "^1.1.1", - "tinyglobby": "^0.2.15" + "tinyglobby": "^0.2.17" }, "engines": { - "node": "^18.0.0 || >=20.0.0" + "node": "^22.0.0 || >=24.0.0" }, "funding": { "type": "github", "url": "https://github.com/sponsors/sapphi-red" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0" + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" } } } diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index 772c03e3718..90bbd31116a 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -9,12 +9,12 @@ "start": "vite preview" }, "dependencies": { - "@ionic/core": "8.8.1", - "ionicons": "8.0.13" + "@ionic/core": "8.8.18", + "ionicons": "8.1.0" }, "devDependencies": { "typescript": "~5.9.0", "vite": "^7.0.0", - "vite-plugin-static-copy": "^3.1.0" + "vite-plugin-static-copy": "^4.0.0" } } diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 72460192c05..926d8ec9b09 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "8.8.1", - "@ionic/react-router": "8.8.1", + "@ionic/react": "8.8.18", + "@ionic/react-router": "8.8.18", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -23,16 +23,16 @@ "react-router-dom": "^5.2.0", "typescript": "~5.9.0", "vite": "^7.0.0", - "web-vitals": "^5.0.0" + "web-vitals": "^6.0.0" } }, "node_modules/@babel/code-frame": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.0.tgz", - "integrity": "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.29.7.tgz", + "integrity": "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.28.5", + "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" }, @@ -41,29 +41,29 @@ } }, "node_modules/@babel/compat-data": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.0.tgz", - "integrity": "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.29.7.tgz", + "integrity": "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/core": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz", - "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.7.tgz", + "integrity": "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-compilation-targets": "^7.28.6", - "@babel/helper-module-transforms": "^7.28.6", - "@babel/helpers": "^7.28.6", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/traverse": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", @@ -80,13 +80,13 @@ } }, "node_modules/@babel/generator": { - "version": "7.29.1", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.1.tgz", - "integrity": "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.7.tgz", + "integrity": "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" @@ -96,13 +96,13 @@ } }, "node_modules/@babel/helper-compilation-targets": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.28.6.tgz", - "integrity": "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.29.7.tgz", + "integrity": "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g==", "license": "MIT", "dependencies": { - "@babel/compat-data": "^7.28.6", - "@babel/helper-validator-option": "^7.27.1", + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" @@ -112,36 +112,36 @@ } }, "node_modules/@babel/helper-globals": { - "version": "7.28.0", - "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz", - "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.29.7.tgz", + "integrity": "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-imports": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.28.6.tgz", - "integrity": "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.29.7.tgz", + "integrity": "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g==", "license": "MIT", "dependencies": { - "@babel/traverse": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-module-transforms": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.28.6.tgz", - "integrity": "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.29.7.tgz", + "integrity": "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg==", "license": "MIT", "dependencies": { - "@babel/helper-module-imports": "^7.28.6", - "@babel/helper-validator-identifier": "^7.28.5", - "@babel/traverse": "^7.28.6" + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -151,61 +151,61 @@ } }, "node_modules/@babel/helper-plugin-utils": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.27.1.tgz", - "integrity": "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.29.7.tgz", + "integrity": "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-option": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.27.1.tgz", - "integrity": "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.29.7.tgz", + "integrity": "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helpers": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.28.6.tgz", - "integrity": "sha512-xOBvwq86HHdB7WUDTfKfT/Vuxh7gElQ+Sfti2Cy6yIWNW05P8iUslOVcZ4/sKbE+/jQaukQAdz/gf3724kYdqw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.29.7.tgz", + "integrity": "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg==", "license": "MIT", "dependencies": { - "@babel/template": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz", - "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.7.tgz", + "integrity": "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.29.7" }, "bin": { "parser": "bin/babel-parser.js" @@ -215,12 +215,12 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-self": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.27.1.tgz", - "integrity": "sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.29.7.tgz", + "integrity": "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw==", "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.27.1" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -230,12 +230,12 @@ } }, "node_modules/@babel/plugin-transform-react-jsx-source": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.27.1.tgz", - "integrity": "sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.29.7.tgz", + "integrity": "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q==", "license": "MIT", "dependencies": { - "@babel/helper-plugin-utils": "^7.27.1" + "@babel/helper-plugin-utils": "^7.29.7" }, "engines": { "node": ">=6.9.0" @@ -245,40 +245,40 @@ } }, "node_modules/@babel/runtime": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz", - "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz", + "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/template": { - "version": "7.28.6", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.28.6.tgz", - "integrity": "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.29.7.tgz", + "integrity": "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.28.6", - "@babel/parser": "^7.28.6", - "@babel/types": "^7.28.6" + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/traverse": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.0.tgz", - "integrity": "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.29.7.tgz", + "integrity": "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.29.0", - "@babel/generator": "^7.29.0", - "@babel/helper-globals": "^7.28.0", - "@babel/parser": "^7.29.0", - "@babel/template": "^7.28.6", - "@babel/types": "^7.29.0", + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", "debug": "^4.3.1" }, "engines": { @@ -286,22 +286,22 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.7.tgz", + "integrity": "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], @@ -315,9 +315,9 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], @@ -331,9 +331,9 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], @@ -347,9 +347,9 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], @@ -363,9 +363,9 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], @@ -379,9 +379,9 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], @@ -395,9 +395,9 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], @@ -411,9 +411,9 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], @@ -427,9 +427,9 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], @@ -443,9 +443,9 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], @@ -459,9 +459,9 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], @@ -475,9 +475,9 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], @@ -491,9 +491,9 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], @@ -507,9 +507,9 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], @@ -523,9 +523,9 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], @@ -539,9 +539,9 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], @@ -555,9 +555,9 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], @@ -571,9 +571,9 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], @@ -587,9 +587,9 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], @@ -603,9 +603,9 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], @@ -619,9 +619,9 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], @@ -635,9 +635,9 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], @@ -651,9 +651,9 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], @@ -667,9 +667,9 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], @@ -683,9 +683,9 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], @@ -699,9 +699,9 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], @@ -715,12 +715,12 @@ } }, "node_modules/@ionic/core": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz", - "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz", + "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==", "license": "MIT", "dependencies": { - "@stencil/core": "4.43.0", + "@stencil/core": "4.43.5", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -729,12 +729,12 @@ } }, "node_modules/@ionic/react": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.1.tgz", - "integrity": "sha512-KuDWk2E0HA8EA5ioDHxGF+OD/REG2PYb7SorMgVHWRWdPYMIL9PwNXrMBfWAd6PyYLLHd2fw7UoiuT2K8SbrzQ==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.8.18.tgz", + "integrity": "sha512-Hp7PuvuzqREzyWTDFYykgDLDE4RqE932+YX/gr0O3N/EfrPBAeuDeVZqPh2NLGQvliDcU1mwItGxWy/H0PK+Qg==", "license": "MIT", "dependencies": { - "@ionic/core": "8.8.1", + "@ionic/core": "8.8.18", "ionicons": "^8.0.13", "tslib": "*" }, @@ -744,12 +744,12 @@ } }, "node_modules/@ionic/react-router": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.8.1.tgz", - "integrity": "sha512-cHN4AqFR6NQJEW4CN7n1iqLRJItYaBRXitmKO2j30QTq+xaselvo39hRQULuTGiERMalnnsS1d5g11v3Xwz/vg==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.8.18.tgz", + "integrity": "sha512-Io75A7wDKT4Jbk0hDK/6Nn+Q+gncPY9a5GoTkhnebXvvjNT9fOaCRaHIVfc53uSii+wr3d3OcNWxY531xLeBAA==", "license": "MIT", "dependencies": { - "@ionic/react": "8.8.1", + "@ionic/react": "8.8.18", "tslib": "*" }, "peerDependencies": { @@ -811,9 +811,9 @@ "license": "MIT" }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], @@ -824,9 +824,9 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], @@ -837,9 +837,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -850,9 +850,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -863,9 +863,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], @@ -876,9 +876,9 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], @@ -889,12 +889,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -902,12 +905,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -915,12 +921,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -928,12 +937,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -941,12 +953,31 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", "cpu": [ "loong64" ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", + "cpu": [ + "loong64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -954,12 +985,31 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", + "cpu": [ + "ppc64" + ], + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", "cpu": [ "ppc64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -967,12 +1017,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -980,12 +1033,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -993,12 +1049,15 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1006,12 +1065,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1019,22 +1081,38 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], @@ -1045,9 +1123,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -1058,9 +1136,9 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], @@ -1071,9 +1149,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], @@ -1084,9 +1162,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -1097,9 +1175,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.43.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", - "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -1109,14 +1187,14 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/babel__core": { @@ -1161,9 +1239,9 @@ } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", "license": "MIT" }, "node_modules/@types/history": { @@ -1173,27 +1251,27 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.11.0", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.11.0.tgz", - "integrity": "sha512-fPxQqz4VTgPI/IQ+lj9r0h+fDR66bzoeMGHp8ASee+32OSGIkeASsoZuJixsQoVef1QJbeubcPBxKk22QVoWdw==", + "version": "24.13.3", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz", + "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==", "license": "MIT", "dependencies": { - "undici-types": "~7.16.0" + "undici-types": "~7.18.0" } }, "node_modules/@types/react": { - "version": "19.2.14", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz", - "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==", + "version": "19.2.18", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", + "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", "license": "MIT", "dependencies": { "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "19.2.3", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz", - "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", + "version": "19.2.4", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.4.tgz", + "integrity": "sha512-Bsc+QHgp+P/F02XDzNCY9jnZNCUuLki36KT7VKrTXXLdHf+vHMNZnW1rVu5DNW/rCK+fya3DATySbLM4yhtKUw==", "license": "MIT", "peerDependencies": { "@types/react": "^19.2.0" @@ -1221,9 +1299,9 @@ } }, "node_modules/@vitejs/plugin-react": { - "version": "5.1.4", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.4.tgz", - "integrity": "sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.2.0.tgz", + "integrity": "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw==", "license": "MIT", "dependencies": { "@babel/core": "^7.29.0", @@ -1237,22 +1315,25 @@ "node": "^20.19.0 || >=22.12.0" }, "peerDependencies": { - "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "node_modules/baseline-browser-mapping": { - "version": "2.9.19", - "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz", - "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==", + "version": "2.11.6", + "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.11.6.tgz", + "integrity": "sha512-69D/imtToCsIcAl8WBS2YaRwA4jO/j0HhU+hELqMEu9f54MoUtI6+XH5mrKU8rEFNEk/Ui1I2MK4/JkWacclGw==", "license": "Apache-2.0", "bin": { - "baseline-browser-mapping": "dist/cli.js" + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" } }, "node_modules/browserslist": { - "version": "4.28.1", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz", - "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==", + "version": "4.28.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.7.tgz", + "integrity": "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw==", "funding": [ { "type": "opencollective", @@ -1269,11 +1350,11 @@ ], "license": "MIT", "dependencies": { - "baseline-browser-mapping": "^2.9.0", - "caniuse-lite": "^1.0.30001759", - "electron-to-chromium": "^1.5.263", - "node-releases": "^2.0.27", - "update-browserslist-db": "^1.2.0" + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" @@ -1283,9 +1364,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001768", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001768.tgz", - "integrity": "sha512-qY3aDRZC5nWPgHUgIB84WL+nySuo19wk0VJpp/XI9T34lrvkyhRvNVOFJOp2kxClQhiFBu+TaUSudf6oa3vkSA==", + "version": "1.0.30001806", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001806.tgz", + "integrity": "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw==", "funding": [ { "type": "opencollective", @@ -1341,15 +1422,15 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.5.286", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.286.tgz", - "integrity": "sha512-9tfDXhJ4RKFNerfjdCcZfufu49vg620741MNs26a9+bhLThdB+plgMeou98CAaHu/WATj2iHOOHTp1hWtABj2A==", + "version": "1.5.397", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.397.tgz", + "integrity": "sha512-khGTy9U9x02KEtsKM8vx5A62BsRmcOsIgDpWr1ImE32Ax8GxHGPHZf+Eu9H8zOOyHJnB0jTbseyTHbq2XCT8yw==", "license": "ISC" }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", "hasInstallScript": true, "license": "MIT", "bin": { @@ -1359,32 +1440,32 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/escalade": { @@ -1508,6 +1589,7 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", + "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -1531,9 +1613,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "funding": [ { "type": "github", @@ -1549,10 +1631,13 @@ } }, "node_modules/node-releases": { - "version": "2.0.27", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz", - "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==", - "license": "MIT" + "version": "2.0.51", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.51.tgz", + "integrity": "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ==", + "license": "MIT", + "engines": { + "node": ">=18" + } }, "node_modules/object-assign": { "version": "4.1.1", @@ -1579,9 +1664,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "license": "MIT", "engines": { "node": ">=12" @@ -1591,9 +1676,9 @@ } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "funding": [ { "type": "opencollective", @@ -1610,7 +1695,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1630,24 +1715,24 @@ } }, "node_modules/react": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", - "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", + "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.4", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", - "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", + "version": "19.2.8", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", + "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", "license": "MIT", "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { - "react": "^19.2.4" + "react": "^19.2.8" } }, "node_modules/react-is": { @@ -1710,12 +1795,12 @@ "license": "MIT" }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1725,35 +1810,38 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], @@ -1764,9 +1852,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], @@ -1777,12 +1865,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1790,12 +1881,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1803,12 +1897,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1816,12 +1913,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1829,9 +1929,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], @@ -1842,9 +1942,9 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], @@ -1857,7 +1957,8 @@ "node_modules/scheduler": { "version": "0.27.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", - "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==" + "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "license": "MIT" }, "node_modules/semver": { "version": "6.3.1", @@ -1890,13 +1991,13 @@ "license": "MIT" }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1925,9 +2026,9 @@ } }, "node_modules/undici-types": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", - "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", + "version": "7.18.2", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz", + "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==", "license": "MIT" }, "node_modules/update-browserslist-db": { @@ -1967,12 +2068,12 @@ "license": "MIT" }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -2041,9 +2142,9 @@ } }, "node_modules/web-vitals": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz", - "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-6.1.0.tgz", + "integrity": "sha512-ZNoJ/MbU6aaR2WjKrFVUvy5WQx+G96YvXQFSsmKTz3A/0VlAFywjUcxl00hc/S6wef2stfgQ4yWYIJCWCNudkA==", "license": "Apache-2.0" }, "node_modules/yallist": { diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index d076c0383ed..5c74fe7daa9 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.8.1", - "@ionic/react-router": "8.8.1", + "@ionic/react": "8.8.18", + "@ionic/react-router": "8.8.18", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -18,7 +18,7 @@ "react-router-dom": "^5.2.0", "typescript": "~5.9.0", "vite": "^7.0.0", - "web-vitals": "^5.0.0" + "web-vitals": "^6.0.0" }, "scripts": { "start": "vite", diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index 1f74dfae2cb..f5c3aaeb34a 100644 --- a/static/code/stackblitz/v8/vue/package-lock.json +++ b/static/code/stackblitz/v8/vue/package-lock.json @@ -8,10 +8,10 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "8.8.1", - "@ionic/vue-router": "8.8.1", + "@ionic/vue": "8.8.18", + "@ionic/vue-router": "8.8.18", "vue": "^3.2.25", - "vue-router": "5.0.3" + "vue-router": "5.2.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.0", @@ -21,46 +21,93 @@ } }, "node_modules/@babel/generator": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.29.0.tgz", - "integrity": "sha512-vSH118/wwM/pLR38g/Sgk05sNtro6TlTJKuiMXDaZqPUfjTFcudpCOt00IhOfj+1BFAX+UFAlzCU+6WXr3GLFQ==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-8.0.0.tgz", + "integrity": "sha512-NT9NrVwJsbSV6Y2FSstWa71EETOnzrjkL5/wX3D2mYHtKM+qvqB1DvR4D0Setb/gDBsHzRICifwEWMO8CnTF6g==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@babel/types": "^7.29.0", + "@babel/parser": "^8.0.0", + "@babel/types": "^8.0.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", + "@types/jsesc": "^2.5.0", "jsesc": "^3.0.2" }, "engines": { - "node": ">=6.9.0" + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-8.0.0.tgz", + "integrity": "sha512-6mJgmFFFIIO82vvoLt9XtRC7/TkzXfts1t/SpRX4IHSzMgqoPYCWesVu1udUPUWioAE/2fcG6WuI8zrkE1gwrg==", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-8.0.4.tgz", + "integrity": "sha512-4wFaiLd0bVo4cIoTXI3zKI038NIWE/cr3jvBjejOVYVxV/m8Ltav1USiGzG1fmS5J2RhgEOgXNNK46cRPnRsrg==", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/parser": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-8.0.4.tgz", + "integrity": "sha512-srpptsAkEbbNIC/q8nT7o+m6CQe8CJUTV/t7MYc9NnWlgYVtHOb7JH6SorxMhN0kuRJjVqXbKClG6xSbPtzz+g==", + "license": "MIT", + "dependencies": { + "@babel/types": "^8.0.4" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/types": { + "version": "8.0.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-8.0.4.tgz", + "integrity": "sha512-eY+Yn3dCqTGmyiq2QRU66lA5FL8lqqqvecHt0fF3uHONIa7ToYsaCiWV8lOKqAs0Rb2SjixiKFROngnulPtt2g==", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^8.0.0", + "@babel/helper-validator-identifier": "^8.0.4" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" } }, "node_modules/@babel/helper-string-parser": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", - "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.29.7.tgz", + "integrity": "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.28.5", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", - "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", + "version": "7.29.7", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.29.7.tgz", + "integrity": "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz", - "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.8.tgz", + "integrity": "sha512-E8lTAYNB1KW+FH+VGJuZM1ioAx2E6oVlvQFRrf5P8ZZmsiJXYAD9vTFV7yyEURNzgh1dFqMZuO6tUwcARbqFCA==", "license": "MIT", "dependencies": { - "@babel/types": "^7.29.0" + "@babel/types": "^7.29.8" }, "bin": { "parser": "bin/babel-parser.js" @@ -70,26 +117,25 @@ } }, "node_modules/@babel/types": { - "version": "7.29.0", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.0.tgz", - "integrity": "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A==", + "version": "7.29.8", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.29.8.tgz", + "integrity": "sha512-Vj1jF3cPfxg7OAfoI7QnVKLoILlm2JF9pnVHrX8qx7AHMiYWT+NDAA7jChlNgRS4WTLc/fD1lXLmPixluj+3Gg==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.28.5" + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@esbuild/aix-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.2.tgz", - "integrity": "sha512-GZMB+a0mOMZs4MpDbj8RJp4cw+w1WV5NYD6xzgvzUJ5Ek2jerwfO2eADyI6ExDSUED+1X8aMbegahsJi+8mgpw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.1.tgz", + "integrity": "sha512-Svl7tq8k/08+p6CXPpRjQ1fKX+1odH/BQbb48fV6fj3CWHhsoIOoY87w1oHXm0qEpkIK3ZfVgp0hed3XBXzXMQ==", "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -100,13 +146,12 @@ } }, "node_modules/@esbuild/android-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.2.tgz", - "integrity": "sha512-DVNI8jlPa7Ujbr1yjU2PfUSRtAUZPG9I1RwW4F4xFB1Imiu2on0ADiI/c3td+KmDtVKNbi+nffGDQMfcIMkwIA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.28.1.tgz", + "integrity": "sha512-0k2F129Xdio1TdJfzJ8sy1Q47vUD2NnwdhiAf7drUN1EBTfPf4hsFCtmMgu/6m8JSzsBrlmVjudMBQqOfG8usQ==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -117,13 +162,12 @@ } }, "node_modules/@esbuild/android-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.2.tgz", - "integrity": "sha512-pvz8ZZ7ot/RBphf8fv60ljmaoydPU12VuXHImtAs0XhLLw+EXBi2BLe3OYSBslR4rryHvweW5gmkKFwTiFy6KA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.28.1.tgz", + "integrity": "sha512-34EGEbCIAgosYz6goLcopX6Mo7NyGv9tfwEM2/7Ce2VcVRk568iSvniGWcUXIy7wEDR1wzolcxcriFVrWYcwBg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -134,13 +178,12 @@ } }, "node_modules/@esbuild/android-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.2.tgz", - "integrity": "sha512-z8Ank4Byh4TJJOh4wpz8g2vDy75zFL0TlZlkUkEwYXuPSgX8yzep596n6mT7905kA9uHZsf/o2OJZubl2l3M7A==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.28.1.tgz", + "integrity": "sha512-dbwY7ltSMDWsRatcRpCnES4F+im88OCUgGZjy52shC7GqHRE/cYlxNbB4Z4UpJswpcc4Qxd2oE/ufM0p61IKng==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -151,13 +194,12 @@ } }, "node_modules/@esbuild/darwin-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.2.tgz", - "integrity": "sha512-davCD2Zc80nzDVRwXTcQP/28fiJbcOwvdolL0sOiOsbwBa72kegmVU0Wrh1MYrbuCL98Omp5dVhQFWRKR2ZAlg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.28.1.tgz", + "integrity": "sha512-TZbWkQY7kvTAXbXUT7uVACR5cMHsDiSz9z7ZKAX/RTq/WJEk3QyRr0wZpNhBDX+/0CtdqUIJlOiodQcta6tY3Q==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -168,13 +210,12 @@ } }, "node_modules/@esbuild/darwin-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.2.tgz", - "integrity": "sha512-ZxtijOmlQCBWGwbVmwOF/UCzuGIbUkqB1faQRf5akQmxRJ1ujusWsb3CVfk/9iZKr2L5SMU5wPBi1UWbvL+VQA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.28.1.tgz", + "integrity": "sha512-zfdzgK9ACBNZLI/CyHTOx81SyNbM6YXn7rxSgX97VjyiPl9W1i4Ka4fgKECEoFCKGpvBj5qArWIGgQjOwkgskQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -185,13 +226,12 @@ } }, "node_modules/@esbuild/freebsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.2.tgz", - "integrity": "sha512-lS/9CN+rgqQ9czogxlMcBMGd+l8Q3Nj1MFQwBZJyoEKI50XGxwuzznYdwcav6lpOGv5BqaZXqvBSiB/kJ5op+g==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.28.1.tgz", + "integrity": "sha512-wG2EA8ENdEI0qhkSZMjfqrdY+ziCYCPMmtZjjIwOmXFjmyzEHn+UUxk5of+SYsjtfs3VpnlC7QLzSI5hY/rOAw==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -202,13 +242,12 @@ } }, "node_modules/@esbuild/freebsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.2.tgz", - "integrity": "sha512-tAfqtNYb4YgPnJlEFu4c212HYjQWSO/w/h/lQaBK7RbwGIkBOuNKQI9tqWzx7Wtp7bTPaGC6MJvWI608P3wXYA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.28.1.tgz", + "integrity": "sha512-i7dZ9vQgnvSCzi/rYCXNgtF/U+eKZNJBzu3eTQbRgHnM7tNSizLOkRFAl3qzVc/Op/u5YkHHa4pf/3DOYHthLQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -219,13 +258,12 @@ } }, "node_modules/@esbuild/linux-arm": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.2.tgz", - "integrity": "sha512-vWfq4GaIMP9AIe4yj1ZUW18RDhx6EPQKjwe7n8BbIecFtCQG4CfHGaHuh7fdfq+y3LIA2vGS/o9ZBGVxIDi9hw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.28.1.tgz", + "integrity": "sha512-qVXBOHQS+d5Y722GwJzJUtOLlX7km3CraOaGormF1pDtPd2C/l1SHRPgjLunLGe51Sh5YYWKMFDyV4SxgMQYTQ==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -236,13 +274,12 @@ } }, "node_modules/@esbuild/linux-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.2.tgz", - "integrity": "sha512-hYxN8pr66NsCCiRFkHUAsxylNOcAQaxSSkHMMjcpx0si13t1LHFphxJZUiGwojB1a/Hd5OiPIqDdXONia6bhTw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.28.1.tgz", + "integrity": "sha512-yHs+0uc8+nvEAfAfxrWQKK5peSNzBc4PegcMO0EJ2hT71uA7vB8Ihg2e77R2P7SG5uYjPbHlLLmve4LLLRCf0g==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -253,13 +290,12 @@ } }, "node_modules/@esbuild/linux-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.2.tgz", - "integrity": "sha512-MJt5BRRSScPDwG2hLelYhAAKh9imjHK5+NE/tvnRLbIqUWa+0E9N4WNMjmp/kXXPHZGqPLxggwVhz7QP8CTR8w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.28.1.tgz", + "integrity": "sha512-d1z4ZuP0ajrfz/FhGT4vv278rX8KnPPJx8i5+AtK7TYbx9Le9F1hyzurZpkEyjkGa9dUGhQow4C1NmeGvqxN2w==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -270,13 +306,12 @@ } }, "node_modules/@esbuild/linux-loong64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.2.tgz", - "integrity": "sha512-lugyF1atnAT463aO6KPshVCJK5NgRnU4yb3FUumyVz+cGvZbontBgzeGFO1nF+dPueHD367a2ZXe1NtUkAjOtg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.28.1.tgz", + "integrity": "sha512-M5sRjUVZrkm1OAPR3dlOYzNmN+loZKGVi1VUQGrwuqLcbR6qeAz+famMhjASeH3YVKvZz+zT1jlh/keC3Rj/lg==", "cpu": [ "loong64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -287,13 +322,12 @@ } }, "node_modules/@esbuild/linux-mips64el": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.2.tgz", - "integrity": "sha512-nlP2I6ArEBewvJ2gjrrkESEZkB5mIoaTswuqNFRv/WYd+ATtUpe9Y09RnJvgvdag7he0OWgEZWhviS1OTOKixw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.28.1.tgz", + "integrity": "sha512-mRObBZeHh2OxcBFPWE/FjylkRgZdYuiTR3vaTozquCGOH14iP9oN4x4Ge81CoIDYQrXmIxpFumJBu5MtZpnQJQ==", "cpu": [ "mips64el" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -304,13 +338,12 @@ } }, "node_modules/@esbuild/linux-ppc64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.2.tgz", - "integrity": "sha512-C92gnpey7tUQONqg1n6dKVbx3vphKtTHJaNG2Ok9lGwbZil6DrfyecMsp9CrmXGQJmZ7iiVXvvZH6Ml5hL6XdQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.28.1.tgz", + "integrity": "sha512-slScBsMAb3GFDcdrCgLwZtPYRoH2H/youv10QiZyRjmsP48fznoveWytSgCI/R0ZcUgpc0ZhIUEx6LHts8yrfQ==", "cpu": [ "ppc64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -321,13 +354,12 @@ } }, "node_modules/@esbuild/linux-riscv64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.2.tgz", - "integrity": "sha512-B5BOmojNtUyN8AXlK0QJyvjEZkWwy/FKvakkTDCziX95AowLZKR6aCDhG7LeF7uMCXEJqwa8Bejz5LTPYm8AvA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.28.1.tgz", + "integrity": "sha512-kw0owk1o0GFETUJyW0jc0G4Yzs0BHZn0JDZ8JRT088vjJYX777BAs1fDGxAC+q831qOs2DTC96mNsG2opdfyyQ==", "cpu": [ "riscv64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -338,13 +370,12 @@ } }, "node_modules/@esbuild/linux-s390x": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.2.tgz", - "integrity": "sha512-p4bm9+wsPwup5Z8f4EpfN63qNagQ47Ua2znaqGH6bqLlmJ4bx97Y9JdqxgGZ6Y8xVTixUnEkoKSHcpRlDnNr5w==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.28.1.tgz", + "integrity": "sha512-/lAIjX8aYFRByhh6L5rYtPEDRqa9de/4V/juOXcta5frjvzXO4/sqEtyytse0g3zZFuWu5cDN0MkLz2qRDD2Ag==", "cpu": [ "s390x" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -355,13 +386,12 @@ } }, "node_modules/@esbuild/linux-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.2.tgz", - "integrity": "sha512-uwp2Tip5aPmH+NRUwTcfLb+W32WXjpFejTIOWZFw/v7/KnpCDKG66u4DLcurQpiYTiYwQ9B7KOeMJvLCu/OvbA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.28.1.tgz", + "integrity": "sha512-u/anNYF2mmVOEDwLtnQ1wOr3EZ9sTNGLWrsYGYwHWzGA3Si84IOkHXlbWTD1NB+9/1lcnweYKO54uhxZydNzfA==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -372,13 +402,12 @@ } }, "node_modules/@esbuild/netbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.2.tgz", - "integrity": "sha512-Kj6DiBlwXrPsCRDeRvGAUb/LNrBASrfqAIok+xB0LxK8CHqxZ037viF13ugfsIpePH93mX7xfJp97cyDuTZ3cw==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.28.1.tgz", + "integrity": "sha512-oks0DYbLwWMmaakTsCb+zL4E+aHRVLom9IJZOAthMQEPiQmydXHkziYEsGYRx0uNV/IjEKGAV941JzH02pflqw==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -389,13 +418,12 @@ } }, "node_modules/@esbuild/netbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.2.tgz", - "integrity": "sha512-HwGDZ0VLVBY3Y+Nw0JexZy9o/nUAWq9MlV7cahpaXKW6TOzfVno3y3/M8Ga8u8Yr7GldLOov27xiCnqRZf0tCA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.28.1.tgz", + "integrity": "sha512-aeL6lAnN89Hz43Mlh1G8ARasbuoYvSITDEx0tHh5b7jJnHcssqgjy9Yx430GDpmCa6OyrKoS0aNRjKundRizGg==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -406,13 +434,12 @@ } }, "node_modules/@esbuild/openbsd-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.2.tgz", - "integrity": "sha512-DNIHH2BPQ5551A7oSHD0CKbwIA/Ox7+78/AWkbS5QoRzaqlev2uFayfSxq68EkonB+IKjiuxBFoV8ESJy8bOHA==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.28.1.tgz", + "integrity": "sha512-MEFJe5C3R8pwXdZ5Y21oo6m7ePiS0d9pWucn99O/wvyJZChoIQKrQDxKrGeW8F5+T0okTHesAmDeiHDTIq0V/Q==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -423,13 +450,12 @@ } }, "node_modules/@esbuild/openbsd-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.2.tgz", - "integrity": "sha512-/it7w9Nb7+0KFIzjalNJVR5bOzA9Vay+yIPLVHfIQYG/j+j9VTH84aNB8ExGKPU4AzfaEvN9/V4HV+F+vo8OEg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.28.1.tgz", + "integrity": "sha512-i/ZLIOafE0Z8cI/XANJAixoJL/uRAoS2xOA3rb0xN+KK0K177cMAsQYkzHtBrtMXAKuAc7HGgcWiZ/sRC1Nxgw==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -440,13 +466,12 @@ } }, "node_modules/@esbuild/openharmony-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.2.tgz", - "integrity": "sha512-LRBbCmiU51IXfeXk59csuX/aSaToeG7w48nMwA6049Y4J4+VbWALAuXcs+qcD04rHDuSCSRKdmY63sruDS5qag==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.28.1.tgz", + "integrity": "sha512-ge+Z7EXFNt2BO1oAMsVpiQ8EwndV9i1xXerAeTIK7AtPs3bKFXQM7nlRxDSIUIMeueR1CNXxqztLzdNeReKBJg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -457,13 +482,12 @@ } }, "node_modules/@esbuild/sunos-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.2.tgz", - "integrity": "sha512-kMtx1yqJHTmqaqHPAzKCAkDaKsffmXkPHThSfRwZGyuqyIeBvf08KSsYXl+abf5HDAPMJIPnbBfXvP2ZC2TfHg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.28.1.tgz", + "integrity": "sha512-BEjgtECkL3vY+SaSQ6nzVfiALUeFxpawyp8Jmf5PtYhf1Ug40N1h/hxlhts+f1FvSvarEigdxS3BlSMI2PJLcQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -474,13 +498,12 @@ } }, "node_modules/@esbuild/win32-arm64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.2.tgz", - "integrity": "sha512-Yaf78O/B3Kkh+nKABUF++bvJv5Ijoy9AN1ww904rOXZFLWVc5OLOfL56W+C8F9xn5JQZa3UX6m+IktJnIb1Jjg==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.28.1.tgz", + "integrity": "sha512-lCv9eK/H6ZJWbE7bh2nw54CZ9M2nupBxJcTsdk/QQnWkdSjKGuxmmH8/GWrlT1eMmZfn4dGcCjRte397WqfQXA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -491,13 +514,12 @@ } }, "node_modules/@esbuild/win32-ia32": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.2.tgz", - "integrity": "sha512-Iuws0kxo4yusk7sw70Xa2E2imZU5HoixzxfGCdxwBdhiDgt9vX9VUCBhqcwY7/uh//78A1hMkkROMJq9l27oLQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.28.1.tgz", + "integrity": "sha512-zvb/mB2bSCoJOpoCBgYKKpX6YM6mJBlBUVUtVj41DlZJVEB6/0CKlRYxP5wWl1C1ILiCoAU5wZZ4q1P3qeS6Eg==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -508,13 +530,12 @@ } }, "node_modules/@esbuild/win32-x64": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.2.tgz", - "integrity": "sha512-sRdU18mcKf7F+YgheI/zGf5alZatMUTKj/jNS6l744f9u3WFu4v7twcUI9vu4mknF4Y9aDlblIie0IM+5xxaqQ==", + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.28.1.tgz", + "integrity": "sha512-bm4Mowrv+GXMlpWX++EcXw/iLyd1o3+bJkC2DkWXYVvgZCqD/bSj9ctZeAMC3cIxgjRVR2Dufaiu4YPxr5gW1A==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -525,12 +546,12 @@ } }, "node_modules/@ionic/core": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.1.tgz", - "integrity": "sha512-ksOUHyOEqoyUIVWcwCNSFZVGwNfP1DKrUVeN/Cdk/Xl9Rdd/5MLHGsrOQpWQfoCf3Csdnw+KHHPrXz/2fzMkMA==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.8.18.tgz", + "integrity": "sha512-QRFqi6gMSTk89FMjtoDx3p6e2dD7mYxqYzS0+Hl+yjxnoWoNFluWKM9rnGEEkdvpY7bF1pt6CI5IwMt+vjYQWg==", "license": "MIT", "dependencies": { - "@stencil/core": "4.43.0", + "@stencil/core": "4.43.5", "ionicons": "^8.0.13", "tslib": "^2.1.0" }, @@ -539,23 +560,45 @@ } }, "node_modules/@ionic/vue": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.1.tgz", - "integrity": "sha512-tdNErYs6WrNiDJps1nRRY4UeyLffr2hbdkpawrMYFZxzzMd5yuExWsRAofrk5Uy6rSFObSZrfg7AgqyudDcJpQ==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.8.18.tgz", + "integrity": "sha512-4Cqp9L+nubSK5PnG8eKENfdnjFL/ze0Et7W87rQYTQzAVxiNqK9vmdVzWK8BErP1uSV+lbXsiQ8SrzQl6mlNiQ==", "license": "MIT", "dependencies": { - "@ionic/core": "8.8.1", + "@ionic/core": "8.8.18", "@stencil/vue-output-target": "0.10.7", "ionicons": "^8.0.13" } }, "node_modules/@ionic/vue-router": { - "version": "8.8.1", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.8.1.tgz", - "integrity": "sha512-ZtG5VNkUa2bWk9W2Ri98s5E7DuTxx43TMWhbyjgiDqk+YdkjDvwKw15rAkIgneoOUtiVQZYIdeyKuEJMcGSW9g==", + "version": "8.8.18", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.8.18.tgz", + "integrity": "sha512-GBP16olu3qKnWegaTO1zmzufaQbuy6JrED2RzSETshf2oqxag72U5EJJHzZRSJXMCx/TL+ZHjYT6urD0KtEbhA==", "license": "MIT", "dependencies": { - "@ionic/vue": "8.8.1" + "@ionic/vue": "8.8.18" + } + }, + "node_modules/@ionic/vue/node_modules/@stencil/vue-output-target": { + "version": "0.10.7", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.7.tgz", + "integrity": "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew==", + "license": "MIT", + "peerDependencies": { + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", + "vue": "^3.4.38", + "vue-router": "^4.5.0" + }, + "peerDependenciesMeta": { + "@stencil/core": { + "optional": true + }, + "vue": { + "optional": false + }, + "vue-router": { + "optional": true + } } }, "node_modules/@jridgewell/gen-mapping": { @@ -604,20 +647,19 @@ } }, "node_modules/@rolldown/pluginutils": { - "version": "1.0.0-rc.2", - "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.2.tgz", - "integrity": "sha512-izyXV/v+cHiRfozX62W9htOAvwMo4/bXKDrQ+vom1L1qRuexPock/7VZDAhnpHCLNejd3NJ6hiab+tO0D44Rgw==", + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.1.tgz", + "integrity": "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==", "dev": true, "license": "MIT" }, "node_modules/@rollup/rollup-android-arm-eabi": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.52.4.tgz", - "integrity": "sha512-BTm2qKNnWIQ5auf4deoetINJm2JzvihvGb9R6K/ETwKLql/Bb3Eg2H1FBp1gUb4YGbydMA3jcmQTR73q7J+GAA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.62.3.tgz", + "integrity": "sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==", "cpu": [ "arm" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -625,13 +667,12 @@ ] }, "node_modules/@rollup/rollup-android-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.52.4.tgz", - "integrity": "sha512-P9LDQiC5vpgGFgz7GSM6dKPCiqR3XYN1WwJKA4/BUVDjHpYsf3iBEmVz62uyq20NGYbiGPR5cNHI7T1HqxNs2w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.62.3.tgz", + "integrity": "sha512-3YjElDdWN+qXAFbJ/CzPV+0wspLqh54k/I6GfdYtEJRqg7buSgc1yPM3B+93j1M4neobtkATHZTmxK2AMVGfnA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -639,9 +680,9 @@ ] }, "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.9.tgz", - "integrity": "sha512-0CY3/K54slrzLDjOA7TOjN1NuLKERBgk9nY5V34mhmuu673YNb+7ghaDUs6N0ujXR7fz5XaS5Aa6d2TNxZd0OQ==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.44.0.tgz", + "integrity": "sha512-VGF3wy0Eq1gcEIkSCr8Ke03CWT+Pm2yveKLaDvq51pPpZza3JX/ClxXOCmTYYq3us5MvEuNRTaeyFThCKRQhOA==", "cpu": [ "arm64" ], @@ -652,9 +693,9 @@ ] }, "node_modules/@rollup/rollup-darwin-x64": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.9.tgz", - "integrity": "sha512-eOojSEAi/acnsJVYRxnMkPFqcxSMFfrw7r2iD9Q32SGkb/Q9FpUY1UlAu1DH9T7j++gZ0lHjnm4OyH2vCI7l7Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.44.0.tgz", + "integrity": "sha512-fBkyrDhwquRvrTxSGH/qqt3/T0w5Rg0L7ZIDypvBPc1/gzjJle6acCpZ36blwuwcKD/u6oCE/sRWlUAcxLWQbQ==", "cpu": [ "x64" ], @@ -665,13 +706,12 @@ ] }, "node_modules/@rollup/rollup-freebsd-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.52.4.tgz", - "integrity": "sha512-xmc30VshuBNUd58Xk4TKAEcRZHaXlV+tCxIXELiE9sQuK3kG8ZFgSPi57UBJt8/ogfhAF5Oz4ZSUBN77weM+mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.62.3.tgz", + "integrity": "sha512-zvBUvsQUpOWALdDsk6qbS8bXf2VxmPisuudNDrY7x0p0jBdsoZl8HsHczIOgkQiZldmcacMKtBzpoGVNeIe2bQ==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -679,13 +719,12 @@ ] }, "node_modules/@rollup/rollup-freebsd-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.52.4.tgz", - "integrity": "sha512-WdSLpZFjOEqNZGmHflxyifolwAiZmDQzuOzIq9L27ButpCVpD7KzTRtEG1I0wMPFyiyUdOO+4t8GvrnBLQSwpw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.62.3.tgz", + "integrity": "sha512-C2KmNrcSem/AMg984H/dev+si0lieQGdXdR/lYGJnuumXnFb9Y7QdiI62obFdLlxRYLBv4P0eUVIDbD4c1vVvw==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -693,13 +732,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-gnueabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.52.4.tgz", - "integrity": "sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.62.3.tgz", + "integrity": "sha512-ggXnsTAEzNQx74XpunRsiZ9aBZDsI7XIa0hm2nzR9f4WzH5/f/d73ZSDaC5ejJ8YLY4NW+V3wr0tjOaeCq8hqA==", "cpu": [ "arm" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -707,13 +748,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm-musleabihf": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.52.4.tgz", - "integrity": "sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.62.3.tgz", + "integrity": "sha512-2vng+FlzNUhKZxtej3IUqJgbZoQk2M/dwQM20+ULV0R/E/8tr9/P6uEf2iiGIk4HL0zMKh5Jry7mUHdUOvyGgA==", "cpu": [ "arm" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -721,12 +764,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.9.tgz", - "integrity": "sha512-6TZjPHjKZUQKmVKMUowF3ewHxctrRR09eYyvT5eFv8w/fXarEra83A2mHTVJLA5xU91aCNOUnM+DWFMSbQ0Nxw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.44.0.tgz", + "integrity": "sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==", "cpu": [ "arm64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -734,12 +780,15 @@ ] }, "node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.9.tgz", - "integrity": "sha512-LD2fytxZJZ6xzOKnMbIpgzFOuIKlxVOpiMAXawsAZ2mHBPEYOnLRK5TTEsID6z4eM23DuO88X0Tq1mErHMVq0A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.44.0.tgz", + "integrity": "sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==", "cpu": [ "arm64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -747,13 +796,31 @@ ] }, "node_modules/@rollup/rollup-linux-loong64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.52.4.tgz", - "integrity": "sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.62.3.tgz", + "integrity": "sha512-PwHXCCS2n64/1Ot6rP1YEYA02MGYBcQlr8CSZZyrUG2O7NH6NklYmvr9v3Jy+5e/eDeNchc/ukmKJi9LuflMIQ==", "cpu": [ "loong64" ], - "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-loong64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.62.3.tgz", + "integrity": "sha512-vUjxINQu3RC8NZS3ykk1gN65gIz8pAopOq2HXuZhiIxHdx7TFvDG+jgrdSgInu1Eza4/Rfi2VzZgyIgEH4WOaw==", + "cpu": [ + "loong64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -761,13 +828,31 @@ ] }, "node_modules/@rollup/rollup-linux-ppc64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.52.4.tgz", - "integrity": "sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.62.3.tgz", + "integrity": "sha512-wzko4aJ13+0G3kGnviCg5gnXFKd40izKsrf2uOw12US4XqprkDrmwOpeW14aSNa37V8bfPcz5Fkob6LZ3BAPmA==", "cpu": [ "ppc64" ], - "dev": true, + "libc": [ + "glibc" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-ppc64-musl": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.62.3.tgz", + "integrity": "sha512-8120ue0JUMSwy11stlwnfdX3pPd+WZYGCDBwEHWtIHi6pOpZmsEF5QKB7a/UN+XFdqvobxz98kv8RTqikyCEBw==", + "cpu": [ + "ppc64" + ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -775,13 +860,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.52.4.tgz", - "integrity": "sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.62.3.tgz", + "integrity": "sha512-XLFHnR3tXMjbOCh2vtVJHmxt+995uJsTERQyseFDRA0xxMxyTZPLa3OIUlyFaO4mF/Lu0FjmWHCuPXJT1n/IOg==", "cpu": [ "riscv64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -789,13 +876,15 @@ ] }, "node_modules/@rollup/rollup-linux-riscv64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.52.4.tgz", - "integrity": "sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.62.3.tgz", + "integrity": "sha512-se6yXvNGMIl0f+RQzyh7XAmia8/9kplQx424wnG2w0C1oi6XgO6Y8otKhdXFHbHs88Ihavzmvh1NWjuovE76BQ==", "cpu": [ "riscv64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -803,13 +892,15 @@ ] }, "node_modules/@rollup/rollup-linux-s390x-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.52.4.tgz", - "integrity": "sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.62.3.tgz", + "integrity": "sha512-gNoxRefktVIiGflpONuxWWXZAzIQG++z9qHO3xKwk4WdDMuQja3JHGfE1u0i3PfPDyvhypdk+WrgIJqLhGG7sg==", "cpu": [ "s390x" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -817,12 +908,15 @@ ] }, "node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.9.tgz", - "integrity": "sha512-FwBHNSOjUTQLP4MG7y6rR6qbGw4MFeQnIBrMe161QGaQoBQLqSUEKlHIiVgF3g/mb3lxlxzJOpIBhaP+C+KP2A==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.44.0.tgz", + "integrity": "sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==", "cpu": [ "x64" ], + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -830,26 +924,41 @@ ] }, "node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.9.tgz", - "integrity": "sha512-cYRpV4650z2I3/s6+5/LONkjIz8MBeqrk+vPXV10ORBnshpn8S32bPqQ2Utv39jCiDcO2eJTuSlPXpnvmaIgRA==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.44.0.tgz", + "integrity": "sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==", "cpu": [ "x64" ], + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ "linux" ] }, + "node_modules/@rollup/rollup-openbsd-x64": { + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.62.3.tgz", + "integrity": "sha512-ABVf3Q0RCu7NcyCCOZQI0pJ3GuSdfSl8EXcy88QtdceIMIoCUdfhsJChZ64L9zVM2aJHjde1Bhn5uqSRcX9ySA==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "openbsd" + ] + }, "node_modules/@rollup/rollup-openharmony-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.52.4.tgz", - "integrity": "sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.62.3.tgz", + "integrity": "sha512-+2Cy/ldweGBLlPIKsQLF8U5N44a0KDdbrk1rAjHOM9M2K+kGdIVjHLmmrZIcx+9Ny3ke/1JomCsDI1ocb11+sg==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -857,9 +966,9 @@ ] }, "node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.9.tgz", - "integrity": "sha512-z4mQK9dAN6byRA/vsSgQiPeuO63wdiDxZ9yg9iyX2QTzKuQM7T4xlBoeUP/J8uiFkqxkcWndWi+W7bXdPbt27Q==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.44.0.tgz", + "integrity": "sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==", "cpu": [ "arm64" ], @@ -870,13 +979,12 @@ ] }, "node_modules/@rollup/rollup-win32-ia32-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.52.4.tgz", - "integrity": "sha512-AIy/jdJ7WtJ/F6EcfOb2GjR9UweO0n43jNObQMb6oGxkYTfLcnN7vYYpG+CN3lLxrQkzWnMOoNSHTW54pgbVxw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.62.3.tgz", + "integrity": "sha512-Rj8Ra4noo+aYy7sKBggCx0407mws34kAb1ySyWuq5DAtFBQdkSwnsjCgPrhPe9cvgBKZIukpE+CVHvORCS93kQ==", "cpu": [ "ia32" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -884,13 +992,12 @@ ] }, "node_modules/@rollup/rollup-win32-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.52.4.tgz", - "integrity": "sha512-UF9KfsH9yEam0UjTwAgdK0anlQ7c8/pWPU2yVjyWcF1I1thABt6WXE47cI71pGiZ8wGvxohBoLnxM04L/wj8mQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.62.3.tgz", + "integrity": "sha512-vp7N084ew/odXn2gi/mzm9mUkQu9l6AiN6dt4IeUM2Uvm9o+cVmP+YkqbMOteLbiGgqBBlJZjIMYVCfOOIVbVQ==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -898,9 +1005,9 @@ ] }, "node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.34.9", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.9.tgz", - "integrity": "sha512-AyleYRPU7+rgkMWbEh71fQlrzRfeP6SyMnRf9XX4fCdDPAJumdSBqYEcWPMzVQ4ScAl7E4oFfK0GUVn77xSwbw==", + "version": "4.44.0", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.44.0.tgz", + "integrity": "sha512-Q2Mgwt+D8hd5FIPUuPDsvPR7Bguza6yTkJxspDGkZj7tBRn2y4KSWYuIXpftFSjBra76TbKerCV7rgFPQrn+wQ==", "cpu": [ "x64" ], @@ -911,9 +1018,9 @@ ] }, "node_modules/@stencil/core": { - "version": "4.43.0", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.0.tgz", - "integrity": "sha512-6Uj2Z3lzLuufYAE7asZ6NLKgSwsB9uxl84Eh34PASnUjfj32GkrP4DtKK7fNeh1WFGGyffsTDka3gwtl+4reUg==", + "version": "4.43.5", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.43.5.tgz", + "integrity": "sha512-cgWD+GeuvJpTe1WQn40p02+BJ2j0j1YJ17GdkF2qKIQ23s2e3Zivq5yISXS3dcuV6oUJFN93jprdk+nk/sq99Q==", "license": "MIT", "bin": { "stencil": "bin/stencil" @@ -923,59 +1030,43 @@ "npm": ">=7.10.0" }, "optionalDependencies": { - "@rollup/rollup-darwin-arm64": "4.34.9", - "@rollup/rollup-darwin-x64": "4.34.9", - "@rollup/rollup-linux-arm64-gnu": "4.34.9", - "@rollup/rollup-linux-arm64-musl": "4.34.9", - "@rollup/rollup-linux-x64-gnu": "4.34.9", - "@rollup/rollup-linux-x64-musl": "4.34.9", - "@rollup/rollup-win32-arm64-msvc": "4.34.9", - "@rollup/rollup-win32-x64-msvc": "4.34.9" - } - }, - "node_modules/@stencil/vue-output-target": { - "version": "0.10.7", - "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.10.7.tgz", - "integrity": "sha512-IYxDe+SLCkwhwsWRdynE31rTK1zN3hVwwojQ/V9lrN8Gnx4PTvrUQHiRno9jFo1dk+EaBZWX9gZSmXta0ZaZew==", - "license": "MIT", - "peerDependencies": { - "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", - "vue": "^3.4.38", - "vue-router": "^4.5.0" - }, - "peerDependenciesMeta": { - "@stencil/core": { - "optional": true - }, - "vue": { - "optional": false - }, - "vue-router": { - "optional": true - } + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" } }, "node_modules/@types/estree": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz", - "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==", - "dev": true, + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.9.tgz", + "integrity": "sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==", + "devOptional": true, + "license": "MIT" + }, + "node_modules/@types/jsesc": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/@types/jsesc/-/jsesc-2.5.1.tgz", + "integrity": "sha512-9VN+6yxLOPLOav+7PwjZbxiID2bVaeq0ED4qSQmdQTdjnXJSaCVKTR58t15oqH1H5t8Ng2ZX1SabJVoN9Q34bw==", "license": "MIT" }, "node_modules/@vitejs/plugin-vue": { - "version": "6.0.4", - "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.4.tgz", - "integrity": "sha512-uM5iXipgYIn13UUQCZNdWkYk+sysBeA97d5mHsAoAt1u/wpN3+zxOmsVJWosuzX+IMGRzeYUNytztrYznboIkQ==", + "version": "6.0.8", + "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-6.0.8.tgz", + "integrity": "sha512-0ZjgOg7oO6farnNGup7yvoM/YXZV84OZxHAwtflItNa/6zzQyVb5LNxyea3FEKEX2XlagIKzrlH7wwxkKgtiew==", "dev": true, "license": "MIT", "dependencies": { - "@rolldown/pluginutils": "1.0.0-rc.2" + "@rolldown/pluginutils": "^1.0.1" }, "engines": { "node": "^20.19.0 || >=22.12.0" }, "peerDependencies": { - "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0", + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", "vue": "^3.2.25" } }, @@ -1009,9 +1100,9 @@ } }, "node_modules/@vue-macros/common": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.2.tgz", - "integrity": "sha512-h9t4ArDdniO9ekYHAD95t9AZcAbb19lEGK+26iAjUODOIJKmObDNBSe4+6ELQAA3vtYiFPPBtHh7+cQCKi3Dng==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.1.4.tgz", + "integrity": "sha512-/5Fv+6DgIcM9ajY05ZmKBv+LMX1M9A0X+IUwDRVdt67ciw8OV9bvG2r34p3RiEadlsQybjhKPRKNXDC8Bp23cw==", "license": "MIT", "dependencies": { "@vue/compiler-sfc": "^3.5.22", @@ -1036,158 +1127,150 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.29.tgz", - "integrity": "sha512-cuzPhD8fwRHk8IGfmYaR4eEe4cAyJEL66Ove/WZL7yWNL134nqLddSLwNRIsFlnnW1kK+p8Ck3viFnC0chXCXw==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.41.tgz", + "integrity": "sha512-q0Xtv/F9w2YO/7htQhtiL+Ev2WCJbe5N2hc+XfgyKkEKqWpSxknmT8QOuGdEKNdjPq0c3F7rNpFkTo3Kfrm7pg==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/shared": "3.5.29", + "@babel/parser": "^7.29.8", + "@vue/shared": "3.5.41", "entities": "^7.0.1", "estree-walker": "^2.0.2", "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.29.tgz", - "integrity": "sha512-n0G5o7R3uBVmVxjTIYcz7ovr8sy7QObFG8OQJ3xGCDNhbG60biP/P5KnyY8NLd81OuT1WJflG7N4KWYHaeeaIg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.41.tgz", + "integrity": "sha512-oKacVfNglLvGjnS6BXOlGL7EyG2h8X03pqXCjzotRZUaXGjbrTJUnVAQjrCqUnS+lyu31nwQjZY/d817GmCnfw==", "license": "MIT", "dependencies": { - "@vue/compiler-core": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-core": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.29.tgz", - "integrity": "sha512-oJZhN5XJs35Gzr50E82jg2cYdZQ78wEwvRO6Y63TvLVTc+6xICzJHP1UIecdSPPYIbkautNBanDiWYa64QSFIA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.41.tgz", + "integrity": "sha512-XJhip7R2wy6vX3knCxdZN4KracFaZUef58s1KYewqluedHIJaPIVfXoYT7MF1F8nCvv6k8bWWxDC8opMkg1VTQ==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.29.0", - "@vue/compiler-core": "3.5.29", - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29", + "@babel/parser": "^7.29.8", + "@vue/compiler-core": "3.5.41", + "@vue/compiler-dom": "3.5.41", + "@vue/compiler-ssr": "3.5.41", + "@vue/shared": "3.5.41", "estree-walker": "^2.0.2", "magic-string": "^0.30.21", - "postcss": "^8.5.6", + "postcss": "^8.5.19", "source-map-js": "^1.2.1" } }, "node_modules/@vue/compiler-ssr": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.29.tgz", - "integrity": "sha512-Y/ARJZE6fpjzL5GH/phJmsFwx3g6t2KmHKHx5q+MLl2kencADKIrhH5MLF6HHpRMmlRAYBRSvv347Mepf1zVNw==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.41.tgz", + "integrity": "sha512-U3v5OejKEGqOI0Wy0+Sz7hGuIFZHA4LSXzrNM3IMIeDyJEBBfTpX26n3SDgToRpP2bLc9FfI2j/kSgcJ8Emq5A==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/devtools-api": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.0.6.tgz", - "integrity": "sha512-+lGBI+WTvJmnU2FZqHhEB8J1DXcvNlDeEalz77iYgOdY1jTj1ipSBaKj3sRhYcy+kqA8v/BSuvOz1XJucfQmUA==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-8.2.1.tgz", + "integrity": "sha512-6u4vXBlIBAC1wMplIZgpyPn7uh/s4Bf6F5bMzvLv+EdJ0aHs/+4B7Ygv864EStQSjRbsRzTko/kUG1A1IejQ3A==", "license": "MIT", "dependencies": { - "@vue/devtools-kit": "^8.0.6" + "@vue/devtools-kit": "^8.2.1" } }, "node_modules/@vue/devtools-kit": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.0.6.tgz", - "integrity": "sha512-9zXZPTJW72OteDXeSa5RVML3zWDCRcO5t77aJqSs228mdopYj5AiTpihozbsfFJ0IodfNs7pSgOGO3qfCuxDtw==", + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-8.2.1.tgz", + "integrity": "sha512-FIGIuq3AWReEpbAHY/cRGeHDfI0qOb8OCQ3YjbEAX04uaxIDbGc9rhkbVcG7rnfHPXE3RsU5KrWOu9V/okd8AQ==", "license": "MIT", "dependencies": { - "@vue/devtools-shared": "^8.0.6", + "@vue/devtools-shared": "^8.2.1", "birpc": "^2.6.1", "hookable": "^5.5.3", - "mitt": "^3.0.1", - "perfect-debounce": "^2.0.0", - "speakingurl": "^14.0.1", - "superjson": "^2.2.2" + "perfect-debounce": "^2.0.0" } }, "node_modules/@vue/devtools-shared": { - "version": "8.0.6", - "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.0.6.tgz", - "integrity": "sha512-Pp1JylTqlgMJvxW6MGyfTF8vGvlBSCAvMFaDCYa82Mgw7TT5eE5kkHgDvmOGHWeJE4zIDfCpCxHapsK2LtIAJg==", - "license": "MIT", - "dependencies": { - "rfdc": "^1.4.1" - } + "version": "8.2.1", + "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-8.2.1.tgz", + "integrity": "sha512-Fkac7lUdGReh6pVOi3AYPRGe82LQqRmAfThW7RRligOAP0ZA/Z1z9XLHDM9dv34pV2HRc79DK8uKPeG2fLnA/g==", + "license": "MIT" }, "node_modules/@vue/language-core": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.2.5.tgz", - "integrity": "sha512-d3OIxN/+KRedeM5wQ6H6NIpwS3P5gC9nmyaHgBk+rO6dIsjY+tOh4UlPpiZbAh3YtLdCGEX4M16RmsBqPmJV+g==", + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-3.3.9.tgz", + "integrity": "sha512-in/68oAa4BCtVY6n/nkuhLIkV8DHYd2UivedJ6cMZ6UYtlq9jaoaSNUBHYCVO44z3nKg7MdE5OBoHKt5SxeBKQ==", "dev": true, "license": "MIT", "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", - "alien-signals": "^3.0.0", + "alien-signals": "^3.2.1", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", - "picomatch": "^4.0.2" + "picomatch": "^4.0.4" } }, "node_modules/@vue/reactivity": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.29.tgz", - "integrity": "sha512-zcrANcrRdcLtmGZETBxWqIkoQei8HaFpZWx/GHKxx79JZsiZ8j1du0VUJtu4eJjgFvU/iKL5lRXFXksVmI+5DA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.41.tgz", + "integrity": "sha512-rznsqKM0np0x18EjzF8x88MpEhdNsffbvFbckLL5+oUKz1BxAImEmO7J1ArRYSyo6aQaVoBDp7jEkT91OOxydA==", "license": "MIT", "dependencies": { - "@vue/shared": "3.5.29" + "@vue/shared": "3.5.41" } }, "node_modules/@vue/runtime-core": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.29.tgz", - "integrity": "sha512-8DpW2QfdwIWOLqtsNcds4s+QgwSaHSJY/SUe04LptianUQ/0xi6KVsu/pYVh+HO3NTVvVJjIPL2t6GdeKbS4Lg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.41.tgz", + "integrity": "sha512-Vcry58hiAKwGen9Z1jUZE0feFsNArPCMOImYI8el48A9Idf6DuQYD0U05zZIF2Iad1hGhPSvcbBbAOhNr55fhg==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/reactivity": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/runtime-dom": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.29.tgz", - "integrity": "sha512-AHvvJEtcY9tw/uk+s/YRLSlxxQnqnAkjqvK25ZiM4CllCZWzElRAoQnCM42m9AHRLNJ6oe2kC5DCgD4AUdlvXg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.41.tgz", + "integrity": "sha512-3vVBahVBS9+U6cmXBLyb8nE6/yYo4J/CGI9eVFs3KiMc0YHuudwKyShTD65jtJy/L9PUUxNAFu4cj4LiJ0UFbw==", "license": "MIT", "dependencies": { - "@vue/reactivity": "3.5.29", - "@vue/runtime-core": "3.5.29", - "@vue/shared": "3.5.29", + "@vue/reactivity": "3.5.41", + "@vue/runtime-core": "3.5.41", + "@vue/shared": "3.5.41", "csstype": "^3.2.3" } }, "node_modules/@vue/server-renderer": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.29.tgz", - "integrity": "sha512-G/1k6WK5MusLlbxSE2YTcqAAezS+VuwHhOvLx2KnQU7G2zCH6KIb+5Wyt6UjMq7a3qPzNEjJXs1hvAxDclQH+g==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.41.tgz", + "integrity": "sha512-n6hx/pNFfbD6SuyeuMVkvqox8bwf/ET9JlA/kAz/imw8sw++wkqKe2mHX5KutjPpbKE4Z56yTHszoOjGMI9igQ==", "license": "MIT", "dependencies": { - "@vue/compiler-ssr": "3.5.29", - "@vue/shared": "3.5.29" - }, - "peerDependencies": { - "vue": "3.5.29" + "@vue/compiler-ssr": "3.5.41", + "@vue/runtime-dom": "3.5.41", + "@vue/shared": "3.5.41" } }, "node_modules/@vue/shared": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.29.tgz", - "integrity": "sha512-w7SR0A5zyRByL9XUkCfdLs7t9XOHUyJ67qPGQjOou3p6GvBeBW+AVjUUmlxtZ4PIYaRvE+1LmK44O4uajlZwcg==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.41.tgz", + "integrity": "sha512-IOnwSCma8j+9xJT6b8H0dEYidC80NsYmNMlZxRsukYcSoGaDBohog5hDxzeUXdFeGWFA++vWvxqOmrr96VlqMA==", "license": "MIT" }, "node_modules/acorn": { - "version": "8.15.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", - "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.18.0.tgz", + "integrity": "sha512-lGq+9yr1/GuAWaVYIHRjvvySG5/4VfKIvC8EWxStPdcDh/Ka7FG3twP6v4d5BkravUilhIAsG4Qj83t02LWUPQ==", "license": "MIT", "bin": { "acorn": "bin/acorn" @@ -1197,9 +1280,9 @@ } }, "node_modules/alien-signals": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.0.0.tgz", - "integrity": "sha512-JHoRJf18Y6HN4/KZALr3iU+0vW9LKG+8FMThQlbn4+gv8utsLIkwpomjElGPccGeNwh0FI2HN6BLnyFLo6OyLQ==", + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/alien-signals/-/alien-signals-3.2.1.tgz", + "integrity": "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g==", "dev": true, "license": "MIT" }, @@ -1220,13 +1303,14 @@ } }, "node_modules/ast-walker-scope": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.8.3.tgz", - "integrity": "sha512-cbdCP0PGOBq0ASG+sjnKIoYkWMKhhz+F/h9pRexUdX2Hd38+WOlBkRKlqkGOSm0YQpcFMQBJeK4WspUAkwsEdg==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/ast-walker-scope/-/ast-walker-scope-0.9.0.tgz", + "integrity": "sha512-IJdzo2vLiElBxKzwS36VsCue/62d6IdWjnPB2v3nuPKeWGynp6FF/CYoLa5i/3jXH/z97ZDdsXz6abpgM6w07A==", "license": "MIT", "dependencies": { - "@babel/parser": "^7.28.4", - "ast-kit": "^2.1.3" + "@babel/parser": "^7.29.2", + "@babel/types": "^7.29.0", + "ast-kit": "^2.2.0" }, "engines": { "node": ">=20.19.0" @@ -1260,26 +1344,11 @@ } }, "node_modules/confbox": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.2.tgz", - "integrity": "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ==", + "version": "0.2.4", + "resolved": "https://registry.npmjs.org/confbox/-/confbox-0.2.4.tgz", + "integrity": "sha512-ysOGlgTFbN2/Y6Cg3Iye8YKulHw+R2fNXHrgSmXISQdMnomY6eNDprVdW9R5xBguEqI954+S6709UyiO7B+6OQ==", "license": "MIT" }, - "node_modules/copy-anything": { - "version": "4.0.5", - "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-4.0.5.tgz", - "integrity": "sha512-7Vv6asjS4gMOuILabD3l739tsaxFQmC+a7pLZm02zyvs8p977bL3zEgq3yDk5rn9B0PbYgIv++jmHcuUab4RhA==", - "license": "MIT", - "dependencies": { - "is-what": "^5.2.0" - }, - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/csstype": { "version": "3.2.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", @@ -1299,10 +1368,10 @@ } }, "node_modules/esbuild": { - "version": "0.27.2", - "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.2.tgz", - "integrity": "sha512-HyNQImnsOC7X9PMNaCIeAm4ISCQXs5a5YasTXVliKv4uuBo1dKrG0A+uQS8M5eXjVMnLg3WgXaKvprHlFJQffw==", - "dev": true, + "version": "0.28.1", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.28.1.tgz", + "integrity": "sha512-HrJrvZv5ayxBzPfwphOoNzkzOIIlifzk0KJrGK2c8R4+LKpMtpYLQeUdjnwjWv/LZlkH2laZk+4w78pi99D4Vw==", + "devOptional": true, "hasInstallScript": true, "license": "MIT", "bin": { @@ -1312,43 +1381,44 @@ "node": ">=18" }, "optionalDependencies": { - "@esbuild/aix-ppc64": "0.27.2", - "@esbuild/android-arm": "0.27.2", - "@esbuild/android-arm64": "0.27.2", - "@esbuild/android-x64": "0.27.2", - "@esbuild/darwin-arm64": "0.27.2", - "@esbuild/darwin-x64": "0.27.2", - "@esbuild/freebsd-arm64": "0.27.2", - "@esbuild/freebsd-x64": "0.27.2", - "@esbuild/linux-arm": "0.27.2", - "@esbuild/linux-arm64": "0.27.2", - "@esbuild/linux-ia32": "0.27.2", - "@esbuild/linux-loong64": "0.27.2", - "@esbuild/linux-mips64el": "0.27.2", - "@esbuild/linux-ppc64": "0.27.2", - "@esbuild/linux-riscv64": "0.27.2", - "@esbuild/linux-s390x": "0.27.2", - "@esbuild/linux-x64": "0.27.2", - "@esbuild/netbsd-arm64": "0.27.2", - "@esbuild/netbsd-x64": "0.27.2", - "@esbuild/openbsd-arm64": "0.27.2", - "@esbuild/openbsd-x64": "0.27.2", - "@esbuild/openharmony-arm64": "0.27.2", - "@esbuild/sunos-x64": "0.27.2", - "@esbuild/win32-arm64": "0.27.2", - "@esbuild/win32-ia32": "0.27.2", - "@esbuild/win32-x64": "0.27.2" + "@esbuild/aix-ppc64": "0.28.1", + "@esbuild/android-arm": "0.28.1", + "@esbuild/android-arm64": "0.28.1", + "@esbuild/android-x64": "0.28.1", + "@esbuild/darwin-arm64": "0.28.1", + "@esbuild/darwin-x64": "0.28.1", + "@esbuild/freebsd-arm64": "0.28.1", + "@esbuild/freebsd-x64": "0.28.1", + "@esbuild/linux-arm": "0.28.1", + "@esbuild/linux-arm64": "0.28.1", + "@esbuild/linux-ia32": "0.28.1", + "@esbuild/linux-loong64": "0.28.1", + "@esbuild/linux-mips64el": "0.28.1", + "@esbuild/linux-ppc64": "0.28.1", + "@esbuild/linux-riscv64": "0.28.1", + "@esbuild/linux-s390x": "0.28.1", + "@esbuild/linux-x64": "0.28.1", + "@esbuild/netbsd-arm64": "0.28.1", + "@esbuild/netbsd-x64": "0.28.1", + "@esbuild/openbsd-arm64": "0.28.1", + "@esbuild/openbsd-x64": "0.28.1", + "@esbuild/openharmony-arm64": "0.28.1", + "@esbuild/sunos-x64": "0.28.1", + "@esbuild/win32-arm64": "0.28.1", + "@esbuild/win32-ia32": "0.28.1", + "@esbuild/win32-x64": "0.28.1" } }, "node_modules/estree-walker": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", - "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" + "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==", + "license": "MIT" }, "node_modules/exsolve": { - "version": "1.0.8", - "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.8.tgz", - "integrity": "sha512-LmDxfWXwcTArk8fUEnOfSZpHOJ6zOMUJKOtFLFqJLoKJetuQG874Uc7/Kki7zFLzYybmZhp1M7+98pfMqeX8yA==", + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.1.1.tgz", + "integrity": "sha512-9U/jZUgjnSGyntRr6y5Muu1MJcwFl6kPu7k8qLF0IMNfLqvw0NZ4nnVDq0RVoZ0RvCyumib4Ez3KYrVfilrw+g==", "license": "MIT" }, "node_modules/fdir": { @@ -1372,7 +1442,6 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -1398,18 +1467,6 @@ "@stencil/core": "^4.35.3" } }, - "node_modules/is-what": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/is-what/-/is-what-5.5.0.tgz", - "integrity": "sha512-oG7cgbmg5kLYae2N5IVd3jm2s+vldjxJzK1pcu9LfpGuQ93MQSzo0okvRna+7y5ifrD+20FE8FvjusyGaz14fw==", - "license": "MIT", - "engines": { - "node": ">=18" - }, - "funding": { - "url": "https://github.com/sponsors/mesqueeb" - } - }, "node_modules/jsesc": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz", @@ -1435,9 +1492,9 @@ } }, "node_modules/local-pkg": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.1.2.tgz", - "integrity": "sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-1.2.1.tgz", + "integrity": "sha512-++gUqRDEvcnN6Zhqrr+y/CkVEHhlrR96vZn3nZZPYzMcBUyBtTKzB9NadClFIsIVSsu+3i9tfk/erqy9kAmt7Q==", "license": "MIT", "dependencies": { "mlly": "^1.7.4", @@ -1475,22 +1532,16 @@ "url": "https://github.com/sponsors/sxzz" } }, - "node_modules/mitt": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz", - "integrity": "sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==", - "license": "MIT" - }, "node_modules/mlly": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.0.tgz", - "integrity": "sha512-l8D9ODSRWLe2KHJSifWGwBqpTZXIXTeo8mlKjY+E2HAakaTeNpqAyBZ8GSqLzHgw4XmHmC8whvpjJNMbFZN7/g==", + "version": "1.8.2", + "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.8.2.tgz", + "integrity": "sha512-d+ObxMQFmbt10sretNDytwt85VrbkhhUA/JBGm1MPaWJ65Cl4wOgLaB1NYvJSZ0Ef03MMEU/0xpPMXUIQ29UfA==", "license": "MIT", "dependencies": { - "acorn": "^8.15.0", + "acorn": "^8.16.0", "pathe": "^2.0.3", "pkg-types": "^1.3.1", - "ufo": "^1.6.1" + "ufo": "^1.6.3" } }, "node_modules/mlly/node_modules/confbox": { @@ -1517,9 +1568,9 @@ "license": "MIT" }, "node_modules/nanoid": { - "version": "3.3.11", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz", - "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==", + "version": "3.3.16", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.16.tgz", + "integrity": "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q==", "funding": [ { "type": "github", @@ -1534,6 +1585,12 @@ "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" } }, + "node_modules/nostics": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/nostics/-/nostics-1.2.0.tgz", + "integrity": "sha512-FGqEfhQjrvo1lL8KFifdTQiNwwQHJxC1jtYE1Rc54qF/jxONUNL+kC9gS1krX8Q65PgrQ5fCqH/I4NhWBvdSqg==", + "license": "MIT" + }, "node_modules/path-browserify": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz", @@ -1560,9 +1617,9 @@ "license": "ISC" }, "node_modules/picomatch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz", - "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", + "version": "4.0.5", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz", + "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==", "license": "MIT", "engines": { "node": ">=12" @@ -1572,20 +1629,20 @@ } }, "node_modules/pkg-types": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.0.tgz", - "integrity": "sha512-SIqCzDRg0s9npO5XQ3tNZioRY1uK06lA41ynBC1YmFTmnY6FjUjVt6s4LoADmwoig1qqD0oK8h1p/8mlMx8Oig==", + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-2.3.1.tgz", + "integrity": "sha512-y+ichcgc2LrADuhLNAx8DFjVfgz91pRxfZdI3UDhxHvcVEZsenLO+7XaU5vOp0u/7V/wZ+plyuQxtrDlZJ+yeg==", "license": "MIT", "dependencies": { - "confbox": "^0.2.2", - "exsolve": "^1.0.7", + "confbox": "^0.2.4", + "exsolve": "^1.0.8", "pathe": "^2.0.3" } }, "node_modules/postcss": { - "version": "8.5.6", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz", - "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==", + "version": "8.5.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.24.tgz", + "integrity": "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw==", "funding": [ { "type": "opencollective", @@ -1602,7 +1659,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.11", + "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -1639,20 +1696,14 @@ "url": "https://paulmillr.com/funding/" } }, - "node_modules/rfdc": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz", - "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==", - "license": "MIT" - }, "node_modules/rollup": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.52.4.tgz", - "integrity": "sha512-CLEVl+MnPAiKh5pl4dEWSyMTpuflgNQiLGhMv8ezD5W/qP8AKvmYpCOKRRNOh7oRKnauBZ4SyeYkMS+1VSyKwQ==", - "dev": true, + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.62.3.tgz", + "integrity": "sha512-Gu0c0iH9FzgX1L1t7ByIbbS3Vmdz+6KHm/EsqmmC71gUQ82yvZRkTK6XzrFObSka91WUVdynqp6nsfilzr5k6Q==", + "devOptional": true, "license": "MIT", "dependencies": { - "@types/estree": "1.0.8" + "@types/estree": "1.0.9" }, "bin": { "rollup": "dist/bin/rollup" @@ -1662,39 +1713,41 @@ "npm": ">=8.0.0" }, "optionalDependencies": { - "@rollup/rollup-android-arm-eabi": "4.52.4", - "@rollup/rollup-android-arm64": "4.52.4", - "@rollup/rollup-darwin-arm64": "4.52.4", - "@rollup/rollup-darwin-x64": "4.52.4", - "@rollup/rollup-freebsd-arm64": "4.52.4", - "@rollup/rollup-freebsd-x64": "4.52.4", - "@rollup/rollup-linux-arm-gnueabihf": "4.52.4", - "@rollup/rollup-linux-arm-musleabihf": "4.52.4", - "@rollup/rollup-linux-arm64-gnu": "4.52.4", - "@rollup/rollup-linux-arm64-musl": "4.52.4", - "@rollup/rollup-linux-loong64-gnu": "4.52.4", - "@rollup/rollup-linux-ppc64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-gnu": "4.52.4", - "@rollup/rollup-linux-riscv64-musl": "4.52.4", - "@rollup/rollup-linux-s390x-gnu": "4.52.4", - "@rollup/rollup-linux-x64-gnu": "4.52.4", - "@rollup/rollup-linux-x64-musl": "4.52.4", - "@rollup/rollup-openharmony-arm64": "4.52.4", - "@rollup/rollup-win32-arm64-msvc": "4.52.4", - "@rollup/rollup-win32-ia32-msvc": "4.52.4", - "@rollup/rollup-win32-x64-gnu": "4.52.4", - "@rollup/rollup-win32-x64-msvc": "4.52.4", + "@rollup/rollup-android-arm-eabi": "4.62.3", + "@rollup/rollup-android-arm64": "4.62.3", + "@rollup/rollup-darwin-arm64": "4.62.3", + "@rollup/rollup-darwin-x64": "4.62.3", + "@rollup/rollup-freebsd-arm64": "4.62.3", + "@rollup/rollup-freebsd-x64": "4.62.3", + "@rollup/rollup-linux-arm-gnueabihf": "4.62.3", + "@rollup/rollup-linux-arm-musleabihf": "4.62.3", + "@rollup/rollup-linux-arm64-gnu": "4.62.3", + "@rollup/rollup-linux-arm64-musl": "4.62.3", + "@rollup/rollup-linux-loong64-gnu": "4.62.3", + "@rollup/rollup-linux-loong64-musl": "4.62.3", + "@rollup/rollup-linux-ppc64-gnu": "4.62.3", + "@rollup/rollup-linux-ppc64-musl": "4.62.3", + "@rollup/rollup-linux-riscv64-gnu": "4.62.3", + "@rollup/rollup-linux-riscv64-musl": "4.62.3", + "@rollup/rollup-linux-s390x-gnu": "4.62.3", + "@rollup/rollup-linux-x64-gnu": "4.62.3", + "@rollup/rollup-linux-x64-musl": "4.62.3", + "@rollup/rollup-openbsd-x64": "4.62.3", + "@rollup/rollup-openharmony-arm64": "4.62.3", + "@rollup/rollup-win32-arm64-msvc": "4.62.3", + "@rollup/rollup-win32-ia32-msvc": "4.62.3", + "@rollup/rollup-win32-x64-gnu": "4.62.3", + "@rollup/rollup-win32-x64-msvc": "4.62.3", "fsevents": "~2.3.2" } }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.52.4.tgz", - "integrity": "sha512-QRWSW+bVccAvZF6cbNZBJwAehmvG9NwfWHwMy4GbWi/BQIA/laTIktebT2ipVjNncqE6GLPxOok5hsECgAxGZg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.62.3.tgz", + "integrity": "sha512-Pch2pFNOxxz1hTjypIdPyRTR6riiwRl84+VcN9djS680fw+Co1nAJINrdpqp7KV0NvyuU8ilZXZCjd7ykJl1GQ==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1702,13 +1755,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-darwin-x64": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.52.4.tgz", - "integrity": "sha512-hZgP05pResAkRJxL1b+7yxCnXPGsXU0fG9Yfd6dUaoGk+FhdPKCJ5L1Sumyxn8kvw8Qi5PvQ8ulenUbRjzeCTw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.62.3.tgz", + "integrity": "sha512-LEuncFUHFiF8t4yZVZvvZA1wk0pjAscRnsrn1EfTEmN4HXotBi2YtcnLRyaK6UbuczW7xZS5ES+81Rdz8Z0T6g==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1716,13 +1768,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.52.4.tgz", - "integrity": "sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.62.3.tgz", + "integrity": "sha512-LLLFZKt4/Nraf9rxDkhiU8QVgLF4WmCkfr0L4fj0fPfIZFBib0DeiFk1hhaYKd03LFAFJcxHslhDFlNJLylf5Q==", "cpu": [ "arm64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1730,13 +1784,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-arm64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.52.4.tgz", - "integrity": "sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.62.3.tgz", + "integrity": "sha512-WJkdQCvS9sWNOUBJZfQRKpZGFBztRzcowI+nndmflKgU4XY+3a420FgTOSKTsVqJbnzSxeT4vaJalpOaPo2YCQ==", "cpu": [ "arm64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1744,13 +1800,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-gnu": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.52.4.tgz", - "integrity": "sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.62.3.tgz", + "integrity": "sha512-V4KtWtQfAFMU7+9/A/VDps/VI8CHd3cYz0L8sgJzz8qK7eY7wI4ruFD82UYIYvW9Z4DtlTfhQcsl4XyPHW5uSg==", "cpu": [ "x64" ], - "dev": true, + "libc": [ + "glibc" + ], "license": "MIT", "optional": true, "os": [ @@ -1758,13 +1816,15 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-linux-x64-musl": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.52.4.tgz", - "integrity": "sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.62.3.tgz", + "integrity": "sha512-LBx9LYXvj2CBkMkjLdNAWLwH0MLMin7do2VcVo9kVPibGLkY0BQQut2fv7NVqkXqZ/CrAu9LqDHVV1xHCMpCPw==", "cpu": [ "x64" ], - "dev": true, + "libc": [ + "musl" + ], "license": "MIT", "optional": true, "os": [ @@ -1772,13 +1832,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-arm64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.52.4.tgz", - "integrity": "sha512-8GKr640PdFNXwzIE0IrkMWUNUomILLkfeHjXBi/nUvFlpZP+FA8BKGKpacjW6OUUHaNI6sUURxR2U2g78FOHWQ==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.62.3.tgz", + "integrity": "sha512-dtZvzc8BedpSaFNy75x6uiWwAGTH+aZHDtdrqP6qk+WcLJrfti6sGje1ZJ9UxyzDLF23d/mV+PaMwuC0hL7UVA==", "cpu": [ "arm64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1786,13 +1845,12 @@ ] }, "node_modules/rollup/node_modules/@rollup/rollup-win32-x64-msvc": { - "version": "4.52.4", - "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.52.4.tgz", - "integrity": "sha512-bf9PtUa0u8IXDVxzRToFQKsNCRz9qLYfR/MpECxl4mRoWYjAeFjgxj1XdZr2M/GNVpT05p+LgQOHopYDlUu6/w==", + "version": "4.62.3", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.62.3.tgz", + "integrity": "sha512-MOG/3gTOn4Fwf574RVOaY61I5o6P90legkFADiTyn1hyjNydT+cerU2rLUwPdZkKKyJ+iT+K9p7WXK4LM1Ka6g==", "cpu": [ "x64" ], - "dev": true, "license": "MIT", "optional": true, "os": [ @@ -1814,35 +1872,14 @@ "node": ">=0.10.0" } }, - "node_modules/speakingurl": { - "version": "14.0.1", - "resolved": "https://registry.npmjs.org/speakingurl/-/speakingurl-14.0.1.tgz", - "integrity": "sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==", - "license": "BSD-3-Clause", - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/superjson": { - "version": "2.2.6", - "resolved": "https://registry.npmjs.org/superjson/-/superjson-2.2.6.tgz", - "integrity": "sha512-H+ue8Zo4vJmV2nRjpx86P35lzwDT3nItnIsocgumgr0hHMQ+ZGq5vrERg9kJBo5AWGmxZDhzDo+WVIJqkB0cGA==", - "license": "MIT", - "dependencies": { - "copy-anything": "^4" - }, - "engines": { - "node": ">=16" - } - }, "node_modules/tinyglobby": { - "version": "0.2.15", - "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz", - "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==", + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", "license": "MIT", "dependencies": { "fdir": "^6.5.0", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=12.0.0" @@ -1872,33 +1909,73 @@ } }, "node_modules/ufo": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.3.tgz", - "integrity": "sha512-yDJTmhydvl5lJzBmy/hyOAA0d+aqCBuwl818haVdYCRrWV84o7YyeVm4QlVHStqNrrJSTb6jKuFAVqAFsr+K3Q==", + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.6.4.tgz", + "integrity": "sha512-JFNbkD1Svwe0KvGi8GOeLcP4kAWQ609twvCdcHxq1oSL8svv39ZuSvajcD8B+5D0eL4+s1Is2D/O6KN3qcTeRA==", "license": "MIT" }, "node_modules/unplugin": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.0.0.tgz", - "integrity": "sha512-0Mqk3AT2TZCXWKdcoaufeXNukv2mTrEZExeXlHIOZXdqYoHHr4n51pymnwV8x2BOVxwXbK2HLlI7usrqMpycdg==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-3.3.0.tgz", + "integrity": "sha512-qa66K+crbfyE6JK10GjvbJeRrOsuC/JpbnHctfyp/i4oBTxWOzJfRZyDiOk1PtErMFRu8JhsU/wPvOdBNWe5Rg==", "license": "MIT", "dependencies": { "@jridgewell/remapping": "^2.3.5", - "picomatch": "^4.0.3", + "picomatch": "^4.0.4", "webpack-virtual-modules": "^0.6.2" }, "engines": { "node": "^20.19.0 || >=22.12.0" + }, + "peerDependencies": { + "@farmfe/core": "*", + "@rspack/core": "*", + "bun-types-no-globals": "*", + "esbuild": "*", + "rolldown": "*", + "rollup": "*", + "unloader": "*", + "vite": "*", + "webpack": "*" + }, + "peerDependenciesMeta": { + "@farmfe/core": { + "optional": true + }, + "@rspack/core": { + "optional": true + }, + "bun-types-no-globals": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "rolldown": { + "optional": true + }, + "rollup": { + "optional": true + }, + "unloader": { + "optional": true + }, + "vite": { + "optional": true + }, + "webpack": { + "optional": true + } } }, "node_modules/unplugin-utils": { - "version": "0.3.1", - "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.1.tgz", - "integrity": "sha512-5lWVjgi6vuHhJ526bI4nlCOmkCIF3nnfXkCMDeMJrtdvxTs6ZFCM8oNufGTsDbKv/tJ/xj8RpvXjRuPBZJuJog==", + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/unplugin-utils/-/unplugin-utils-0.3.2.tgz", + "integrity": "sha512-xVToRh2CTmLk2HnEG7ac4rl1MJTT3RFkpS8B++/SnB0kXvuaavD+n3m/vrzyWQOdJNSZQACnbz01pnppbwV5BA==", "license": "MIT", "dependencies": { "pathe": "^2.0.3", - "picomatch": "^4.0.3" + "picomatch": "^4.0.4" }, "engines": { "node": ">=20.19.0" @@ -1908,13 +1985,13 @@ } }, "node_modules/vite": { - "version": "7.3.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz", - "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", - "dev": true, + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.6.tgz", + "integrity": "sha512-4XP60spRGjSZFf1qYH+dJIkK2znL3zQfl9KkOV9MkkRR/3Dls0dxaBsQPTloEc5BLXWPL9vsOxopxyKoMmDueg==", + "devOptional": true, "license": "MIT", "dependencies": { - "esbuild": "^0.27.0", + "esbuild": "^0.27.0 || ^0.28.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", @@ -1990,16 +2067,16 @@ "license": "MIT" }, "node_modules/vue": { - "version": "3.5.29", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.29.tgz", - "integrity": "sha512-BZqN4Ze6mDQVNAni0IHeMJ5mwr8VAJ3MQC9FmprRhcBYENw+wOAAjRj8jfmN6FLl0j96OXbR+CjWhmAmM+QGnA==", + "version": "3.5.41", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.41.tgz", + "integrity": "sha512-2laE0p+aK+/AOPG/XL/WepOs/GlK755LJ1XECi9kDUrz1FKNw8rb2Xzlw9JS1rqEV55nb0ttsKxVlTCcd+R5cg==", "license": "MIT", "dependencies": { - "@vue/compiler-dom": "3.5.29", - "@vue/compiler-sfc": "3.5.29", - "@vue/runtime-dom": "3.5.29", - "@vue/server-renderer": "3.5.29", - "@vue/shared": "3.5.29" + "@vue/compiler-dom": "3.5.41", + "@vue/compiler-sfc": "3.5.41", + "@vue/runtime-dom": "3.5.41", + "@vue/server-renderer": "3.5.41", + "@vue/shared": "3.5.41" }, "peerDependencies": { "typescript": "*" @@ -2011,37 +2088,39 @@ } }, "node_modules/vue-router": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.0.3.tgz", - "integrity": "sha512-nG1c7aAFac7NYj8Hluo68WyWfc41xkEjaR0ViLHCa3oDvTQ/nIuLJlXJX1NUPw/DXzx/8+OKMng045HHQKQKWw==", + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.2.0.tgz", + "integrity": "sha512-QAC5i0LEb1GLG0LXDQmHu8L7FX12j0KwU/JTKmLQUJMrn04gQdKP6Du+p0QwpHb3iy71vBlqnHQ8WAfOSAWhqw==", "license": "MIT", "dependencies": { - "@babel/generator": "^7.28.6", - "@vue-macros/common": "^3.1.1", - "@vue/devtools-api": "^8.0.6", - "ast-walker-scope": "^0.8.3", + "@babel/generator": "^8.0.0", + "@vue-macros/common": "^3.1.3", + "@vue/devtools-api": "^8.1.5", + "ast-walker-scope": "^0.9.0", "chokidar": "^5.0.0", "json5": "^2.2.3", - "local-pkg": "^1.1.2", + "local-pkg": "^1.2.1", "magic-string": "^0.30.21", - "mlly": "^1.8.0", + "mlly": "^1.8.2", "muggle-string": "^0.4.1", + "nostics": "^1.1.4", "pathe": "^2.0.3", - "picomatch": "^4.0.3", + "picomatch": "^4.0.5", "scule": "^1.3.0", - "tinyglobby": "^0.2.15", - "unplugin": "^3.0.0", - "unplugin-utils": "^0.3.1", - "yaml": "^2.8.2" + "tinyglobby": "^0.2.17", + "unplugin": "^3.3.0", + "unplugin-utils": "^0.3.2", + "yaml": "^2.9.0" }, "funding": { "url": "https://github.com/sponsors/posva" }, "peerDependencies": { "@pinia/colada": ">=0.21.2", - "@vue/compiler-sfc": "^3.5.17", - "pinia": "^3.0.4", - "vue": "^3.5.0" + "@vue/compiler-sfc": "^3.5.34 || ^4.0.0", + "pinia": "^3.0.4 || ^4.0.2", + "vite": "^7.3.0 || ^8.0.0", + "vue": "^3.5.34 || ^4.0.0" }, "peerDependenciesMeta": { "@pinia/colada": { @@ -2052,18 +2131,21 @@ }, "pinia": { "optional": true + }, + "vite": { + "optional": true } } }, "node_modules/vue-tsc": { - "version": "3.2.5", - "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.2.5.tgz", - "integrity": "sha512-/htfTCMluQ+P2FISGAooul8kO4JMheOTCbCy4M6dYnYYjqLe3BExZudAua6MSIKSFYQtFOYAll7XobYwcpokGA==", + "version": "3.3.9", + "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-3.3.9.tgz", + "integrity": "sha512-TS3Y1ux/IRoE8OCP2PpACAeOseuIs0UvWrcr7u+w3PmfY+SlCfEf8zjrBgnQksHUgLpthi5vHlffcQTQTdPBZA==", "dev": true, "license": "MIT", "dependencies": { "@volar/typescript": "2.4.28", - "@vue/language-core": "3.2.5" + "@vue/language-core": "3.3.9" }, "bin": { "vue-tsc": "bin/vue-tsc.js" @@ -2079,9 +2161,9 @@ "license": "MIT" }, "node_modules/yaml": { - "version": "2.8.2", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.2.tgz", - "integrity": "sha512-mplynKqc1C2hTVYxd0PU2xQAc22TI1vShAYGksCCfxbn/dFwnHTNi1bvYsBTkhdUNtGIf5xNOg938rrSSYvS9A==", + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.9.0.tgz", + "integrity": "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA==", "license": "ISC", "bin": { "yaml": "bin.mjs" diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index 1f5562ea0d0..d7d59f11542 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,10 +8,10 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.8.1", - "@ionic/vue-router": "8.8.1", + "@ionic/vue": "8.8.18", + "@ionic/vue-router": "8.8.18", "vue": "^3.2.25", - "vue-router": "5.0.3" + "vue-router": "5.2.0" }, "devDependencies": { "@vitejs/plugin-vue": "^6.0.0", diff --git a/static/code/stackblitz/v9/angular/angular.json b/static/code/stackblitz/v9/angular/angular.json new file mode 100644 index 00000000000..7cc8b31603c --- /dev/null +++ b/static/code/stackblitz/v9/angular/angular.json @@ -0,0 +1,133 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "app": { + "projectType": "application", + "root": "", + "sourceRoot": "src", + "prefix": "app", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:application", + "options": { + "outputPath": { + "base": "www" + }, + "index": "src/index.html", + "polyfills": [ + "src/polyfills.ts" + ], + "tsConfig": "tsconfig.app.json", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], + "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], + "scripts": [], + "browser": "src/main.ts" + }, + "configurations": { + "production": { + "budgets": [ + { + "type": "initial", + "maximumWarning": "2mb", + "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "2kb", + "maximumError": "4kb" + } + ], + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "outputHashing": "all" + }, + "development": { + "optimization": false, + "extractLicenses": false, + "sourceMap": true, + "namedChunks": true + }, + "ci": { + "progress": false + } + }, + "defaultConfiguration": "production" + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "configurations": { + "production": { + "buildTarget": "app:build:production" + }, + "development": { + "buildTarget": "app:build:development" + }, + "ci": { + "progress": false + } + }, + "defaultConfiguration": "development" + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "buildTarget": "app:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "tsconfig.spec.json", + "karmaConfig": "karma.conf.js", + "assets": [ + { + "glob": "**/*", + "input": "src/assets", + "output": "assets" + } + ], + "styles": ["src/styles.css", "src/global.css", "src/theme/variables.css"], + "scripts": [] + }, + "configurations": { + "ci": { + "progress": false, + "watch": false + } + } + }, + "lint": { + "builder": "@angular-eslint/builder:lint", + "options": { + "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"] + } + } + } + } + }, + "cli": { + "schematicCollections": ["@ionic/angular-toolkit"] + }, + "schematics": { + "@angular-eslint/schematics:application": { + "setParserOptionsProject": true + }, + "@angular-eslint/schematics:library": { + "setParserOptionsProject": true + } + } +} diff --git a/static/code/stackblitz/v9/angular/app.component.css b/static/code/stackblitz/v9/angular/app.component.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/angular/app.component.html b/static/code/stackblitz/v9/angular/app.component.html new file mode 100644 index 00000000000..1031647a0e0 --- /dev/null +++ b/static/code/stackblitz/v9/angular/app.component.html @@ -0,0 +1,3 @@ + + + diff --git a/static/code/stackblitz/v9/angular/app.component.ts b/static/code/stackblitz/v9/angular/app.component.ts new file mode 100644 index 00000000000..56183b000e4 --- /dev/null +++ b/static/code/stackblitz/v9/angular/app.component.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IonApp } from '@ionic/angular'; +import { ExampleComponent } from './example.component'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp], +}) +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v9/angular/app.component.withContent.html b/static/code/stackblitz/v9/angular/app.component.withContent.html new file mode 100644 index 00000000000..96ebf597215 --- /dev/null +++ b/static/code/stackblitz/v9/angular/app.component.withContent.html @@ -0,0 +1,5 @@ + + + + + diff --git a/static/code/stackblitz/v9/angular/app.component.withContent.ts b/static/code/stackblitz/v9/angular/app.component.withContent.ts new file mode 100644 index 00000000000..b24c043485e --- /dev/null +++ b/static/code/stackblitz/v9/angular/app.component.withContent.ts @@ -0,0 +1,13 @@ +import { Component } from '@angular/core'; +import { IonApp, IonContent } from '@ionic/angular'; +import { ExampleComponent } from './example.component'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [ExampleComponent, IonApp, IonContent], +}) +export class AppComponent { + constructor() {} +} diff --git a/static/code/stackblitz/v9/angular/app.routes.ts b/static/code/stackblitz/v9/angular/app.routes.ts new file mode 100644 index 00000000000..f442724b6f3 --- /dev/null +++ b/static/code/stackblitz/v9/angular/app.routes.ts @@ -0,0 +1,13 @@ +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: 'example', + loadComponent: () => import('./example.component').then((m) => m.ExampleComponent), + }, + { + path: '', + redirectTo: 'example', + pathMatch: 'full', + }, +]; diff --git a/static/code/stackblitz/v9/angular/example.component.ts b/static/code/stackblitz/v9/angular/example.component.ts new file mode 100644 index 00000000000..6b67261e0b3 --- /dev/null +++ b/static/code/stackblitz/v9/angular/example.component.ts @@ -0,0 +1,8 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'] +}) +export class ExampleComponent { } diff --git a/static/code/stackblitz/v9/angular/global.css b/static/code/stackblitz/v9/angular/global.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/angular/index.html b/static/code/stackblitz/v9/angular/index.html new file mode 100644 index 00000000000..227b2a07ed1 --- /dev/null +++ b/static/code/stackblitz/v9/angular/index.html @@ -0,0 +1,15 @@ + + + + + + + + Ionic App + + + + + + + diff --git a/static/code/stackblitz/v9/angular/main.ts b/static/code/stackblitz/v9/angular/main.ts new file mode 100644 index 00000000000..bdad1106827 --- /dev/null +++ b/static/code/stackblitz/v9/angular/main.ts @@ -0,0 +1,14 @@ +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular(), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}); diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json new file mode 100644 index 00000000000..3c8e52fb9b1 --- /dev/null +++ b/static/code/stackblitz/v9/angular/package-lock.json @@ -0,0 +1,10471 @@ +{ + "name": "angular-starter", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "angular-starter", + "dependencies": { + "@angular/animations": "^22.0.0", + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/forms": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-browser-dynamic": "^22.0.0", + "@angular/router": "^22.0.0", + "@ionic/angular": "9.0.0", + "@ionic/core": "9.0.0", + "ionicons": "8.1.0", + "rxjs": "^7.8.1", + "tslib": "^2.5.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^22.0.0", + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "typescript": "~6.0.0" + } + }, + "node_modules/@algolia/abtesting": { + "version": "1.18.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-abtesting": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-analytics": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-common": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-insights": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-personalization": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-query-suggestions": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/client-search": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/ingestion": { + "version": "1.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/monitoring": { + "version": "1.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/recommend": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-browser-xhr": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-fetch": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@algolia/requester-node-http": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/client-common": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/@ampproject/remapping": { + "version": "2.3.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@angular-devkit/architect": { + "version": "0.2200.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "22.0.0", + "rxjs": "7.8.2" + }, + "bin": { + "architect": "bin/cli.js" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular-devkit/build-angular": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "2.3.0", + "@angular-devkit/architect": "0.2200.0", + "@angular-devkit/build-webpack": "0.2200.0", + "@angular-devkit/core": "22.0.0", + "@angular/build": "22.0.0", + "@babel/core": "7.29.0", + "@babel/generator": "7.29.1", + "@babel/helper-annotate-as-pure": "7.27.3", + "@babel/helper-split-export-declaration": "7.24.7", + "@babel/plugin-transform-async-generator-functions": "7.29.0", + "@babel/plugin-transform-async-to-generator": "7.28.6", + "@babel/plugin-transform-runtime": "7.29.0", + "@babel/preset-env": "7.29.3", + "@babel/runtime": "7.29.2", + "@discoveryjs/json-ext": "1.1.0", + "@ngtools/webpack": "22.0.0", + "ansi-colors": "4.1.3", + "autoprefixer": "10.5.0", + "babel-loader": "10.1.1", + "browserslist": "^4.26.0", + "copy-webpack-plugin": "14.0.0", + "css-loader": "7.1.4", + "esbuild-wasm": "0.28.0", + "http-proxy-middleware": "3.0.5", + "istanbul-lib-instrument": "6.0.3", + "jsonc-parser": "3.3.1", + "karma-source-map-support": "1.4.0", + "less": "4.6.4", + "less-loader": "12.3.2", + "license-webpack-plugin": "4.0.2", + "loader-utils": "3.3.1", + "mini-css-extract-plugin": "2.10.2", + "open": "11.0.0", + "ora": "9.4.0", + "picomatch": "4.0.4", + "piscina": "5.1.4", + "postcss": "8.5.13", + "postcss-loader": "8.2.1", + "resolve-url-loader": "5.0.0", + "rxjs": "7.8.2", + "sass": "1.99.0", + "sass-loader": "16.0.7", + "semver": "7.7.4", + "source-map-loader": "5.0.0", + "source-map-support": "0.5.21", + "terser": "5.46.2", + "tinyglobby": "0.2.16", + "tslib": "2.8.1", + "webpack": "5.106.2", + "webpack-dev-middleware": "8.0.3", + "webpack-dev-server": "5.2.3", + "webpack-merge": "6.0.1", + "webpack-subresource-integrity": "5.1.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "optionalDependencies": { + "esbuild": "0.28.0" + }, + "peerDependencies": { + "@angular/compiler-cli": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/localize": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-server": "^22.0.0", + "@angular/service-worker": "^22.0.0", + "@angular/ssr": "^22.0.0", + "browser-sync": "^3.0.2", + "karma": "^6.3.0", + "ng-packagr": "^22.0.0", + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "typescript": ">=6.0 <6.1" + }, + "peerDependenciesMeta": { + "@angular/core": { + "optional": true + }, + "@angular/localize": { + "optional": true + }, + "@angular/platform-browser": { + "optional": true + }, + "@angular/platform-server": { + "optional": true + }, + "@angular/service-worker": { + "optional": true + }, + "@angular/ssr": { + "optional": true + }, + "browser-sync": { + "optional": true + }, + "karma": { + "optional": true + }, + "ng-packagr": { + "optional": true + }, + "tailwindcss": { + "optional": true + } + } + }, + "node_modules/@angular-devkit/build-webpack": { + "version": "0.2200.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/architect": "0.2200.0", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "webpack": "^5.30.0", + "webpack-dev-server": "^5.0.2" + } + }, + "node_modules/@angular-devkit/core": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "8.20.0", + "ajv-formats": "3.0.1", + "jsonc-parser": "3.3.1", + "picomatch": "4.0.4", + "rxjs": "7.8.2", + "source-map": "0.7.6" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "chokidar": "^5.0.0" + }, + "peerDependenciesMeta": { + "chokidar": { + "optional": true + } + } + }, + "node_modules/@angular-devkit/schematics": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "22.0.0", + "jsonc-parser": "3.3.1", + "magic-string": "0.30.21", + "ora": "9.4.0", + "rxjs": "7.8.2" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular/animations": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/core": "22.0.0" + } + }, + "node_modules/@angular/build": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@ampproject/remapping": "2.3.0", + "@angular-devkit/architect": "0.2200.0", + "@babel/core": "7.29.0", + "@babel/helper-annotate-as-pure": "7.27.3", + "@babel/helper-split-export-declaration": "7.24.7", + "@inquirer/confirm": "6.0.12", + "@vitejs/plugin-basic-ssl": "2.3.0", + "beasties": "0.4.2", + "browserslist": "^4.26.0", + "esbuild": "0.28.0", + "https-proxy-agent": "9.0.0", + "jsonc-parser": "3.3.1", + "listr2": "10.2.1", + "magic-string": "0.30.21", + "mrmime": "2.0.1", + "parse5-html-rewriting-stream": "8.0.1", + "picomatch": "4.0.4", + "piscina": "5.1.4", + "rollup": "4.60.2", + "sass": "1.99.0", + "semver": "7.7.4", + "source-map-support": "0.5.21", + "tinyglobby": "0.2.16", + "vite": "7.3.2", + "watchpack": "2.5.1" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "optionalDependencies": { + "lmdb": "3.5.4" + }, + "peerDependencies": { + "@angular/compiler": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/localize": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-server": "^22.0.0", + "@angular/service-worker": "^22.0.0", + "@angular/ssr": "^22.0.0", + "istanbul-lib-instrument": "^6.0.0", + "karma": "^6.4.0", + "less": "^4.2.0", + "ng-packagr": "^22.0.0", + "postcss": "^8.4.0", + "tailwindcss": "^2.0.0 || ^3.0.0 || ^4.0.0", + "tslib": "^2.3.0", + "typescript": ">=6.0 <6.1", + "vitest": "^4.0.8" + }, + "peerDependenciesMeta": { + "@angular/core": { + "optional": true + }, + "@angular/localize": { + "optional": true + }, + "@angular/platform-browser": { + "optional": true + }, + "@angular/platform-server": { + "optional": true + }, + "@angular/service-worker": { + "optional": true + }, + "@angular/ssr": { + "optional": true + }, + "istanbul-lib-instrument": { + "optional": true + }, + "karma": { + "optional": true + }, + "less": { + "optional": true + }, + "ng-packagr": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tailwindcss": { + "optional": true + }, + "vitest": { + "optional": true + } + } + }, + "node_modules/@angular/cli": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/architect": "0.2200.0", + "@angular-devkit/core": "22.0.0", + "@angular-devkit/schematics": "22.0.0", + "@inquirer/prompts": "8.4.2", + "@listr2/prompt-adapter-inquirer": "4.2.3", + "@modelcontextprotocol/sdk": "1.29.0", + "@schematics/angular": "22.0.0", + "@yarnpkg/lockfile": "1.1.0", + "algoliasearch": "5.52.0", + "ini": "6.0.0", + "jsonc-parser": "3.3.1", + "listr2": "10.2.1", + "npm-package-arg": "13.0.2", + "pacote": "21.5.0", + "parse5-html-rewriting-stream": "8.0.1", + "semver": "7.7.4", + "yargs": "18.0.0", + "zod": "4.4.2" + }, + "bin": { + "ng": "bin/ng.js" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@angular/common": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/core": "22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/compiler": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + } + }, + "node_modules/@angular/compiler-cli": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "7.29.0", + "@jridgewell/sourcemap-codec": "^1.4.14", + "chokidar": "^5.0.0", + "convert-source-map": "^1.5.1", + "reflect-metadata": "^0.2.0", + "semver": "^7.0.0", + "tslib": "^2.3.0", + "yargs": "^18.0.0" + }, + "bin": { + "ng-xi18n": "bundles/src/bin/ng_xi18n.js", + "ngc": "bundles/src/bin/ngc.js" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/compiler": "22.0.0", + "typescript": ">=6.0 <6.1" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/@angular/core": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/compiler": "22.0.0", + "rxjs": "^6.5.3 || ^7.4.0", + "zone.js": "~0.15.0 || ~0.16.0" + }, + "peerDependenciesMeta": { + "@angular/compiler": { + "optional": true + }, + "zone.js": { + "optional": true + } + } + }, + "node_modules/@angular/forms": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "@standard-schema/spec": "^1.0.0", + "tslib": "^2.3.0", + "zod": "^4.0.10" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/common": "22.0.0", + "@angular/core": "22.0.0", + "@angular/platform-browser": "22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@angular/platform-browser": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/animations": "22.0.0", + "@angular/common": "22.0.0", + "@angular/core": "22.0.0" + }, + "peerDependenciesMeta": { + "@angular/animations": { + "optional": true + } + } + }, + "node_modules/@angular/platform-browser-dynamic": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/common": "22.0.0", + "@angular/compiler": "22.0.0", + "@angular/core": "22.0.0", + "@angular/platform-browser": "22.0.0" + } + }, + "node_modules/@angular/router": { + "version": "22.0.0", + "license": "MIT", + "dependencies": { + "tslib": "^2.3.0" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0" + }, + "peerDependencies": { + "@angular/common": "22.0.0", + "@angular/core": "22.0.0", + "@angular/platform-browser": "22.0.0", + "rxjs": "^6.5.3 || ^7.4.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.0", + "@babel/generator": "^7.29.0", + "@babel/helper-compilation-targets": "^7.28.6", + "@babel/helper-module-transforms": "^7.28.6", + "@babel/helpers": "^7.28.6", + "@babel/parser": "^7.29.0", + "@babel/template": "^7.28.6", + "@babel/traverse": "^7.29.0", + "@babel/types": "^7.29.0", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/core/node_modules/convert-source-map": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/@babel/core/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.0", + "@babel/types": "^7.29.0", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-annotate-as-pure": { + "version": "7.27.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.27.3" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-create-class-features-plugin": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-member-expression-to-functions": "^7.29.7", + "@babel/helper-optimise-call-expression": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", + "@babel/traverse": "^7.29.7", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-create-class-features-plugin/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-create-class-features-plugin/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-create-regexp-features-plugin": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "regexpu-core": "^6.3.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-create-regexp-features-plugin/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/helper-define-polyfill-provider": { + "version": "0.6.8", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-compilation-targets": "^7.28.6", + "@babel/helper-plugin-utils": "^7.28.6", + "debug": "^4.4.3", + "lodash.debounce": "^4.0.8", + "resolve": "^1.22.11" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-member-expression-to-functions": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-optimise-call-expression": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-remap-async-to-generator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-wrap-function": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-remap-async-to-generator/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-replace-supers": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-member-expression-to-functions": "^7.29.7", + "@babel/helper-optimise-call-expression": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-skip-transparent-expression-wrappers": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-split-export-declaration": { + "version": "7.24.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.24.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-wrap-function": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-firefox-class-in-computed-class-key": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-safari-class-field-initializer-scope": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7", + "@babel/plugin-transform-optional-chaining": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.13.0" + } + }, + "node_modules/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-import-assertions": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-import-attributes": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-syntax-unicode-sets-regex": { + "version": "7.18.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.18.6", + "@babel/helper-plugin-utils": "^7.18.6" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-transform-arrow-functions": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-async-generator-functions": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.28.6", + "@babel/helper-remap-async-to-generator": "^7.27.1", + "@babel/traverse": "^7.29.0" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-async-to-generator": { + "version": "7.28.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.28.6", + "@babel/helper-plugin-utils": "^7.28.6", + "@babel/helper-remap-async-to-generator": "^7.27.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-block-scoped-functions": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-block-scoping": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-class-properties": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-class-static-block": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.12.0" + } + }, + "node_modules/@babel/plugin-transform-classes": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-classes/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/plugin-transform-computed-properties": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/template": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-destructuring": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-dotall-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-duplicate-keys": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-duplicate-named-capturing-groups-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-transform-dynamic-import": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-explicit-resource-management": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/plugin-transform-destructuring": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-exponentiation-operator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-export-namespace-from": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-for-of": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-function-name": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-json-strings": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-literals": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-logical-assignment-operators": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-member-expression-literals": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-modules-amd": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-modules-commonjs": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-modules-systemjs": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-modules-umd": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-named-capturing-groups-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-transform-new-target": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-nullish-coalescing-operator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-numeric-separator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-object-rest-spread": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/plugin-transform-destructuring": "^7.29.7", + "@babel/plugin-transform-parameters": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-object-super": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-replace-supers": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-optional-catch-binding": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-optional-chaining": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-parameters": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-private-methods": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-private-property-in-object": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.29.7", + "@babel/helper-create-class-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-private-property-in-object/node_modules/@babel/helper-annotate-as-pure": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/plugin-transform-property-literals": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-regenerator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-regexp-modifiers": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/plugin-transform-reserved-words": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-runtime": { + "version": "7.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.28.6", + "@babel/helper-plugin-utils": "^7.28.6", + "babel-plugin-polyfill-corejs2": "^0.4.14", + "babel-plugin-polyfill-corejs3": "^0.13.0", + "babel-plugin-polyfill-regenerator": "^0.6.5", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-runtime/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/plugin-transform-shorthand-properties": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-spread": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7", + "@babel/helper-skip-transparent-expression-wrappers": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-sticky-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-template-literals": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-typeof-symbol": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-unicode-escapes": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-unicode-property-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-unicode-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-unicode-sets-regex": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-create-regexp-features-plugin": "^7.29.7", + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/preset-env": { + "version": "7.29.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.3", + "@babel/helper-compilation-targets": "^7.28.6", + "@babel/helper-plugin-utils": "^7.28.6", + "@babel/helper-validator-option": "^7.27.1", + "@babel/plugin-bugfix-firefox-class-in-computed-class-key": "^7.28.5", + "@babel/plugin-bugfix-safari-class-field-initializer-scope": "^7.27.1", + "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.27.1", + "@babel/plugin-bugfix-safari-rest-destructuring-rhs-array": "^7.29.3", + "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.27.1", + "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly": "^7.28.6", + "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2", + "@babel/plugin-syntax-import-assertions": "^7.28.6", + "@babel/plugin-syntax-import-attributes": "^7.28.6", + "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6", + "@babel/plugin-transform-arrow-functions": "^7.27.1", + "@babel/plugin-transform-async-generator-functions": "^7.29.0", + "@babel/plugin-transform-async-to-generator": "^7.28.6", + "@babel/plugin-transform-block-scoped-functions": "^7.27.1", + "@babel/plugin-transform-block-scoping": "^7.28.6", + "@babel/plugin-transform-class-properties": "^7.28.6", + "@babel/plugin-transform-class-static-block": "^7.28.6", + "@babel/plugin-transform-classes": "^7.28.6", + "@babel/plugin-transform-computed-properties": "^7.28.6", + "@babel/plugin-transform-destructuring": "^7.28.5", + "@babel/plugin-transform-dotall-regex": "^7.28.6", + "@babel/plugin-transform-duplicate-keys": "^7.27.1", + "@babel/plugin-transform-duplicate-named-capturing-groups-regex": "^7.29.0", + "@babel/plugin-transform-dynamic-import": "^7.27.1", + "@babel/plugin-transform-explicit-resource-management": "^7.28.6", + "@babel/plugin-transform-exponentiation-operator": "^7.28.6", + "@babel/plugin-transform-export-namespace-from": "^7.27.1", + "@babel/plugin-transform-for-of": "^7.27.1", + "@babel/plugin-transform-function-name": "^7.27.1", + "@babel/plugin-transform-json-strings": "^7.28.6", + "@babel/plugin-transform-literals": "^7.27.1", + "@babel/plugin-transform-logical-assignment-operators": "^7.28.6", + "@babel/plugin-transform-member-expression-literals": "^7.27.1", + "@babel/plugin-transform-modules-amd": "^7.27.1", + "@babel/plugin-transform-modules-commonjs": "^7.28.6", + "@babel/plugin-transform-modules-systemjs": "^7.29.0", + "@babel/plugin-transform-modules-umd": "^7.27.1", + "@babel/plugin-transform-named-capturing-groups-regex": "^7.29.0", + "@babel/plugin-transform-new-target": "^7.27.1", + "@babel/plugin-transform-nullish-coalescing-operator": "^7.28.6", + "@babel/plugin-transform-numeric-separator": "^7.28.6", + "@babel/plugin-transform-object-rest-spread": "^7.28.6", + "@babel/plugin-transform-object-super": "^7.27.1", + "@babel/plugin-transform-optional-catch-binding": "^7.28.6", + "@babel/plugin-transform-optional-chaining": "^7.28.6", + "@babel/plugin-transform-parameters": "^7.27.7", + "@babel/plugin-transform-private-methods": "^7.28.6", + "@babel/plugin-transform-private-property-in-object": "^7.28.6", + "@babel/plugin-transform-property-literals": "^7.27.1", + "@babel/plugin-transform-regenerator": "^7.29.0", + "@babel/plugin-transform-regexp-modifiers": "^7.28.6", + "@babel/plugin-transform-reserved-words": "^7.27.1", + "@babel/plugin-transform-shorthand-properties": "^7.27.1", + "@babel/plugin-transform-spread": "^7.28.6", + "@babel/plugin-transform-sticky-regex": "^7.27.1", + "@babel/plugin-transform-template-literals": "^7.27.1", + "@babel/plugin-transform-typeof-symbol": "^7.27.1", + "@babel/plugin-transform-unicode-escapes": "^7.27.1", + "@babel/plugin-transform-unicode-property-regex": "^7.28.6", + "@babel/plugin-transform-unicode-regex": "^7.27.1", + "@babel/plugin-transform-unicode-sets-regex": "^7.28.6", + "@babel/preset-modules": "0.1.6-no-external-plugins", + "babel-plugin-polyfill-corejs2": "^0.4.15", + "babel-plugin-polyfill-corejs3": "^0.14.0", + "babel-plugin-polyfill-regenerator": "^0.6.6", + "core-js-compat": "^3.48.0", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/preset-env/node_modules/babel-plugin-polyfill-corejs3": { + "version": "0.14.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-define-polyfill-provider": "^0.6.8", + "core-js-compat": "^3.48.0" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/@babel/preset-env/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/@babel/preset-modules": { + "version": "0.1.6-no-external-plugins", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.0.0", + "@babel/types": "^7.4.4", + "esutils": "^2.0.2" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/@babel/runtime": { + "version": "7.29.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse/node_modules/@babel/generator": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@discoveryjs/json-ext": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14.17.0" + } + }, + "node_modules/@gar/promise-retry": { + "version": "1.0.3", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@harperfast/extended-iterable": { + "version": "1.0.3", + "dev": true, + "license": "Apache-2.0", + "optional": true + }, + "node_modules/@hono/node-server": { + "version": "1.19.14", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.14.1" + }, + "peerDependencies": { + "hono": "^4" + } + }, + "node_modules/@inquirer/ansi": { + "version": "2.0.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + } + }, + "node_modules/@inquirer/checkbox": { + "version": "5.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/ansi": "^2.0.7", + "@inquirer/core": "^11.2.1", + "@inquirer/figures": "^2.0.7", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/confirm": { + "version": "6.0.12", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.1.9", + "@inquirer/type": "^4.0.5" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/core": { + "version": "11.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/ansi": "^2.0.7", + "@inquirer/figures": "^2.0.7", + "@inquirer/type": "^4.0.7", + "cli-width": "^4.1.0", + "fast-wrap-ansi": "^0.2.0", + "mute-stream": "^3.0.0", + "signal-exit": "^4.1.0" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/editor": { + "version": "5.2.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/external-editor": "^3.0.3", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/expand": { + "version": "5.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/external-editor": { + "version": "3.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "chardet": "^2.1.1", + "iconv-lite": "^0.7.2" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/figures": { + "version": "2.0.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + } + }, + "node_modules/@inquirer/input": { + "version": "5.1.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/number": { + "version": "4.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/password": { + "version": "5.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/ansi": "^2.0.7", + "@inquirer/core": "^11.2.1", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/prompts": { + "version": "8.4.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/checkbox": "^5.1.4", + "@inquirer/confirm": "^6.0.12", + "@inquirer/editor": "^5.1.1", + "@inquirer/expand": "^5.0.13", + "@inquirer/input": "^5.0.12", + "@inquirer/number": "^4.0.12", + "@inquirer/password": "^5.0.12", + "@inquirer/rawlist": "^5.2.8", + "@inquirer/search": "^4.1.8", + "@inquirer/select": "^5.1.4" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^21.7.0 || ^20.12.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/rawlist": { + "version": "5.3.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/search": { + "version": "4.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/core": "^11.2.1", + "@inquirer/figures": "^2.0.7", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/select": { + "version": "5.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/ansi": "^2.0.7", + "@inquirer/core": "^11.2.1", + "@inquirer/figures": "^2.0.7", + "@inquirer/type": "^4.0.7" + }, + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@inquirer/type": { + "version": "4.0.7", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=23.5.0 || ^22.13.0 || ^20.17.0" + }, + "peerDependencies": { + "@types/node": ">=18" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + } + } + }, + "node_modules/@ionic/angular": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@ionic/core": "9.0.0", + "ionicons": "^8.0.13", + "jsonc-parser": "^3.0.0", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/core": ">=18.0.0", + "@angular/forms": ">=18.0.0", + "@angular/router": ">=18.0.0", + "rxjs": ">=7.5.0", + "zone.js": ">=0.13.0" + }, + "peerDependenciesMeta": { + "zone.js": { + "optional": true + } + } + }, + "node_modules/@ionic/core": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5", + "ionicons": "^8.1.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, + "node_modules/@isaacs/fs-minipass": { + "version": "4.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.0.4" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/@istanbuljs/schema": { + "version": "0.1.6", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/source-map": { + "version": "0.3.11", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.25" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@jsonjoy.com/base64": { + "version": "1.1.2", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/buffers": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/codegen": { + "version": "1.0.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-core": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-node-builtins": "4.57.6", + "@jsonjoy.com/fs-node-utils": "4.57.6", + "thingies": "^2.5.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-fsa": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-core": "4.57.6", + "@jsonjoy.com/fs-node-builtins": "4.57.6", + "@jsonjoy.com/fs-node-utils": "4.57.6", + "thingies": "^2.5.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-node": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-core": "4.57.6", + "@jsonjoy.com/fs-node-builtins": "4.57.6", + "@jsonjoy.com/fs-node-utils": "4.57.6", + "@jsonjoy.com/fs-print": "4.57.6", + "@jsonjoy.com/fs-snapshot": "4.57.6", + "glob-to-regex.js": "^1.0.0", + "thingies": "^2.5.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-node-builtins": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-node-to-fsa": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-fsa": "4.57.6", + "@jsonjoy.com/fs-node-builtins": "4.57.6", + "@jsonjoy.com/fs-node-utils": "4.57.6" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-node-utils": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-node-builtins": "4.57.6" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-print": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-node-utils": "4.57.6", + "tree-dump": "^1.1.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/buffers": "^17.65.0", + "@jsonjoy.com/fs-node-utils": "4.57.6", + "@jsonjoy.com/json-pack": "^17.65.0", + "@jsonjoy.com/util": "^17.65.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/base64": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/codegen": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pack": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/base64": "17.67.0", + "@jsonjoy.com/buffers": "17.67.0", + "@jsonjoy.com/codegen": "17.67.0", + "@jsonjoy.com/json-pointer": "17.67.0", + "@jsonjoy.com/util": "17.67.0", + "hyperdyperid": "^1.2.0", + "thingies": "^2.5.0", + "tree-dump": "^1.1.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/json-pointer": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/util": "17.67.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/fs-snapshot/node_modules/@jsonjoy.com/util": { + "version": "17.67.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/buffers": "17.67.0", + "@jsonjoy.com/codegen": "17.67.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pack": { + "version": "1.21.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/base64": "^1.1.2", + "@jsonjoy.com/buffers": "^1.2.0", + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/json-pointer": "^1.0.2", + "@jsonjoy.com/util": "^1.9.0", + "hyperdyperid": "^1.2.0", + "thingies": "^2.5.0", + "tree-dump": "^1.1.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pack/node_modules/@jsonjoy.com/buffers": { + "version": "1.2.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/json-pointer": { + "version": "1.0.2", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/codegen": "^1.0.0", + "@jsonjoy.com/util": "^1.9.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/util": { + "version": "1.9.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/buffers": "^1.0.0", + "@jsonjoy.com/codegen": "^1.0.0" + }, + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@jsonjoy.com/util/node_modules/@jsonjoy.com/buffers": { + "version": "1.2.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/@leichtgewicht/ip-codec": { + "version": "2.0.5", + "dev": true, + "license": "MIT" + }, + "node_modules/@listr2/prompt-adapter-inquirer": { + "version": "4.2.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@inquirer/type": "^4.0.5" + }, + "engines": { + "node": ">=22.13.0" + }, + "peerDependencies": { + "@inquirer/prompts": ">= 3 < 9", + "listr2": "10.2.1" + } + }, + "node_modules/@lmdb/lmdb-linux-x64": { + "version": "3.5.4", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@modelcontextprotocol/sdk": { + "version": "1.29.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@hono/node-server": "^1.19.9", + "ajv": "^8.17.1", + "ajv-formats": "^3.0.1", + "content-type": "^1.0.5", + "cors": "^2.8.5", + "cross-spawn": "^7.0.5", + "eventsource": "^3.0.2", + "eventsource-parser": "^3.0.0", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", + "json-schema-typed": "^8.0.2", + "pkce-challenge": "^5.0.0", + "raw-body": "^3.0.0", + "zod": "^3.25 || ^4.0", + "zod-to-json-schema": "^3.25.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@cfworker/json-schema": "^4.1.1", + "zod": "^3.25 || ^4.0" + }, + "peerDependenciesMeta": { + "@cfworker/json-schema": { + "optional": true + }, + "zod": { + "optional": false + } + } + }, + "node_modules/@msgpackr-extract/msgpackr-extract-linux-x64": { + "version": "3.0.4", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@napi-rs/nice": { + "version": "1.1.1", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">= 10" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/Brooooooklyn" + }, + "optionalDependencies": { + "@napi-rs/nice-android-arm-eabi": "1.1.1", + "@napi-rs/nice-android-arm64": "1.1.1", + "@napi-rs/nice-darwin-arm64": "1.1.1", + "@napi-rs/nice-darwin-x64": "1.1.1", + "@napi-rs/nice-freebsd-x64": "1.1.1", + "@napi-rs/nice-linux-arm-gnueabihf": "1.1.1", + "@napi-rs/nice-linux-arm64-gnu": "1.1.1", + "@napi-rs/nice-linux-arm64-musl": "1.1.1", + "@napi-rs/nice-linux-ppc64-gnu": "1.1.1", + "@napi-rs/nice-linux-riscv64-gnu": "1.1.1", + "@napi-rs/nice-linux-s390x-gnu": "1.1.1", + "@napi-rs/nice-linux-x64-gnu": "1.1.1", + "@napi-rs/nice-linux-x64-musl": "1.1.1", + "@napi-rs/nice-openharmony-arm64": "1.1.1", + "@napi-rs/nice-win32-arm64-msvc": "1.1.1", + "@napi-rs/nice-win32-ia32-msvc": "1.1.1", + "@napi-rs/nice-win32-x64-msvc": "1.1.1" + } + }, + "node_modules/@napi-rs/nice-linux-x64-gnu": { + "version": "1.1.1", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@napi-rs/nice-linux-x64-musl": { + "version": "1.1.1", + "cpu": [ + "x64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "node_modules/@ngtools/webpack": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + }, + "peerDependencies": { + "@angular/compiler-cli": "^22.0.0", + "typescript": ">=6.0 <6.1", + "webpack": "^5.54.0" + } + }, + "node_modules/@noble/hashes": { + "version": "1.4.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/@npmcli/agent": { + "version": "4.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "agent-base": "^7.1.0", + "http-proxy-agent": "^7.0.0", + "https-proxy-agent": "^7.0.1", + "lru-cache": "^11.2.1", + "socks-proxy-agent": "^8.0.3" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/agent/node_modules/agent-base": { + "version": "7.1.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/@npmcli/agent/node_modules/https-proxy-agent": { + "version": "7.0.6", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/@npmcli/agent/node_modules/lru-cache": { + "version": "11.5.1", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@npmcli/fs": { + "version": "5.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "semver": "^7.3.5" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/git": { + "version": "7.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "@gar/promise-retry": "^1.0.0", + "@npmcli/promise-spawn": "^9.0.0", + "ini": "^6.0.0", + "lru-cache": "^11.2.1", + "npm-pick-manifest": "^11.0.1", + "proc-log": "^6.0.0", + "semver": "^7.3.5", + "which": "^6.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/git/node_modules/isexe": { + "version": "4.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=20" + } + }, + "node_modules/@npmcli/git/node_modules/lru-cache": { + "version": "11.5.1", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/@npmcli/git/node_modules/which": { + "version": "6.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^4.0.0" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/installed-package-contents": { + "version": "4.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "npm-bundled": "^5.0.0", + "npm-normalize-package-bin": "^5.0.0" + }, + "bin": { + "installed-package-contents": "bin/index.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/node-gyp": { + "version": "5.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/package-json": { + "version": "7.0.5", + "dev": true, + "license": "ISC", + "dependencies": { + "@npmcli/git": "^7.0.0", + "glob": "^13.0.0", + "hosted-git-info": "^9.0.0", + "json-parse-even-better-errors": "^5.0.0", + "proc-log": "^6.0.0", + "semver": "^7.5.3", + "spdx-expression-parse": "^4.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/promise-spawn": { + "version": "9.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "which": "^6.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/promise-spawn/node_modules/isexe": { + "version": "4.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=20" + } + }, + "node_modules/@npmcli/promise-spawn/node_modules/which": { + "version": "6.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^4.0.0" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/redact": { + "version": "4.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@npmcli/run-script": { + "version": "10.0.4", + "dev": true, + "license": "ISC", + "dependencies": { + "@npmcli/node-gyp": "^5.0.0", + "@npmcli/package-json": "^7.0.0", + "@npmcli/promise-spawn": "^9.0.0", + "node-gyp": "^12.1.0", + "proc-log": "^6.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@parcel/watcher": { + "name": "@parcel/watcher-wasm", + "version": "2.5.6", + "bundleDependencies": [ + "napi-wasm" + ], + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "is-glob": "^4.0.3", + "napi-wasm": "^1.1.0", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">= 10.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/@parcel/watcher/node_modules/napi-wasm": { + "version": "1.1.0", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true + }, + "node_modules/@peculiar/asn1-cms": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "@peculiar/asn1-x509-attr": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-csr": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-ecc": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pfx": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.7.0", + "@peculiar/asn1-pkcs8": "^2.7.0", + "@peculiar/asn1-rsa": "^2.7.0", + "@peculiar/asn1-schema": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs8": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-pkcs9": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.7.0", + "@peculiar/asn1-pfx": "^2.7.0", + "@peculiar/asn1-pkcs8": "^2.7.0", + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "@peculiar/asn1-x509-attr": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-rsa": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-schema": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/utils": "^2.0.2", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/asn1-x509-attr": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-schema": "^2.7.0", + "@peculiar/asn1-x509": "^2.7.0", + "asn1js": "^3.0.6", + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/utils": { + "version": "2.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/@peculiar/x509": { + "version": "1.14.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/asn1-cms": "^2.6.0", + "@peculiar/asn1-csr": "^2.6.0", + "@peculiar/asn1-ecc": "^2.6.0", + "@peculiar/asn1-pkcs9": "^2.6.0", + "@peculiar/asn1-rsa": "^2.6.0", + "@peculiar/asn1-schema": "^2.6.0", + "@peculiar/asn1-x509": "^2.6.0", + "pvtsutils": "^1.3.6", + "reflect-metadata": "^0.2.2", + "tslib": "^2.8.1", + "tsyringe": "^4.10.0" + }, + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.44.0", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.44.0", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@schematics/angular": { + "version": "22.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@angular-devkit/core": "22.0.0", + "@angular-devkit/schematics": "22.0.0", + "jsonc-parser": "3.3.1", + "typescript": "6.0.3" + }, + "engines": { + "node": "^22.22.3 || ^24.15.0 || >=26.0.0", + "npm": "^6.11.0 || ^7.5.6 || >=8.0.0", + "yarn": ">= 1.13.0" + } + }, + "node_modules/@sigstore/bundle": { + "version": "4.0.0", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@sigstore/protobuf-specs": "^0.5.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@sigstore/core": { + "version": "3.2.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@sigstore/protobuf-specs": { + "version": "0.5.1", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": "^18.17.0 || >=20.5.0" + } + }, + "node_modules/@sigstore/sign": { + "version": "4.1.1", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@gar/promise-retry": "^1.0.2", + "@sigstore/bundle": "^4.0.0", + "@sigstore/core": "^3.2.0", + "@sigstore/protobuf-specs": "^0.5.0", + "make-fetch-happen": "^15.0.4", + "proc-log": "^6.1.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@sigstore/tuf": { + "version": "4.0.2", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@sigstore/protobuf-specs": "^0.5.0", + "tuf-js": "^4.1.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@sigstore/verify": { + "version": "3.1.1", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@sigstore/bundle": "^4.0.0", + "@sigstore/core": "^3.2.1", + "@sigstore/protobuf-specs": "^0.5.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@standard-schema/spec": { + "version": "1.1.0", + "license": "MIT" + }, + "node_modules/@stencil/core": { + "version": "4.43.5", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, + "node_modules/@tufjs/canonical-json": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": "^16.14.0 || >=18.0.0" + } + }, + "node_modules/@tufjs/models": { + "version": "4.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@tufjs/canonical-json": "2.0.0", + "minimatch": "^10.1.1" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/@types/body-parser": { + "version": "1.19.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/connect": "*", + "@types/node": "*" + } + }, + "node_modules/@types/bonjour": { + "version": "3.5.13", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/connect": { + "version": "3.4.38", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/connect-history-api-fallback": { + "version": "1.5.4", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/express-serve-static-core": "*", + "@types/node": "*" + } + }, + "node_modules/@types/eslint": { + "version": "9.6.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "*", + "@types/json-schema": "*" + } + }, + "node_modules/@types/eslint-scope": { + "version": "3.7.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/eslint": "*", + "@types/estree": "*" + } + }, + "node_modules/@types/estree": { + "version": "1.0.8", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/express": { + "version": "4.17.25", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/body-parser": "*", + "@types/express-serve-static-core": "^4.17.33", + "@types/qs": "*", + "@types/serve-static": "^1" + } + }, + "node_modules/@types/express-serve-static-core": { + "version": "4.19.8", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*", + "@types/qs": "*", + "@types/range-parser": "*", + "@types/send": "*" + } + }, + "node_modules/@types/http-errors": { + "version": "2.0.5", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/http-proxy": { + "version": "1.17.17", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/json-schema": { + "version": "7.0.15", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/mime": { + "version": "1.3.5", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/node": { + "version": "25.9.1", + "dev": true, + "license": "MIT", + "dependencies": { + "undici-types": ">=7.24.0 <7.24.7" + } + }, + "node_modules/@types/qs": { + "version": "6.15.1", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/range-parser": { + "version": "1.2.7", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/retry": { + "version": "0.12.2", + "dev": true, + "license": "MIT" + }, + "node_modules/@types/send": { + "version": "1.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/serve-index": { + "version": "1.9.4", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/express": "*" + } + }, + "node_modules/@types/serve-static": { + "version": "1.15.10", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/http-errors": "*", + "@types/node": "*", + "@types/send": "<1" + } + }, + "node_modules/@types/serve-static/node_modules/@types/send": { + "version": "0.17.6", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/mime": "^1", + "@types/node": "*" + } + }, + "node_modules/@types/sockjs": { + "version": "0.3.36", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@types/ws": { + "version": "8.18.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*" + } + }, + "node_modules/@vitejs/plugin-basic-ssl": { + "version": "2.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": "^18.0.0 || ^20.0.0 || >=22.0.0" + }, + "peerDependencies": { + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/@webassemblyjs/ast": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/helper-numbers": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2" + } + }, + "node_modules/@webassemblyjs/floating-point-hex-parser": { + "version": "1.13.2", + "dev": true, + "license": "MIT" + }, + "node_modules/@webassemblyjs/helper-api-error": { + "version": "1.13.2", + "dev": true, + "license": "MIT" + }, + "node_modules/@webassemblyjs/helper-buffer": { + "version": "1.14.1", + "dev": true, + "license": "MIT" + }, + "node_modules/@webassemblyjs/helper-numbers": { + "version": "1.13.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/floating-point-hex-parser": "1.13.2", + "@webassemblyjs/helper-api-error": "1.13.2", + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/helper-wasm-bytecode": { + "version": "1.13.2", + "dev": true, + "license": "MIT" + }, + "node_modules/@webassemblyjs/helper-wasm-section": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/wasm-gen": "1.14.1" + } + }, + "node_modules/@webassemblyjs/ieee754": { + "version": "1.13.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@xtuc/ieee754": "^1.2.0" + } + }, + "node_modules/@webassemblyjs/leb128": { + "version": "1.13.2", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@webassemblyjs/utf8": { + "version": "1.13.2", + "dev": true, + "license": "MIT" + }, + "node_modules/@webassemblyjs/wasm-edit": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/helper-wasm-section": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-opt": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1", + "@webassemblyjs/wast-printer": "1.14.1" + } + }, + "node_modules/@webassemblyjs/wasm-gen": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" + } + }, + "node_modules/@webassemblyjs/wasm-opt": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-buffer": "1.14.1", + "@webassemblyjs/wasm-gen": "1.14.1", + "@webassemblyjs/wasm-parser": "1.14.1" + } + }, + "node_modules/@webassemblyjs/wasm-parser": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@webassemblyjs/helper-api-error": "1.13.2", + "@webassemblyjs/helper-wasm-bytecode": "1.13.2", + "@webassemblyjs/ieee754": "1.13.2", + "@webassemblyjs/leb128": "1.13.2", + "@webassemblyjs/utf8": "1.13.2" + } + }, + "node_modules/@webassemblyjs/wast-printer": { + "version": "1.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@webassemblyjs/ast": "1.14.1", + "@xtuc/long": "4.2.2" + } + }, + "node_modules/@xtuc/ieee754": { + "version": "1.2.0", + "dev": true, + "license": "BSD-3-Clause" + }, + "node_modules/@xtuc/long": { + "version": "4.2.2", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/@yarnpkg/lockfile": { + "version": "1.1.0", + "dev": true, + "license": "BSD-2-Clause" + }, + "node_modules/abbrev": { + "version": "4.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/accepts": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-types": "^3.0.0", + "negotiator": "^1.0.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/acorn": { + "version": "8.16.0", + "dev": true, + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-import-phases": { + "version": "1.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.13.0" + }, + "peerDependencies": { + "acorn": "^8.14.0" + } + }, + "node_modules/adjust-sourcemap-loader": { + "version": "4.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "loader-utils": "^2.0.0", + "regex-parser": "^2.2.11" + }, + "engines": { + "node": ">=8.9" + } + }, + "node_modules/adjust-sourcemap-loader/node_modules/loader-utils": { + "version": "2.0.4", + "dev": true, + "license": "MIT", + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/agent-base": { + "version": "9.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20" + } + }, + "node_modules/ajv": { + "version": "8.20.0", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "fast-uri": "^3.0.1", + "json-schema-traverse": "^1.0.0", + "require-from-string": "^2.0.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ajv-formats": { + "version": "3.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "^8.0.0" + }, + "peerDependencies": { + "ajv": "^8.0.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/ajv-keywords": { + "version": "5.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "ajv": "^8.8.2" + } + }, + "node_modules/algoliasearch": { + "version": "5.52.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@algolia/abtesting": "1.18.0", + "@algolia/client-abtesting": "5.52.0", + "@algolia/client-analytics": "5.52.0", + "@algolia/client-common": "5.52.0", + "@algolia/client-insights": "5.52.0", + "@algolia/client-personalization": "5.52.0", + "@algolia/client-query-suggestions": "5.52.0", + "@algolia/client-search": "5.52.0", + "@algolia/ingestion": "1.52.0", + "@algolia/monitoring": "1.52.0", + "@algolia/recommend": "5.52.0", + "@algolia/requester-browser-xhr": "5.52.0", + "@algolia/requester-fetch": "5.52.0", + "@algolia/requester-node-http": "5.52.0" + }, + "engines": { + "node": ">= 14.0.0" + } + }, + "node_modules/ansi-colors": { + "version": "4.1.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/ansi-escapes": { + "version": "7.3.0", + "dev": true, + "license": "MIT", + "dependencies": { + "environment": "^1.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ansi-html-community": { + "version": "0.0.8", + "dev": true, + "engines": [ + "node >= 0.8.0" + ], + "license": "Apache-2.0", + "bin": { + "ansi-html": "bin/ansi-html" + } + }, + "node_modules/ansi-regex": { + "version": "6.2.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-regex?sponsor=1" + } + }, + "node_modules/ansi-styles": { + "version": "6.2.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/anymatch": { + "version": "3.1.3", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/anymatch/node_modules/picomatch": { + "version": "2.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/argparse": { + "version": "2.0.1", + "dev": true, + "license": "Python-2.0" + }, + "node_modules/array-flatten": { + "version": "1.1.1", + "dev": true, + "license": "MIT" + }, + "node_modules/asn1js": { + "version": "3.0.10", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.5", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/autoprefixer": { + "version": "10.5.0", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/autoprefixer" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "browserslist": "^4.28.2", + "caniuse-lite": "^1.0.30001787", + "fraction.js": "^5.3.4", + "picocolors": "^1.1.1", + "postcss-value-parser": "^4.2.0" + }, + "bin": { + "autoprefixer": "bin/autoprefixer" + }, + "engines": { + "node": "^10 || ^12 || >=14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/babel-loader": { + "version": "10.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "find-up": "^5.0.0" + }, + "engines": { + "node": "^18.20.0 || ^20.10.0 || >=22.0.0" + }, + "peerDependencies": { + "@babel/core": "^7.12.0 || ^8.0.0-beta.1", + "@rspack/core": "^1.0.0 || ^2.0.0-0", + "webpack": ">=5.61.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/babel-plugin-polyfill-corejs2": { + "version": "0.4.17", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.28.6", + "@babel/helper-define-polyfill-provider": "^0.6.8", + "semver": "^6.3.1" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/babel-plugin-polyfill-corejs2/node_modules/semver": { + "version": "6.3.1", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/babel-plugin-polyfill-corejs3": { + "version": "0.13.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-define-polyfill-provider": "^0.6.5", + "core-js-compat": "^3.43.0" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/babel-plugin-polyfill-regenerator": { + "version": "0.6.8", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-define-polyfill-provider": "^0.6.8" + }, + "peerDependencies": { + "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" + } + }, + "node_modules/balanced-match": { + "version": "4.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.10.33", + "dev": true, + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/batch": { + "version": "0.6.1", + "dev": true, + "license": "MIT" + }, + "node_modules/beasties": { + "version": "0.4.2", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "css-select": "^6.0.0", + "css-what": "^7.0.0", + "dom-serializer": "^2.0.0", + "domhandler": "^5.0.3", + "htmlparser2": "^10.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.49", + "postcss-media-query-parser": "^0.2.3", + "postcss-safe-parser": "^7.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/big.js": { + "version": "5.2.2", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/body-parser": { + "version": "2.2.2", + "dev": true, + "license": "MIT", + "dependencies": { + "bytes": "^3.1.2", + "content-type": "^1.0.5", + "debug": "^4.4.3", + "http-errors": "^2.0.0", + "iconv-lite": "^0.7.0", + "on-finished": "^2.4.1", + "qs": "^6.14.1", + "raw-body": "^3.0.1", + "type-is": "^2.0.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/bonjour-service": { + "version": "1.4.0", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "multicast-dns": "^7.2.5" + } + }, + "node_modules/boolbase": { + "version": "1.0.0", + "dev": true, + "license": "ISC" + }, + "node_modules/brace-expansion": { + "version": "5.0.6", + "dev": true, + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/browserslist": { + "version": "4.28.2", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.12", + "caniuse-lite": "^1.0.30001782", + "electron-to-chromium": "^1.5.328", + "node-releases": "^2.0.36", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/buffer-from": { + "version": "1.1.2", + "dev": true, + "license": "MIT" + }, + "node_modules/bundle-name": { + "version": "4.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "run-applescript": "^7.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/bytes": { + "version": "3.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/bytestreamjs": { + "version": "2.0.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/cacache": { + "version": "20.0.4", + "dev": true, + "license": "ISC", + "dependencies": { + "@npmcli/fs": "^5.0.0", + "fs-minipass": "^3.0.0", + "glob": "^13.0.0", + "lru-cache": "^11.1.0", + "minipass": "^7.0.3", + "minipass-collect": "^2.0.1", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.4", + "p-map": "^7.0.2", + "ssri": "^13.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/cacache/node_modules/lru-cache": { + "version": "11.5.1", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001793", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/chalk": { + "version": "5.6.2", + "dev": true, + "license": "MIT", + "engines": { + "node": "^12.17.0 || ^14.13 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/chardet": { + "version": "2.1.1", + "dev": true, + "license": "MIT" + }, + "node_modules/chokidar": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/chownr": { + "version": "3.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=18" + } + }, + "node_modules/chrome-trace-event": { + "version": "1.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0" + } + }, + "node_modules/cli-cursor": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "restore-cursor": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-spinners": { + "version": "3.4.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-truncate": { + "version": "5.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "slice-ansi": "^8.0.0", + "string-width": "^8.2.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cli-width": { + "version": "4.1.0", + "dev": true, + "license": "ISC", + "engines": { + "node": ">= 12" + } + }, + "node_modules/cliui": { + "version": "9.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "string-width": "^7.2.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/cliui/node_modules/string-width": { + "version": "7.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/cliui/node_modules/wrap-ansi": { + "version": "9.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/clone-deep": { + "version": "4.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-plain-object": "^2.0.4", + "kind-of": "^6.0.2", + "shallow-clone": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/clone-deep/node_modules/is-plain-object": { + "version": "2.0.4", + "dev": true, + "license": "MIT", + "dependencies": { + "isobject": "^3.0.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/colorette": { + "version": "2.0.20", + "dev": true, + "license": "MIT" + }, + "node_modules/commander": { + "version": "2.20.3", + "dev": true, + "license": "MIT" + }, + "node_modules/compressible": { + "version": "2.0.18", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": ">= 1.43.0 < 2" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/compression": { + "version": "1.8.1", + "dev": true, + "license": "MIT", + "dependencies": { + "bytes": "3.1.2", + "compressible": "~2.0.18", + "debug": "2.6.9", + "negotiator": "~0.6.4", + "on-headers": "~1.1.0", + "safe-buffer": "5.2.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/compression/node_modules/debug": { + "version": "2.6.9", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/compression/node_modules/ms": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/compression/node_modules/negotiator": { + "version": "0.6.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/connect-history-api-fallback": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/content-disposition": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/content-type": { + "version": "1.0.5", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/convert-source-map": { + "version": "1.9.0", + "dev": true, + "license": "MIT" + }, + "node_modules/cookie": { + "version": "0.7.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/cookie-signature": { + "version": "1.2.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.6.0" + } + }, + "node_modules/copy-anything": { + "version": "3.0.5", + "dev": true, + "license": "MIT", + "dependencies": { + "is-what": "^4.1.8" + }, + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, + "node_modules/copy-webpack-plugin": { + "version": "14.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "glob-parent": "^6.0.1", + "normalize-path": "^3.0.0", + "schema-utils": "^4.2.0", + "serialize-javascript": "^7.0.3", + "tinyglobby": "^0.2.12" + }, + "engines": { + "node": ">= 20.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + } + }, + "node_modules/core-js-compat": { + "version": "3.49.0", + "dev": true, + "license": "MIT", + "dependencies": { + "browserslist": "^4.28.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, + "node_modules/core-util-is": { + "version": "1.0.3", + "dev": true, + "license": "MIT" + }, + "node_modules/cors": { + "version": "2.8.6", + "dev": true, + "license": "MIT", + "dependencies": { + "object-assign": "^4", + "vary": "^1" + }, + "engines": { + "node": ">= 0.10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/cosmiconfig": { + "version": "9.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "env-paths": "^2.2.1", + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/cross-spawn": { + "version": "7.0.6", + "dev": true, + "license": "MIT", + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/css-loader": { + "version": "7.1.4", + "dev": true, + "license": "MIT", + "dependencies": { + "icss-utils": "^5.1.0", + "postcss": "^8.4.40", + "postcss-modules-extract-imports": "^3.1.0", + "postcss-modules-local-by-default": "^4.0.5", + "postcss-modules-scope": "^3.2.0", + "postcss-modules-values": "^4.0.0", + "postcss-value-parser": "^4.2.0", + "semver": "^7.6.3" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0", + "webpack": "^5.27.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/css-select": { + "version": "6.0.0", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0", + "css-what": "^7.0.0", + "domhandler": "^5.0.3", + "domutils": "^3.2.2", + "nth-check": "^2.1.1" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/css-what": { + "version": "7.0.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">= 6" + }, + "funding": { + "url": "https://github.com/sponsors/fb55" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/debug": { + "version": "4.4.3", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/default-browser": { + "version": "5.5.0", + "dev": true, + "license": "MIT", + "dependencies": { + "bundle-name": "^4.1.0", + "default-browser-id": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/default-browser-id": { + "version": "5.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/define-lazy-prop": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/depd": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/destroy": { + "version": "1.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/detect-libc": { + "version": "2.1.2", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/detect-node": { + "version": "2.1.0", + "dev": true, + "license": "MIT" + }, + "node_modules/dns-packet": { + "version": "5.6.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@leichtgewicht/ip-codec": "^2.0.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/ee-first": { + "version": "1.1.1", + "dev": true, + "license": "MIT" + }, + "node_modules/electron-to-chromium": { + "version": "1.5.367", + "dev": true, + "license": "ISC" + }, + "node_modules/emoji-regex": { + "version": "10.6.0", + "dev": true, + "license": "MIT" + }, + "node_modules/emojis-list": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/encodeurl": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/enhanced-resolve": { + "version": "5.22.2", + "dev": true, + "license": "MIT", + "dependencies": { + "graceful-fs": "^4.2.4", + "tapable": "^2.3.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/entities": { + "version": "4.5.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/env-paths": { + "version": "2.2.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/environment": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/errno": { + "version": "0.1.8", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "prr": "~1.0.1" + }, + "bin": { + "errno": "cli.js" + } + }, + "node_modules/error-ex": { + "version": "1.3.4", + "dev": true, + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-module-lexer": { + "version": "2.1.0", + "dev": true, + "license": "MIT" + }, + "node_modules/es-object-atoms": { + "version": "1.1.2", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/esbuild": { + "name": "esbuild-wasm", + "version": "0.28.0", + "dev": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/esbuild-wasm": { + "version": "0.28.0", + "dev": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/escape-html": { + "version": "1.0.3", + "dev": true, + "license": "MIT" + }, + "node_modules/eslint-scope": { + "version": "5.1.1", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^4.1.1" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esrecurse/node_modules/estraverse": { + "version": "5.3.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "4.3.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/etag": { + "version": "1.8.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "dev": true, + "license": "MIT" + }, + "node_modules/events": { + "version": "3.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.8.x" + } + }, + "node_modules/eventsource": { + "version": "3.0.7", + "dev": true, + "license": "MIT", + "dependencies": { + "eventsource-parser": "^3.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/eventsource-parser": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/exponential-backoff": { + "version": "3.1.3", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/express": { + "version": "5.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "accepts": "^2.0.0", + "body-parser": "^2.2.1", + "content-disposition": "^1.0.0", + "content-type": "^1.0.5", + "cookie": "^0.7.1", + "cookie-signature": "^1.2.1", + "debug": "^4.4.0", + "depd": "^2.0.0", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "etag": "^1.8.1", + "finalhandler": "^2.1.0", + "fresh": "^2.0.0", + "http-errors": "^2.0.0", + "merge-descriptors": "^2.0.0", + "mime-types": "^3.0.0", + "on-finished": "^2.4.1", + "once": "^1.4.0", + "parseurl": "^1.3.3", + "proxy-addr": "^2.0.7", + "qs": "^6.14.0", + "range-parser": "^1.2.1", + "router": "^2.2.0", + "send": "^1.1.0", + "serve-static": "^2.2.0", + "statuses": "^2.0.1", + "type-is": "^2.0.1", + "vary": "^1.1.2" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/express-rate-limit": { + "version": "8.5.2", + "dev": true, + "license": "MIT", + "dependencies": { + "ip-address": "^10.2.0" + }, + "engines": { + "node": ">= 16" + }, + "funding": { + "url": "https://github.com/sponsors/express-rate-limit" + }, + "peerDependencies": { + "express": ">= 4.11" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-string-truncated-width": { + "version": "3.0.3", + "dev": true, + "license": "MIT" + }, + "node_modules/fast-string-width": { + "version": "3.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-string-truncated-width": "^3.0.2" + } + }, + "node_modules/fast-uri": { + "version": "3.1.2", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fastify" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/fastify" + } + ], + "license": "BSD-3-Clause" + }, + "node_modules/fast-wrap-ansi": { + "version": "0.2.2", + "dev": true, + "license": "MIT", + "dependencies": { + "fast-string-width": "^3.0.2" + } + }, + "node_modules/faye-websocket": { + "version": "0.11.4", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "websocket-driver": ">=0.5.1" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/finalhandler": { + "version": "2.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.4.0", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "on-finished": "^2.4.1", + "parseurl": "^1.3.3", + "statuses": "^2.0.1" + }, + "engines": { + "node": ">= 18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat": { + "version": "5.0.2", + "dev": true, + "license": "BSD-3-Clause", + "bin": { + "flat": "cli.js" + } + }, + "node_modules/follow-redirects": { + "version": "1.16.0", + "dev": true, + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/forwarded": { + "version": "0.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/fraction.js": { + "version": "5.3.4", + "dev": true, + "license": "MIT", + "engines": { + "node": "*" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/rawify" + } + }, + "node_modules/fresh": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/fs-minipass": { + "version": "3.0.3", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.0.3" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/get-caller-file": { + "version": "2.0.5", + "dev": true, + "license": "ISC", + "engines": { + "node": "6.* || 8.* || >= 10.*" + } + }, + "node_modules/get-east-asian-width": { + "version": "1.6.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/glob": { + "version": "13.0.6", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "minimatch": "^10.2.2", + "minipass": "^7.1.3", + "path-scurry": "^2.0.2" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/glob-to-regex.js": { + "version": "1.2.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/glob-to-regexp": { + "version": "0.4.1", + "dev": true, + "license": "BSD-2-Clause" + }, + "node_modules/gopd": { + "version": "1.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/graceful-fs": { + "version": "4.2.11", + "dev": true, + "license": "ISC" + }, + "node_modules/handle-thing": { + "version": "2.0.1", + "dev": true, + "license": "MIT" + }, + "node_modules/has-flag": { + "version": "4.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/hono": { + "version": "4.12.23", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.9.0" + } + }, + "node_modules/hosted-git-info": { + "version": "9.0.3", + "dev": true, + "license": "ISC", + "dependencies": { + "lru-cache": "^11.1.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/hosted-git-info/node_modules/lru-cache": { + "version": "11.5.1", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/hpack.js": { + "version": "2.1.6", + "dev": true, + "license": "MIT", + "dependencies": { + "inherits": "^2.0.1", + "obuf": "^1.0.0", + "readable-stream": "^2.0.1", + "wbuf": "^1.1.0" + } + }, + "node_modules/hpack.js/node_modules/readable-stream": { + "version": "2.3.8", + "dev": true, + "license": "MIT", + "dependencies": { + "core-util-is": "~1.0.0", + "inherits": "~2.0.3", + "isarray": "~1.0.0", + "process-nextick-args": "~2.0.0", + "safe-buffer": "~5.1.1", + "string_decoder": "~1.1.1", + "util-deprecate": "~1.0.1" + } + }, + "node_modules/hpack.js/node_modules/safe-buffer": { + "version": "5.1.2", + "dev": true, + "license": "MIT" + }, + "node_modules/hpack.js/node_modules/string_decoder": { + "version": "1.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.1.0" + } + }, + "node_modules/htmlparser2": { + "version": "10.1.0", + "dev": true, + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.2.2", + "entities": "^7.0.1" + } + }, + "node_modules/htmlparser2/node_modules/entities": { + "version": "7.0.1", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/http-cache-semantics": { + "version": "4.2.0", + "dev": true, + "license": "BSD-2-Clause" + }, + "node_modules/http-deceiver": { + "version": "1.2.7", + "dev": true, + "license": "MIT" + }, + "node_modules/http-errors": { + "version": "2.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "depd": "~2.0.0", + "inherits": "~2.0.4", + "setprototypeof": "~1.2.0", + "statuses": "~2.0.2", + "toidentifier": "~1.0.1" + }, + "engines": { + "node": ">= 0.8" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/http-parser-js": { + "version": "0.5.10", + "dev": true, + "license": "MIT" + }, + "node_modules/http-proxy": { + "version": "1.18.1", + "dev": true, + "license": "MIT", + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/http-proxy-agent": { + "version": "7.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/http-proxy-agent/node_modules/agent-base": { + "version": "7.1.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/http-proxy-middleware": { + "version": "3.0.5", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/http-proxy": "^1.17.15", + "debug": "^4.3.6", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.3", + "is-plain-object": "^5.0.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": "^14.15.0 || ^16.10.0 || >=18.0.0" + } + }, + "node_modules/https-proxy-agent": { + "version": "9.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "9.0.0", + "debug": "^4.3.4" + }, + "engines": { + "node": ">= 20" + } + }, + "node_modules/hyperdyperid": { + "version": "1.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.18" + } + }, + "node_modules/iconv-lite": { + "version": "0.7.2", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/icss-utils": { + "version": "5.1.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/ignore-walk": { + "version": "8.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "minimatch": "^10.0.3" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/image-size": { + "version": "0.5.5", + "dev": true, + "license": "MIT", + "optional": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/immutable": { + "version": "5.1.6", + "dev": true, + "license": "MIT" + }, + "node_modules/import-fresh": { + "version": "3.3.1", + "dev": true, + "license": "MIT", + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "dev": true, + "license": "ISC" + }, + "node_modules/ini": { + "version": "6.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/ionicons": { + "version": "8.1.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5" + } + }, + "node_modules/ip-address": { + "version": "10.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 12" + } + }, + "node_modules/ipaddr.js": { + "version": "1.9.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "dev": true, + "license": "MIT" + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.16.2", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-docker": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "bin": { + "is-docker": "cli.js" + }, + "engines": { + "node": "^12.20.0 || ^14.13.1 || >=16.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-fullwidth-code-point": { + "version": "5.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.3.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-in-ssh": { + "version": "1.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-inside-container": { + "version": "1.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "is-docker": "^3.0.0" + }, + "bin": { + "is-inside-container": "cli.js" + }, + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-interactive": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-network-error": { + "version": "1.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/is-plain-obj": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-promise": { + "version": "4.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/is-unicode-supported": { + "version": "2.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/is-what": { + "version": "4.1.16", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, + "node_modules/is-wsl": { + "version": "3.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-inside-container": "^1.0.0" + }, + "engines": { + "node": ">=16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/isarray": { + "version": "1.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/isexe": { + "version": "2.0.0", + "dev": true, + "license": "ISC" + }, + "node_modules/isobject": { + "version": "3.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/istanbul-lib-coverage": { + "version": "3.2.2", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=8" + } + }, + "node_modules/istanbul-lib-instrument": { + "version": "6.0.3", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@babel/core": "^7.23.9", + "@babel/parser": "^7.23.9", + "@istanbuljs/schema": "^0.1.3", + "istanbul-lib-coverage": "^3.2.0", + "semver": "^7.5.4" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/jest-worker": { + "version": "27.5.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/node": "*", + "merge-stream": "^2.0.0", + "supports-color": "^8.0.0" + }, + "engines": { + "node": ">= 10.13.0" + } + }, + "node_modules/jiti": { + "version": "2.7.0", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "lib/jiti-cli.mjs" + } + }, + "node_modules/jose": { + "version": "6.2.3", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/panva" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/js-yaml": { + "version": "4.2.0", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/puzrin" + }, + { + "type": "github", + "url": "https://github.com/sponsors/nodeca" + } + ], + "license": "MIT", + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/jsesc": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json-parse-even-better-errors": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/json-schema-traverse": { + "version": "1.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/json-schema-typed": { + "version": "8.0.2", + "dev": true, + "license": "BSD-2-Clause" + }, + "node_modules/json5": { + "version": "2.2.3", + "dev": true, + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/jsonc-parser": { + "version": "3.3.1", + "license": "MIT" + }, + "node_modules/jsonparse": { + "version": "1.3.1", + "dev": true, + "engines": [ + "node >= 0.2.0" + ], + "license": "MIT" + }, + "node_modules/karma-source-map-support": { + "version": "1.4.0", + "dev": true, + "license": "MIT", + "dependencies": { + "source-map-support": "^0.5.5" + } + }, + "node_modules/kind-of": { + "version": "6.0.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/launch-editor": { + "version": "2.14.1", + "dev": true, + "license": "MIT", + "dependencies": { + "picocolors": "^1.1.1", + "shell-quote": "^1.8.4" + } + }, + "node_modules/less": { + "version": "4.6.4", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "copy-anything": "^3.0.5", + "parse-node-version": "^1.0.1" + }, + "bin": { + "lessc": "bin/lessc" + }, + "engines": { + "node": ">=18" + }, + "optionalDependencies": { + "errno": "^0.1.1", + "graceful-fs": "^4.1.2", + "image-size": "~0.5.0", + "make-dir": "^2.1.0", + "mime": "^1.4.1", + "needle": "^3.1.0", + "source-map": "~0.6.0" + } + }, + "node_modules/less-loader": { + "version": "12.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0", + "less": "^3.5.0 || ^4.0.0", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/less/node_modules/source-map": { + "version": "0.6.1", + "dev": true, + "license": "BSD-3-Clause", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/license-webpack-plugin": { + "version": "4.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "webpack-sources": "^3.0.0" + }, + "peerDependenciesMeta": { + "webpack": { + "optional": true + }, + "webpack-sources": { + "optional": true + } + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "dev": true, + "license": "MIT" + }, + "node_modules/listr2": { + "version": "10.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "cli-truncate": "^5.2.0", + "eventemitter3": "^5.0.4", + "log-update": "^6.1.0", + "rfdc": "^1.4.1", + "wrap-ansi": "^10.0.0" + }, + "engines": { + "node": ">=22.13.0" + } + }, + "node_modules/listr2/node_modules/eventemitter3": { + "version": "5.0.4", + "dev": true, + "license": "MIT" + }, + "node_modules/lmdb": { + "version": "3.5.4", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "@harperfast/extended-iterable": "^1.0.3", + "msgpackr": "^1.11.2", + "node-addon-api": "^6.1.0", + "node-gyp-build-optional-packages": "5.2.2", + "ordered-binary": "^1.5.3", + "weak-lru-cache": "^1.2.2" + }, + "bin": { + "download-lmdb-prebuilds": "bin/download-prebuilds.js" + }, + "optionalDependencies": { + "@lmdb/lmdb-darwin-arm64": "3.5.4", + "@lmdb/lmdb-darwin-x64": "3.5.4", + "@lmdb/lmdb-linux-arm": "3.5.4", + "@lmdb/lmdb-linux-arm64": "3.5.4", + "@lmdb/lmdb-linux-x64": "3.5.4", + "@lmdb/lmdb-win32-arm64": "3.5.4", + "@lmdb/lmdb-win32-x64": "3.5.4" + } + }, + "node_modules/loader-runner": { + "version": "4.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.11.5" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/loader-utils": { + "version": "3.3.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 12.13.0" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "dev": true, + "license": "MIT" + }, + "node_modules/log-symbols": { + "version": "7.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-unicode-supported": "^2.0.0", + "yoctocolors": "^2.1.1" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-update": { + "version": "6.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-escapes": "^7.0.0", + "cli-cursor": "^5.0.0", + "slice-ansi": "^7.1.0", + "strip-ansi": "^7.1.0", + "wrap-ansi": "^9.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-update/node_modules/slice-ansi": { + "version": "7.1.2", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "is-fullwidth-code-point": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/log-update/node_modules/string-width": { + "version": "7.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/log-update/node_modules/wrap-ansi": { + "version": "9.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.1", + "string-width": "^7.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/magic-string": { + "version": "0.30.21", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "node_modules/make-dir": { + "version": "2.1.0", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "pify": "^4.0.1", + "semver": "^5.6.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/make-dir/node_modules/semver": { + "version": "5.7.2", + "dev": true, + "license": "ISC", + "optional": true, + "bin": { + "semver": "bin/semver" + } + }, + "node_modules/make-fetch-happen": { + "version": "15.0.6", + "dev": true, + "license": "ISC", + "dependencies": { + "@gar/promise-retry": "^1.0.0", + "@npmcli/agent": "^4.0.0", + "@npmcli/redact": "^4.0.0", + "cacache": "^20.0.1", + "http-cache-semantics": "^4.1.1", + "minipass": "^7.0.2", + "minipass-fetch": "^5.0.0", + "minipass-flush": "^1.0.5", + "minipass-pipeline": "^1.2.4", + "negotiator": "^1.0.0", + "proc-log": "^6.0.0", + "ssri": "^13.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/media-typer": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/memfs": { + "version": "4.57.6", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@jsonjoy.com/fs-core": "4.57.6", + "@jsonjoy.com/fs-fsa": "4.57.6", + "@jsonjoy.com/fs-node": "4.57.6", + "@jsonjoy.com/fs-node-builtins": "4.57.6", + "@jsonjoy.com/fs-node-to-fsa": "4.57.6", + "@jsonjoy.com/fs-node-utils": "4.57.6", + "@jsonjoy.com/fs-print": "4.57.6", + "@jsonjoy.com/fs-snapshot": "4.57.6", + "@jsonjoy.com/json-pack": "^1.11.0", + "@jsonjoy.com/util": "^1.9.0", + "glob-to-regex.js": "^1.0.1", + "thingies": "^2.5.0", + "tree-dump": "^1.0.3", + "tslib": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/merge-descriptors": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/merge-stream": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/methods": { + "version": "1.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/micromatch/node_modules/picomatch": { + "version": "2.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "dev": true, + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/mime-db": { + "version": "1.54.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "3.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "^1.54.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/mimic-function": { + "version": "5.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/mini-css-extract-plugin": { + "version": "2.10.2", + "dev": true, + "license": "MIT", + "dependencies": { + "schema-utils": "^4.0.0", + "tapable": "^2.2.1" + }, + "engines": { + "node": ">= 12.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + } + }, + "node_modules/minimalistic-assert": { + "version": "1.0.1", + "dev": true, + "license": "ISC" + }, + "node_modules/minimatch": { + "version": "10.2.5", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.5" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/minipass": { + "version": "7.1.3", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/minipass-collect": { + "version": "2.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.0.3" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/minipass-fetch": { + "version": "5.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "minipass": "^7.0.3", + "minipass-sized": "^2.0.0", + "minizlib": "^3.0.1" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + }, + "optionalDependencies": { + "iconv-lite": "^0.7.2" + } + }, + "node_modules/minipass-flush": { + "version": "1.0.7", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "minipass": "^3.0.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/minipass-flush/node_modules/minipass": { + "version": "3.3.6", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minipass-flush/node_modules/yallist": { + "version": "4.0.0", + "dev": true, + "license": "ISC" + }, + "node_modules/minipass-pipeline": { + "version": "1.2.4", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minipass-pipeline/node_modules/minipass": { + "version": "3.3.6", + "dev": true, + "license": "ISC", + "dependencies": { + "yallist": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minipass-pipeline/node_modules/yallist": { + "version": "4.0.0", + "dev": true, + "license": "ISC" + }, + "node_modules/minipass-sized": { + "version": "2.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.1.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/minizlib": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "minipass": "^7.1.2" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/mrmime": { + "version": "2.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "dev": true, + "license": "MIT" + }, + "node_modules/msgpackr": { + "version": "1.11.12", + "dev": true, + "license": "MIT", + "optional": true, + "optionalDependencies": { + "msgpackr-extract": "^3.0.2" + } + }, + "node_modules/msgpackr-extract": { + "version": "3.0.4", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "dependencies": { + "node-gyp-build-optional-packages": "5.2.2" + }, + "bin": { + "download-msgpackr-prebuilds": "bin/download-prebuilds.js" + }, + "optionalDependencies": { + "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.4", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.4", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.4", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.4", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.4", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.4" + } + }, + "node_modules/multicast-dns": { + "version": "7.2.5", + "dev": true, + "license": "MIT", + "dependencies": { + "dns-packet": "^5.2.2", + "thunky": "^1.0.2" + }, + "bin": { + "multicast-dns": "cli.js" + } + }, + "node_modules/mute-stream": { + "version": "3.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.12", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/needle": { + "version": "3.5.0", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "iconv-lite": "^0.6.3", + "sax": "^1.2.4" + }, + "bin": { + "needle": "bin/needle" + }, + "engines": { + "node": ">= 4.4.x" + } + }, + "node_modules/needle/node_modules/iconv-lite": { + "version": "0.6.3", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/negotiator": { + "version": "1.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/neo-async": { + "version": "2.6.2", + "dev": true, + "license": "MIT" + }, + "node_modules/node-addon-api": { + "version": "6.1.0", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/node-gyp": { + "version": "12.3.0", + "dev": true, + "license": "MIT", + "dependencies": { + "env-paths": "^2.2.0", + "exponential-backoff": "^3.1.1", + "graceful-fs": "^4.2.6", + "nopt": "^9.0.0", + "proc-log": "^6.0.0", + "semver": "^7.3.5", + "tar": "^7.5.4", + "tinyglobby": "^0.2.12", + "undici": "^6.25.0", + "which": "^6.0.0" + }, + "bin": { + "node-gyp": "bin/node-gyp.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/node-gyp-build-optional-packages": { + "version": "5.2.2", + "dev": true, + "license": "MIT", + "optional": true, + "dependencies": { + "detect-libc": "^2.0.1" + }, + "bin": { + "node-gyp-build-optional-packages": "bin.js", + "node-gyp-build-optional-packages-optional": "optional.js", + "node-gyp-build-optional-packages-test": "build-test.js" + } + }, + "node_modules/node-gyp/node_modules/isexe": { + "version": "4.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=20" + } + }, + "node_modules/node-gyp/node_modules/which": { + "version": "6.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^4.0.0" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/node-releases": { + "version": "2.0.47", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/nopt": { + "version": "9.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "abbrev": "^4.0.0" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/npm-bundled": { + "version": "5.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "npm-normalize-package-bin": "^5.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-install-checks": { + "version": "8.0.0", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "semver": "^7.1.1" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-normalize-package-bin": { + "version": "5.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-package-arg": { + "version": "13.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "hosted-git-info": "^9.0.0", + "proc-log": "^6.0.0", + "semver": "^7.3.5", + "validate-npm-package-name": "^7.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-packlist": { + "version": "10.0.4", + "dev": true, + "license": "ISC", + "dependencies": { + "ignore-walk": "^8.0.0", + "proc-log": "^6.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-pick-manifest": { + "version": "11.0.3", + "dev": true, + "license": "ISC", + "dependencies": { + "npm-install-checks": "^8.0.0", + "npm-normalize-package-bin": "^5.0.0", + "npm-package-arg": "^13.0.0", + "semver": "^7.3.5" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/npm-registry-fetch": { + "version": "19.1.1", + "dev": true, + "license": "ISC", + "dependencies": { + "@npmcli/redact": "^4.0.0", + "jsonparse": "^1.3.1", + "make-fetch-happen": "^15.0.0", + "minipass": "^7.0.2", + "minipass-fetch": "^5.0.0", + "minizlib": "^3.0.1", + "npm-package-arg": "^13.0.0", + "proc-log": "^6.0.0" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/nth-check": { + "version": "2.1.1", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "boolbase": "^1.0.0" + }, + "funding": { + "url": "https://github.com/fb55/nth-check?sponsor=1" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/obuf": { + "version": "1.1.2", + "dev": true, + "license": "MIT" + }, + "node_modules/on-finished": { + "version": "2.4.1", + "dev": true, + "license": "MIT", + "dependencies": { + "ee-first": "1.1.1" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/on-headers": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/once": { + "version": "1.4.0", + "dev": true, + "license": "ISC", + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/onetime": { + "version": "7.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "mimic-function": "^5.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/open": { + "version": "11.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "default-browser": "^5.4.0", + "define-lazy-prop": "^3.0.0", + "is-in-ssh": "^1.0.0", + "is-inside-container": "^1.0.0", + "powershell-utils": "^0.1.0", + "wsl-utils": "^0.3.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ora": { + "version": "9.4.0", + "dev": true, + "license": "MIT", + "dependencies": { + "chalk": "^5.6.2", + "cli-cursor": "^5.0.0", + "cli-spinners": "^3.2.0", + "is-interactive": "^2.0.0", + "is-unicode-supported": "^2.1.0", + "log-symbols": "^7.0.1", + "stdin-discarder": "^0.3.2", + "string-width": "^8.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/ordered-binary": { + "version": "1.6.1", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/p-limit": { + "version": "3.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-map": { + "version": "7.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-retry": { + "version": "6.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/retry": "0.12.2", + "is-network-error": "^1.0.0", + "retry": "^0.13.1" + }, + "engines": { + "node": ">=16.17" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/pacote": { + "version": "21.5.0", + "dev": true, + "license": "ISC", + "dependencies": { + "@gar/promise-retry": "^1.0.0", + "@npmcli/git": "^7.0.0", + "@npmcli/installed-package-contents": "^4.0.0", + "@npmcli/package-json": "^7.0.0", + "@npmcli/promise-spawn": "^9.0.0", + "@npmcli/run-script": "^10.0.0", + "cacache": "^20.0.0", + "fs-minipass": "^3.0.0", + "minipass": "^7.0.2", + "npm-package-arg": "^13.0.0", + "npm-packlist": "^10.0.1", + "npm-pick-manifest": "^11.0.1", + "npm-registry-fetch": "^19.0.0", + "proc-log": "^6.0.0", + "sigstore": "^4.0.0", + "ssri": "^13.0.0", + "tar": "^7.4.3" + }, + "bin": { + "pacote": "bin/index.js" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/parse-json": { + "version": "5.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parse-json/node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "dev": true, + "license": "MIT" + }, + "node_modules/parse-node-version": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/parse5": { + "version": "8.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "entities": "^8.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-html-rewriting-stream": { + "version": "8.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "entities": "^8.0.0", + "parse5": "^8.0.0", + "parse5-sax-parser": "^8.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5-html-rewriting-stream/node_modules/entities": { + "version": "8.0.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/parse5-sax-parser": { + "version": "8.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "parse5": "^8.0.0" + }, + "funding": { + "url": "https://github.com/inikulin/parse5?sponsor=1" + } + }, + "node_modules/parse5/node_modules/entities": { + "version": "8.0.0", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/parseurl": { + "version": "1.3.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "dev": true, + "license": "MIT" + }, + "node_modules/path-scurry": { + "version": "2.0.2", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "lru-cache": "^11.0.0", + "minipass": "^7.1.2" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/path-scurry/node_modules/lru-cache": { + "version": "11.5.1", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/path-to-regexp": { + "version": "8.4.2", + "dev": true, + "license": "MIT", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pify": { + "version": "4.0.1", + "dev": true, + "license": "MIT", + "optional": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/piscina": { + "version": "5.1.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20.x" + }, + "optionalDependencies": { + "@napi-rs/nice": "^1.0.4" + } + }, + "node_modules/pkce-challenge": { + "version": "5.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.20.0" + } + }, + "node_modules/pkijs": { + "version": "3.4.0", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "@noble/hashes": "1.4.0", + "asn1js": "^3.0.6", + "bytestreamjs": "^2.0.1", + "pvtsutils": "^1.3.6", + "pvutils": "^1.1.3", + "tslib": "^2.8.1" + }, + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/postcss": { + "version": "8.5.13", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.11", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-loader": { + "version": "8.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "cosmiconfig": "^9.0.0", + "jiti": "^2.5.1", + "semver": "^7.6.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0", + "postcss": "^7.0.0 || ^8.0.1", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/postcss-media-query-parser": { + "version": "0.2.3", + "dev": true, + "license": "MIT" + }, + "node_modules/postcss-modules-extract-imports": { + "version": "3.1.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-local-by-default": { + "version": "4.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "icss-utils": "^5.0.0", + "postcss-selector-parser": "^7.0.0", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-scope": { + "version": "3.2.1", + "dev": true, + "license": "ISC", + "dependencies": { + "postcss-selector-parser": "^7.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-modules-values": { + "version": "4.0.0", + "dev": true, + "license": "ISC", + "dependencies": { + "icss-utils": "^5.0.0" + }, + "engines": { + "node": "^10 || ^12 || >= 14" + }, + "peerDependencies": { + "postcss": "^8.1.0" + } + }, + "node_modules/postcss-safe-parser": { + "version": "7.0.1", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "postcss": "^8.4.31" + } + }, + "node_modules/postcss-selector-parser": { + "version": "7.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "dev": true, + "license": "MIT" + }, + "node_modules/powershell-utils": { + "version": "0.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/proc-log": { + "version": "6.1.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/process-nextick-args": { + "version": "2.0.1", + "dev": true, + "license": "MIT" + }, + "node_modules/proxy-addr": { + "version": "2.0.7", + "dev": true, + "license": "MIT", + "dependencies": { + "forwarded": "0.2.0", + "ipaddr.js": "1.9.1" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/prr": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/pvtsutils": { + "version": "1.3.6", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.8.1" + } + }, + "node_modules/pvutils": { + "version": "1.1.5", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=16.0.0" + } + }, + "node_modules/qs": { + "version": "6.15.2", + "dev": true, + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.1.0" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/range-parser": { + "version": "1.2.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/raw-body": { + "version": "3.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.7.0", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.10" + } + }, + "node_modules/readable-stream": { + "version": "3.6.2", + "dev": true, + "license": "MIT", + "dependencies": { + "inherits": "^2.0.3", + "string_decoder": "^1.1.1", + "util-deprecate": "^1.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/readdirp": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/reflect-metadata": { + "version": "0.2.2", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/regenerate": { + "version": "1.4.2", + "dev": true, + "license": "MIT" + }, + "node_modules/regenerate-unicode-properties": { + "version": "10.2.2", + "dev": true, + "license": "MIT", + "dependencies": { + "regenerate": "^1.4.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/regex-parser": { + "version": "2.3.1", + "dev": true, + "license": "MIT" + }, + "node_modules/regexpu-core": { + "version": "6.4.0", + "dev": true, + "license": "MIT", + "dependencies": { + "regenerate": "^1.4.2", + "regenerate-unicode-properties": "^10.2.2", + "regjsgen": "^0.8.0", + "regjsparser": "^0.13.0", + "unicode-match-property-ecmascript": "^2.0.0", + "unicode-match-property-value-ecmascript": "^2.2.1" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/regjsgen": { + "version": "0.8.0", + "dev": true, + "license": "MIT" + }, + "node_modules/regjsparser": { + "version": "0.13.1", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "jsesc": "~3.1.0" + }, + "bin": { + "regjsparser": "bin/parser" + } + }, + "node_modules/require-from-string": { + "version": "2.0.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/requires-port": { + "version": "1.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/resolve": { + "version": "1.22.12", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/resolve-url-loader": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "adjust-sourcemap-loader": "^4.0.0", + "convert-source-map": "^1.7.0", + "loader-utils": "^2.0.0", + "postcss": "^8.2.14", + "source-map": "0.6.1" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/resolve-url-loader/node_modules/loader-utils": { + "version": "2.0.4", + "dev": true, + "license": "MIT", + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/resolve-url-loader/node_modules/source-map": { + "version": "0.6.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/restore-cursor": { + "version": "5.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "onetime": "^7.0.0", + "signal-exit": "^4.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/retry": { + "version": "0.13.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 4" + } + }, + "node_modules/rfdc": { + "version": "1.4.1", + "dev": true, + "license": "MIT" + }, + "node_modules/rollup": { + "name": "@rollup/wasm-node", + "version": "4.60.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.8" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/router": { + "version": "2.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.4.0", + "depd": "^2.0.0", + "is-promise": "^4.0.0", + "parseurl": "^1.3.3", + "path-to-regexp": "^8.0.0" + }, + "engines": { + "node": ">= 18" + } + }, + "node_modules/run-applescript": { + "version": "7.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/rxjs": { + "version": "7.8.2", + "license": "Apache-2.0", + "dependencies": { + "tslib": "^2.1.0" + } + }, + "node_modules/safe-buffer": { + "version": "5.2.1", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "dev": true, + "license": "MIT" + }, + "node_modules/sass": { + "version": "1.99.0", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^4.0.0", + "immutable": "^5.1.5", + "source-map-js": ">=0.6.2 <2.0.0" + }, + "bin": { + "sass": "sass.js" + }, + "engines": { + "node": ">=14.0.0" + }, + "optionalDependencies": { + "@parcel/watcher": "^2.4.1" + } + }, + "node_modules/sass-loader": { + "version": "16.0.7", + "dev": true, + "license": "MIT", + "dependencies": { + "neo-async": "^2.6.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "@rspack/core": "0.x || ^1.0.0 || ^2.0.0-0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0", + "sass": "^1.3.0", + "sass-embedded": "*", + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "@rspack/core": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "webpack": { + "optional": true + } + } + }, + "node_modules/sass/node_modules/chokidar": { + "version": "4.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "readdirp": "^4.0.1" + }, + "engines": { + "node": ">= 14.16.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sass/node_modules/readdirp": { + "version": "4.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14.18.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/sax": { + "version": "1.6.0", + "dev": true, + "license": "BlueOak-1.0.0", + "optional": true, + "engines": { + "node": ">=11.0.0" + } + }, + "node_modules/schema-utils": { + "version": "4.3.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/json-schema": "^7.0.9", + "ajv": "^8.9.0", + "ajv-formats": "^2.1.1", + "ajv-keywords": "^5.1.0" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/schema-utils/node_modules/ajv-formats": { + "version": "2.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "ajv": "^8.0.0" + }, + "peerDependencies": { + "ajv": "^8.0.0" + }, + "peerDependenciesMeta": { + "ajv": { + "optional": true + } + } + }, + "node_modules/select-hose": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/selfsigned": { + "version": "5.5.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@peculiar/x509": "^1.14.2", + "pkijs": "^3.3.3" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/semver": { + "version": "7.7.4", + "dev": true, + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/send": { + "version": "1.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.4.3", + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "etag": "^1.8.1", + "fresh": "^2.0.0", + "http-errors": "^2.0.1", + "mime-types": "^3.0.2", + "ms": "^2.1.3", + "on-finished": "^2.4.1", + "range-parser": "^1.2.1", + "statuses": "^2.0.2" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/serialize-javascript": { + "version": "7.0.5", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=20.0.0" + } + }, + "node_modules/serve-index": { + "version": "1.9.2", + "dev": true, + "license": "MIT", + "dependencies": { + "accepts": "~1.3.8", + "batch": "0.6.1", + "debug": "2.6.9", + "escape-html": "~1.0.3", + "http-errors": "~1.8.0", + "mime-types": "~2.1.35", + "parseurl": "~1.3.3" + }, + "engines": { + "node": ">= 0.8.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/serve-index/node_modules/accepts": { + "version": "1.3.8", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/debug": { + "version": "2.6.9", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/serve-index/node_modules/depd": { + "version": "1.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/http-errors": { + "version": "1.8.1", + "dev": true, + "license": "MIT", + "dependencies": { + "depd": "~1.1.2", + "inherits": "2.0.4", + "setprototypeof": "1.2.0", + "statuses": ">= 1.5.0 < 2", + "toidentifier": "1.0.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/mime-db": { + "version": "1.52.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/mime-types": { + "version": "2.1.35", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/ms": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/serve-index/node_modules/negotiator": { + "version": "0.6.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-index/node_modules/statuses": { + "version": "1.5.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/serve-static": { + "version": "2.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "encodeurl": "^2.0.0", + "escape-html": "^1.0.3", + "parseurl": "^1.3.3", + "send": "^1.2.0" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/setprototypeof": { + "version": "1.2.0", + "dev": true, + "license": "ISC" + }, + "node_modules/shallow-clone": { + "version": "3.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "kind-of": "^6.0.2" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/shell-quote": { + "version": "1.8.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel": { + "version": "1.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.4" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/signal-exit": { + "version": "4.1.0", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/sigstore": { + "version": "4.1.1", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "@sigstore/bundle": "^4.0.0", + "@sigstore/core": "^3.2.1", + "@sigstore/protobuf-specs": "^0.5.0", + "@sigstore/sign": "^4.1.1", + "@sigstore/tuf": "^4.0.2", + "@sigstore/verify": "^3.1.1" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/slice-ansi": { + "version": "8.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.3", + "is-fullwidth-code-point": "^5.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/chalk/slice-ansi?sponsor=1" + } + }, + "node_modules/smart-buffer": { + "version": "4.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/sockjs": { + "version": "0.3.24", + "dev": true, + "license": "MIT", + "dependencies": { + "faye-websocket": "^0.11.3", + "uuid": "^8.3.2", + "websocket-driver": "^0.7.4" + } + }, + "node_modules/socks": { + "version": "2.8.9", + "dev": true, + "license": "MIT", + "dependencies": { + "ip-address": "^10.1.1", + "smart-buffer": "^4.2.0" + }, + "engines": { + "node": ">= 10.0.0", + "npm": ">= 3.0.0" + } + }, + "node_modules/socks-proxy-agent": { + "version": "8.0.5", + "dev": true, + "license": "MIT", + "dependencies": { + "agent-base": "^7.1.2", + "debug": "^4.3.4", + "socks": "^2.8.3" + }, + "engines": { + "node": ">= 14" + } + }, + "node_modules/socks-proxy-agent/node_modules/agent-base": { + "version": "7.1.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 14" + } + }, + "node_modules/source-map": { + "version": "0.7.6", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">= 12" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-loader": { + "version": "5.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "iconv-lite": "^0.6.3", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.72.1" + } + }, + "node_modules/source-map-loader/node_modules/iconv-lite": { + "version": "0.6.3", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/source-map-support": { + "version": "0.5.21", + "dev": true, + "license": "MIT", + "dependencies": { + "buffer-from": "^1.0.0", + "source-map": "^0.6.0" + } + }, + "node_modules/source-map-support/node_modules/source-map": { + "version": "0.6.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/spdx-exceptions": { + "version": "2.5.0", + "dev": true, + "license": "CC-BY-3.0" + }, + "node_modules/spdx-expression-parse": { + "version": "4.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "spdx-exceptions": "^2.1.0", + "spdx-license-ids": "^3.0.0" + } + }, + "node_modules/spdx-license-ids": { + "version": "3.0.23", + "dev": true, + "license": "CC0-1.0" + }, + "node_modules/spdy": { + "version": "4.0.2", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.1.0", + "handle-thing": "^2.0.0", + "http-deceiver": "^1.2.7", + "select-hose": "^2.0.0", + "spdy-transport": "^3.0.0" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/spdy-transport": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "^4.1.0", + "detect-node": "^2.0.4", + "hpack.js": "^2.1.6", + "obuf": "^1.1.2", + "readable-stream": "^3.0.6", + "wbuf": "^1.7.3" + } + }, + "node_modules/ssri": { + "version": "13.0.1", + "dev": true, + "license": "ISC", + "dependencies": { + "minipass": "^7.0.3" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/statuses": { + "version": "2.0.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/stdin-discarder": { + "version": "0.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/string_decoder": { + "version": "1.3.0", + "dev": true, + "license": "MIT", + "dependencies": { + "safe-buffer": "~5.2.0" + } + }, + "node_modules/string-width": { + "version": "8.2.1", + "dev": true, + "license": "MIT", + "dependencies": { + "get-east-asian-width": "^1.5.0", + "strip-ansi": "^7.1.2" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/strip-ansi": { + "version": "7.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-regex": "^6.2.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/chalk/strip-ansi?sponsor=1" + } + }, + "node_modules/supports-color": { + "version": "8.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/supports-color?sponsor=1" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tapable": { + "version": "2.3.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/tar": { + "version": "7.5.16", + "dev": true, + "license": "BlueOak-1.0.0", + "dependencies": { + "@isaacs/fs-minipass": "^4.0.0", + "chownr": "^3.0.0", + "minipass": "^7.1.2", + "minizlib": "^3.1.0", + "yallist": "^5.0.0" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/tar/node_modules/yallist": { + "version": "5.0.0", + "dev": true, + "license": "BlueOak-1.0.0", + "engines": { + "node": ">=18" + } + }, + "node_modules/terser": { + "version": "5.46.2", + "dev": true, + "license": "BSD-2-Clause", + "dependencies": { + "@jridgewell/source-map": "^0.3.3", + "acorn": "^8.15.0", + "commander": "^2.20.0", + "source-map-support": "~0.5.20" + }, + "bin": { + "terser": "bin/terser" + }, + "engines": { + "node": ">=10" + } + }, + "node_modules/terser-webpack-plugin": { + "version": "5.6.1", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.25", + "jest-worker": "^27.4.5", + "schema-utils": "^4.3.0", + "terser": "^5.31.1" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.1.0" + }, + "peerDependenciesMeta": { + "@minify-html/node": { + "optional": true + }, + "@swc/core": { + "optional": true + }, + "@swc/css": { + "optional": true + }, + "@swc/html": { + "optional": true + }, + "clean-css": { + "optional": true + }, + "cssnano": { + "optional": true + }, + "csso": { + "optional": true + }, + "esbuild": { + "optional": true + }, + "html-minifier-terser": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "postcss": { + "optional": true + }, + "uglify-js": { + "optional": true + } + } + }, + "node_modules/thingies": { + "version": "2.6.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.18" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "^2" + } + }, + "node_modules/thunky": { + "version": "1.1.0", + "dev": true, + "license": "MIT" + }, + "node_modules/tinyglobby": { + "version": "0.2.16", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/toidentifier": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.6" + } + }, + "node_modules/tree-dump": { + "version": "1.1.0", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=10.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/streamich" + }, + "peerDependencies": { + "tslib": "2" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "license": "0BSD" + }, + "node_modules/tsyringe": { + "version": "4.10.0", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^1.9.3" + }, + "engines": { + "node": ">= 6.0.0" + } + }, + "node_modules/tsyringe/node_modules/tslib": { + "version": "1.14.1", + "dev": true, + "license": "0BSD" + }, + "node_modules/tuf-js": { + "version": "4.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "@tufjs/models": "4.1.0", + "debug": "^4.4.3", + "make-fetch-happen": "^15.0.1" + }, + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/type-is": { + "version": "2.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "content-type": "^2.0.0", + "media-typer": "^1.1.0", + "mime-types": "^3.0.0" + }, + "engines": { + "node": ">= 18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/type-is/node_modules/content-type": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/typed-assert": { + "version": "1.0.9", + "dev": true, + "license": "MIT" + }, + "node_modules/typescript": { + "version": "6.0.3", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/undici": { + "version": "6.26.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18.17" + } + }, + "node_modules/undici-types": { + "version": "7.24.6", + "dev": true, + "license": "MIT" + }, + "node_modules/unicode-canonical-property-names-ecmascript": { + "version": "2.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/unicode-match-property-ecmascript": { + "version": "2.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "unicode-canonical-property-names-ecmascript": "^2.0.0", + "unicode-property-aliases-ecmascript": "^2.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/unicode-match-property-value-ecmascript": { + "version": "2.2.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/unicode-property-aliases-ecmascript": { + "version": "2.2.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=4" + } + }, + "node_modules/unpipe": { + "version": "1.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "dev": true, + "license": "MIT" + }, + "node_modules/utils-merge": { + "version": "1.0.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/uuid": { + "version": "8.3.2", + "dev": true, + "license": "MIT", + "bin": { + "uuid": "dist/bin/uuid" + } + }, + "node_modules/validate-npm-package-name": { + "version": "7.0.2", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.17.0 || >=22.9.0" + } + }, + "node_modules/vary": { + "version": "1.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/vite": { + "version": "7.3.2", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.27.0", + "fdir": "^6.5.0", + "picomatch": "^4.0.3", + "postcss": "^8.5.6", + "rollup": "^4.43.0", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "lightningcss": "^1.21.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vite/node_modules/esbuild": { + "name": "esbuild-wasm", + "version": "0.27.7", + "dev": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/watchpack": { + "version": "2.5.1", + "dev": true, + "license": "MIT", + "dependencies": { + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.1.2" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/wbuf": { + "version": "1.7.3", + "dev": true, + "license": "MIT", + "dependencies": { + "minimalistic-assert": "^1.0.0" + } + }, + "node_modules/weak-lru-cache": { + "version": "1.2.2", + "dev": true, + "license": "MIT", + "optional": true + }, + "node_modules/webpack": { + "version": "5.106.2", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/eslint-scope": "^3.7.7", + "@types/estree": "^1.0.8", + "@types/json-schema": "^7.0.15", + "@webassemblyjs/ast": "^1.14.1", + "@webassemblyjs/wasm-edit": "^1.14.1", + "@webassemblyjs/wasm-parser": "^1.14.1", + "acorn": "^8.16.0", + "acorn-import-phases": "^1.0.3", + "browserslist": "^4.28.1", + "chrome-trace-event": "^1.0.2", + "enhanced-resolve": "^5.20.0", + "es-module-lexer": "^2.0.0", + "eslint-scope": "5.1.1", + "events": "^3.2.0", + "glob-to-regexp": "^0.4.1", + "graceful-fs": "^4.2.11", + "loader-runner": "^4.3.1", + "mime-db": "^1.54.0", + "neo-async": "^2.6.2", + "schema-utils": "^4.3.3", + "tapable": "^2.3.0", + "terser-webpack-plugin": "^5.3.17", + "watchpack": "^2.5.1", + "webpack-sources": "^3.3.4" + }, + "bin": { + "webpack": "bin/webpack.js" + }, + "engines": { + "node": ">=10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependenciesMeta": { + "webpack-cli": { + "optional": true + } + } + }, + "node_modules/webpack-dev-middleware": { + "version": "8.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "memfs": "^4.56.10", + "mime-types": "^3.0.2", + "on-finished": "^2.4.1", + "range-parser": "^1.2.1", + "schema-utils": "^4.3.3" + }, + "engines": { + "node": ">= 20.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.101.0" + }, + "peerDependenciesMeta": { + "webpack": { + "optional": true + } + } + }, + "node_modules/webpack-dev-server": { + "version": "5.2.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/bonjour": "^3.5.13", + "@types/connect-history-api-fallback": "^1.5.4", + "@types/express": "^4.17.25", + "@types/express-serve-static-core": "^4.17.21", + "@types/serve-index": "^1.9.4", + "@types/serve-static": "^1.15.5", + "@types/sockjs": "^0.3.36", + "@types/ws": "^8.5.10", + "ansi-html-community": "^0.0.8", + "bonjour-service": "^1.2.1", + "chokidar": "^3.6.0", + "colorette": "^2.0.10", + "compression": "^1.8.1", + "connect-history-api-fallback": "^2.0.0", + "express": "^4.22.1", + "graceful-fs": "^4.2.6", + "http-proxy-middleware": "^2.0.9", + "ipaddr.js": "^2.1.0", + "launch-editor": "^2.6.1", + "open": "^10.0.3", + "p-retry": "^6.2.0", + "schema-utils": "^4.2.0", + "selfsigned": "^5.5.0", + "serve-index": "^1.9.1", + "sockjs": "^0.3.24", + "spdy": "^4.0.2", + "webpack-dev-middleware": "^7.4.2", + "ws": "^8.18.0" + }, + "bin": { + "webpack-dev-server": "bin/webpack-dev-server.js" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "webpack": { + "optional": true + }, + "webpack-cli": { + "optional": true + } + } + }, + "node_modules/webpack-dev-server/node_modules/accepts": { + "version": "1.3.8", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-types": "~2.1.34", + "negotiator": "0.6.3" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/accepts/node_modules/mime-types": { + "version": "2.1.35", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/body-parser": { + "version": "1.20.5", + "dev": true, + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "content-type": "~1.0.5", + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "~1.2.0", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "on-finished": "~2.4.1", + "qs": "~6.15.1", + "raw-body": "~2.5.3", + "type-is": "~1.6.18", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8", + "npm": "1.2.8000 || >= 1.4.16" + } + }, + "node_modules/webpack-dev-server/node_modules/chokidar": { + "version": "3.6.0", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/webpack-dev-server/node_modules/content-disposition": { + "version": "0.5.4", + "dev": true, + "license": "MIT", + "dependencies": { + "safe-buffer": "5.2.1" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/cookie-signature": { + "version": "1.0.7", + "dev": true, + "license": "MIT" + }, + "node_modules/webpack-dev-server/node_modules/debug": { + "version": "2.6.9", + "dev": true, + "license": "MIT", + "dependencies": { + "ms": "2.0.0" + } + }, + "node_modules/webpack-dev-server/node_modules/debug/node_modules/ms": { + "version": "2.0.0", + "dev": true, + "license": "MIT" + }, + "node_modules/webpack-dev-server/node_modules/express": { + "version": "4.22.2", + "dev": true, + "license": "MIT", + "dependencies": { + "accepts": "~1.3.8", + "array-flatten": "1.1.1", + "body-parser": "~1.20.5", + "content-disposition": "~0.5.4", + "content-type": "~1.0.4", + "cookie": "~0.7.1", + "cookie-signature": "~1.0.6", + "debug": "2.6.9", + "depd": "2.0.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "finalhandler": "~1.3.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.0", + "merge-descriptors": "1.0.3", + "methods": "~1.1.2", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "path-to-regexp": "~0.1.12", + "proxy-addr": "~2.0.7", + "qs": "~6.15.1", + "range-parser": "~1.2.1", + "safe-buffer": "5.2.1", + "send": "~0.19.0", + "serve-static": "~1.16.2", + "setprototypeof": "1.2.0", + "statuses": "~2.0.1", + "type-is": "~1.6.18", + "utils-merge": "1.0.1", + "vary": "~1.1.2" + }, + "engines": { + "node": ">= 0.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, + "node_modules/webpack-dev-server/node_modules/finalhandler": { + "version": "1.3.2", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "on-finished": "~2.4.1", + "parseurl": "~1.3.3", + "statuses": "~2.0.2", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/webpack-dev-server/node_modules/fresh": { + "version": "0.5.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/glob-parent": { + "version": "5.1.2", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/webpack-dev-server/node_modules/http-proxy-middleware": { + "version": "2.0.9", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/http-proxy": "^1.17.8", + "http-proxy": "^1.18.1", + "is-glob": "^4.0.1", + "is-plain-obj": "^3.0.0", + "micromatch": "^4.0.2" + }, + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "@types/express": "^4.17.13" + }, + "peerDependenciesMeta": { + "@types/express": { + "optional": true + } + } + }, + "node_modules/webpack-dev-server/node_modules/iconv-lite": { + "version": "0.4.24", + "dev": true, + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/webpack-dev-server/node_modules/ipaddr.js": { + "version": "2.4.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 10" + } + }, + "node_modules/webpack-dev-server/node_modules/media-typer": { + "version": "0.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/merge-descriptors": { + "version": "1.0.3", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/webpack-dev-server/node_modules/mime-db": { + "version": "1.52.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/negotiator": { + "version": "0.6.3", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/open": { + "version": "10.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "default-browser": "^5.2.1", + "define-lazy-prop": "^3.0.0", + "is-inside-container": "^1.0.0", + "wsl-utils": "^0.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/webpack-dev-server/node_modules/path-to-regexp": { + "version": "0.1.13", + "dev": true, + "license": "MIT" + }, + "node_modules/webpack-dev-server/node_modules/picomatch": { + "version": "2.3.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/webpack-dev-server/node_modules/raw-body": { + "version": "2.5.3", + "dev": true, + "license": "MIT", + "dependencies": { + "bytes": "~3.1.2", + "http-errors": "~2.0.1", + "iconv-lite": "~0.4.24", + "unpipe": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/webpack-dev-server/node_modules/readdirp": { + "version": "3.6.0", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/webpack-dev-server/node_modules/send": { + "version": "0.19.2", + "dev": true, + "license": "MIT", + "dependencies": { + "debug": "2.6.9", + "depd": "2.0.0", + "destroy": "1.2.0", + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "etag": "~1.8.1", + "fresh": "~0.5.2", + "http-errors": "~2.0.1", + "mime": "1.6.0", + "ms": "2.1.3", + "on-finished": "~2.4.1", + "range-parser": "~1.2.1", + "statuses": "~2.0.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/webpack-dev-server/node_modules/serve-static": { + "version": "1.16.3", + "dev": true, + "license": "MIT", + "dependencies": { + "encodeurl": "~2.0.0", + "escape-html": "~1.0.3", + "parseurl": "~1.3.3", + "send": "~0.19.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/webpack-dev-server/node_modules/type-is": { + "version": "1.6.18", + "dev": true, + "license": "MIT", + "dependencies": { + "media-typer": "0.3.0", + "mime-types": "~2.1.24" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/type-is/node_modules/mime-types": { + "version": "2.1.35", + "dev": true, + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/webpack-dev-server/node_modules/webpack-dev-middleware": { + "version": "7.4.5", + "dev": true, + "license": "MIT", + "dependencies": { + "colorette": "^2.0.10", + "memfs": "^4.43.1", + "mime-types": "^3.0.1", + "on-finished": "^2.4.1", + "range-parser": "^1.2.1", + "schema-utils": "^4.0.0" + }, + "engines": { + "node": ">= 18.12.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^5.0.0" + }, + "peerDependenciesMeta": { + "webpack": { + "optional": true + } + } + }, + "node_modules/webpack-dev-server/node_modules/wsl-utils": { + "version": "0.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "is-wsl": "^3.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/webpack-merge": { + "version": "6.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "clone-deep": "^4.0.1", + "flat": "^5.0.2", + "wildcard": "^2.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, + "node_modules/webpack-sources": { + "version": "3.5.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/webpack-subresource-integrity": { + "version": "5.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "typed-assert": "^1.0.8" + }, + "engines": { + "node": ">= 12" + }, + "peerDependencies": { + "html-webpack-plugin": ">= 5.0.0-beta.1 < 6", + "webpack": "^5.12.0" + }, + "peerDependenciesMeta": { + "html-webpack-plugin": { + "optional": true + } + } + }, + "node_modules/websocket-driver": { + "version": "0.7.5", + "dev": true, + "license": "Apache-2.0", + "dependencies": { + "http-parser-js": ">=0.5.1", + "safe-buffer": ">=5.1.0", + "websocket-extensions": ">=0.1.1" + }, + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/websocket-extensions": { + "version": "0.1.4", + "dev": true, + "license": "Apache-2.0", + "engines": { + "node": ">=0.8.0" + } + }, + "node_modules/which": { + "version": "2.0.2", + "dev": true, + "license": "ISC", + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/wildcard": { + "version": "2.0.1", + "dev": true, + "license": "MIT" + }, + "node_modules/wrap-ansi": { + "version": "10.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "ansi-styles": "^6.2.3", + "string-width": "^8.2.0", + "strip-ansi": "^7.1.2" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/chalk/wrap-ansi?sponsor=1" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "dev": true, + "license": "ISC" + }, + "node_modules/ws": { + "version": "8.21.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10.0.0" + }, + "peerDependencies": { + "bufferutil": "^4.0.1", + "utf-8-validate": ">=5.0.2" + }, + "peerDependenciesMeta": { + "bufferutil": { + "optional": true + }, + "utf-8-validate": { + "optional": true + } + } + }, + "node_modules/wsl-utils": { + "version": "0.3.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-wsl": "^3.1.0", + "powershell-utils": "^0.1.0" + }, + "engines": { + "node": ">=20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/y18n": { + "version": "5.0.8", + "dev": true, + "license": "ISC", + "engines": { + "node": ">=10" + } + }, + "node_modules/yallist": { + "version": "3.1.1", + "dev": true, + "license": "ISC" + }, + "node_modules/yargs": { + "version": "18.0.0", + "dev": true, + "license": "MIT", + "dependencies": { + "cliui": "^9.0.1", + "escalade": "^3.1.1", + "get-caller-file": "^2.0.5", + "string-width": "^7.2.0", + "y18n": "^5.0.5", + "yargs-parser": "^22.0.0" + }, + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=23" + } + }, + "node_modules/yargs-parser": { + "version": "22.0.0", + "dev": true, + "license": "ISC", + "engines": { + "node": "^20.19.0 || ^22.12.0 || >=23" + } + }, + "node_modules/yargs/node_modules/string-width": { + "version": "7.2.0", + "dev": true, + "license": "MIT", + "dependencies": { + "emoji-regex": "^10.3.0", + "get-east-asian-width": "^1.0.0", + "strip-ansi": "^7.1.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/yoctocolors": { + "version": "2.1.2", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/zod": { + "version": "4.4.2", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } + }, + "node_modules/zod-to-json-schema": { + "version": "3.25.2", + "dev": true, + "license": "ISC", + "peerDependencies": { + "zod": "^3.25.28 || ^4" + } + } + } +} diff --git a/static/code/stackblitz/v9/angular/package.json b/static/code/stackblitz/v9/angular/package.json new file mode 100644 index 00000000000..428883636a4 --- /dev/null +++ b/static/code/stackblitz/v9/angular/package.json @@ -0,0 +1,31 @@ +{ + "name": "angular-starter", + "private": true, + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build" + }, + "dependencies": { + "@angular/animations": "^22.0.0", + "@angular/common": "^22.0.0", + "@angular/compiler": "^22.0.0", + "@angular/core": "^22.0.0", + "@angular/forms": "^22.0.0", + "@angular/platform-browser": "^22.0.0", + "@angular/platform-browser-dynamic": "^22.0.0", + "@angular/router": "^22.0.0", + "@ionic/angular": "9.0.0", + "@ionic/core": "9.0.0", + "ionicons": "8.1.0", + "rxjs": "^7.8.1", + "tslib": "^2.5.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "^22.0.0", + "@angular/build": "^22.0.0", + "@angular/cli": "^22.0.0", + "@angular/compiler-cli": "^22.0.0", + "typescript": "~6.0.0" + } +} diff --git a/static/code/stackblitz/v9/angular/styles.css b/static/code/stackblitz/v9/angular/styles.css new file mode 100644 index 00000000000..6d58ddeb61d --- /dev/null +++ b/static/code/stackblitz/v9/angular/styles.css @@ -0,0 +1,37 @@ +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import "@ionic/angular/css/core.css"; + +/* Basic CSS for apps built with Ionic */ +@import "@ionic/angular/css/normalize.css"; +@import "@ionic/angular/css/structure.css"; +@import "@ionic/angular/css/typography.css"; +@import "@ionic/angular/css/display.css"; + +/* Optional CSS utils that can be commented out */ +@import "@ionic/angular/css/padding.css"; +@import "@ionic/angular/css/float-elements.css"; +@import "@ionic/angular/css/text-alignment.css"; +@import "@ionic/angular/css/text-transformation.css"; +@import "@ionic/angular/css/flex-utils.css"; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more info, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import "@ionic/angular/css/palettes/dark.always.css"; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import '@ionic/angular/css/palettes/dark.system.css'; diff --git a/static/code/stackblitz/v9/angular/tsconfig.app.json b/static/code/stackblitz/v9/angular/tsconfig.app.json new file mode 100644 index 00000000000..f69a169a56e --- /dev/null +++ b/static/code/stackblitz/v9/angular/tsconfig.app.json @@ -0,0 +1,9 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../out-tsc/app", + "types": [] + }, + "files": ["src/main.ts", "src/polyfills.ts"], + "include": ["src/**/*.d.ts"] +} diff --git a/static/code/stackblitz/v9/angular/tsconfig.json b/static/code/stackblitz/v9/angular/tsconfig.json new file mode 100644 index 00000000000..2bbfc842bd3 --- /dev/null +++ b/static/code/stackblitz/v9/angular/tsconfig.json @@ -0,0 +1,29 @@ +{ + "compileOnSave": false, + "compilerOptions": { + "outDir": "./dist/out-tsc", + "forceConsistentCasingInFileNames": true, + "esModuleInterop": true, + "strict": true, + "noImplicitOverride": true, + "noPropertyAccessFromIndexSignature": true, + "noImplicitReturns": true, + "noFallthroughCasesInSwitch": true, + "sourceMap": true, + "declaration": false, + "experimentalDecorators": true, + "moduleResolution": "bundler", + "skipLibCheck": true, + "importHelpers": true, + "target": "es2022", + "module": "es2020", + "lib": ["es2018", "dom"], + "useDefineForClassFields": false + }, + "angularCompilerOptions": { + "enableI18nLegacyMessageIdFormat": false, + "strictInjectionParameters": true, + "strictInputAccessModifiers": true, + "strictTemplates": true + } +} diff --git a/static/code/stackblitz/v9/angular/variables.css b/static/code/stackblitz/v9/angular/variables.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/html/index.html b/static/code/stackblitz/v9/html/index.html new file mode 100644 index 00000000000..fb14e96ba98 --- /dev/null +++ b/static/code/stackblitz/v9/html/index.html @@ -0,0 +1,19 @@ + + + + + + + + Ionic App + + + + + {{ TEMPLATE }} + + + + + + diff --git a/static/code/stackblitz/v9/html/index.ts b/static/code/stackblitz/v9/html/index.ts new file mode 100644 index 00000000000..db4f20844b5 --- /dev/null +++ b/static/code/stackblitz/v9/html/index.ts @@ -0,0 +1,42 @@ +import { defineCustomElements } from '@ionic/core/loader'; + +import { createAnimation, createGesture, loadingController, menuController, modalController, toastController } from '@ionic/core'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); + +(window as any).loadingController = loadingController; +(window as any).menuController = menuController; +(window as any).modalController = modalController; +(window as any).toastController = toastController; +(window as any).createAnimation = createAnimation; +(window as any).createGesture = createGesture; diff --git a/static/code/stackblitz/v9/html/index.withContent.html b/static/code/stackblitz/v9/html/index.withContent.html new file mode 100644 index 00000000000..404344868cd --- /dev/null +++ b/static/code/stackblitz/v9/html/index.withContent.html @@ -0,0 +1,21 @@ + + + + + + + + Ionic App + + + + + + {{ TEMPLATE }} + + + + + + + diff --git a/static/code/stackblitz/v9/html/package-lock.json b/static/code/stackblitz/v9/html/package-lock.json new file mode 100644 index 00000000000..ea715a74614 --- /dev/null +++ b/static/code/stackblitz/v9/html/package-lock.json @@ -0,0 +1,535 @@ +{ + "name": "html-starter", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "html-starter", + "dependencies": { + "@ionic/core": "9.0.0", + "ionicons": "8.1.0" + }, + "devDependencies": { + "typescript": "~5.9.0", + "vite": "^7.0.0", + "vite-plugin-static-copy": "^4.0.0" + } + }, + "node_modules/@ionic/core": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5", + "ionicons": "^8.1.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.44.0", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.44.0", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@stencil/core": { + "version": "4.43.5", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "dev": true, + "license": "MIT" + }, + "node_modules/anymatch": { + "version": "3.1.3", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/anymatch/node_modules/picomatch": { + "version": "2.3.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/esbuild": { + "name": "esbuild-wasm", + "version": "0.28.1", + "dev": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/glob-parent": { + "version": "5.1.2", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/ionicons": { + "version": "8.1.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/lightningcss": { + "name": "lightningcss-wasm", + "version": "1.32.0", + "bundleDependencies": [ + "napi-wasm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "peer": true, + "dependencies": { + "napi-wasm": "^1.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss/node_modules/napi-wasm": { + "version": "1.1.3", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/nanoid": { + "version": "3.3.12", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/p-map": { + "version": "7.0.4", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/picocolors": { + "version": "1.1.1", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.5", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.16", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/readdirp": { + "version": "3.6.0", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/readdirp/node_modules/picomatch": { + "version": "2.3.1", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/rollup": { + "name": "@rollup/wasm-node", + "version": "4.62.3", + "dev": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.9.3", + "dev": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/vite": { + "version": "7.3.6", + "dev": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.27.0 || ^0.28.0", + "fdir": "^6.5.0", + "picomatch": "^4.0.3", + "postcss": "^8.5.6", + "rollup": "^4.43.0", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "lightningcss": "^1.21.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vite-plugin-static-copy": { + "version": "4.1.1", + "dev": true, + "license": "MIT", + "dependencies": { + "chokidar": "^3.6.0", + "p-map": "^7.0.4", + "picocolors": "^1.1.1", + "tinyglobby": "^0.2.17" + }, + "engines": { + "node": "^22.0.0 || >=24.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/sapphi-red" + }, + "peerDependencies": { + "vite": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + } + } +} diff --git a/static/code/stackblitz/v9/html/package.json b/static/code/stackblitz/v9/html/package.json new file mode 100644 index 00000000000..24028b0a433 --- /dev/null +++ b/static/code/stackblitz/v9/html/package.json @@ -0,0 +1,20 @@ +{ + "name": "html-starter", + "private": true, + "type": "module", + "main": "index.ts", + "scripts": { + "dev": "vite", + "build": "vite build", + "start": "vite preview" + }, + "dependencies": { + "@ionic/core": "9.0.0", + "ionicons": "8.1.0" + }, + "devDependencies": { + "typescript": "~5.9.0", + "vite": "^7.0.0", + "vite-plugin-static-copy": "^4.0.0" + } +} diff --git a/static/code/stackblitz/v9/html/tsconfig.json b/static/code/stackblitz/v9/html/tsconfig.json new file mode 100644 index 00000000000..0b999e71b8e --- /dev/null +++ b/static/code/stackblitz/v9/html/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "target": "esnext", + "module": "nodenext", + "moduleResolution": "nodenext", + "outDir": "dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["esnext", "dom"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/static/code/stackblitz/v9/html/variables.css b/static/code/stackblitz/v9/html/variables.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/html/vite.config.ts b/static/code/stackblitz/v9/html/vite.config.ts new file mode 100644 index 00000000000..3e356ac9e72 --- /dev/null +++ b/static/code/stackblitz/v9/html/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; + +export default defineConfig({ + optimizeDeps: { + exclude: ['@ionic/core'], + }, + plugins: [ + viteStaticCopy({ + targets: [ + { + src: 'node_modules/ionicons/dist/svg/*', + dest: 'svg' + } + ] + }) + ] +}); diff --git a/static/code/stackblitz/v9/react/app.tsx b/static/code/stackblitz/v9/react/app.tsx new file mode 100644 index 00000000000..d575e20e73c --- /dev/null +++ b/static/code/stackblitz/v9/react/app.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} diff --git a/static/code/stackblitz/v9/react/app.withContent.tsx b/static/code/stackblitz/v9/react/app.withContent.tsx new file mode 100644 index 00000000000..b55f8817771 --- /dev/null +++ b/static/code/stackblitz/v9/react/app.withContent.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { setupIonicReact, IonApp, IonContent } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + + + ); +} diff --git a/static/code/stackblitz/v9/react/browserslistrc b/static/code/stackblitz/v9/react/browserslistrc new file mode 100644 index 00000000000..c264e66dd2f --- /dev/null +++ b/static/code/stackblitz/v9/react/browserslistrc @@ -0,0 +1,6 @@ +Chrome >=79 +ChromeAndroid >=79 +Firefox >=70 +Edge >=79 +Safari >=14 +iOS >=14 diff --git a/static/code/stackblitz/v9/react/eslintrc.js b/static/code/stackblitz/v9/react/eslintrc.js new file mode 100644 index 00000000000..af472a1f7d3 --- /dev/null +++ b/static/code/stackblitz/v9/react/eslintrc.js @@ -0,0 +1,17 @@ +module.exports = { + root: true, + env: { + node: true + }, + 'extends': [ + 'plugin:react/recommended', + 'eslint:recommended' + ], + parserOptions: { + ecmaVersion: 2020 + }, + rules: { + 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', + } +} diff --git a/static/code/stackblitz/v9/react/index.html b/static/code/stackblitz/v9/react/index.html new file mode 100644 index 00000000000..09b94345a21 --- /dev/null +++ b/static/code/stackblitz/v9/react/index.html @@ -0,0 +1,26 @@ + + + + + Ionic App + + + + + + + + + + + + + + +
+ + + diff --git a/static/code/stackblitz/v9/react/index.tsx b/static/code/stackblitz/v9/react/index.tsx new file mode 100644 index 00000000000..c58a899f793 --- /dev/null +++ b/static/code/stackblitz/v9/react/index.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { createRoot } from 'react-dom/client'; + +import App from './App'; + +const root = createRoot(document.getElementById('root') as HTMLElement); + +root.render( + + + +); diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json new file mode 100644 index 00000000000..7e26ca203d7 --- /dev/null +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -0,0 +1,1189 @@ +{ + "name": "vite-react-typescript", + "version": "0.1.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "vite-react-typescript", + "version": "0.1.0", + "dependencies": { + "@ionic/react": "9.0.0", + "@ionic/react-router": "9.0.0", + "@types/node": "^24.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^5.0.0", + "clsx": "^2.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-router": "^6.0.0", + "react-router-dom": "^6.0.0", + "typescript": "~5.9.0", + "vite": "^7.0.0", + "web-vitals": "^6.0.0" + } + }, + "node_modules/@babel/code-frame": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-validator-identifier": "^7.29.7", + "js-tokens": "^4.0.0", + "picocolors": "^1.1.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/compat-data": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/core": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-compilation-targets": "^7.29.7", + "@babel/helper-module-transforms": "^7.29.7", + "@babel/helpers": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/remapping": "^2.3.5", + "convert-source-map": "^2.0.0", + "debug": "^4.1.0", + "gensync": "^1.0.0-beta.2", + "json5": "^2.2.3", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/babel" + } + }, + "node_modules/@babel/generator": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "jsesc": "^3.0.2" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-compilation-targets": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/compat-data": "^7.29.7", + "@babel/helper-validator-option": "^7.29.7", + "browserslist": "^4.24.0", + "lru-cache": "^5.1.1", + "semver": "^6.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-globals": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-imports": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/traverse": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-module-transforms": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-module-imports": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7", + "@babel/traverse": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/@babel/helper-plugin-utils": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-option": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helpers": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-self": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/plugin-transform-react-jsx-source": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/template": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/types": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/traverse": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.29.7", + "@babel/generator": "^7.29.7", + "@babel/helper-globals": "^7.29.7", + "@babel/parser": "^7.29.7", + "@babel/template": "^7.29.7", + "@babel/types": "^7.29.7", + "debug": "^4.3.1" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@emotion/unitless": { + "version": "0.10.0", + "license": "MIT" + }, + "node_modules/@ionic/core": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5", + "ionicons": "^8.1.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, + "node_modules/@ionic/react": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@ionic/core": "9.0.0", + "@stencil/react-output-target": "^1.5.2", + "ionicons": "^8.0.13", + "tslib": "*" + }, + "peerDependencies": { + "react": ">=16.8.6", + "react-dom": ">=16.8.6" + } + }, + "node_modules/@ionic/react-router": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@ionic/react": "9.0.0", + "tslib": "*" + }, + "peerDependencies": { + "react": ">=16.8.6", + "react-dom": ">=16.8.6", + "react-router": ">=6.4.0 <7", + "react-router-dom": ">=6.4.0 <7" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@lit/react": { + "version": "1.0.8", + "license": "BSD-3-Clause", + "peerDependencies": { + "@types/react": "17 || 18 || 19" + } + }, + "node_modules/@remix-run/router": { + "version": "1.23.3", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.3.tgz", + "integrity": "sha512-4An71tdz9X8+3sI4Qqqd2LWd9vS39J7sqd9EU4Scw7TJE/qB10Flv/UuqbPVgfQV9XoK8Np6jNquZitnZq5i+Q==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.0-rc.3", + "license": "MIT" + }, + "node_modules/@stencil/core": { + "version": "4.43.5", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, + "node_modules/@stencil/react-output-target": { + "version": "1.6.1", + "license": "MIT", + "dependencies": { + "@lit/react": "^1.0.8", + "html-react-parser": "^5.2.17", + "react-style-stringify": "^1.2.0", + "ts-morph": "^28.0.0" + }, + "peerDependencies": { + "@stencil/core": ">=3 || >=4.0.0 || ^5.0.0 || >=5.0.0-alpha.17 <5.0.0-next.0", + "react": "^18 || ^19", + "react-dom": "^18 || ^19" + }, + "peerDependenciesMeta": { + "@stencil/core": { + "optional": false + }, + "react": { + "optional": false + }, + "react-dom": { + "optional": false + } + } + }, + "node_modules/@ts-morph/common": { + "version": "0.29.0", + "license": "MIT", + "dependencies": { + "minimatch": "^10.0.1", + "path-browserify": "^1.0.1", + "tinyglobby": "^0.2.14" + } + }, + "node_modules/@types/babel__core": { + "version": "7.20.5", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.20.7", + "@babel/types": "^7.20.7", + "@types/babel__generator": "*", + "@types/babel__template": "*", + "@types/babel__traverse": "*" + } + }, + "node_modules/@types/babel__generator": { + "version": "7.27.0", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__template": { + "version": "7.4.4", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.1.0", + "@babel/types": "^7.0.0" + } + }, + "node_modules/@types/babel__traverse": { + "version": "7.28.0", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.28.2" + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "license": "MIT" + }, + "node_modules/@types/node": { + "version": "24.10.1", + "license": "MIT", + "dependencies": { + "undici-types": "~7.16.0" + } + }, + "node_modules/@types/react": { + "version": "19.2.7", + "license": "MIT", + "dependencies": { + "csstype": "^3.2.2" + } + }, + "node_modules/@types/react-dom": { + "version": "19.2.3", + "license": "MIT", + "peerDependencies": { + "@types/react": "^19.2.0" + } + }, + "node_modules/@vitejs/plugin-react": { + "version": "5.2.0", + "license": "MIT", + "dependencies": { + "@babel/core": "^7.29.0", + "@babel/plugin-transform-react-jsx-self": "^7.27.1", + "@babel/plugin-transform-react-jsx-source": "^7.27.1", + "@rolldown/pluginutils": "1.0.0-rc.3", + "@types/babel__core": "^7.20.5", + "react-refresh": "^0.18.0" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "peerDependencies": { + "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/balanced-match": { + "version": "4.0.4", + "license": "MIT", + "engines": { + "node": "18 || 20 || >=22" + } + }, + "node_modules/baseline-browser-mapping": { + "version": "2.11.7", + "license": "Apache-2.0", + "bin": { + "baseline-browser-mapping": "dist/cli.cjs" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/brace-expansion": { + "version": "5.0.8", + "license": "MIT", + "dependencies": { + "balanced-match": "^4.0.2" + }, + "engines": { + "node": "20 || >=22" + } + }, + "node_modules/browserslist": { + "version": "4.28.7", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "baseline-browser-mapping": "^2.10.44", + "caniuse-lite": "^1.0.30001806", + "electron-to-chromium": "^1.5.393", + "node-releases": "^2.0.51", + "update-browserslist-db": "^1.2.3" + }, + "bin": { + "browserslist": "cli.js" + }, + "engines": { + "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" + } + }, + "node_modules/caniuse-lite": { + "version": "1.0.30001806", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "CC-BY-4.0" + }, + "node_modules/clsx": { + "version": "2.1.1", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/code-block-writer": { + "version": "13.0.3", + "license": "MIT" + }, + "node_modules/convert-source-map": { + "version": "2.0.0", + "license": "MIT" + }, + "node_modules/csstype": { + "version": "3.2.3", + "license": "MIT" + }, + "node_modules/debug": { + "version": "4.4.3", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dom-serializer": { + "version": "2.0.0", + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.2", + "entities": "^4.2.0" + }, + "funding": { + "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" + } + }, + "node_modules/dom-serializer/node_modules/entities": { + "version": "4.5.0", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/domelementtype": { + "version": "2.3.0", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "BSD-2-Clause" + }, + "node_modules/domhandler": { + "version": "5.0.3", + "license": "BSD-2-Clause", + "dependencies": { + "domelementtype": "^2.3.0" + }, + "engines": { + "node": ">= 4" + }, + "funding": { + "url": "https://github.com/fb55/domhandler?sponsor=1" + } + }, + "node_modules/domutils": { + "version": "3.2.2", + "license": "BSD-2-Clause", + "dependencies": { + "dom-serializer": "^2.0.0", + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3" + }, + "funding": { + "url": "https://github.com/fb55/domutils?sponsor=1" + } + }, + "node_modules/electron-to-chromium": { + "version": "1.5.398", + "license": "ISC" + }, + "node_modules/entities": { + "version": "7.0.1", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/esbuild": { + "name": "esbuild-wasm", + "version": "0.28.1", + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/escalade": { + "version": "3.2.0", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/fdir": { + "version": "6.5.0", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/gensync": { + "version": "1.0.0-beta.2", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/html-dom-parser": { + "version": "5.1.8", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/remarkablemark" + } + ], + "license": "MIT", + "dependencies": { + "domhandler": "5.0.3", + "htmlparser2": "10.1.0" + } + }, + "node_modules/html-react-parser": { + "version": "5.2.17", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/remarkablemark" + }, + { + "type": "opencollective", + "url": "https://opencollective.com/html-react-parser" + } + ], + "license": "MIT", + "dependencies": { + "domhandler": "5.0.3", + "html-dom-parser": "5.1.8", + "react-property": "2.0.2", + "style-to-js": "1.1.21" + }, + "peerDependencies": { + "@types/react": "0.14 || 15 || 16 || 17 || 18 || 19", + "react": "0.14 || 15 || 16 || 17 || 18 || 19" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/htmlparser2": { + "version": "10.1.0", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.2.2", + "entities": "^7.0.1" + } + }, + "node_modules/inline-style-parser": { + "version": "0.2.7", + "license": "MIT" + }, + "node_modules/ionicons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5" + } + }, + "node_modules/js-tokens": { + "version": "4.0.0", + "license": "MIT" + }, + "node_modules/jsesc": { + "version": "3.1.0", + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lightningcss": { + "name": "lightningcss-wasm", + "version": "1.32.0", + "bundleDependencies": [ + "napi-wasm" + ], + "license": "MPL-2.0", + "optional": true, + "peer": true, + "dependencies": { + "napi-wasm": "^1.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss/node_modules/napi-wasm": { + "version": "1.1.3", + "inBundle": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/lru-cache": { + "version": "5.1.1", + "license": "ISC", + "dependencies": { + "yallist": "^3.0.2" + } + }, + "node_modules/minimatch": { + "version": "10.2.6", + "license": "BlueOak-1.0.0", + "dependencies": { + "brace-expansion": "^5.0.8" + }, + "engines": { + "node": "18 || 20 || >=22" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.16", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/node-releases": { + "version": "2.0.51", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, + "node_modules/path-browserify": { + "version": "1.0.1", + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.5", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/postcss": { + "version": "8.5.19", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/react": { + "version": "19.2.0", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-dom": { + "version": "19.2.0", + "license": "MIT", + "dependencies": { + "scheduler": "^0.27.0" + }, + "peerDependencies": { + "react": "^19.2.0" + } + }, + "node_modules/react-property": { + "version": "2.0.2", + "license": "MIT" + }, + "node_modules/react-refresh": { + "version": "0.18.0", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/react-router": { + "version": "6.30.4", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.4.tgz", + "integrity": "sha512-SVUsDe+DybHM/WmYKIVYhZh1o5Dcuf16yM6WjG02Q9XVFMZIJyHYhwrr6bFBXZkVP6z69kNkMyBCujt8FaFLJA==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.3" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.30.4", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.4.tgz", + "integrity": "sha512-q4HvNl+mmDdkS0g+MqiBZNteQJCuimWoOyHMy4T/RQLAn9Z29+E91QXRaxOujeMl2HTzRSS0KFPd7lxX3PjV0Q==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.23.3", + "react-router": "6.30.4" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, + "node_modules/react-style-stringify": { + "version": "1.2.0", + "license": "MIT", + "dependencies": { + "@emotion/unitless": "^0.10.0" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/rollup": { + "name": "@rollup/wasm-node", + "version": "4.62.3", + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/scheduler": { + "version": "0.27.0", + "license": "MIT" + }, + "node_modules/semver": { + "version": "6.3.1", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/style-to-js": { + "version": "1.1.21", + "license": "MIT", + "dependencies": { + "style-to-object": "1.0.14" + } + }, + "node_modules/style-to-object": { + "version": "1.0.14", + "license": "MIT", + "dependencies": { + "inline-style-parser": "0.2.7" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/ts-morph": { + "version": "28.0.0", + "license": "MIT", + "dependencies": { + "@ts-morph/common": "~0.29.0", + "code-block-writer": "^13.0.3" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.9.3", + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/undici-types": { + "version": "7.16.0", + "license": "MIT" + }, + "node_modules/update-browserslist-db": { + "version": "1.2.3", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/browserslist" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "escalade": "^3.2.0", + "picocolors": "^1.1.1" + }, + "bin": { + "update-browserslist-db": "cli.js" + }, + "peerDependencies": { + "browserslist": ">= 4.21.0" + } + }, + "node_modules/vite": { + "version": "7.3.6", + "license": "MIT", + "dependencies": { + "esbuild": "^0.27.0 || ^0.28.0", + "fdir": "^6.5.0", + "picomatch": "^4.0.3", + "postcss": "^8.5.6", + "rollup": "^4.43.0", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "lightningcss": "^1.21.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/web-vitals": { + "version": "6.1.0", + "license": "Apache-2.0" + }, + "node_modules/yallist": { + "version": "3.1.1", + "license": "ISC" + } + } +} diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json new file mode 100644 index 00000000000..24bce9ef9c3 --- /dev/null +++ b/static/code/stackblitz/v9/react/package.json @@ -0,0 +1,25 @@ +{ + "name": "vite-react-typescript", + "version": "0.1.0", + "private": true, + "dependencies": { + "@ionic/react": "9.0.0", + "@ionic/react-router": "9.0.0", + "@types/node": "^24.0.0", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", + "@vitejs/plugin-react": "^5.0.0", + "clsx": "^2.0.0", + "react": "^19.0.0", + "react-dom": "^19.0.0", + "react-router": "^6.0.0", + "react-router-dom": "^6.0.0", + "typescript": "~5.9.0", + "vite": "^7.0.0", + "web-vitals": "^6.0.0" + }, + "scripts": { + "start": "vite", + "build": "vite build" + } +} diff --git a/static/code/stackblitz/v9/react/tsconfig.json b/static/code/stackblitz/v9/react/tsconfig.json new file mode 100644 index 00000000000..9d379a3c4af --- /dev/null +++ b/static/code/stackblitz/v9/react/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx" + }, + "include": ["src"] +} diff --git a/static/code/stackblitz/v9/react/variables.css b/static/code/stackblitz/v9/react/variables.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/react/vite.config.js b/static/code/stackblitz/v9/react/vite.config.js new file mode 100644 index 00000000000..4d9fbed3d60 --- /dev/null +++ b/static/code/stackblitz/v9/react/vite.config.js @@ -0,0 +1,8 @@ +import { defineConfig } from 'vite'; +import react from '@vitejs/plugin-react'; + +export default defineConfig(() => { + return { + plugins: [react()], + }; +}); diff --git a/static/code/stackblitz/v9/vue/App.vue b/static/code/stackblitz/v9/vue/App.vue new file mode 100644 index 00000000000..3fbb68855b2 --- /dev/null +++ b/static/code/stackblitz/v9/vue/App.vue @@ -0,0 +1,10 @@ + + + diff --git a/static/code/stackblitz/v9/vue/App.withContent.vue b/static/code/stackblitz/v9/vue/App.withContent.vue new file mode 100644 index 00000000000..9324b79998f --- /dev/null +++ b/static/code/stackblitz/v9/vue/App.withContent.vue @@ -0,0 +1,12 @@ + + + diff --git a/static/code/stackblitz/v9/vue/index.html b/static/code/stackblitz/v9/vue/index.html new file mode 100644 index 00000000000..09f61d54bab --- /dev/null +++ b/static/code/stackblitz/v9/vue/index.html @@ -0,0 +1,16 @@ + + + + + + + + Ionic App + + + +
+ + + + diff --git a/static/code/stackblitz/v9/vue/main.ts b/static/code/stackblitz/v9/vue/main.ts new file mode 100644 index 00000000000..420eb2569a9 --- /dev/null +++ b/static/code/stackblitz/v9/vue/main.ts @@ -0,0 +1,36 @@ +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); diff --git a/static/code/stackblitz/v9/vue/package-lock.json b/static/code/stackblitz/v9/vue/package-lock.json new file mode 100644 index 00000000000..43ec86a5a90 --- /dev/null +++ b/static/code/stackblitz/v9/vue/package-lock.json @@ -0,0 +1,1025 @@ +{ + "name": "vite-vue-starter", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "vite-vue-starter", + "version": "0.0.0", + "dependencies": { + "@ionic/vue": "9.0.0", + "@ionic/vue-router": "9.0.0", + "vue": "^3.2.25", + "vue-router": "5.1.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^6.0.0", + "typescript": "~5.9.0", + "vite": "^7.0.0", + "vue-tsc": "^3.0.0" + } + }, + "node_modules/@babel/generator": { + "version": "8.0.0-rc.5", + "license": "MIT", + "dependencies": { + "@babel/parser": "^8.0.0-rc.5", + "@babel/types": "^8.0.0-rc.5", + "@jridgewell/gen-mapping": "^0.3.12", + "@jridgewell/trace-mapping": "^0.3.28", + "@types/jsesc": "^2.5.0", + "jsesc": "^3.0.2" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-string-parser": { + "version": "8.0.0-rc.5", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/helper-validator-identifier": { + "version": "8.0.0-rc.5", + "license": "MIT", + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/parser": { + "version": "8.0.0-rc.5", + "license": "MIT", + "dependencies": { + "@babel/types": "^8.0.0-rc.5" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/generator/node_modules/@babel/types": { + "version": "8.0.0-rc.5", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^8.0.0-rc.5", + "@babel/helper-validator-identifier": "^8.0.0-rc.5" + }, + "engines": { + "node": "^22.18.0 || >=24.11.0" + } + }, + "node_modules/@babel/helper-string-parser": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/helper-validator-identifier": { + "version": "7.29.7", + "license": "MIT", + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@babel/parser": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/types": "^7.29.7" + }, + "bin": { + "parser": "bin/babel-parser.js" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@babel/types": { + "version": "7.29.7", + "license": "MIT", + "dependencies": { + "@babel/helper-string-parser": "^7.29.7", + "@babel/helper-validator-identifier": "^7.29.7" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/@ionic/core": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5", + "ionicons": "^8.1.0", + "tslib": "^2.1.0" + }, + "engines": { + "node": ">= 16" + } + }, + "node_modules/@ionic/vue": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@ionic/core": "9.0.0", + "@stencil/vue-output-target": "0.13.1", + "ionicons": "^8.0.13" + } + }, + "node_modules/@ionic/vue-router": { + "version": "9.0.0", + "license": "MIT", + "dependencies": { + "@ionic/vue": "9.0.0" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/remapping": { + "version": "2.3.5", + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.5", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@rolldown/pluginutils": { + "version": "1.0.1", + "dev": true, + "license": "MIT" + }, + "node_modules/@stencil/core": { + "version": "4.43.5", + "license": "MIT", + "bin": { + "stencil": "bin/stencil" + }, + "engines": { + "node": ">=16.0.0", + "npm": ">=7.10.0" + }, + "optionalDependencies": { + "@rollup/rollup-darwin-arm64": "4.44.0", + "@rollup/rollup-darwin-x64": "4.44.0", + "@rollup/rollup-linux-arm64-gnu": "4.44.0", + "@rollup/rollup-linux-arm64-musl": "4.44.0", + "@rollup/rollup-linux-x64-gnu": "4.44.0", + "@rollup/rollup-linux-x64-musl": "4.44.0", + "@rollup/rollup-win32-arm64-msvc": "4.44.0", + "@rollup/rollup-win32-x64-msvc": "4.44.0" + } + }, + "node_modules/@stencil/vue-output-target": { + "version": "0.13.1", + "resolved": "https://registry.npmjs.org/@stencil/vue-output-target/-/vue-output-target-0.13.1.tgz", + "integrity": "sha512-otJexEqRvFOeXKP+C/Q+SAI0A4LT94ddeTIuwrSqYLMvEZpsKQ0xdnPbbYnkMIsLvInyGjO7xqmzVjpzNf50rw==", + "license": "MIT", + "peerDependencies": { + "@stencil/core": ">=2.0.0 || >=3 || >= 4.0.0-beta.0 || >= 4.0.0", + "vue": "^3.4.38", + "vue-router": "^4.5.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "@stencil/core": { + "optional": true + }, + "vue": { + "optional": false + }, + "vue-router": { + "optional": true + } + } + }, + "node_modules/@types/estree": { + "version": "1.0.9", + "devOptional": true, + "license": "MIT" + }, + "node_modules/@types/jsesc": { + "version": "2.5.1", + "license": "MIT" + }, + "node_modules/@vitejs/plugin-vue": { + "version": "6.0.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@rolldown/pluginutils": "^1.0.1" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "peerDependencies": { + "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", + "vue": "^3.2.25" + } + }, + "node_modules/@volar/language-core": { + "version": "2.4.28", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/source-map": "2.4.28" + } + }, + "node_modules/@volar/source-map": { + "version": "2.4.28", + "dev": true, + "license": "MIT" + }, + "node_modules/@volar/typescript": { + "version": "2.4.28", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/language-core": "2.4.28", + "path-browserify": "^1.0.1", + "vscode-uri": "^3.0.8" + } + }, + "node_modules/@vue-macros/common": { + "version": "3.1.2", + "license": "MIT", + "dependencies": { + "@vue/compiler-sfc": "^3.5.22", + "ast-kit": "^2.1.2", + "local-pkg": "^1.1.2", + "magic-string-ast": "^1.0.2", + "unplugin-utils": "^0.3.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/sponsors/vue-macros" + }, + "peerDependencies": { + "vue": "^2.7.0 || ^3.2.25" + }, + "peerDependenciesMeta": { + "vue": { + "optional": true + } + } + }, + "node_modules/@vue/compiler-core": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@vue/shared": "3.5.39", + "entities": "^7.0.1", + "estree-walker": "^2.0.2", + "source-map-js": "^1.2.1" + } + }, + "node_modules/@vue/compiler-dom": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/compiler-core": "3.5.39", + "@vue/shared": "3.5.39" + } + }, + "node_modules/@vue/compiler-sfc": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.7", + "@vue/compiler-core": "3.5.39", + "@vue/compiler-dom": "3.5.39", + "@vue/compiler-ssr": "3.5.39", + "@vue/shared": "3.5.39", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.21", + "postcss": "^8.5.15", + "source-map-js": "^1.2.1" + } + }, + "node_modules/@vue/compiler-ssr": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/compiler-dom": "3.5.39", + "@vue/shared": "3.5.39" + } + }, + "node_modules/@vue/devtools-api": { + "version": "8.1.2", + "license": "MIT", + "dependencies": { + "@vue/devtools-kit": "^8.1.2" + } + }, + "node_modules/@vue/devtools-kit": { + "version": "8.1.2", + "license": "MIT", + "dependencies": { + "@vue/devtools-shared": "^8.1.2", + "birpc": "^2.6.1", + "hookable": "^5.5.3", + "perfect-debounce": "^2.0.0" + } + }, + "node_modules/@vue/devtools-shared": { + "version": "8.1.2", + "license": "MIT" + }, + "node_modules/@vue/language-core": { + "version": "3.3.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/language-core": "2.4.28", + "@vue/compiler-dom": "^3.5.0", + "@vue/shared": "^3.5.0", + "alien-signals": "^3.2.1", + "muggle-string": "^0.4.1", + "path-browserify": "^1.0.1", + "picomatch": "^4.0.4" + } + }, + "node_modules/@vue/reactivity": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/shared": "3.5.39" + } + }, + "node_modules/@vue/runtime-core": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.39", + "@vue/shared": "3.5.39" + } + }, + "node_modules/@vue/runtime-dom": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "3.5.39", + "@vue/runtime-core": "3.5.39", + "@vue/shared": "3.5.39", + "csstype": "^3.2.3" + } + }, + "node_modules/@vue/server-renderer": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/compiler-ssr": "3.5.39", + "@vue/shared": "3.5.39" + }, + "peerDependencies": { + "vue": "3.5.39" + } + }, + "node_modules/@vue/shared": { + "version": "3.5.39", + "license": "MIT" + }, + "node_modules/acorn": { + "version": "8.16.0", + "license": "MIT", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/alien-signals": { + "version": "3.2.1", + "dev": true, + "license": "MIT" + }, + "node_modules/ast-kit": { + "version": "2.2.0", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.28.5", + "pathe": "^2.0.3" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/sponsors/sxzz" + } + }, + "node_modules/ast-walker-scope": { + "version": "0.9.0", + "license": "MIT", + "dependencies": { + "@babel/parser": "^7.29.2", + "@babel/types": "^7.29.0", + "ast-kit": "^2.2.0" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/sponsors/sxzz" + } + }, + "node_modules/birpc": { + "version": "2.9.0", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/chokidar": { + "version": "5.0.0", + "license": "MIT", + "dependencies": { + "readdirp": "^5.0.0" + }, + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/confbox": { + "version": "0.2.2", + "license": "MIT" + }, + "node_modules/csstype": { + "version": "3.2.3", + "license": "MIT" + }, + "node_modules/entities": { + "version": "7.0.1", + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/esbuild": { + "name": "esbuild-wasm", + "version": "0.28.1", + "devOptional": true, + "license": "MIT", + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=18" + } + }, + "node_modules/estree-walker": { + "version": "2.0.2", + "license": "MIT" + }, + "node_modules/exsolve": { + "version": "1.0.8", + "license": "MIT" + }, + "node_modules/fdir": { + "version": "6.5.0", + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/hookable": { + "version": "5.5.3", + "license": "MIT" + }, + "node_modules/ionicons": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/ionicons/-/ionicons-8.1.0.tgz", + "integrity": "sha512-XSM2gYWTXxSYTwjmKWAoy4yR7AbAFDjpc5ZIivAiGXskM0fe5CdMPfs6InQRUcrYtVb2WZ/0HQ1/jeh3JW78SA==", + "license": "MIT", + "dependencies": { + "@stencil/core": "^4.43.5" + } + }, + "node_modules/jsesc": { + "version": "3.1.0", + "license": "MIT", + "bin": { + "jsesc": "bin/jsesc" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/json5": { + "version": "2.2.3", + "license": "MIT", + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/lightningcss": { + "name": "lightningcss-wasm", + "version": "1.32.0", + "bundleDependencies": [ + "napi-wasm" + ], + "dev": true, + "license": "MPL-2.0", + "optional": true, + "peer": true, + "dependencies": { + "napi-wasm": "^1.0.1" + }, + "engines": { + "node": ">= 12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/parcel" + } + }, + "node_modules/lightningcss/node_modules/napi-wasm": { + "version": "1.1.3", + "dev": true, + "inBundle": true, + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/local-pkg": { + "version": "1.1.2", + "license": "MIT", + "dependencies": { + "mlly": "^1.7.4", + "pkg-types": "^2.3.0", + "quansync": "^0.2.11" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, + "node_modules/magic-string": { + "version": "0.30.21", + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.5" + } + }, + "node_modules/magic-string-ast": { + "version": "1.0.3", + "license": "MIT", + "dependencies": { + "magic-string": "^0.30.19" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/sponsors/sxzz" + } + }, + "node_modules/mlly": { + "version": "1.8.2", + "license": "MIT", + "dependencies": { + "acorn": "^8.16.0", + "pathe": "^2.0.3", + "pkg-types": "^1.3.1", + "ufo": "^1.6.3" + } + }, + "node_modules/mlly/node_modules/confbox": { + "version": "0.1.8", + "license": "MIT" + }, + "node_modules/mlly/node_modules/pkg-types": { + "version": "1.3.1", + "license": "MIT", + "dependencies": { + "confbox": "^0.1.8", + "mlly": "^1.7.4", + "pathe": "^2.0.1" + } + }, + "node_modules/muggle-string": { + "version": "0.4.1", + "license": "MIT" + }, + "node_modules/nanoid": { + "version": "3.3.12", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/path-browserify": { + "version": "1.0.1", + "dev": true, + "license": "MIT" + }, + "node_modules/pathe": { + "version": "2.0.3", + "license": "MIT" + }, + "node_modules/perfect-debounce": { + "version": "2.1.0", + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "4.0.5", + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pkg-types": { + "version": "2.3.0", + "license": "MIT", + "dependencies": { + "confbox": "^0.2.2", + "exsolve": "^1.0.7", + "pathe": "^2.0.3" + } + }, + "node_modules/postcss": { + "version": "8.5.16", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.12", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/quansync": { + "version": "0.2.11", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/antfu" + }, + { + "type": "individual", + "url": "https://github.com/sponsors/sxzz" + } + ], + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "5.0.0", + "license": "MIT", + "engines": { + "node": ">= 20.19.0" + }, + "funding": { + "type": "individual", + "url": "https://paulmillr.com/funding/" + } + }, + "node_modules/rollup": { + "name": "@rollup/wasm-node", + "version": "4.62.3", + "devOptional": true, + "license": "MIT", + "dependencies": { + "@types/estree": "1.0.9" + }, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/scule": { + "version": "1.3.0", + "license": "MIT" + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tslib": { + "version": "2.8.1", + "license": "0BSD" + }, + "node_modules/typescript": { + "version": "5.9.3", + "devOptional": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, + "node_modules/ufo": { + "version": "1.6.3", + "license": "MIT" + }, + "node_modules/unplugin": { + "version": "3.0.0", + "license": "MIT", + "dependencies": { + "@jridgewell/remapping": "^2.3.5", + "picomatch": "^4.0.3", + "webpack-virtual-modules": "^0.6.2" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + } + }, + "node_modules/unplugin-utils": { + "version": "0.3.1", + "license": "MIT", + "dependencies": { + "pathe": "^2.0.3", + "picomatch": "^4.0.3" + }, + "engines": { + "node": ">=20.19.0" + }, + "funding": { + "url": "https://github.com/sponsors/sxzz" + } + }, + "node_modules/vite": { + "version": "7.3.6", + "devOptional": true, + "license": "MIT", + "dependencies": { + "esbuild": "^0.27.0 || ^0.28.0", + "fdir": "^6.5.0", + "picomatch": "^4.0.3", + "postcss": "^8.5.6", + "rollup": "^4.43.0", + "tinyglobby": "^0.2.15" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^20.19.0 || >=22.12.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^20.19.0 || >=22.12.0", + "jiti": ">=1.21.0", + "less": "^4.0.0", + "lightningcss": "^1.21.0", + "sass": "^1.70.0", + "sass-embedded": "^1.70.0", + "stylus": ">=0.54.8", + "sugarss": "^5.0.0", + "terser": "^5.16.0", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "jiti": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "sass-embedded": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/vscode-uri": { + "version": "3.1.0", + "dev": true, + "license": "MIT" + }, + "node_modules/vue": { + "version": "3.5.39", + "license": "MIT", + "dependencies": { + "@vue/compiler-dom": "3.5.39", + "@vue/compiler-sfc": "3.5.39", + "@vue/runtime-dom": "3.5.39", + "@vue/server-renderer": "3.5.39", + "@vue/shared": "3.5.39" + }, + "peerDependencies": { + "typescript": "*" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, + "node_modules/vue-router": { + "version": "5.1.0", + "license": "MIT", + "dependencies": { + "@babel/generator": "^8.0.0-rc.4", + "@vue-macros/common": "^3.1.1", + "@vue/devtools-api": "^8.1.2", + "ast-walker-scope": "^0.9.0", + "chokidar": "^5.0.0", + "json5": "^2.2.3", + "local-pkg": "^1.1.2", + "magic-string": "^0.30.21", + "mlly": "^1.8.2", + "muggle-string": "^0.4.1", + "pathe": "^2.0.3", + "picomatch": "^4.0.3", + "scule": "^1.3.0", + "tinyglobby": "^0.2.16", + "unplugin": "^3.0.0", + "unplugin-utils": "^0.3.1", + "yaml": "^2.9.0" + }, + "funding": { + "url": "https://github.com/sponsors/posva" + }, + "peerDependencies": { + "@pinia/colada": ">=0.21.2", + "@vue/compiler-sfc": "^3.5.34", + "pinia": "^3.0.4", + "vite": "^7.0.0 || ^8.0.0", + "vue": "^3.5.34" + }, + "peerDependenciesMeta": { + "@pinia/colada": { + "optional": true + }, + "@vue/compiler-sfc": { + "optional": true + }, + "pinia": { + "optional": true + }, + "vite": { + "optional": true + } + } + }, + "node_modules/vue-tsc": { + "version": "3.3.7", + "dev": true, + "license": "MIT", + "dependencies": { + "@volar/typescript": "2.4.28", + "@vue/language-core": "3.3.7" + }, + "bin": { + "vue-tsc": "bin/vue-tsc.js" + }, + "peerDependencies": { + "typescript": ">=5.0.0" + } + }, + "node_modules/webpack-virtual-modules": { + "version": "0.6.2", + "license": "MIT" + }, + "node_modules/yaml": { + "version": "2.9.0", + "license": "ISC", + "bin": { + "yaml": "bin.mjs" + }, + "engines": { + "node": ">= 14.6" + }, + "funding": { + "url": "https://github.com/sponsors/eemeli" + } + } + } +} diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json new file mode 100644 index 00000000000..5adf29f0b8a --- /dev/null +++ b/static/code/stackblitz/v9/vue/package.json @@ -0,0 +1,22 @@ +{ + "name": "vite-vue-starter", + "private": true, + "version": "0.0.0", + "scripts": { + "dev": "vite", + "build": "vue-tsc --noEmit && vite build", + "preview": "vite preview" + }, + "dependencies": { + "@ionic/vue": "9.0.0", + "@ionic/vue-router": "9.0.0", + "vue": "^3.2.25", + "vue-router": "5.1.0" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^6.0.0", + "typescript": "~5.9.0", + "vite": "^7.0.0", + "vue-tsc": "^3.0.0" + } +} diff --git a/static/code/stackblitz/v9/vue/tsconfig.json b/static/code/stackblitz/v9/vue/tsconfig.json new file mode 100644 index 00000000000..bcc4abda4c5 --- /dev/null +++ b/static/code/stackblitz/v9/vue/tsconfig.json @@ -0,0 +1,18 @@ +{ + "compilerOptions": { + "target": "esnext", + "useDefineForClassFields": true, + "module": "esnext", + "moduleResolution": "node", + "strict": true, + "jsx": "preserve", + "sourceMap": true, + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": ["esnext", "dom"], + "skipLibCheck": true + }, + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/static/code/stackblitz/v9/vue/tsconfig.node.json b/static/code/stackblitz/v9/vue/tsconfig.node.json new file mode 100644 index 00000000000..e993792cb12 --- /dev/null +++ b/static/code/stackblitz/v9/vue/tsconfig.node.json @@ -0,0 +1,8 @@ +{ + "compilerOptions": { + "composite": true, + "module": "esnext", + "moduleResolution": "node" + }, + "include": ["vite.config.ts"] +} diff --git a/static/code/stackblitz/v9/vue/variables.css b/static/code/stackblitz/v9/vue/variables.css new file mode 100644 index 00000000000..e69de29bb2d diff --git a/static/code/stackblitz/v9/vue/vite.config.ts b/static/code/stackblitz/v9/vue/vite.config.ts new file mode 100644 index 00000000000..6405595ab23 --- /dev/null +++ b/static/code/stackblitz/v9/vue/vite.config.ts @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite'; +import vue from '@vitejs/plugin-vue'; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +}); diff --git a/static/img/demos/home.svg b/static/img/demos/home.svg new file mode 100644 index 00000000000..13345f320ed --- /dev/null +++ b/static/img/demos/home.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/demos/star.svg b/static/img/demos/star.svg new file mode 100644 index 00000000000..d900310fb6d --- /dev/null +++ b/static/img/demos/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/img/demos/trash.svg b/static/img/demos/trash.svg new file mode 100644 index 00000000000..d910d9620c0 --- /dev/null +++ b/static/img/demos/trash.svg @@ -0,0 +1,3 @@ + + + diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md index e51cbacb1fc..b7d91143633 100644 --- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md @@ -86,7 +86,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { this.addItems(3, true); - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v7/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v7/refresher/custom-content/angular/example_component_ts.md +++ b/static/usage/v7/refresher/custom-content/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v7/refresher/custom-scroll-target/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md +++ b/static/usage/v7/refresher/pull-properties/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md b/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md index d8611d00de6..e21412dc08c 100644 --- a/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md +++ b/static/usage/v8/checkbox/helper-error/angular/example_component_ts.md @@ -5,7 +5,6 @@ import { IonCheckbox, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', - standalone: true, imports: [IonCheckbox, IonButton, ReactiveFormsModule], templateUrl: './example.component.html', styleUrl: './example.component.css', diff --git a/static/usage/v8/img/basic/angular/example_component_html.md b/static/usage/v8/img/basic/angular/example_component_html.md index 61e27f8b9d6..1e4ce0fbb72 100644 --- a/static/usage/v8/img/basic/angular/example_component_html.md +++ b/static/usage/v8/img/basic/angular/example_component_html.md @@ -1,6 +1,6 @@ ```html ``` diff --git a/static/usage/v8/img/basic/demo.html b/static/usage/v8/img/basic/demo.html index ec0e23586ce..55671cb3ed8 100644 --- a/static/usage/v8/img/basic/demo.html +++ b/static/usage/v8/img/basic/demo.html @@ -21,7 +21,7 @@
diff --git a/static/usage/v8/img/basic/javascript.md b/static/usage/v8/img/basic/javascript.md index 61e27f8b9d6..1e4ce0fbb72 100644 --- a/static/usage/v8/img/basic/javascript.md +++ b/static/usage/v8/img/basic/javascript.md @@ -1,6 +1,6 @@ ```html ``` diff --git a/static/usage/v8/img/basic/react.md b/static/usage/v8/img/basic/react.md index 0236cc28976..1927954fb46 100644 --- a/static/usage/v8/img/basic/react.md +++ b/static/usage/v8/img/basic/react.md @@ -5,7 +5,7 @@ import { IonImg } from '@ionic/react'; function Example() { return ( ); diff --git a/static/usage/v8/img/basic/vue.md b/static/usage/v8/img/basic/vue.md index cccf7e8d759..86a3283d5e3 100644 --- a/static/usage/v8/img/basic/vue.md +++ b/static/usage/v8/img/basic/vue.md @@ -1,7 +1,7 @@ ```html diff --git a/static/usage/v8/modal/drag-move-event/angular/example_component_ts.md b/static/usage/v8/modal/drag-move-event/angular/example_component_ts.md index cf49b23a974..615dcd0c0fd 100644 --- a/static/usage/v8/modal/drag-move-event/angular/example_component_ts.md +++ b/static/usage/v8/modal/drag-move-event/angular/example_component_ts.md @@ -6,7 +6,6 @@ import type { ModalDragEventDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - standalone: true, imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { diff --git a/static/usage/v8/modal/drag-start-end-events/angular/example_component_ts.md b/static/usage/v8/modal/drag-start-end-events/angular/example_component_ts.md index a8cedb06efb..c10714cc1e4 100644 --- a/static/usage/v8/modal/drag-start-end-events/angular/example_component_ts.md +++ b/static/usage/v8/modal/drag-start-end-events/angular/example_component_ts.md @@ -6,7 +6,6 @@ import type { ModalDragEventDetail } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', templateUrl: 'example.component.html', - standalone: true, imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], }) export class ExampleComponent { diff --git a/static/usage/v8/radio/helper-error/angular/example_component_ts.md b/static/usage/v8/radio/helper-error/angular/example_component_ts.md index 463765b9cb6..f20cd3fae2a 100644 --- a/static/usage/v8/radio/helper-error/angular/example_component_ts.md +++ b/static/usage/v8/radio/helper-error/angular/example_component_ts.md @@ -5,7 +5,6 @@ import { IonRadioGroup, IonRadio, IonButton } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', - standalone: true, imports: [IonRadioGroup, IonRadio, IonButton, ReactiveFormsModule], templateUrl: './example.component.html', styleUrl: './example.component.css', diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md index e51cbacb1fc..b7d91143633 100644 --- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md @@ -86,7 +86,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { this.addItems(3, true); - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v8/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v8/refresher/custom-content/angular/example_component_ts.md +++ b/static/usage/v8/refresher/custom-content/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md +++ b/static/usage/v8/refresher/custom-scroll-target/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md index 6abfb78b665..da27a11e0af 100644 --- a/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md +++ b/static/usage/v8/refresher/pull-properties/angular/example_component_ts.md @@ -20,7 +20,7 @@ export class ExampleComponent { handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/select/helper-error/angular/example_component_ts.md b/static/usage/v8/select/helper-error/angular/example_component_ts.md index 6ac0561c716..3c279d89f68 100644 --- a/static/usage/v8/select/helper-error/angular/example_component_ts.md +++ b/static/usage/v8/select/helper-error/angular/example_component_ts.md @@ -5,7 +5,6 @@ import { IonSelect, IonSelectOption, IonButton } from '@ionic/angular/standalone @Component({ selector: 'app-example', - standalone: true, imports: [IonSelect, IonSelectOption, IonButton, ReactiveFormsModule], templateUrl: './example.component.html', styleUrl: './example.component.css', diff --git a/static/usage/v8/toggle/helper-error/angular/example_component_ts.md b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md index 3605e2794b2..7c92d0c9143 100644 --- a/static/usage/v8/toggle/helper-error/angular/example_component_ts.md +++ b/static/usage/v8/toggle/helper-error/angular/example_component_ts.md @@ -5,7 +5,6 @@ import { IonToggle } from '@ionic/angular/standalone'; @Component({ selector: 'app-example', - standalone: true, imports: [IonToggle, ReactiveFormsModule], templateUrl: './example.component.html', styleUrl: './example.component.css', diff --git a/static/usage/v9/accordion/accessibility/animations/angular/example_component_html.md b/static/usage/v9/accordion/accessibility/animations/angular/example_component_html.md new file mode 100644 index 00000000000..ced314d2657 --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/accessibility/animations/angular/example_component_ts.md b/static/usage/v9/accordion/accessibility/animations/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/accessibility/animations/demo.html b/static/usage/v9/accordion/accessibility/animations/demo.html new file mode 100644 index 00000000000..689da84fdf7 --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/demo.html @@ -0,0 +1,47 @@ + + + + + + Button + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/accessibility/animations/index.md b/static/usage/v9/accordion/accessibility/animations/index.md new file mode 100644 index 00000000000..a6504c025d9 --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/accessibility/animations/javascript.md b/static/usage/v9/accordion/accessibility/animations/javascript.md new file mode 100644 index 00000000000..f89ebdea048 --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/accessibility/animations/react.md b/static/usage/v9/accordion/accessibility/animations/react.md new file mode 100644 index 00000000000..0bf5878865b --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/accessibility/animations/vue.md b/static/usage/v9/accordion/accessibility/animations/vue.md new file mode 100644 index 00000000000..21f76f629fb --- /dev/null +++ b/static/usage/v9/accordion/accessibility/animations/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/basic/angular/example_component_html.md b/static/usage/v9/accordion/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f9f7c8639a0 --- /dev/null +++ b/static/usage/v9/accordion/basic/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/basic/angular/example_component_ts.md b/static/usage/v9/accordion/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/basic/demo.html b/static/usage/v9/accordion/basic/demo.html new file mode 100644 index 00000000000..40f14137bb2 --- /dev/null +++ b/static/usage/v9/accordion/basic/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/basic/index.md b/static/usage/v9/accordion/basic/index.md new file mode 100644 index 00000000000..f50f82b8b08 --- /dev/null +++ b/static/usage/v9/accordion/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/basic/javascript.md b/static/usage/v9/accordion/basic/javascript.md new file mode 100644 index 00000000000..f9f7c8639a0 --- /dev/null +++ b/static/usage/v9/accordion/basic/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/basic/react.md b/static/usage/v9/accordion/basic/react.md new file mode 100644 index 00000000000..122fc747919 --- /dev/null +++ b/static/usage/v9/accordion/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/basic/vue.md b/static/usage/v9/accordion/basic/vue.md new file mode 100644 index 00000000000..1cca6c2afef --- /dev/null +++ b/static/usage/v9/accordion/basic/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_css.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_css.md new file mode 100644 index 00000000000..93bc6b09b7f --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_css.md @@ -0,0 +1,24 @@ +```css +ion-accordion { + margin: 0 auto; +} + +ion-accordion.accordion-expanding, +ion-accordion.accordion-expanded { + width: calc(100% - 32px); + + margin: 16px auto; +} + +ion-accordion.accordion-collapsing ion-item[slot='header'], +ion-accordion.accordion-collapsed ion-item[slot='header'] { + --background: var(--ion-color-light); + --color: var(--ion-color-light-contrast); +} + +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --background: var(--ion-color-primary); + --color: var(--ion-color-primary-contrast); +} +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_html.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_html.md new file mode 100644 index 00000000000..3b3c86763c1 --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/demo.html b/static/usage/v9/accordion/customization/advanced-expansion-styles/demo.html new file mode 100644 index 00000000000..7e992fa6205 --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/demo.html @@ -0,0 +1,69 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md new file mode 100644 index 00000000000..1a74f1500a5 --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/javascript.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/javascript.md new file mode 100644 index 00000000000..5076fe510e5 --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/javascript.md @@ -0,0 +1,47 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_css.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_css.md new file mode 100644 index 00000000000..93bc6b09b7f --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_css.md @@ -0,0 +1,24 @@ +```css +ion-accordion { + margin: 0 auto; +} + +ion-accordion.accordion-expanding, +ion-accordion.accordion-expanded { + width: calc(100% - 32px); + + margin: 16px auto; +} + +ion-accordion.accordion-collapsing ion-item[slot='header'], +ion-accordion.accordion-collapsed ion-item[slot='header'] { + --background: var(--ion-color-light); + --color: var(--ion-color-light-contrast); +} + +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --background: var(--ion-color-primary); + --color: var(--ion-color-primary-contrast); +} +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_tsx.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_tsx.md new file mode 100644 index 00000000000..01cd873445d --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/react/main_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/customization/advanced-expansion-styles/vue.md b/static/usage/v9/accordion/customization/advanced-expansion-styles/vue.md new file mode 100644 index 00000000000..6f01efaec15 --- /dev/null +++ b/static/usage/v9/accordion/customization/advanced-expansion-styles/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +``` diff --git a/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_html.md b/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_html.md new file mode 100644 index 00000000000..1be81366c58 --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_ts.md b/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/customization/expansion-styles/demo.html b/static/usage/v9/accordion/customization/expansion-styles/demo.html new file mode 100644 index 00000000000..92759495ccb --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/customization/expansion-styles/index.md b/static/usage/v9/accordion/customization/expansion-styles/index.md new file mode 100644 index 00000000000..d46c8652c80 --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/customization/expansion-styles/javascript.md b/static/usage/v9/accordion/customization/expansion-styles/javascript.md new file mode 100644 index 00000000000..1be81366c58 --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/expansion-styles/react.md b/static/usage/v9/accordion/customization/expansion-styles/react.md new file mode 100644 index 00000000000..d24cf600956 --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/customization/expansion-styles/vue.md b/static/usage/v9/accordion/customization/expansion-styles/vue.md new file mode 100644 index 00000000000..0c020847dc7 --- /dev/null +++ b/static/usage/v9/accordion/customization/expansion-styles/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/customization/icons/angular/example_component_html.md b/static/usage/v9/accordion/customization/icons/angular/example_component_html.md new file mode 100644 index 00000000000..2899aeacac6 --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/icons/angular/example_component_ts.md b/static/usage/v9/accordion/customization/icons/angular/example_component_ts.md new file mode 100644 index 00000000000..584c60756a5 --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { caretDownCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDownCircle }); + } +} +``` diff --git a/static/usage/v9/accordion/customization/icons/demo.html b/static/usage/v9/accordion/customization/icons/demo.html new file mode 100644 index 00000000000..5893e279ef6 --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/customization/icons/index.md b/static/usage/v9/accordion/customization/icons/index.md new file mode 100644 index 00000000000..644d80455ce --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/customization/icons/javascript.md b/static/usage/v9/accordion/customization/icons/javascript.md new file mode 100644 index 00000000000..7fd8a091cc8 --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/icons/react.md b/static/usage/v9/accordion/customization/icons/react.md new file mode 100644 index 00000000000..2b269c172ed --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/react.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +import { caretDownCircle } from 'ionicons/icons'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/customization/icons/vue.md b/static/usage/v9/accordion/customization/icons/vue.md new file mode 100644 index 00000000000..0ceebf36b52 --- /dev/null +++ b/static/usage/v9/accordion/customization/icons/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/customization/theming/angular/example_component_html.md b/static/usage/v9/accordion/customization/theming/angular/example_component_html.md new file mode 100644 index 00000000000..5efdf7b71f9 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/customization/theming/angular/example_component_ts.md b/static/usage/v9/accordion/customization/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/customization/theming/angular/global_css.md b/static/usage/v9/accordion/customization/theming/angular/global_css.md new file mode 100644 index 00000000000..141236c6633 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/angular/global_css.md @@ -0,0 +1,23 @@ +```css +:root { + --ion-color-rose: #fecdd3; + --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-contrast: #000000; + --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-shade: #e0b4ba; + --ion-color-rose-tint: #fed2d7; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); +} +``` diff --git a/static/usage/v9/accordion/customization/theming/demo.html b/static/usage/v9/accordion/customization/theming/demo.html new file mode 100644 index 00000000000..302b087c3a6 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/demo.html @@ -0,0 +1,68 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/customization/theming/index.md b/static/usage/v9/accordion/customization/theming/index.md new file mode 100644 index 00000000000..35b3de8e245 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/accordion/customization/theming/javascript.md b/static/usage/v9/accordion/customization/theming/javascript.md new file mode 100644 index 00000000000..179bf5d51c0 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/javascript.md @@ -0,0 +1,46 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v9/accordion/customization/theming/react/main_css.md b/static/usage/v9/accordion/customization/theming/react/main_css.md new file mode 100644 index 00000000000..141236c6633 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/react/main_css.md @@ -0,0 +1,23 @@ +```css +:root { + --ion-color-rose: #fecdd3; + --ion-color-rose-rgb: 254, 205, 211; + --ion-color-rose-contrast: #000000; + --ion-color-rose-contrast-rgb: 0, 0, 0; + --ion-color-rose-shade: #e0b4ba; + --ion-color-rose-tint: #fed2d7; +} + +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} + +div[slot='content'] { + background: rgba(var(--ion-color-rose-rgb), 0.25); +} +``` diff --git a/static/usage/v9/accordion/customization/theming/react/main_tsx.md b/static/usage/v9/accordion/customization/theming/react/main_tsx.md new file mode 100644 index 00000000000..ecc51a9e15b --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/react/main_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/customization/theming/vue.md b/static/usage/v9/accordion/customization/theming/vue.md new file mode 100644 index 00000000000..51f75eaf1e5 --- /dev/null +++ b/static/usage/v9/accordion/customization/theming/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +``` diff --git a/static/usage/v9/accordion/disable/group/angular/example_component_html.md b/static/usage/v9/accordion/disable/group/angular/example_component_html.md new file mode 100644 index 00000000000..5c4cf3b51b3 --- /dev/null +++ b/static/usage/v9/accordion/disable/group/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/disable/group/angular/example_component_ts.md b/static/usage/v9/accordion/disable/group/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/disable/group/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/disable/group/demo.html b/static/usage/v9/accordion/disable/group/demo.html new file mode 100644 index 00000000000..abfe36701f0 --- /dev/null +++ b/static/usage/v9/accordion/disable/group/demo.html @@ -0,0 +1,47 @@ + + + + + + Button + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/disable/group/index.md b/static/usage/v9/accordion/disable/group/index.md new file mode 100644 index 00000000000..e47456232d4 --- /dev/null +++ b/static/usage/v9/accordion/disable/group/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/disable/group/javascript.md b/static/usage/v9/accordion/disable/group/javascript.md new file mode 100644 index 00000000000..163641a544c --- /dev/null +++ b/static/usage/v9/accordion/disable/group/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/disable/group/react.md b/static/usage/v9/accordion/disable/group/react.md new file mode 100644 index 00000000000..b2ff09b5fe4 --- /dev/null +++ b/static/usage/v9/accordion/disable/group/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/disable/group/vue.md b/static/usage/v9/accordion/disable/group/vue.md new file mode 100644 index 00000000000..423acd3bc03 --- /dev/null +++ b/static/usage/v9/accordion/disable/group/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/disable/individual/angular/example_component_html.md b/static/usage/v9/accordion/disable/individual/angular/example_component_html.md new file mode 100644 index 00000000000..56ac780e987 --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/disable/individual/angular/example_component_ts.md b/static/usage/v9/accordion/disable/individual/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/disable/individual/demo.html b/static/usage/v9/accordion/disable/individual/demo.html new file mode 100644 index 00000000000..49690625b45 --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/disable/individual/index.md b/static/usage/v9/accordion/disable/individual/index.md new file mode 100644 index 00000000000..5deca6e5663 --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/disable/individual/javascript.md b/static/usage/v9/accordion/disable/individual/javascript.md new file mode 100644 index 00000000000..df5f207512a --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Disabled) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/disable/individual/react.md b/static/usage/v9/accordion/disable/individual/react.md new file mode 100644 index 00000000000..e133354999a --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/disable/individual/vue.md b/static/usage/v9/accordion/disable/individual/vue.md new file mode 100644 index 00000000000..2edc619c85f --- /dev/null +++ b/static/usage/v9/accordion/disable/individual/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/listen-changes/angular/example_component_html.md b/static/usage/v9/accordion/listen-changes/angular/example_component_html.md new file mode 100644 index 00000000000..d48c34dd4f4 --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/listen-changes/angular/example_component_ts.md b/static/usage/v9/accordion/listen-changes/angular/example_component_ts.md new file mode 100644 index 00000000000..bd761256ec0 --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent { + private values: string[] = ['first', 'second', 'third']; + + accordionGroupChange = (event: CustomEvent) => { + const collapsedItems = this.values.filter((value) => value !== event.detail.value); + const selectedValue = event.detail.value; + + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); + }; +} +``` diff --git a/static/usage/v9/accordion/listen-changes/demo.html b/static/usage/v9/accordion/listen-changes/demo.html new file mode 100644 index 00000000000..0ae2737494b --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/demo.html @@ -0,0 +1,63 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + + + diff --git a/static/usage/v9/accordion/listen-changes/index.md b/static/usage/v9/accordion/listen-changes/index.md new file mode 100644 index 00000000000..6ba0f5de95b --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/listen-changes/javascript.md b/static/usage/v9/accordion/listen-changes/javascript.md new file mode 100644 index 00000000000..4c85d88b630 --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/javascript.md @@ -0,0 +1,36 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v9/accordion/listen-changes/react.md b/static/usage/v9/accordion/listen-changes/react.md new file mode 100644 index 00000000000..7ec38a63931 --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/react.md @@ -0,0 +1,45 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react'; +function Example() { + const values = ['first', 'second', 'third']; + const accordionGroupChange = (event: AccordionGroupCustomEvent) => { + const collapsedItems = values.filter((value) => value !== event.detail.value); + const selectedValue = event.detail.value; + + console.log( + `Expanded: ${selectedValue === undefined ? 'None' : event.detail.value} | Collapsed: ${collapsedItems.join(', ')}` + ); + }; + + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/listen-changes/vue.md b/static/usage/v9/accordion/listen-changes/vue.md new file mode 100644 index 00000000000..90df82b9038 --- /dev/null +++ b/static/usage/v9/accordion/listen-changes/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/multiple/angular/example_component_html.md b/static/usage/v9/accordion/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..238f000c458 --- /dev/null +++ b/static/usage/v9/accordion/multiple/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/multiple/angular/example_component_ts.md b/static/usage/v9/accordion/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/multiple/demo.html b/static/usage/v9/accordion/multiple/demo.html new file mode 100644 index 00000000000..3861e145be6 --- /dev/null +++ b/static/usage/v9/accordion/multiple/demo.html @@ -0,0 +1,52 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + + + diff --git a/static/usage/v9/accordion/multiple/index.md b/static/usage/v9/accordion/multiple/index.md new file mode 100644 index 00000000000..04643d3bc20 --- /dev/null +++ b/static/usage/v9/accordion/multiple/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/multiple/javascript.md b/static/usage/v9/accordion/multiple/javascript.md new file mode 100644 index 00000000000..6948ed4e9cc --- /dev/null +++ b/static/usage/v9/accordion/multiple/javascript.md @@ -0,0 +1,27 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + + +``` diff --git a/static/usage/v9/accordion/multiple/react.md b/static/usage/v9/accordion/multiple/react.md new file mode 100644 index 00000000000..2bdbb0b365a --- /dev/null +++ b/static/usage/v9/accordion/multiple/react.md @@ -0,0 +1,45 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + const accordionGroup = useRef(null); + + useEffect(() => { + if (!accordionGroup.current) { + return; + } + + accordionGroup.current.value = ['first', 'third']; + }, []); + + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/multiple/vue.md b/static/usage/v9/accordion/multiple/vue.md new file mode 100644 index 00000000000..d971225f923 --- /dev/null +++ b/static/usage/v9/accordion/multiple/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/readonly/group/angular/example_component_html.md b/static/usage/v9/accordion/readonly/group/angular/example_component_html.md new file mode 100644 index 00000000000..4ebf8c55e4e --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/readonly/group/angular/example_component_ts.md b/static/usage/v9/accordion/readonly/group/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/readonly/group/demo.html b/static/usage/v9/accordion/readonly/group/demo.html new file mode 100644 index 00000000000..ca9eb585fa6 --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/readonly/group/index.md b/static/usage/v9/accordion/readonly/group/index.md new file mode 100644 index 00000000000..cecd653b6ab --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/readonly/group/javascript.md b/static/usage/v9/accordion/readonly/group/javascript.md new file mode 100644 index 00000000000..d511ea5ff0b --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/readonly/group/react.md b/static/usage/v9/accordion/readonly/group/react.md new file mode 100644 index 00000000000..2f26afde9ea --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/readonly/group/vue.md b/static/usage/v9/accordion/readonly/group/vue.md new file mode 100644 index 00000000000..1eff5bc7b6d --- /dev/null +++ b/static/usage/v9/accordion/readonly/group/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/readonly/individual/angular/example_component_html.md b/static/usage/v9/accordion/readonly/individual/angular/example_component_html.md new file mode 100644 index 00000000000..94013b9d07d --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/readonly/individual/angular/example_component_ts.md b/static/usage/v9/accordion/readonly/individual/angular/example_component_ts.md new file mode 100644 index 00000000000..74c440fcccd --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/accordion/readonly/individual/demo.html b/static/usage/v9/accordion/readonly/individual/demo.html new file mode 100644 index 00000000000..4fe17640caf --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/demo.html @@ -0,0 +1,47 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +
+ + + + diff --git a/static/usage/v9/accordion/readonly/individual/index.md b/static/usage/v9/accordion/readonly/individual/index.md new file mode 100644 index 00000000000..229b349625f --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/readonly/individual/javascript.md b/static/usage/v9/accordion/readonly/individual/javascript.md new file mode 100644 index 00000000000..e1f78d726db --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/javascript.md @@ -0,0 +1,22 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion (Readonly) + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + +``` diff --git a/static/usage/v9/accordion/readonly/individual/react.md b/static/usage/v9/accordion/readonly/individual/react.md new file mode 100644 index 00000000000..a6d28a427cd --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAccordion, IonAccordionGroup, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion (Readonly) + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/readonly/individual/vue.md b/static/usage/v9/accordion/readonly/individual/vue.md new file mode 100644 index 00000000000..ca792f75090 --- /dev/null +++ b/static/usage/v9/accordion/readonly/individual/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/accordion/toggle/angular/example_component_html.md b/static/usage/v9/accordion/toggle/angular/example_component_html.md new file mode 100644 index 00000000000..6af0af8516a --- /dev/null +++ b/static/usage/v9/accordion/toggle/angular/example_component_html.md @@ -0,0 +1,24 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +Toggle Second Accordion +``` diff --git a/static/usage/v9/accordion/toggle/angular/example_component_ts.md b/static/usage/v9/accordion/toggle/angular/example_component_ts.md new file mode 100644 index 00000000000..1d4c2ca8110 --- /dev/null +++ b/static/usage/v9/accordion/toggle/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel], +}) +export class ExampleComponent { + @ViewChild('accordionGroup', { static: true }) accordionGroup!: IonAccordionGroup; + + toggleAccordion = () => { + const nativeEl = this.accordionGroup; + if (nativeEl.value === 'second') { + nativeEl.value = undefined; + } else { + nativeEl.value = 'second'; + } + }; +} +``` diff --git a/static/usage/v9/accordion/toggle/demo.html b/static/usage/v9/accordion/toggle/demo.html new file mode 100644 index 00000000000..dfab9be6194 --- /dev/null +++ b/static/usage/v9/accordion/toggle/demo.html @@ -0,0 +1,65 @@ + + + + + + Accordion + + + + + + + + + + +
+ + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +
+ + Toggle Second Accordion +
+ + + + + + diff --git a/static/usage/v9/accordion/toggle/index.md b/static/usage/v9/accordion/toggle/index.md new file mode 100644 index 00000000000..30733779011 --- /dev/null +++ b/static/usage/v9/accordion/toggle/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/accordion/toggle/javascript.md b/static/usage/v9/accordion/toggle/javascript.md new file mode 100644 index 00000000000..058e4e468d6 --- /dev/null +++ b/static/usage/v9/accordion/toggle/javascript.md @@ -0,0 +1,35 @@ +```html + + + + First Accordion + +
First Content
+ + + + Second Accordion + +
Second Content
+ + + + Third Accordion + +
Third Content
+ + + +Toggle Second Accordion + + +``` diff --git a/static/usage/v9/accordion/toggle/react.md b/static/usage/v9/accordion/toggle/react.md new file mode 100644 index 00000000000..8d20c6bb18e --- /dev/null +++ b/static/usage/v9/accordion/toggle/react.md @@ -0,0 +1,51 @@ +```tsx +import React, { useRef } from 'react'; +import { IonAccordion, IonAccordionGroup, IonButton, IonItem, IonLabel } from '@ionic/react'; +function Example() { + const accordionGroup = useRef(null); + const toggleAccordion = () => { + if (!accordionGroup.current) { + return; + } + const nativeEl = accordionGroup.current; + + if (nativeEl.value === 'second') { + nativeEl.value = undefined; + } else { + nativeEl.value = 'second'; + } + }; + return ( + <> + + + + First Accordion + +
+ First Content +
+ + + + Second Accordion + +
+ Second Content +
+ + + + Third Accordion + +
+ Third Content +
+ + + Toggle Second Accordion + + ); +} +export default Example; +``` diff --git a/static/usage/v9/accordion/toggle/vue.md b/static/usage/v9/accordion/toggle/vue.md new file mode 100644 index 00000000000..c200a77ceb8 --- /dev/null +++ b/static/usage/v9/accordion/toggle/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v9/action-sheet/controller/angular/example_component_html.md b/static/usage/v9/action-sheet/controller/angular/example_component_html.md new file mode 100644 index 00000000000..2cc044fbee1 --- /dev/null +++ b/static/usage/v9/action-sheet/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Open +``` diff --git a/static/usage/v9/action-sheet/controller/angular/example_component_ts.md b/static/usage/v9/action-sheet/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..3dc12323596 --- /dev/null +++ b/static/usage/v9/action-sheet/controller/angular/example_component_ts.md @@ -0,0 +1,44 @@ +```ts +import { Component } from '@angular/core'; +import { ActionSheetController, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent { + constructor(private actionSheetCtrl: ActionSheetController) {} + + async presentActionSheet() { + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Actions', + buttons: [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ], + }); + + await actionSheet.present(); + } +} +``` diff --git a/static/usage/v9/action-sheet/controller/demo.html b/static/usage/v9/action-sheet/controller/demo.html new file mode 100644 index 00000000000..577b6f2ecb6 --- /dev/null +++ b/static/usage/v9/action-sheet/controller/demo.html @@ -0,0 +1,53 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open +
+ + + + + diff --git a/static/usage/v9/action-sheet/controller/index.md b/static/usage/v9/action-sheet/controller/index.md new file mode 100644 index 00000000000..1bf02f9e95e --- /dev/null +++ b/static/usage/v9/action-sheet/controller/index.md @@ -0,0 +1,27 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/action-sheet/controller/javascript.md b/static/usage/v9/action-sheet/controller/javascript.md new file mode 100644 index 00000000000..e4c32b54f09 --- /dev/null +++ b/static/usage/v9/action-sheet/controller/javascript.md @@ -0,0 +1,35 @@ +```html +Open + + +``` diff --git a/static/usage/v9/action-sheet/controller/react.md b/static/usage/v9/action-sheet/controller/react.md new file mode 100644 index 00000000000..0fb6f90cbf7 --- /dev/null +++ b/static/usage/v9/action-sheet/controller/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonButton, useIonActionSheet } from '@ionic/react'; + +function Example() { + const [present] = useIonActionSheet(); + + return ( + + present({ + header: 'Actions', + buttons: [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ], + }) + } + > + Open + + ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/controller/vue.md b/static/usage/v9/action-sheet/controller/vue.md new file mode 100644 index 00000000000..7e7badbccff --- /dev/null +++ b/static/usage/v9/action-sheet/controller/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_html.md b/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_html.md new file mode 100644 index 00000000000..a2af98772fd --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Open + +``` diff --git a/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_ts.md b/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_ts.md new file mode 100644 index 00000000000..1f61e8486dc --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/angular/example_component_ts.md @@ -0,0 +1,40 @@ +```ts +import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], +}) +export class ExampleComponent { + isActionSheetOpen = false; + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + setOpen(isOpen: boolean) { + this.isActionSheetOpen = isOpen; + } +} +``` diff --git a/static/usage/v9/action-sheet/inline/isOpen/demo.html b/static/usage/v9/action-sheet/inline/isOpen/demo.html new file mode 100644 index 00000000000..3aa1424dcee --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/demo.html @@ -0,0 +1,53 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v9/action-sheet/inline/isOpen/index.md b/static/usage/v9/action-sheet/inline/isOpen/index.md new file mode 100644 index 00000000000..9bb30db25fb --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/index.md @@ -0,0 +1,27 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/action-sheet/inline/isOpen/javascript.md b/static/usage/v9/action-sheet/inline/isOpen/javascript.md new file mode 100644 index 00000000000..f5c1a6efec2 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/javascript.md @@ -0,0 +1,35 @@ +```html +Open + + + +``` diff --git a/static/usage/v9/action-sheet/inline/isOpen/react.md b/static/usage/v9/action-sheet/inline/isOpen/react.md new file mode 100644 index 00000000000..aebfa63c093 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/react.md @@ -0,0 +1,42 @@ +```tsx +import React, { useState } from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Open + setIsOpen(false)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/inline/isOpen/vue.md b/static/usage/v9/action-sheet/inline/isOpen/vue.md new file mode 100644 index 00000000000..31567ec00cd --- /dev/null +++ b/static/usage/v9/action-sheet/inline/isOpen/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v9/action-sheet/inline/trigger/angular/example_component_html.md b/static/usage/v9/action-sheet/inline/trigger/angular/example_component_html.md new file mode 100644 index 00000000000..b2bebe5de6c --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Open + +``` diff --git a/static/usage/v9/action-sheet/inline/trigger/angular/example_component_ts.md b/static/usage/v9/action-sheet/inline/trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..46b36ef3271 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonActionSheet, IonButton], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; +} +``` diff --git a/static/usage/v9/action-sheet/inline/trigger/demo.html b/static/usage/v9/action-sheet/inline/trigger/demo.html new file mode 100644 index 00000000000..ebcec0fad93 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/demo.html @@ -0,0 +1,49 @@ + + + + + + Action Sheet + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v9/action-sheet/inline/trigger/index.md b/static/usage/v9/action-sheet/inline/trigger/index.md new file mode 100644 index 00000000000..dc9f8480270 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/index.md @@ -0,0 +1,27 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/action-sheet/inline/trigger/javascript.md b/static/usage/v9/action-sheet/inline/trigger/javascript.md new file mode 100644 index 00000000000..d705a0162b5 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/javascript.md @@ -0,0 +1,31 @@ +```html +Open + + + +``` diff --git a/static/usage/v9/action-sheet/inline/trigger/react.md b/static/usage/v9/action-sheet/inline/trigger/react.md new file mode 100644 index 00000000000..54c1793d713 --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/inline/trigger/vue.md b/static/usage/v9/action-sheet/inline/trigger/vue.md new file mode 100644 index 00000000000..0cbfd8e98be --- /dev/null +++ b/static/usage/v9/action-sheet/inline/trigger/vue.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_css.md b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_css.md new file mode 100644 index 00000000000..6bf8f4dc7fc --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +.container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; +} +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_html.md b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_html.md new file mode 100644 index 00000000000..7896f219737 --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +
+ Open + +
+``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_ts.md b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_ts.md new file mode 100644 index 00000000000..58c89cef01f --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/angular/example_component_ts.md @@ -0,0 +1,42 @@ +```ts +import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular'; +import type { OverlayEventDetail } from '@ionic/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} + + logResult(event: CustomEvent) { + console.log(JSON.stringify(event.detail, null, 2)); + } +} +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/demo.html b/static/usage/v9/action-sheet/role-info-on-dismiss/demo.html new file mode 100644 index 00000000000..feca048a617 --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/demo.html @@ -0,0 +1,63 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/index.md b/static/usage/v9/action-sheet/role-info-on-dismiss/index.md new file mode 100644 index 00000000000..97bc1190016 --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/javascript.md b/static/usage/v9/action-sheet/role-info-on-dismiss/javascript.md new file mode 100644 index 00000000000..27454e00346 --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/javascript.md @@ -0,0 +1,51 @@ +```html + + +
+ Open + +
+ + +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_css.md b/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_css.md new file mode 100644 index 00000000000..6bf8f4dc7fc --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_css.md @@ -0,0 +1,9 @@ +```css +.container { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + height: 100%; +} +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_tsx.md b/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_tsx.md new file mode 100644 index 00000000000..5728ab3c194 --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/react/main_tsx.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; +import type { OverlayEventDetail } from '@ionic/core'; + +import './main.css'; + +function Example() { + const logResult = (result: OverlayEventDetail) => { + console.log(JSON.stringify(result, null, 2)); + }; + + return ( +
+ Open + logResult(detail)} + > +
+ ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/role-info-on-dismiss/vue.md b/static/usage/v9/action-sheet/role-info-on-dismiss/vue.md new file mode 100644 index 00000000000..cf69d7e9ead --- /dev/null +++ b/static/usage/v9/action-sheet/role-info-on-dismiss/vue.md @@ -0,0 +1,55 @@ +```html + + + + + +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_html.md b/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..0aa27e460f6 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open + +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..bf6c22bb370 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,37 @@ +```ts +import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/angular/global_css.md b/static/usage/v9/action-sheet/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..2d9e22b3163 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/angular/global_css.md @@ -0,0 +1,12 @@ +```css +/* Note: These styles should be located in your global stylesheet */ +ion-action-sheet.my-custom-class { + --background: #f58840; + --backdrop-opacity: 0.6; + --button-background-selected: #e97223; + --button-color: #000000; + --color: #fff; + /* role: "destructive" button iOS styling override */ + --ion-color-danger: #000000; +} +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/demo.html b/static/usage/v9/action-sheet/theming/css-properties/demo.html new file mode 100644 index 00000000000..55e2fac1a2f --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/demo.html @@ -0,0 +1,66 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v9/action-sheet/theming/css-properties/index.md b/static/usage/v9/action-sheet/theming/css-properties/index.md new file mode 100644 index 00000000000..eaa3153d3bb --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/action-sheet/theming/css-properties/javascript.md b/static/usage/v9/action-sheet/theming/css-properties/javascript.md new file mode 100644 index 00000000000..cbc9332589a --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/javascript.md @@ -0,0 +1,48 @@ +```html + + +Open + + + +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/react/main_css.md b/static/usage/v9/action-sheet/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..63809ed75c7 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-action-sheet.my-custom-class { + --background: #f58840; + --backdrop-opacity: 0.6; + --button-background-selected: #e97223; + --button-color: #000000; + --color: #fff; + /* role: "destructive" button iOS styling override */ + --ion-color-danger: #000000; +} +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/react/main_tsx.md b/static/usage/v9/action-sheet/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..fc0c08e0a57 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/react/main_tsx.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/theming/css-properties/vue.md b/static/usage/v9/action-sheet/theming/css-properties/vue.md new file mode 100644 index 00000000000..2dd0bcf058a --- /dev/null +++ b/static/usage/v9/action-sheet/theming/css-properties/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v9/action-sheet/theming/styling/angular/example_component_html.md b/static/usage/v9/action-sheet/theming/styling/angular/example_component_html.md new file mode 100644 index 00000000000..0aa27e460f6 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open + +``` diff --git a/static/usage/v9/action-sheet/theming/styling/angular/example_component_ts.md b/static/usage/v9/action-sheet/theming/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..bf6c22bb370 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/angular/example_component_ts.md @@ -0,0 +1,37 @@ +```ts +import { Component } from '@angular/core'; +import { IonActionSheet, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonActionSheet, IonButton], +}) +export class ExampleComponent { + public actionSheetButtons = [ + { + text: 'Delete', + role: 'destructive', + data: { + action: 'delete', + }, + }, + { + text: 'Share', + data: { + action: 'share', + }, + }, + { + text: 'Cancel', + role: 'cancel', + data: { + action: 'cancel', + }, + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v9/action-sheet/theming/styling/angular/global_css.md b/static/usage/v9/action-sheet/theming/styling/angular/global_css.md new file mode 100644 index 00000000000..46999a97921 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/angular/global_css.md @@ -0,0 +1,29 @@ +```css +/* Note: These styles should be located in your global stylesheet */ +ion-action-sheet.my-custom-class .action-sheet-group { + background: #f58840; +} + +ion-action-sheet.my-custom-class .action-sheet-title { + color: #fff; +} + +ion-action-sheet.my-custom-class .action-sheet-cancel::after { + background: #e97223; +} + +ion-action-sheet.my-custom-class .action-sheet-button, +ion-action-sheet.my-custom-class .action-sheet-button.ion-focused { + color: #000000; +} + +@media (any-hover: hover) { + ion-action-sheet.my-custom-class .action-sheet-button:hover { + color: #000000; + } +} + +ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; +} +``` diff --git a/static/usage/v9/action-sheet/theming/styling/demo.html b/static/usage/v9/action-sheet/theming/styling/demo.html new file mode 100644 index 00000000000..6b0752521b8 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/demo.html @@ -0,0 +1,83 @@ + + + + + + Action Sheet + + + + + + + + + + + +
+ Open + +
+ + + + + diff --git a/static/usage/v9/action-sheet/theming/styling/index.md b/static/usage/v9/action-sheet/theming/styling/index.md new file mode 100644 index 00000000000..e790304950c --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/action-sheet/theming/styling/javascript.md b/static/usage/v9/action-sheet/theming/styling/javascript.md new file mode 100644 index 00000000000..90e2725d0df --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/javascript.md @@ -0,0 +1,65 @@ +```html + + +Open + + + +``` diff --git a/static/usage/v9/action-sheet/theming/styling/react/main_css.md b/static/usage/v9/action-sheet/theming/styling/react/main_css.md new file mode 100644 index 00000000000..cff22cfd41e --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/react/main_css.md @@ -0,0 +1,28 @@ +```css +ion-action-sheet.my-custom-class .action-sheet-group { + background: #f58840; +} + +ion-action-sheet.my-custom-class .action-sheet-title { + color: #fff; +} + +ion-action-sheet.my-custom-class .action-sheet-cancel::after { + background: #e97223; +} + +ion-action-sheet.my-custom-class .action-sheet-button, +ion-action-sheet.my-custom-class .action-sheet-button.ion-focused { + color: #000000; +} + +@media (any-hover: hover) { + ion-action-sheet.my-custom-class .action-sheet-button:hover { + color: #000000; + } +} + +ion-action-sheet.my-custom-class ion-backdrop { + opacity: 0.6; +} +``` diff --git a/static/usage/v9/action-sheet/theming/styling/react/main_tsx.md b/static/usage/v9/action-sheet/theming/styling/react/main_tsx.md new file mode 100644 index 00000000000..fc0c08e0a57 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/react/main_tsx.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonActionSheet, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/action-sheet/theming/styling/vue.md b/static/usage/v9/action-sheet/theming/styling/vue.md new file mode 100644 index 00000000000..fb88a4d25e4 --- /dev/null +++ b/static/usage/v9/action-sheet/theming/styling/vue.md @@ -0,0 +1,68 @@ +```html + + + + + +``` diff --git a/static/usage/v9/alert/buttons/angular/example_component_html.md b/static/usage/v9/alert/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..e9843417484 --- /dev/null +++ b/static/usage/v9/alert/buttons/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/buttons/angular/example_component_ts.md b/static/usage/v9/alert/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..fe11f7b7919 --- /dev/null +++ b/static/usage/v9/alert/buttons/angular/example_component_ts.md @@ -0,0 +1,34 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; +import type { OverlayEventDetail } from '@ionic/core'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + public alertButtons = [ + { + text: 'Cancel', + role: 'cancel', + handler: () => { + console.log('Alert canceled'); + }, + }, + { + text: 'OK', + role: 'confirm', + handler: () => { + console.log('Alert confirmed'); + }, + }, + ]; + + setResult(event: CustomEvent) { + console.log(`Dismissed with role: ${event.detail.role}`); + } +} +``` diff --git a/static/usage/v9/alert/buttons/demo.html b/static/usage/v9/alert/buttons/demo.html new file mode 100644 index 00000000000..abc6c2e4b80 --- /dev/null +++ b/static/usage/v9/alert/buttons/demo.html @@ -0,0 +1,48 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/buttons/index.md b/static/usage/v9/alert/buttons/index.md new file mode 100644 index 00000000000..0181b50bde1 --- /dev/null +++ b/static/usage/v9/alert/buttons/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/buttons/javascript.md b/static/usage/v9/alert/buttons/javascript.md new file mode 100644 index 00000000000..efd64d7f484 --- /dev/null +++ b/static/usage/v9/alert/buttons/javascript.md @@ -0,0 +1,29 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v9/alert/buttons/react.md b/static/usage/v9/alert/buttons/react.md new file mode 100644 index 00000000000..f9983f46d84 --- /dev/null +++ b/static/usage/v9/alert/buttons/react.md @@ -0,0 +1,34 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + { + console.log('Alert canceled'); + }, + }, + { + text: 'OK', + role: 'confirm', + handler: () => { + console.log('Alert confirmed'); + }, + }, + ]} + onDidDismiss={({ detail }) => console.log(`Dismissed with role: ${detail.role}`)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/buttons/vue.md b/static/usage/v9/alert/buttons/vue.md new file mode 100644 index 00000000000..80af7c14ccf --- /dev/null +++ b/static/usage/v9/alert/buttons/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v9/alert/customization/angular/example_component_html.md b/static/usage/v9/alert/customization/angular/example_component_html.md new file mode 100644 index 00000000000..762d3c21d89 --- /dev/null +++ b/static/usage/v9/alert/customization/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/customization/angular/example_component_ts.md b/static/usage/v9/alert/customization/angular/example_component_ts.md new file mode 100644 index 00000000000..1949ea4d912 --- /dev/null +++ b/static/usage/v9/alert/customization/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + public alertButtons = [ + { + text: 'No', + cssClass: 'alert-button-cancel', + }, + { + text: 'Yes', + cssClass: 'alert-button-confirm', + }, + ]; +} +``` diff --git a/static/usage/v9/alert/customization/angular/global_css.md b/static/usage/v9/alert/customization/angular/global_css.md new file mode 100644 index 00000000000..c84c1456e58 --- /dev/null +++ b/static/usage/v9/alert/customization/angular/global_css.md @@ -0,0 +1,33 @@ +```css +ion-alert.custom-alert { + --backdrop-opacity: 0.7; +} + +.custom-alert .alert-button-group { + padding: 8px; +} + +button.alert-button.alert-button-confirm { + background-color: var(--ion-color-success); + color: var(--ion-color-success-contrast); +} + +.md button.alert-button.alert-button-confirm { + border-radius: 4px; +} + +.ios .custom-alert button.alert-button { + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); +} + +.ios button.alert-button.alert-button-cancel { + border-right: 0; + border-bottom-left-radius: 13px; + border-top-left-radius: 13px; +} + +.ios button.alert-button.alert-button-confirm { + border-bottom-right-radius: 13px; + border-top-right-radius: 13px; +} +``` diff --git a/static/usage/v9/alert/customization/demo.html b/static/usage/v9/alert/customization/demo.html new file mode 100644 index 00000000000..9aeaa9a9c30 --- /dev/null +++ b/static/usage/v9/alert/customization/demo.html @@ -0,0 +1,72 @@ + + + + + + Alert + + + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/customization/index.md b/static/usage/v9/alert/customization/index.md new file mode 100644 index 00000000000..283a903f182 --- /dev/null +++ b/static/usage/v9/alert/customization/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/alert/customization/javascript.md b/static/usage/v9/alert/customization/javascript.md new file mode 100644 index 00000000000..a3c31a1b432 --- /dev/null +++ b/static/usage/v9/alert/customization/javascript.md @@ -0,0 +1,53 @@ +```html +Click Me + + + + + +``` diff --git a/static/usage/v9/alert/customization/react/main_css.md b/static/usage/v9/alert/customization/react/main_css.md new file mode 100644 index 00000000000..c84c1456e58 --- /dev/null +++ b/static/usage/v9/alert/customization/react/main_css.md @@ -0,0 +1,33 @@ +```css +ion-alert.custom-alert { + --backdrop-opacity: 0.7; +} + +.custom-alert .alert-button-group { + padding: 8px; +} + +button.alert-button.alert-button-confirm { + background-color: var(--ion-color-success); + color: var(--ion-color-success-contrast); +} + +.md button.alert-button.alert-button-confirm { + border-radius: 4px; +} + +.ios .custom-alert button.alert-button { + border: 0.55px solid rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2); +} + +.ios button.alert-button.alert-button-cancel { + border-right: 0; + border-bottom-left-radius: 13px; + border-top-left-radius: 13px; +} + +.ios button.alert-button.alert-button-confirm { + border-bottom-right-radius: 13px; + border-top-right-radius: 13px; +} +``` diff --git a/static/usage/v9/alert/customization/react/main_tsx.md b/static/usage/v9/alert/customization/react/main_tsx.md new file mode 100644 index 00000000000..b32663d5339 --- /dev/null +++ b/static/usage/v9/alert/customization/react/main_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/customization/vue.md b/static/usage/v9/alert/customization/vue.md new file mode 100644 index 00000000000..bd88b9bb187 --- /dev/null +++ b/static/usage/v9/alert/customization/vue.md @@ -0,0 +1,55 @@ +```html + + + + + +``` diff --git a/static/usage/v9/alert/inputs/radios/angular/example_component_html.md b/static/usage/v9/alert/inputs/radios/angular/example_component_html.md new file mode 100644 index 00000000000..cc22c178c35 --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/inputs/radios/angular/example_component_ts.md b/static/usage/v9/alert/inputs/radios/angular/example_component_ts.md new file mode 100644 index 00000000000..56d975cd48b --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + public alertButtons = ['OK']; + public alertInputs = [ + { + label: 'Red', + type: 'radio', + value: 'red', + }, + { + label: 'Blue', + type: 'radio', + value: 'blue', + }, + { + label: 'Green', + type: 'radio', + value: 'green', + }, + ]; +} +``` diff --git a/static/usage/v9/alert/inputs/radios/demo.html b/static/usage/v9/alert/inputs/radios/demo.html new file mode 100644 index 00000000000..e5a9500fa2d --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/demo.html @@ -0,0 +1,46 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/inputs/radios/index.md b/static/usage/v9/alert/inputs/radios/index.md new file mode 100644 index 00000000000..24f44a06c16 --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/inputs/radios/javascript.md b/static/usage/v9/alert/inputs/radios/javascript.md new file mode 100644 index 00000000000..570a7f4cb6b --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/javascript.md @@ -0,0 +1,27 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v9/alert/inputs/radios/react.md b/static/usage/v9/alert/inputs/radios/react.md new file mode 100644 index 00000000000..13518c02aa4 --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/inputs/radios/vue.md b/static/usage/v9/alert/inputs/radios/vue.md new file mode 100644 index 00000000000..a98b9cabf7e --- /dev/null +++ b/static/usage/v9/alert/inputs/radios/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v9/alert/inputs/text-inputs/angular/example_component_html.md b/static/usage/v9/alert/inputs/text-inputs/angular/example_component_html.md new file mode 100644 index 00000000000..0ae990d9a50 --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/inputs/text-inputs/angular/example_component_ts.md b/static/usage/v9/alert/inputs/text-inputs/angular/example_component_ts.md new file mode 100644 index 00000000000..fbe330a991e --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + public alertButtons = ['OK']; + public alertInputs = [ + { + placeholder: 'Name', + }, + { + placeholder: 'Nickname (max 8 characters)', + attributes: { + maxlength: 8, + }, + }, + { + type: 'number', + placeholder: 'Age', + min: 1, + max: 100, + }, + { + type: 'textarea', + placeholder: 'A little about yourself', + }, + ]; +} +``` diff --git a/static/usage/v9/alert/inputs/text-inputs/demo.html b/static/usage/v9/alert/inputs/text-inputs/demo.html new file mode 100644 index 00000000000..6461a3f07cf --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/demo.html @@ -0,0 +1,50 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/inputs/text-inputs/index.md b/static/usage/v9/alert/inputs/text-inputs/index.md new file mode 100644 index 00000000000..268217dbfdd --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/inputs/text-inputs/javascript.md b/static/usage/v9/alert/inputs/text-inputs/javascript.md new file mode 100644 index 00000000000..bbbd043c5e7 --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/javascript.md @@ -0,0 +1,31 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v9/alert/inputs/text-inputs/react.md b/static/usage/v9/alert/inputs/text-inputs/react.md new file mode 100644 index 00000000000..fbea607f2b3 --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/inputs/text-inputs/vue.md b/static/usage/v9/alert/inputs/text-inputs/vue.md new file mode 100644 index 00000000000..775ace441df --- /dev/null +++ b/static/usage/v9/alert/inputs/text-inputs/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/alert/presenting/controller/angular/example_component_html.md b/static/usage/v9/alert/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..183dd98719d --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Click Me +``` diff --git a/static/usage/v9/alert/presenting/controller/angular/example_component_ts.md b/static/usage/v9/alert/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..c1bbc45c26f --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,25 @@ +```ts +import { Component } from '@angular/core'; +import { AlertController, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent { + constructor(private alertController: AlertController) {} + + async presentAlert() { + const alert = await this.alertController.create({ + header: 'A Short Title Is Best', + subHeader: 'A Sub Header Is Optional', + message: 'A message should be a short, complete sentence.', + buttons: ['Action'], + }); + + await alert.present(); + } +} +``` diff --git a/static/usage/v9/alert/presenting/controller/demo.html b/static/usage/v9/alert/presenting/controller/demo.html new file mode 100644 index 00000000000..eb320915923 --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/demo.html @@ -0,0 +1,35 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me +
+ + + + + + diff --git a/static/usage/v9/alert/presenting/controller/index.md b/static/usage/v9/alert/presenting/controller/index.md new file mode 100644 index 00000000000..c173bad84c3 --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/presenting/controller/javascript.md b/static/usage/v9/alert/presenting/controller/javascript.md new file mode 100644 index 00000000000..0847251aba7 --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/javascript.md @@ -0,0 +1,16 @@ +```html +Click Me + + +``` diff --git a/static/usage/v9/alert/presenting/controller/react.md b/static/usage/v9/alert/presenting/controller/react.md new file mode 100644 index 00000000000..0ae2dbec301 --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, useIonAlert } from '@ionic/react'; + +function Example() { + const [presentAlert] = useIonAlert(); + + return ( + + presentAlert({ + header: 'A Short Title Is Best', + subHeader: 'A Sub Header Is Optional', + message: 'A message should be a short, complete sentence.', + buttons: ['Action'], + }) + } + > + Click Me + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/presenting/controller/vue.md b/static/usage/v9/alert/presenting/controller/vue.md new file mode 100644 index 00000000000..135c35dfd40 --- /dev/null +++ b/static/usage/v9/alert/presenting/controller/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/alert/presenting/isOpen/angular/example_component_html.md b/static/usage/v9/alert/presenting/isOpen/angular/example_component_html.md new file mode 100644 index 00000000000..6394f95a34b --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/presenting/isOpen/angular/example_component_ts.md b/static/usage/v9/alert/presenting/isOpen/angular/example_component_ts.md new file mode 100644 index 00000000000..59945be3135 --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/angular/example_component_ts.md @@ -0,0 +1,19 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + isAlertOpen = false; + alertButtons = ['Action']; + + setOpen(isOpen: boolean) { + this.isAlertOpen = isOpen; + } +} +``` diff --git a/static/usage/v9/alert/presenting/isOpen/demo.html b/static/usage/v9/alert/presenting/isOpen/demo.html new file mode 100644 index 00000000000..07a700ea528 --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/demo.html @@ -0,0 +1,36 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/presenting/isOpen/index.md b/static/usage/v9/alert/presenting/isOpen/index.md new file mode 100644 index 00000000000..b3adbc5c91f --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/presenting/isOpen/javascript.md b/static/usage/v9/alert/presenting/isOpen/javascript.md new file mode 100644 index 00000000000..67ae47c5770 --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/javascript.md @@ -0,0 +1,17 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v9/alert/presenting/isOpen/react.md b/static/usage/v9/alert/presenting/isOpen/react.md new file mode 100644 index 00000000000..e55bf79f93b --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/react.md @@ -0,0 +1,23 @@ +```tsx +import React, { useState } from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + <> + setIsOpen(true)}>Click Me + setIsOpen(false)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/presenting/isOpen/vue.md b/static/usage/v9/alert/presenting/isOpen/vue.md new file mode 100644 index 00000000000..316984ff72e --- /dev/null +++ b/static/usage/v9/alert/presenting/isOpen/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/alert/presenting/trigger/angular/example_component_html.md b/static/usage/v9/alert/presenting/trigger/angular/example_component_html.md new file mode 100644 index 00000000000..65d165d2173 --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Click Me + +``` diff --git a/static/usage/v9/alert/presenting/trigger/angular/example_component_ts.md b/static/usage/v9/alert/presenting/trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..085e4f0641f --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/angular/example_component_ts.md @@ -0,0 +1,14 @@ +```ts +import { Component } from '@angular/core'; +import { IonAlert, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAlert, IonButton], +}) +export class ExampleComponent { + alertButtons = ['Action']; +} +``` diff --git a/static/usage/v9/alert/presenting/trigger/demo.html b/static/usage/v9/alert/presenting/trigger/demo.html new file mode 100644 index 00000000000..54f3a658997 --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/demo.html @@ -0,0 +1,33 @@ + + + + + + Alert + + + + + + + + + +
+ Click Me + +
+ + + + + + diff --git a/static/usage/v9/alert/presenting/trigger/index.md b/static/usage/v9/alert/presenting/trigger/index.md new file mode 100644 index 00000000000..3da2ac5d00f --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/alert/presenting/trigger/javascript.md b/static/usage/v9/alert/presenting/trigger/javascript.md new file mode 100644 index 00000000000..9496421db5b --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/javascript.md @@ -0,0 +1,14 @@ +```html +Click Me + + + +``` diff --git a/static/usage/v9/alert/presenting/trigger/react.md b/static/usage/v9/alert/presenting/trigger/react.md new file mode 100644 index 00000000000..4d10a5ad085 --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonAlert, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Click Me + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/alert/presenting/trigger/vue.md b/static/usage/v9/alert/presenting/trigger/vue.md new file mode 100644 index 00000000000..8a8be42fbea --- /dev/null +++ b/static/usage/v9/alert/presenting/trigger/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/basic/angular/example_component_html.md b/static/usage/v9/animations/basic/angular/example_component_html.md new file mode 100644 index 00000000000..1bd8875b1b3 --- /dev/null +++ b/static/usage/v9/animations/basic/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/basic/angular/example_component_ts.md b/static/usage/v9/animations/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7c8892e08a8 --- /dev/null +++ b/static/usage/v9/animations/basic/angular/example_component_ts.md @@ -0,0 +1,42 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + + private animation!: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1500) + .iterations(Infinity) + .fromTo('transform', 'translateX(0px)', 'translateX(100px)') + .fromTo('opacity', '1', '0.2'); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v9/animations/basic/demo.html b/static/usage/v9/animations/basic/demo.html new file mode 100644 index 00000000000..5a5cf404b55 --- /dev/null +++ b/static/usage/v9/animations/basic/demo.html @@ -0,0 +1,59 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v9/animations/basic/index.md b/static/usage/v9/animations/basic/index.md new file mode 100644 index 00000000000..e5a65be79d2 --- /dev/null +++ b/static/usage/v9/animations/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/basic/javascript.md b/static/usage/v9/animations/basic/javascript.md new file mode 100644 index 00000000000..3c98a4e039f --- /dev/null +++ b/static/usage/v9/animations/basic/javascript.md @@ -0,0 +1,18 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v9/animations/basic/react.md b/static/usage/v9/animations/basic/react.md new file mode 100644 index 00000000000..9134a2d9f24 --- /dev/null +++ b/static/usage/v9/animations/basic/react.md @@ -0,0 +1,45 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1500) + .iterations(Infinity) + .fromTo('transform', 'translateX(0px)', 'translateX(100px)') + .fromTo('opacity', '1', '0.2'); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/basic/vue.md b/static/usage/v9/animations/basic/vue.md new file mode 100644 index 00000000000..f322347cc0b --- /dev/null +++ b/static/usage/v9/animations/basic/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/before-and-after-hooks/angular/example_component_html.md b/static/usage/v9/animations/before-and-after-hooks/angular/example_component_html.md new file mode 100644 index 00000000000..c73e91cb471 --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/before-and-after-hooks/angular/example_component_ts.md b/static/usage/v9/animations/before-and-after-hooks/angular/example_component_ts.md new file mode 100644 index 00000000000..3c86531e634 --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/angular/example_component_ts.md @@ -0,0 +1,61 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; + + private animation!: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const cardEl = this.cardElements.get(0); + + const card = cardEl + ? this.animationCtrl + .create() + .addElement(cardEl.nativeElement) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]) + : null; + + if (card) { + this.animation = this.animationCtrl.create().duration(2000).addAnimation([card]); + } + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v9/animations/before-and-after-hooks/demo.html b/static/usage/v9/animations/before-and-after-hooks/demo.html new file mode 100644 index 00000000000..d7f63cc83f5 --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/demo.html @@ -0,0 +1,74 @@ + + + + + + Animations + + + + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + + + diff --git a/static/usage/v9/animations/before-and-after-hooks/index.md b/static/usage/v9/animations/before-and-after-hooks/index.md new file mode 100644 index 00000000000..e36c8c3763b --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/before-and-after-hooks/javascript.md b/static/usage/v9/animations/before-and-after-hooks/javascript.md new file mode 100644 index 00000000000..262f8cd9803 --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/javascript.md @@ -0,0 +1,28 @@ +```html + + Card + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v9/animations/before-and-after-hooks/react.md b/static/usage/v9/animations/before-and-after-hooks/react.md new file mode 100644 index 00000000000..bae1185b19d --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const card = useRef(); + + useEffect(() => { + if (!card.current) { + card.current = createAnimation() + .addElement(cardEl.current!) + .duration(2000) + .beforeStyles({ + filter: 'invert(75%)', + }) + .beforeClearStyles(['box-shadow']) + .afterStyles({ + 'box-shadow': 'rgba(255, 0, 50, 0.4) 0px 4px 16px 6px', + }) + .afterClearStyles(['filter']) + .keyframes([ + { offset: 0, transform: 'scale(1)' }, + { offset: 0.5, transform: 'scale(1.5)' }, + { offset: 1, transform: 'scale(1)' }, + ]); + } + }, [cardEl]); + + const play = async () => { + await card.current?.play(); + }; + const pause = () => { + card.current?.pause(); + }; + const stop = () => { + card.current?.stop(); + }; + + return ( + <> + + Card + + + + Play + + + Pause + + + Stop + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/before-and-after-hooks/vue.md b/static/usage/v9/animations/before-and-after-hooks/vue.md new file mode 100644 index 00000000000..5d70755b75f --- /dev/null +++ b/static/usage/v9/animations/before-and-after-hooks/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/chain/angular/example_component_html.md b/static/usage/v9/animations/chain/angular/example_component_html.md new file mode 100644 index 00000000000..8f8b5a83f58 --- /dev/null +++ b/static/usage/v9/animations/chain/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/chain/angular/example_component_ts.md b/static/usage/v9/animations/chain/angular/example_component_ts.md new file mode 100644 index 00000000000..7922b44b4d0 --- /dev/null +++ b/static/usage/v9/animations/chain/angular/example_component_ts.md @@ -0,0 +1,86 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; + + private cardA!: Animation | null; + private cardB!: Animation | null; + private cardC!: Animation | null; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const cardElA = this.cardElements.get(0); + const cardElB = this.cardElements.get(1); + const cardElC = this.cardElements.get(2); + + this.cardA = cardElA + ? this.animationCtrl + .create() + .addElement(cardElA.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]) + : null; + + this.cardB = cardElB + ? this.animationCtrl + .create() + .addElement(cardElB.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]) + : null; + + this.cardC = cardElC + ? this.animationCtrl + .create() + .addElement(cardElC.nativeElement) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]) + : null; + } + + async play() { + await this.cardA?.play(); + await this.cardB?.play(); + await this.cardC?.play(); + } + + pause() { + this.cardA?.pause(); + this.cardB?.pause(); + this.cardC?.pause(); + } + + async stop() { + await this.cardA?.stop(); + await this.cardB?.stop(); + await this.cardC?.stop(); + } +} +``` diff --git a/static/usage/v9/animations/chain/demo.html b/static/usage/v9/animations/chain/demo.html new file mode 100644 index 00000000000..a60d1c841a9 --- /dev/null +++ b/static/usage/v9/animations/chain/demo.html @@ -0,0 +1,96 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card 1 + + + + Card 2 + + + + Card 3 + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v9/animations/chain/index.md b/static/usage/v9/animations/chain/index.md new file mode 100644 index 00000000000..e01fdf22510 --- /dev/null +++ b/static/usage/v9/animations/chain/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/chain/javascript.md b/static/usage/v9/animations/chain/javascript.md new file mode 100644 index 00000000000..4fd3dc227d3 --- /dev/null +++ b/static/usage/v9/animations/chain/javascript.md @@ -0,0 +1,67 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v9/animations/chain/react.md b/static/usage/v9/animations/chain/react.md new file mode 100644 index 00000000000..d00350793f3 --- /dev/null +++ b/static/usage/v9/animations/chain/react.md @@ -0,0 +1,89 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardAEl = useRef(null); + const cardBEl = useRef(null); + const cardCEl = useRef(null); + + const cardA = useRef(); + const cardB = useRef(); + const cardC = useRef(); + + useEffect(() => { + if (!cardA.current) { + cardA.current = createAnimation() + .addElement(cardAEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.2) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]); + } + + if (!cardB.current) { + cardB.current = createAnimation() + .addElement(cardBEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.2)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + } + if (!cardC.current) { + cardC.current = createAnimation() + .addElement(cardCEl.current!) + .fill('none') + .duration(1000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.8)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + } + }, [cardAEl, cardBEl, cardCEl]); + + const play = async () => { + await cardA.current?.play(); + await cardB.current?.play(); + await cardC.current?.play(); + }; + const pause = () => { + cardA.current?.pause(); + cardB.current?.pause(); + cardC.current?.pause(); + }; + const stop = () => { + cardA.current?.stop(); + cardB.current?.stop(); + cardC.current?.stop(); + }; + + return ( + <> + + Card 1 + + + + Card 2 + + + + Card 3 + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/chain/vue.md b/static/usage/v9/animations/chain/vue.md new file mode 100644 index 00000000000..9131918101b --- /dev/null +++ b/static/usage/v9/animations/chain/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/gesture/angular/example_component_css.md b/static/usage/v9/animations/gesture/angular/example_component_css.md new file mode 100644 index 00000000000..c06ce353f7c --- /dev/null +++ b/static/usage/v9/animations/gesture/angular/example_component_css.md @@ -0,0 +1,17 @@ +```css +.container { + flex-direction: column; +} + +.track { + width: 344px; + background: var(--ion-color-medium); + padding: 16px; +} + +ion-card { + width: 100px; + box-shadow: none; + margin: 0px; +} +``` diff --git a/static/usage/v9/animations/gesture/angular/example_component_html.md b/static/usage/v9/animations/gesture/angular/example_component_html.md new file mode 100644 index 00000000000..56b2deacd70 --- /dev/null +++ b/static/usage/v9/animations/gesture/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +
+
+ + Card + +
+ +

Drag the square along the track.

+
+``` diff --git a/static/usage/v9/animations/gesture/angular/example_component_ts.md b/static/usage/v9/animations/gesture/angular/example_component_ts.md new file mode 100644 index 00000000000..b7edd5e359e --- /dev/null +++ b/static/usage/v9/animations/gesture/angular/example_component_ts.md @@ -0,0 +1,83 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { AnimationController, GestureController, IonCard, IonCardContent } from '@ionic/angular'; +import type { Animation, Gesture, GestureDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + + private animation!: Animation; + private gesture!: Gesture; + private started = false; + private initialStep = 0; + + /** + * The track is 344px wide. + * The card is 100px wide. + * We want 16px of margin on each end of the track. + */ + private readonly MAX_TRANSLATE = 344 - 100 - 32; + + constructor(private animationCtrl: AnimationController, private gestureCtrl: GestureController) {} + + private onMove(event: GestureDetail) { + if (!this.started) { + this.animation.progressStart(); + this.started = true; + } + + this.animation.progressStep(this.getStep(event)); + } + + private onEnd(event: GestureDetail) { + if (!this.started) { + return; + } + + this.gesture.enable(false); + + const step = this.getStep(event); + const shouldComplete = step > 0.5; + + this.animation.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => { + this.gesture.enable(true); + }); + + this.initialStep = shouldComplete ? this.MAX_TRANSLATE : 0; + this.started = false; + } + + private clamp(min: number, n: number, max: number) { + return Math.max(min, Math.min(n, max)); + } + + private getStep(event: GestureDetail) { + const delta = this.initialStep + event.deltaX; + return this.clamp(0, delta / this.MAX_TRANSLATE, 1); + } + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1000) + .fromTo('transform', 'translateX(0)', `translateX(${this.MAX_TRANSLATE}px)`); + + const gesture = (this.gesture = this.gestureCtrl.create({ + el: this.card.nativeElement, + threshold: 0, + gestureName: 'card-drag', + onMove: (event) => this.onMove(event), + onEnd: (event) => this.onEnd(event), + })); + + gesture.enable(true); + } +} +``` diff --git a/static/usage/v9/animations/gesture/demo.html b/static/usage/v9/animations/gesture/demo.html new file mode 100644 index 00000000000..055466a7e65 --- /dev/null +++ b/static/usage/v9/animations/gesture/demo.html @@ -0,0 +1,113 @@ + + + + + + Animation + + + + + + + + + + +
+
+ + Card + +
+ +

Drag the square along the track.

+
+ + diff --git a/static/usage/v9/animations/gesture/index.md b/static/usage/v9/animations/gesture/index.md new file mode 100644 index 00000000000..1cd1e6b3d68 --- /dev/null +++ b/static/usage/v9/animations/gesture/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/animations/gesture/javascript.md b/static/usage/v9/animations/gesture/javascript.md new file mode 100644 index 00000000000..6037b6340f2 --- /dev/null +++ b/static/usage/v9/animations/gesture/javascript.md @@ -0,0 +1,98 @@ +```html +
+
+ + Card + +
+
+ +

Drag the square along the track.

+ + + + +``` diff --git a/static/usage/v9/animations/gesture/react/main_css.md b/static/usage/v9/animations/gesture/react/main_css.md new file mode 100644 index 00000000000..c06ce353f7c --- /dev/null +++ b/static/usage/v9/animations/gesture/react/main_css.md @@ -0,0 +1,17 @@ +```css +.container { + flex-direction: column; +} + +.track { + width: 344px; + background: var(--ion-color-medium); + padding: 16px; +} + +ion-card { + width: 100px; + box-shadow: none; + margin: 0px; +} +``` diff --git a/static/usage/v9/animations/gesture/react/main_tsx.md b/static/usage/v9/animations/gesture/react/main_tsx.md new file mode 100644 index 00000000000..730e8a47212 --- /dev/null +++ b/static/usage/v9/animations/gesture/react/main_tsx.md @@ -0,0 +1,92 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardContent, createAnimation, createGesture } from '@ionic/react'; +import type { Animation, Gesture, GestureDetail } from '@ionic/react'; + +import './main.css'; + +function Example() { + const cardEl = useRef(null); + const animation = useRef(null); + const gesture = useRef(null); + const initialStep = useRef(0); + const started = useRef(false); + + useEffect(() => { + if (animation.current === null) { + /** + * The track is 344px wide. + * The card is 100px wide. + * We want 16px of margin on each end of the track. + */ + const MAX_TRANSLATE = 344 - 100 - 32; + + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1000) + .fromTo('transform', 'translateX(0)', `translateX(${MAX_TRANSLATE}px)`); + + gesture.current = createGesture({ + el: cardEl.current!, + threshold: 0, + gestureName: 'card-drag', + onMove: (event) => onMove(event), + onEnd: (event) => onEnd(event), + }); + + gesture.current.enable(true); + + const onMove = (event: GestureDetail) => { + if (!started.current) { + animation.current!.progressStart(); + started.current = true; + } + + animation.current!.progressStep(getStep(event)); + }; + + const onEnd = (event: GestureDetail) => { + if (!started.current) { + return; + } + + gesture.current!.enable(false); + + const step = getStep(event); + const shouldComplete = step > 0.5; + + animation.current!.progressEnd(shouldComplete ? 1 : 0, step).onFinish(() => { + gesture.current!.enable(true); + }); + + initialStep.current = shouldComplete ? MAX_TRANSLATE : 0; + started.current = false; + }; + + const clamp = (min: number, n: number, max: number) => { + return Math.max(min, Math.min(n, max)); + }; + + const getStep = (event: GestureDetail) => { + const delta = initialStep.current + event.deltaX; + return clamp(0, delta / MAX_TRANSLATE, 1); + }; + } + }, [cardEl]); + + return ( + <> +
+
+ + Card + +
+ +

Drag the square along the track.

+
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/gesture/vue.md b/static/usage/v9/animations/gesture/vue.md new file mode 100644 index 00000000000..3e293d887a8 --- /dev/null +++ b/static/usage/v9/animations/gesture/vue.md @@ -0,0 +1,102 @@ +```html + + + + + +``` diff --git a/static/usage/v9/animations/group/angular/example_component_html.md b/static/usage/v9/animations/group/angular/example_component_html.md new file mode 100644 index 00000000000..8f8b5a83f58 --- /dev/null +++ b/static/usage/v9/animations/group/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/group/angular/example_component_ts.md b/static/usage/v9/animations/group/angular/example_component_ts.md new file mode 100644 index 00000000000..8e73765ea7e --- /dev/null +++ b/static/usage/v9/animations/group/angular/example_component_ts.md @@ -0,0 +1,69 @@ +```ts +import { Component, ElementRef, ViewChildren } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { QueryList } from '@angular/core'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChildren(IonCard, { read: ElementRef }) cardElements!: QueryList>; + + private animation!: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + const cardA = this.animationCtrl + .create() + .addElement(this.cardElements.get(0)!.nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0)' }, + ]); + + const cardB = this.animationCtrl + .create() + .addElement(this.cardElements.get(1)!.nativeElement) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = this.animationCtrl + .create() + .addElement(this.cardElements.get(2)!.nativeElement) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + this.animation = this.animationCtrl + .create() + .duration(2000) + .iterations(Infinity) + .addAnimation([cardA, cardB, cardC].filter(Boolean) as Animation[]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v9/animations/group/demo.html b/static/usage/v9/animations/group/demo.html new file mode 100644 index 00000000000..c144314a306 --- /dev/null +++ b/static/usage/v9/animations/group/demo.html @@ -0,0 +1,87 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card 1 + + + + Card 2 + + + + Card 3 + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v9/animations/group/index.md b/static/usage/v9/animations/group/index.md new file mode 100644 index 00000000000..799dd5c1813 --- /dev/null +++ b/static/usage/v9/animations/group/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/group/javascript.md b/static/usage/v9/animations/group/javascript.md new file mode 100644 index 00000000000..3630f6520df --- /dev/null +++ b/static/usage/v9/animations/group/javascript.md @@ -0,0 +1,46 @@ +```html + + Card 1 + + + + Card 2 + + + + Card 3 + + +Play +Pause +Stop + + +``` diff --git a/static/usage/v9/animations/group/react.md b/static/usage/v9/animations/group/react.md new file mode 100644 index 00000000000..dc445826e82 --- /dev/null +++ b/static/usage/v9/animations/group/react.md @@ -0,0 +1,75 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardAEl = useRef(null); + const cardBEl = useRef(null); + const cardCEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + const cardA = createAnimation() + .addElement(cardAEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1) rotate(0)' }, + { offset: 0.5, transform: 'scale(1.5) rotate(45deg)' }, + { offset: 1, transform: 'scale(1) rotate(0) ' }, + ]); + + const cardB = createAnimation() + .addElement(cardBEl.current!) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '1' }, + { offset: 0.5, transform: 'scale(1.5)', opacity: '0.3' }, + { offset: 1, transform: 'scale(1)', opacity: '1' }, + ]); + + const cardC = createAnimation() + .addElement(cardCEl.current!) + .duration(5000) + .keyframes([ + { offset: 0, transform: 'scale(1)', opacity: '0.5' }, + { offset: 0.5, transform: 'scale(0.5)', opacity: '1' }, + { offset: 1, transform: 'scale(1)', opacity: '0.5' }, + ]); + + animation.current = createAnimation().duration(2000).iterations(Infinity).addAnimation([cardA, cardB, cardC]); + } + }, [cardAEl, cardBEl, cardCEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card 1 + + + + Card 2 + + + + Card 3 + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/group/vue.md b/static/usage/v9/animations/group/vue.md new file mode 100644 index 00000000000..5f7fdae77d5 --- /dev/null +++ b/static/usage/v9/animations/group/vue.md @@ -0,0 +1,64 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/keyframes/angular/example_component_html.md b/static/usage/v9/animations/keyframes/angular/example_component_html.md new file mode 100644 index 00000000000..035212f98d4 --- /dev/null +++ b/static/usage/v9/animations/keyframes/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Card + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/keyframes/angular/example_component_ts.md b/static/usage/v9/animations/keyframes/angular/example_component_ts.md new file mode 100644 index 00000000000..1f9cdccf706 --- /dev/null +++ b/static/usage/v9/animations/keyframes/angular/example_component_ts.md @@ -0,0 +1,45 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + + private animation!: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v9/animations/keyframes/demo.html b/static/usage/v9/animations/keyframes/demo.html new file mode 100644 index 00000000000..055fc6e86ba --- /dev/null +++ b/static/usage/v9/animations/keyframes/demo.html @@ -0,0 +1,61 @@ + + + + + + Keyframe Animations + + + + + + + + + + +
+ + Card + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v9/animations/keyframes/index.md b/static/usage/v9/animations/keyframes/index.md new file mode 100644 index 00000000000..004e1e06142 --- /dev/null +++ b/static/usage/v9/animations/keyframes/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/keyframes/javascript.md b/static/usage/v9/animations/keyframes/javascript.md new file mode 100644 index 00000000000..7a2e574b8da --- /dev/null +++ b/static/usage/v9/animations/keyframes/javascript.md @@ -0,0 +1,20 @@ +```html + + Card + +Play +Pause +Stop + + +``` diff --git a/static/usage/v9/animations/keyframes/react.md b/static/usage/v9/animations/keyframes/react.md new file mode 100644 index 00000000000..21d066b5404 --- /dev/null +++ b/static/usage/v9/animations/keyframes/react.md @@ -0,0 +1,47 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(3000) + .iterations(Infinity) + .keyframes([ + { offset: 0, width: '80px' }, + { offset: 0.72, width: 'var(--width)' }, + { offset: 1, width: '240px' }, + ]); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/keyframes/vue.md b/static/usage/v9/animations/keyframes/vue.md new file mode 100644 index 00000000000..4203d03cf61 --- /dev/null +++ b/static/usage/v9/animations/keyframes/vue.md @@ -0,0 +1,43 @@ +```html + + + + + +``` diff --git a/static/usage/v9/animations/modal-override/angular/example_component_html.md b/static/usage/v9/animations/modal-override/angular/example_component_html.md new file mode 100644 index 00000000000..178ae34c17b --- /dev/null +++ b/static/usage/v9/animations/modal-override/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Page + + + + Present Modal + + + + + Modal + + Close + + + + Modal Content + + + +``` diff --git a/static/usage/v9/animations/modal-override/angular/example_component_ts.md b/static/usage/v9/animations/modal-override/angular/example_component_ts.md new file mode 100644 index 00000000000..66a42dc05ef --- /dev/null +++ b/static/usage/v9/animations/modal-override/angular/example_component_ts.md @@ -0,0 +1,58 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + @ViewChild('modal', { static: true }) modal!: IonModal; + + constructor(private animationCtrl: AnimationController) {} + + ngOnInit() { + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropElement = root?.querySelector('ion-backdrop'); + const wrapperElement = root?.querySelector('.modal-wrapper'); + + const backdropAnimation = this.animationCtrl + .create() + .addElement(backdropElement || baseEl) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = this.animationCtrl.create(); + + if (wrapperElement) { + wrapperAnimation.addElement(wrapperElement).keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + } + + return this.animationCtrl + .create() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + this.modal.enterAnimation = enterAnimation; + this.modal.leaveAnimation = leaveAnimation; + } + + closeModal() { + this.modal.dismiss(); + } +} +``` diff --git a/static/usage/v9/animations/modal-override/demo.html b/static/usage/v9/animations/modal-override/demo.html new file mode 100644 index 00000000000..06984323b7a --- /dev/null +++ b/static/usage/v9/animations/modal-override/demo.html @@ -0,0 +1,78 @@ + + + + + + Accordion + + + + + + + + + + + + Page + + + +
+ Present Modal + + + + Modal + + Close + + + + Modal Content + +
+ + + + + + diff --git a/static/usage/v9/animations/modal-override/index.md b/static/usage/v9/animations/modal-override/index.md new file mode 100644 index 00000000000..dc564234994 --- /dev/null +++ b/static/usage/v9/animations/modal-override/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/animations/modal-override/javascript.md b/static/usage/v9/animations/modal-override/javascript.md new file mode 100644 index 00000000000..0efad523d3b --- /dev/null +++ b/static/usage/v9/animations/modal-override/javascript.md @@ -0,0 +1,57 @@ +```html + + + Page + + + + Present Modal + + + + Modal + + Close + + + + Modal Content + + + + +``` diff --git a/static/usage/v9/animations/modal-override/react.md b/static/usage/v9/animations/modal-override/react.md new file mode 100644 index 00000000000..730881c49a9 --- /dev/null +++ b/static/usage/v9/animations/modal-override/react.md @@ -0,0 +1,71 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonToolbar, + IonTitle, + createAnimation, +} from '@ionic/react'; + +function Example() { + const modalEl = useRef(null); + + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot!; + + const backdropAnimation = createAnimation() + .addElement(root.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = createAnimation() + .addElement(root.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return createAnimation() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + const closeModal = () => { + modalEl.current?.dismiss(); + }; + + return ( + <> + + + Page + + + + Present Modal + + + + Modal + + Close + + + + Modal Content + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/modal-override/vue.md b/static/usage/v9/animations/modal-override/vue.md new file mode 100644 index 00000000000..f8f6ba9aaee --- /dev/null +++ b/static/usage/v9/animations/modal-override/vue.md @@ -0,0 +1,68 @@ +```html + + + +``` diff --git a/static/usage/v9/animations/preference-based/angular/example_component_css.md b/static/usage/v9/animations/preference-based/angular/example_component_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v9/animations/preference-based/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v9/animations/preference-based/angular/example_component_html.md b/static/usage/v9/animations/preference-based/angular/example_component_html.md new file mode 100644 index 00000000000..1bd8875b1b3 --- /dev/null +++ b/static/usage/v9/animations/preference-based/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + Card + + +Play +Pause +Stop +``` diff --git a/static/usage/v9/animations/preference-based/angular/example_component_ts.md b/static/usage/v9/animations/preference-based/angular/example_component_ts.md new file mode 100644 index 00000000000..2383460eb18 --- /dev/null +++ b/static/usage/v9/animations/preference-based/angular/example_component_ts.md @@ -0,0 +1,42 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonCard, IonCardContent } from '@ionic/angular'; +import type { Animation } from '@ionic/angular'; +import { AnimationController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonButton, IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + + private animation!: Animation; + + constructor(private animationCtrl: AnimationController) {} + + ngAfterViewInit() { + this.animation = this.animationCtrl + .create() + .addElement(this.card.nativeElement) + .duration(1500) + .iterations(Infinity) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + + play() { + this.animation.play(); + } + + pause() { + this.animation.pause(); + } + + stop() { + this.animation.stop(); + } +} +``` diff --git a/static/usage/v9/animations/preference-based/demo.html b/static/usage/v9/animations/preference-based/demo.html new file mode 100644 index 00000000000..663c410b74a --- /dev/null +++ b/static/usage/v9/animations/preference-based/demo.html @@ -0,0 +1,71 @@ + + + + + + Animation + + + + + + + + + + +
+ + Card + + +
+ Play + Pause + Stop +
+
+ + diff --git a/static/usage/v9/animations/preference-based/index.md b/static/usage/v9/animations/preference-based/index.md new file mode 100644 index 00000000000..dbbdd22b02d --- /dev/null +++ b/static/usage/v9/animations/preference-based/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/animations/preference-based/javascript.md b/static/usage/v9/animations/preference-based/javascript.md new file mode 100644 index 00000000000..8ad151afcf7 --- /dev/null +++ b/static/usage/v9/animations/preference-based/javascript.md @@ -0,0 +1,35 @@ +```html + + Card + + +Play +Pause +Stop + + + + +``` diff --git a/static/usage/v9/animations/preference-based/react/main_css.md b/static/usage/v9/animations/preference-based/react/main_css.md new file mode 100644 index 00000000000..eb219f43513 --- /dev/null +++ b/static/usage/v9/animations/preference-based/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-card { + color: white; + opacity: 0.5; + background: blue; + margin: 10px; + + --background: red; +} + +@media (prefers-color-scheme: dark) { + ion-card { + --background: green; + } +} +``` diff --git a/static/usage/v9/animations/preference-based/react/main_tsx.md b/static/usage/v9/animations/preference-based/react/main_tsx.md new file mode 100644 index 00000000000..a46df596ed7 --- /dev/null +++ b/static/usage/v9/animations/preference-based/react/main_tsx.md @@ -0,0 +1,47 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonButton, IonCard, IonCardContent, createAnimation } from '@ionic/react'; +import type { Animation } from '@ionic/react'; + +import './main.css'; + +function Example() { + const cardEl = useRef(null); + + const animation = useRef(null); + + useEffect(() => { + if (animation.current === null) { + animation.current = createAnimation() + .addElement(cardEl.current!) + .duration(1500) + .iterations(Infinity) + .direction('alternate') + .fromTo('background', 'blue', 'var(--background)'); + } + }, [cardEl]); + + const play = () => { + animation.current?.play(); + }; + const pause = () => { + animation.current?.pause(); + }; + const stop = () => { + animation.current?.stop(); + }; + + return ( + <> + + Card + + + Play + Pause + Stop + + ); +} +export default Example; +``` diff --git a/static/usage/v9/animations/preference-based/vue.md b/static/usage/v9/animations/preference-based/vue.md new file mode 100644 index 00000000000..75585ac4aac --- /dev/null +++ b/static/usage/v9/animations/preference-based/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v9/app/set-focus/angular/example_component_html.md b/static/usage/v9/app/set-focus/angular/example_component_html.md new file mode 100644 index 00000000000..877143505d3 --- /dev/null +++ b/static/usage/v9/app/set-focus/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Button + + + Radio + + +
+ +Focus Button +Focus Radio +``` diff --git a/static/usage/v9/app/set-focus/angular/example_component_ts.md b/static/usage/v9/app/set-focus/angular/example_component_ts.md new file mode 100644 index 00000000000..32b84888d45 --- /dev/null +++ b/static/usage/v9/app/set-focus/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonRadio, IonRadioGroup], +}) +export class ExampleComponent { + focusElement(id: string) { + const el = document.querySelector(id) as HTMLElement; + + const app = el.closest('ion-app'); + if (app) { + app.setFocus([el]); + } + } +} +``` diff --git a/static/usage/v9/app/set-focus/demo.html b/static/usage/v9/app/set-focus/demo.html new file mode 100644 index 00000000000..2013de8a276 --- /dev/null +++ b/static/usage/v9/app/set-focus/demo.html @@ -0,0 +1,49 @@ + + + + + + App + + + + + + + + + + + +
+ Button + + + Radio + + + Focus Button + Focus Radio +
+ + + + + + diff --git a/static/usage/v9/app/set-focus/index.md b/static/usage/v9/app/set-focus/index.md new file mode 100644 index 00000000000..0736bf6437a --- /dev/null +++ b/static/usage/v9/app/set-focus/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/app/set-focus/javascript.md b/static/usage/v9/app/set-focus/javascript.md new file mode 100644 index 00000000000..810c8b6ae0f --- /dev/null +++ b/static/usage/v9/app/set-focus/javascript.md @@ -0,0 +1,23 @@ +```html +Button + + + Radio + + +
+ +Focus Button +Focus Radio + + +``` diff --git a/static/usage/v9/app/set-focus/react.md b/static/usage/v9/app/set-focus/react.md new file mode 100644 index 00000000000..c550f8f7728 --- /dev/null +++ b/static/usage/v9/app/set-focus/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + function focusElement(id: string) { + const el = document.querySelector(id) as HTMLElement; + + const app = el.closest('ion-app'); + if (app) { + app.setFocus([el]); + } + } + + return ( + <> + + Button + + + + + Radio + + + +
+ + focusElement('#buttonToFocus')}>Focus Button + focusElement('#radioToFocus')}>Focus Radio + + ); +} +export default Example; +``` diff --git a/static/usage/v9/app/set-focus/vue.md b/static/usage/v9/app/set-focus/vue.md new file mode 100644 index 00000000000..03b233fe9b9 --- /dev/null +++ b/static/usage/v9/app/set-focus/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/avatar/basic/angular/example_component_html.md b/static/usage/v9/avatar/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v9/avatar/basic/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v9/avatar/basic/angular/example_component_ts.md b/static/usage/v9/avatar/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..019871f0e31 --- /dev/null +++ b/static/usage/v9/avatar/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/avatar/basic/demo.html b/static/usage/v9/avatar/basic/demo.html new file mode 100644 index 00000000000..5587cae0ef9 --- /dev/null +++ b/static/usage/v9/avatar/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Avatar + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v9/avatar/basic/index.md b/static/usage/v9/avatar/basic/index.md new file mode 100644 index 00000000000..2937d00ca71 --- /dev/null +++ b/static/usage/v9/avatar/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/avatar/basic/javascript.md b/static/usage/v9/avatar/basic/javascript.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v9/avatar/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v9/avatar/basic/react.md b/static/usage/v9/avatar/basic/react.md new file mode 100644 index 00000000000..9fe5dafb88f --- /dev/null +++ b/static/usage/v9/avatar/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/avatar/basic/vue.md b/static/usage/v9/avatar/basic/vue.md new file mode 100644 index 00000000000..23dbab48299 --- /dev/null +++ b/static/usage/v9/avatar/basic/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/avatar/chip/angular/example_component_html.md b/static/usage/v9/avatar/chip/angular/example_component_html.md new file mode 100644 index 00000000000..6fa2d82aa0b --- /dev/null +++ b/static/usage/v9/avatar/chip/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/v9/avatar/chip/angular/example_component_ts.md b/static/usage/v9/avatar/chip/angular/example_component_ts.md new file mode 100644 index 00000000000..d6fbee59004 --- /dev/null +++ b/static/usage/v9/avatar/chip/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/avatar/chip/demo.html b/static/usage/v9/avatar/chip/demo.html new file mode 100644 index 00000000000..f1d68269b91 --- /dev/null +++ b/static/usage/v9/avatar/chip/demo.html @@ -0,0 +1,27 @@ + + + + + + Avatar + + + + + + + + + +
+ + + Silhouette of a person's head + + Chip Avatar + +
+ + + + diff --git a/static/usage/v9/avatar/chip/index.md b/static/usage/v9/avatar/chip/index.md new file mode 100644 index 00000000000..489d41679f5 --- /dev/null +++ b/static/usage/v9/avatar/chip/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/avatar/chip/javascript.md b/static/usage/v9/avatar/chip/javascript.md new file mode 100644 index 00000000000..6fa2d82aa0b --- /dev/null +++ b/static/usage/v9/avatar/chip/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Chip Avatar + +``` diff --git a/static/usage/v9/avatar/chip/react.md b/static/usage/v9/avatar/chip/react.md new file mode 100644 index 00000000000..69bd5dbb4fb --- /dev/null +++ b/static/usage/v9/avatar/chip/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonChip, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Chip Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/avatar/chip/vue.md b/static/usage/v9/avatar/chip/vue.md new file mode 100644 index 00000000000..43dd9a0d72c --- /dev/null +++ b/static/usage/v9/avatar/chip/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/avatar/item/angular/example_component_html.md b/static/usage/v9/avatar/item/angular/example_component_html.md new file mode 100644 index 00000000000..5bf15fbc737 --- /dev/null +++ b/static/usage/v9/avatar/item/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/v9/avatar/item/angular/example_component_ts.md b/static/usage/v9/avatar/item/angular/example_component_ts.md new file mode 100644 index 00000000000..43ede075307 --- /dev/null +++ b/static/usage/v9/avatar/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/avatar/item/demo.html b/static/usage/v9/avatar/item/demo.html new file mode 100644 index 00000000000..358cc5b6964 --- /dev/null +++ b/static/usage/v9/avatar/item/demo.html @@ -0,0 +1,27 @@ + + + + + + Avatar + + + + + + + + + +
+ + + Silhouette of a person's head + + Item Avatar + +
+ + + + diff --git a/static/usage/v9/avatar/item/index.md b/static/usage/v9/avatar/item/index.md new file mode 100644 index 00000000000..adf66fbc5df --- /dev/null +++ b/static/usage/v9/avatar/item/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/avatar/item/javascript.md b/static/usage/v9/avatar/item/javascript.md new file mode 100644 index 00000000000..5bf15fbc737 --- /dev/null +++ b/static/usage/v9/avatar/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of a person's head + + Item Avatar + +``` diff --git a/static/usage/v9/avatar/item/react.md b/static/usage/v9/avatar/item/react.md new file mode 100644 index 00000000000..71b562a5d7b --- /dev/null +++ b/static/usage/v9/avatar/item/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel } from '@ionic/react'; +function Example() { + return ( + <> + + + Silhouette of a person's head + + Item Avatar + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/avatar/item/vue.md b/static/usage/v9/avatar/item/vue.md new file mode 100644 index 00000000000..acbde9b8d1f --- /dev/null +++ b/static/usage/v9/avatar/item/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/avatar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/avatar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/v9/avatar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/avatar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..a74cea822be --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of a person's head + +``` diff --git a/static/usage/v9/avatar/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/avatar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..019871f0e31 --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/avatar/theming/css-properties/demo.html b/static/usage/v9/avatar/theming/css-properties/demo.html new file mode 100644 index 00000000000..190924cafba --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/demo.html @@ -0,0 +1,30 @@ + + + + + + Avatar + + + + + + + + + + + +
+ + Silhouette of a person's head + +
+ + + + diff --git a/static/usage/v9/avatar/theming/css-properties/index.md b/static/usage/v9/avatar/theming/css-properties/index.md new file mode 100644 index 00000000000..6114e92969b --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/avatar/theming/css-properties/javascript.md b/static/usage/v9/avatar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f866e15762d --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Silhouette of a person's head + +``` diff --git a/static/usage/v9/avatar/theming/css-properties/react/main_css.md b/static/usage/v9/avatar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5a97e1fc6ae --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-avatar { + --border-radius: 4px; +} +``` diff --git a/static/usage/v9/avatar/theming/css-properties/react/main_tsx.md b/static/usage/v9/avatar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..180b8998a3f --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonAvatar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of a person's head + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/avatar/theming/css-properties/vue.md b/static/usage/v9/avatar/theming/css-properties/vue.md new file mode 100644 index 00000000000..ae0f0d2f915 --- /dev/null +++ b/static/usage/v9/avatar/theming/css-properties/vue.md @@ -0,0 +1,17 @@ +```html + + + + + +``` diff --git a/static/usage/v9/back-button/basic/angular/example_component_html.md b/static/usage/v9/back-button/basic/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v9/back-button/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/back-button/basic/angular/example_component_ts.md b/static/usage/v9/back-button/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..45ac532266a --- /dev/null +++ b/static/usage/v9/back-button/basic/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v9/back-button/basic/angular/page_one_component_ts.md b/static/usage/v9/back-button/basic/angular/page_one_component_ts.md new file mode 100644 index 00000000000..414e34f55fb --- /dev/null +++ b/static/usage/v9/back-button/basic/angular/page_one_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ + Navigate + + + `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v9/back-button/basic/angular/page_two_component_ts.md b/static/usage/v9/back-button/basic/angular/page_two_component_ts.md new file mode 100644 index 00000000000..f17e517841a --- /dev/null +++ b/static/usage/v9/back-button/basic/angular/page_two_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + `, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class PageTwoComponent {} +``` diff --git a/static/usage/v9/back-button/basic/demo.html b/static/usage/v9/back-button/basic/demo.html new file mode 100644 index 00000000000..c17ed73a3dc --- /dev/null +++ b/static/usage/v9/back-button/basic/demo.html @@ -0,0 +1,61 @@ + + + + + + Back Button + + + + + + + + + + + + + + diff --git a/static/usage/v9/back-button/basic/index.md b/static/usage/v9/back-button/basic/index.md new file mode 100644 index 00000000000..92bae0cd525 --- /dev/null +++ b/static/usage/v9/back-button/basic/index.md @@ -0,0 +1,48 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; + + diff --git a/static/usage/v9/back-button/basic/javascript.md b/static/usage/v9/back-button/basic/javascript.md new file mode 100644 index 00000000000..5a8817ab291 --- /dev/null +++ b/static/usage/v9/back-button/basic/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v9/back-button/basic/react/main_tsx.md b/static/usage/v9/back-button/basic/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v9/back-button/basic/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v9/back-button/basic/react/page_one_tsx.md b/static/usage/v9/back-button/basic/react/page_one_tsx.md new file mode 100644 index 00000000000..b4e9f017c39 --- /dev/null +++ b/static/usage/v9/back-button/basic/react/page_one_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ }> + Navigate + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v9/back-button/basic/react/page_two_tsx.md b/static/usage/v9/back-button/basic/react/page_two_tsx.md new file mode 100644 index 00000000000..dcfbd7ca20b --- /dev/null +++ b/static/usage/v9/back-button/basic/react/page_two_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; + +function PageTwo() { + return ( + <> + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v9/back-button/basic/vue/example_vue.md b/static/usage/v9/back-button/basic/vue/example_vue.md new file mode 100644 index 00000000000..b25bf4c18f1 --- /dev/null +++ b/static/usage/v9/back-button/basic/vue/example_vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/back-button/basic/vue/page_one_vue.md b/static/usage/v9/back-button/basic/vue/page_one_vue.md new file mode 100644 index 00000000000..96ada88a33a --- /dev/null +++ b/static/usage/v9/back-button/basic/vue/page_one_vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/back-button/basic/vue/page_two_vue.md b/static/usage/v9/back-button/basic/vue/page_two_vue.md new file mode 100644 index 00000000000..74b8e49cd61 --- /dev/null +++ b/static/usage/v9/back-button/basic/vue/page_two_vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/back-button/custom/angular/example_component_html.md b/static/usage/v9/back-button/custom/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v9/back-button/custom/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/back-button/custom/angular/example_component_ts.md b/static/usage/v9/back-button/custom/angular/example_component_ts.md new file mode 100644 index 00000000000..45ac532266a --- /dev/null +++ b/static/usage/v9/back-button/custom/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v9/back-button/custom/angular/page_one_component_ts.md b/static/usage/v9/back-button/custom/angular/page_one_component_ts.md new file mode 100644 index 00000000000..414e34f55fb --- /dev/null +++ b/static/usage/v9/back-button/custom/angular/page_one_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ + Navigate + + + `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v9/back-button/custom/angular/page_two_component_ts.md b/static/usage/v9/back-button/custom/angular/page_two_component_ts.md new file mode 100644 index 00000000000..ae3b6e7b590 --- /dev/null +++ b/static/usage/v9/back-button/custom/angular/page_two_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { caretBack } from 'ionicons/icons'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + `, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class PageTwoComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretBack }); + } +} +``` diff --git a/static/usage/v9/back-button/custom/demo.html b/static/usage/v9/back-button/custom/demo.html new file mode 100644 index 00000000000..e6f40e8c642 --- /dev/null +++ b/static/usage/v9/back-button/custom/demo.html @@ -0,0 +1,61 @@ + + + + + + Back Button + + + + + + + + + + + + + + diff --git a/static/usage/v9/back-button/custom/index.md b/static/usage/v9/back-button/custom/index.md new file mode 100644 index 00000000000..4c67d651241 --- /dev/null +++ b/static/usage/v9/back-button/custom/index.md @@ -0,0 +1,48 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; + + diff --git a/static/usage/v9/back-button/custom/javascript.md b/static/usage/v9/back-button/custom/javascript.md new file mode 100644 index 00000000000..1558cb48ad5 --- /dev/null +++ b/static/usage/v9/back-button/custom/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v9/back-button/custom/react/main_tsx.md b/static/usage/v9/back-button/custom/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v9/back-button/custom/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v9/back-button/custom/react/page_one_tsx.md b/static/usage/v9/back-button/custom/react/page_one_tsx.md new file mode 100644 index 00000000000..b4e9f017c39 --- /dev/null +++ b/static/usage/v9/back-button/custom/react/page_one_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Back Button + + + +

Page One

+

Navigate to the next page to see the back button.

+ }> + Navigate + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v9/back-button/custom/react/page_two_tsx.md b/static/usage/v9/back-button/custom/react/page_two_tsx.md new file mode 100644 index 00000000000..34d30119913 --- /dev/null +++ b/static/usage/v9/back-button/custom/react/page_two_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; +import { caretBack } from 'ionicons/icons'; + +function PageTwo() { + return ( + <> + + + + + + Back Button + + + +

Page Two

+

Use the back button to navigate to the previous page.

+ + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v9/back-button/custom/vue/example_vue.md b/static/usage/v9/back-button/custom/vue/example_vue.md new file mode 100644 index 00000000000..b25bf4c18f1 --- /dev/null +++ b/static/usage/v9/back-button/custom/vue/example_vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/back-button/custom/vue/page_one_vue.md b/static/usage/v9/back-button/custom/vue/page_one_vue.md new file mode 100644 index 00000000000..2c62ec03a09 --- /dev/null +++ b/static/usage/v9/back-button/custom/vue/page_one_vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/back-button/custom/vue/page_two_vue.md b/static/usage/v9/back-button/custom/vue/page_two_vue.md new file mode 100644 index 00000000000..a3052e2fcdc --- /dev/null +++ b/static/usage/v9/back-button/custom/vue/page_two_vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/backdrop/basic/angular/example_component_css.md b/static/usage/v9/backdrop/basic/angular/example_component_css.md new file mode 100644 index 00000000000..5889f31812d --- /dev/null +++ b/static/usage/v9/backdrop/basic/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-backdrop { + background: var(--ion-color-dark); + opacity: 0.3; +} +``` diff --git a/static/usage/v9/backdrop/basic/angular/example_component_html.md b/static/usage/v9/backdrop/basic/angular/example_component_html.md new file mode 100644 index 00000000000..64250c98aa0 --- /dev/null +++ b/static/usage/v9/backdrop/basic/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+``` diff --git a/static/usage/v9/backdrop/basic/angular/example_component_ts.md b/static/usage/v9/backdrop/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5a746f0e4d7 --- /dev/null +++ b/static/usage/v9/backdrop/basic/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackdrop, + IonButton, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonItem, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/backdrop/basic/demo.html b/static/usage/v9/backdrop/basic/demo.html new file mode 100644 index 00000000000..61e8116618f --- /dev/null +++ b/static/usage/v9/backdrop/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Backdrop + + + + + + + + + + + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+ + + diff --git a/static/usage/v9/backdrop/basic/index.md b/static/usage/v9/backdrop/basic/index.md new file mode 100644 index 00000000000..eff08158b2d --- /dev/null +++ b/static/usage/v9/backdrop/basic/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/backdrop/basic/javascript.md b/static/usage/v9/backdrop/basic/javascript.md new file mode 100644 index 00000000000..076580a8b63 --- /dev/null +++ b/static/usage/v9/backdrop/basic/javascript.md @@ -0,0 +1,23 @@ +```html + + + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+``` diff --git a/static/usage/v9/backdrop/basic/react/main_css.md b/static/usage/v9/backdrop/basic/react/main_css.md new file mode 100644 index 00000000000..5889f31812d --- /dev/null +++ b/static/usage/v9/backdrop/basic/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-backdrop { + background: var(--ion-color-dark); + opacity: 0.3; +} +``` diff --git a/static/usage/v9/backdrop/basic/react/main_tsx.md b/static/usage/v9/backdrop/basic/react/main_tsx.md new file mode 100644 index 00000000000..6d8103f0d1c --- /dev/null +++ b/static/usage/v9/backdrop/basic/react/main_tsx.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { + IonBackdrop, + IonHeader, + IonToolbar, + IonTitle, + IonContent, + IonItem, + IonCheckbox, + IonButton, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+ + + Backdrop + + + + + Checkbox + + Button + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/backdrop/basic/vue.md b/static/usage/v9/backdrop/basic/vue.md new file mode 100644 index 00000000000..525dc979a69 --- /dev/null +++ b/static/usage/v9/backdrop/basic/vue.md @@ -0,0 +1,37 @@ +```html + + + + +``` diff --git a/static/usage/v9/backdrop/styling/angular/example_component_css.md b/static/usage/v9/backdrop/styling/angular/example_component_css.md new file mode 100644 index 00000000000..01a079a9d8c --- /dev/null +++ b/static/usage/v9/backdrop/styling/angular/example_component_css.md @@ -0,0 +1,21 @@ +```css +ion-backdrop { + opacity: 0.9; + background: var(--ion-color-primary); +} + +#box { + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + background: var(--ion-background-color, #fff); + width: 90%; + height: 100px; + border-radius: 10px; +} +``` diff --git a/static/usage/v9/backdrop/styling/angular/example_component_html.md b/static/usage/v9/backdrop/styling/angular/example_component_html.md new file mode 100644 index 00000000000..3c951690078 --- /dev/null +++ b/static/usage/v9/backdrop/styling/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident + expedita vero! +

+ +
+
+ + Clickable +
+``` diff --git a/static/usage/v9/backdrop/styling/angular/example_component_ts.md b/static/usage/v9/backdrop/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..5f4509bc860 --- /dev/null +++ b/static/usage/v9/backdrop/styling/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackdrop, IonButton, IonCheckbox, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/backdrop/styling/demo.html b/static/usage/v9/backdrop/styling/demo.html new file mode 100644 index 00000000000..737419f1b91 --- /dev/null +++ b/static/usage/v9/backdrop/styling/demo.html @@ -0,0 +1,57 @@ + + + + + + Backdrop + + + + + + + + + + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, + provident expedita vero! +

+ +
+
+ + Clickable +
+ + + diff --git a/static/usage/v9/backdrop/styling/index.md b/static/usage/v9/backdrop/styling/index.md new file mode 100644 index 00000000000..6a6863e4a95 --- /dev/null +++ b/static/usage/v9/backdrop/styling/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/backdrop/styling/javascript.md b/static/usage/v9/backdrop/styling/javascript.md new file mode 100644 index 00000000000..6c30f0c5c90 --- /dev/null +++ b/static/usage/v9/backdrop/styling/javascript.md @@ -0,0 +1,43 @@ +```html + + + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, provident + expedita vero! +

+ +
+
+ + Clickable +
+``` diff --git a/static/usage/v9/backdrop/styling/react/main_css.md b/static/usage/v9/backdrop/styling/react/main_css.md new file mode 100644 index 00000000000..01a079a9d8c --- /dev/null +++ b/static/usage/v9/backdrop/styling/react/main_css.md @@ -0,0 +1,21 @@ +```css +ion-backdrop { + opacity: 0.9; + background: var(--ion-color-primary); +} + +#box { + position: absolute; + top: 50%; + left: 50%; + transform: translateY(-50%) translateX(-50%); + z-index: 100; + display: flex; + align-items: center; + justify-content: center; + background: var(--ion-background-color, #fff); + width: 90%; + height: 100px; + border-radius: 10px; +} +``` diff --git a/static/usage/v9/backdrop/styling/react/main_tsx.md b/static/usage/v9/backdrop/styling/react/main_tsx.md new file mode 100644 index 00000000000..978b47ce750 --- /dev/null +++ b/static/usage/v9/backdrop/styling/react/main_tsx.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonBackdrop, IonHeader, IonToolbar, IonTitle, IonContent, IonCheckbox, IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+ + + Backdrop + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse, cum aspernatur cupiditate nesciunt totam + perspiciatis delectus soluta laboriosam, ullam impedit porro eaque laborum optio natus sed nostrum, + provident expedita vero! +

+ +
+
+ + + Clickable + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/backdrop/styling/vue.md b/static/usage/v9/backdrop/styling/vue.md new file mode 100644 index 00000000000..d848c38f882 --- /dev/null +++ b/static/usage/v9/backdrop/styling/vue.md @@ -0,0 +1,48 @@ +```html + + + + +``` diff --git a/static/usage/v9/badge/basic/angular/example_component_html.md b/static/usage/v9/badge/basic/angular/example_component_html.md new file mode 100644 index 00000000000..9f8de1ff7eb --- /dev/null +++ b/static/usage/v9/badge/basic/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +``` diff --git a/static/usage/v9/badge/basic/angular/example_component_ts.md b/static/usage/v9/badge/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..2ac76cb00f6 --- /dev/null +++ b/static/usage/v9/badge/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/badge/basic/demo.html b/static/usage/v9/badge/basic/demo.html new file mode 100644 index 00000000000..8a70b6f4509 --- /dev/null +++ b/static/usage/v9/badge/basic/demo.html @@ -0,0 +1,37 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +
+ + + + diff --git a/static/usage/v9/badge/basic/index.md b/static/usage/v9/badge/basic/index.md new file mode 100644 index 00000000000..f0767daedab --- /dev/null +++ b/static/usage/v9/badge/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/badge/basic/javascript.md b/static/usage/v9/badge/basic/javascript.md new file mode 100644 index 00000000000..9f8de1ff7eb --- /dev/null +++ b/static/usage/v9/badge/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + +``` diff --git a/static/usage/v9/badge/basic/react.md b/static/usage/v9/badge/basic/react.md new file mode 100644 index 00000000000..4d569dbbd02 --- /dev/null +++ b/static/usage/v9/badge/basic/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; +function Example() { + return ( + + + 11 + Badge in start slot + + + 22 + Badge in end slot + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/badge/basic/vue.md b/static/usage/v9/badge/basic/vue.md new file mode 100644 index 00000000000..ef607eab9c6 --- /dev/null +++ b/static/usage/v9/badge/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/badge/inside-tab-bar/angular/example_component_html.md b/static/usage/v9/badge/inside-tab-bar/angular/example_component_html.md new file mode 100644 index 00000000000..e300331495d --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/angular/example_component_html.md @@ -0,0 +1,20 @@ +```html + + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +``` diff --git a/static/usage/v9/badge/inside-tab-bar/angular/example_component_ts.md b/static/usage/v9/badge/inside-tab-bar/angular/example_component_ts.md new file mode 100644 index 00000000000..82d1bac411b --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { heart, calendar, musicalNote } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ heart, calendar, musicalNote }); + } +} +``` diff --git a/static/usage/v9/badge/inside-tab-bar/demo.html b/static/usage/v9/badge/inside-tab-bar/demo.html new file mode 100644 index 00000000000..53e73ea5b38 --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/demo.html @@ -0,0 +1,45 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +
+ + + + diff --git a/static/usage/v9/badge/inside-tab-bar/index.md b/static/usage/v9/badge/inside-tab-bar/index.md new file mode 100644 index 00000000000..f76114f8483 --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/badge/inside-tab-bar/javascript.md b/static/usage/v9/badge/inside-tab-bar/javascript.md new file mode 100644 index 00000000000..e300331495d --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/javascript.md @@ -0,0 +1,20 @@ +```html + + + + Favorites + + + + + + Music + + + + + Calendar + 47 + + +``` diff --git a/static/usage/v9/badge/inside-tab-bar/react.md b/static/usage/v9/badge/inside-tab-bar/react.md new file mode 100644 index 00000000000..7ba592426fb --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonBadge, IonTabBar, IonTabButton, IonIcon, IonLabel } from '@ionic/react'; +import { heart, calendar, musicalNote } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + Favorites + + + + + Music + + + + Calendar + 47 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/badge/inside-tab-bar/vue.md b/static/usage/v9/badge/inside-tab-bar/vue.md new file mode 100644 index 00000000000..c5d20c6571f --- /dev/null +++ b/static/usage/v9/badge/inside-tab-bar/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/badge/theming/colors/angular/example_component_html.md b/static/usage/v9/badge/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..bad750b1bfc --- /dev/null +++ b/static/usage/v9/badge/theming/colors/angular/example_component_html.md @@ -0,0 +1,28 @@ +```html + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +``` diff --git a/static/usage/v9/badge/theming/colors/angular/example_component_ts.md b/static/usage/v9/badge/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..2ac76cb00f6 --- /dev/null +++ b/static/usage/v9/badge/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/badge/theming/colors/demo.html b/static/usage/v9/badge/theming/colors/demo.html new file mode 100644 index 00000000000..9e1799634b3 --- /dev/null +++ b/static/usage/v9/badge/theming/colors/demo.html @@ -0,0 +1,53 @@ + + + + + + Badge + + + + + + + + + + + +
+ + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +
+ + + + diff --git a/static/usage/v9/badge/theming/colors/index.md b/static/usage/v9/badge/theming/colors/index.md new file mode 100644 index 00000000000..534520bfbee --- /dev/null +++ b/static/usage/v9/badge/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/badge/theming/colors/javascript.md b/static/usage/v9/badge/theming/colors/javascript.md new file mode 100644 index 00000000000..bad750b1bfc --- /dev/null +++ b/static/usage/v9/badge/theming/colors/javascript.md @@ -0,0 +1,28 @@ +```html + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + +``` diff --git a/static/usage/v9/badge/theming/colors/react.md b/static/usage/v9/badge/theming/colors/react.md new file mode 100644 index 00000000000..ad53c54274a --- /dev/null +++ b/static/usage/v9/badge/theming/colors/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; +function Example() { + return ( + + + Followers + 22k + + + Likes + 118k + + + Stars + 34k + + + Completed + 80 + + + Warnings + 70 + + + Notifications + 1000 + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/badge/theming/colors/vue.md b/static/usage/v9/badge/theming/colors/vue.md new file mode 100644 index 00000000000..4de614b2ed8 --- /dev/null +++ b/static/usage/v9/badge/theming/colors/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v9/badge/theming/css-properties/angular/example_component_css.md b/static/usage/v9/badge/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..cf47682b14d --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-badge { + --background: purple; + --color: white; + --padding-end: 20px; + --padding-start: 20px; +} +``` diff --git a/static/usage/v9/badge/theming/css-properties/angular/example_component_html.md b/static/usage/v9/badge/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..92df32f60de --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Badges styled + 1 + + +``` diff --git a/static/usage/v9/badge/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/badge/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..2ac76cb00f6 --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBadge, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/badge/theming/css-properties/demo.html b/static/usage/v9/badge/theming/css-properties/demo.html new file mode 100644 index 00000000000..60294dcd8b0 --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/demo.html @@ -0,0 +1,40 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + Badges styled + 1 + + +
+ + + + diff --git a/static/usage/v9/badge/theming/css-properties/index.md b/static/usage/v9/badge/theming/css-properties/index.md new file mode 100644 index 00000000000..e0ae3b6a38f --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/badge/theming/css-properties/javascript.md b/static/usage/v9/badge/theming/css-properties/javascript.md new file mode 100644 index 00000000000..6dedc97ba4d --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/javascript.md @@ -0,0 +1,17 @@ +```html + + + Badges styled + 1 + + + + +``` diff --git a/static/usage/v9/badge/theming/css-properties/react/main_css.md b/static/usage/v9/badge/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..cf47682b14d --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-badge { + --background: purple; + --color: white; + --padding-end: 20px; + --padding-start: 20px; +} +``` diff --git a/static/usage/v9/badge/theming/css-properties/react/main_tsx.md b/static/usage/v9/badge/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..fea8b34191e --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonBadge, IonItem, IonLabel, IonList } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Badges styled + 1 + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/badge/theming/css-properties/vue.md b/static/usage/v9/badge/theming/css-properties/vue.md new file mode 100644 index 00000000000..bb50a07702a --- /dev/null +++ b/static/usage/v9/badge/theming/css-properties/vue.md @@ -0,0 +1,23 @@ +```html + + + + + +``` diff --git a/static/usage/v9/breadcrumbs/basic/angular/example_component_html.md b/static/usage/v9/breadcrumbs/basic/angular/example_component_html.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v9/breadcrumbs/basic/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..4953a9bb034 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/breadcrumbs/basic/demo.html b/static/usage/v9/breadcrumbs/basic/demo.html new file mode 100644 index 00000000000..ef430bf26e9 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/basic/index.md b/static/usage/v9/breadcrumbs/basic/index.md new file mode 100644 index 00000000000..21c4427a349 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/basic/javascript.md b/static/usage/v9/breadcrumbs/basic/javascript.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v9/breadcrumbs/basic/react.md b/static/usage/v9/breadcrumbs/basic/react.md new file mode 100644 index 00000000000..602a5174490 --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/basic/vue.md b/static/usage/v9/breadcrumbs/basic/vue.md new file mode 100644 index 00000000000..559b44705ca --- /dev/null +++ b/static/usage/v9/breadcrumbs/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md new file mode 100644 index 00000000000..926479c1e85 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md new file mode 100644 index 00000000000..d4dc00245da --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent { + maxBreadcrumbs? = 4; + + expandBreadcrumbs() { + this.maxBreadcrumbs = undefined; + } +} +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/demo.html b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/demo.html new file mode 100644 index 00000000000..f483f726263 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/demo.html @@ -0,0 +1,37 @@ + + + + + + Popover + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.md new file mode 100644 index 00000000000..c8f18da9637 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/javascript.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/javascript.md new file mode 100644 index 00000000000..6e720c27d3c --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/javascript.md @@ -0,0 +1,18 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/react.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/react.md new file mode 100644 index 00000000000..b4933d4cf8f --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/react.md @@ -0,0 +1,20 @@ +```tsx +import React, { useState } from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; + +function Example() { + const [maxBreadcrumbs, setMaxBreadcrumbs] = useState(4); + + return ( + setMaxBreadcrumbs(undefined)}> + Home + Electronics + Photography + Cameras + Film + 35 mm + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/vue.md b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/vue.md new file mode 100644 index 00000000000..0c245adce1d --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/expand-on-click/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md new file mode 100644 index 00000000000..d7571e2ebce --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md new file mode 100644 index 00000000000..4953a9bb034 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/demo.html b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/demo.html new file mode 100644 index 00000000000..025ed5eb6a3 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/demo.html @@ -0,0 +1,66 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.md new file mode 100644 index 00000000000..f6ae873e9ed --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/javascript.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/javascript.md new file mode 100644 index 00000000000..11648ff8762 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/javascript.md @@ -0,0 +1,41 @@ +```html +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/react.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/react.md new file mode 100644 index 00000000000..e54c8676f4e --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + <> +
Before Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 0
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + +
Before Collapse = 2, After Collapse = 2
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/vue.md b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/vue.md new file mode 100644 index 00000000000..2c03a47e410 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/items-before-after/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md new file mode 100644 index 00000000000..e77f5ec2d16 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md new file mode 100644 index 00000000000..4953a9bb034 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/demo.html b/static/usage/v9/breadcrumbs/collapsing-items/max-items/demo.html new file mode 100644 index 00000000000..f6701df8604 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/demo.html @@ -0,0 +1,29 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.md new file mode 100644 index 00000000000..c1b86b90e15 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/javascript.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/javascript.md new file mode 100644 index 00000000000..a5529d20b23 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/javascript.md @@ -0,0 +1,10 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/react.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/react.md new file mode 100644 index 00000000000..c92c6a41ffe --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Photography + Cameras + Film + 35 mm + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/max-items/vue.md b/static/usage/v9/breadcrumbs/collapsing-items/max-items/vue.md new file mode 100644 index 00000000000..bd00afb606c --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/max-items/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md new file mode 100644 index 00000000000..abd91bba073 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + @for (breadcrumb of collapsedBreadcrumbs; track breadcrumb; let last = $last) { + + {{ breadcrumb.textContent }} + + } + + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md new file mode 100644 index 00000000000..13c8c70be27 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover], +}) +export class ExampleComponent { + @ViewChild('popover') popover!: HTMLIonPopoverElement; + + isOpen = false; + collapsedBreadcrumbs: HTMLIonBreadcrumbElement[] = []; + + async presentPopover(e: Event) { + this.collapsedBreadcrumbs = (e as CustomEvent).detail.collapsedBreadcrumbs; + this.popover.event = e; + this.isOpen = true; + } +} +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/demo.html b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/demo.html new file mode 100644 index 00000000000..8b56be4077d --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/demo.html @@ -0,0 +1,60 @@ + + + + + + Popover + + + + + + + + + +
+ + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + +
+ + + + + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.md new file mode 100644 index 00000000000..0c916c73ea3 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/javascript.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/javascript.md new file mode 100644 index 00000000000..1d22085a5b1 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/javascript.md @@ -0,0 +1,41 @@ +```html + + Home + Electronics + Photography + Cameras + Film + 35 mm + + + + + + + + +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/react.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/react.md new file mode 100644 index 00000000000..66ccc22bfe3 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/react.md @@ -0,0 +1,41 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList, IonPopover } from '@ionic/react'; + +function Example() { + const popover = useRef(null); + const [collapsedBreadcrumbs, setCollapsedBreadcrumbs] = useState([]); + const [popoverOpen, setPopoverOpen] = useState(false); + + const openPopover = (e: Event) => { + setCollapsedBreadcrumbs((e as CustomEvent).detail.collapsedBreadcrumbs); + popover.current!.event = e; + setPopoverOpen(true); + }; + + return ( + <> + + Home + Electronics + Photography + Cameras + Film + 35 mm + + setPopoverOpen(false)}> + + + {collapsedBreadcrumbs.map((breadcrumb, i) => ( + + {breadcrumb.textContent} + + ))} + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/vue.md b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/vue.md new file mode 100644 index 00000000000..f61693ebe11 --- /dev/null +++ b/static/usage/v9/breadcrumbs/collapsing-items/popover-on-click/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_html.md b/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_html.md new file mode 100644 index 00000000000..e6f7fee4653 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_html.md @@ -0,0 +1,20 @@ +```html + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_ts.md new file mode 100644 index 00000000000..f96d11725be --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ arrowForwardCircle }); + } +} +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/demo.html b/static/usage/v9/breadcrumbs/icons/custom-separators/demo.html new file mode 100644 index 00000000000..76774918877 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/demo.html @@ -0,0 +1,39 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/index.md b/static/usage/v9/breadcrumbs/icons/custom-separators/index.md new file mode 100644 index 00000000000..72194c00fcb --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_html.md b/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_html.md new file mode 100644 index 00000000000..e6f7fee4653 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_html.md @@ -0,0 +1,20 @@ +```html + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_ts.md b/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_ts.md new file mode 100644 index 00000000000..d8806519227 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { arrowForwardCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "arrow-forward-circle" key. + * Alternatively, developers can do: + * addIcons({ 'arrow-forward-circle': arrowForwardCircle }); + */ +addIcons({ arrowForwardCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/react.md b/static/usage/v9/breadcrumbs/icons/custom-separators/react.md new file mode 100644 index 00000000000..de824d91cf5 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon } from '@ionic/react'; +import { arrowForwardCircle } from 'ionicons/icons'; + +function Example() { + return ( + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/icons/custom-separators/vue.md b/static/usage/v9/breadcrumbs/icons/custom-separators/vue.md new file mode 100644 index 00000000000..a3882bfea1e --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/custom-separators/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_html.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_html.md new file mode 100644 index 00000000000..a31d718242d --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html +Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md new file mode 100644 index 00000000000..093d009af8d --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ camera, film, flash, home }); + } +} +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/demo.html b/static/usage/v9/breadcrumbs/icons/icons-on-items/demo.html new file mode 100644 index 00000000000..635addfafe8 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/demo.html @@ -0,0 +1,66 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+ Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/index.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/index.md new file mode 100644 index 00000000000..56168ae74a6 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_html.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_html.md new file mode 100644 index 00000000000..a31d718242d --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_html.md @@ -0,0 +1,41 @@ +```html +Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_ts.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_ts.md new file mode 100644 index 00000000000..1f56a522b3f --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { camera, film, flash, home } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * gets mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'camera': camera, 'film': film, 'flash': flash, 'home': home }); + */ +addIcons({ camera, film, flash, home }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/react.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/react.md new file mode 100644 index 00000000000..e042ff5aa05 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs, IonIcon, IonLabel } from '@ionic/react'; +import { camera, film, flash, home } from 'ionicons/icons'; + +function Example() { + return ( + <> + Icons at Start + + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + Icons at End + + + Home + + + + Electronics + + + + Cameras + + + + Film + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/icons/icons-on-items/vue.md b/static/usage/v9/breadcrumbs/icons/icons-on-items/vue.md new file mode 100644 index 00000000000..bede7f886a4 --- /dev/null +++ b/static/usage/v9/breadcrumbs/icons/icons-on-items/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_html.md b/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..610c4af5c89 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..4953a9bb034 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/breadcrumbs/theming/colors/demo.html b/static/usage/v9/breadcrumbs/theming/colors/demo.html new file mode 100644 index 00000000000..94d04be5a73 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/demo.html @@ -0,0 +1,27 @@ + + + + + + Breadcrumbs + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/theming/colors/index.md b/static/usage/v9/breadcrumbs/theming/colors/index.md new file mode 100644 index 00000000000..1c4c20d4b98 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/theming/colors/javascript.md b/static/usage/v9/breadcrumbs/theming/colors/javascript.md new file mode 100644 index 00000000000..610c4af5c89 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/javascript.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v9/breadcrumbs/theming/colors/react.md b/static/usage/v9/breadcrumbs/theming/colors/react.md new file mode 100644 index 00000000000..22cae85dd8f --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/theming/colors/vue.md b/static/usage/v9/breadcrumbs/theming/colors/vue.md new file mode 100644 index 00000000000..f45d167a9f8 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/colors/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_css.md b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..3dc7c4640ad --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +ion-breadcrumb { + --color: rgb(81, 155, 198); + --color-active: rgb(150, 112, 220); + --color-hover: rgb(103, 61, 180); +} +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_html.md b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..9683fbe6792 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Home + Electronics + Cameras + Film + +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..4953a9bb034 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBreadcrumb, IonBreadcrumbs], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/demo.html b/static/usage/v9/breadcrumbs/theming/css-properties/demo.html new file mode 100644 index 00000000000..a5ec7394ce8 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + Breadcrumbs + + + + + + + + + + + +
+ + Home + Electronics + Cameras + Film + +
+ + + + diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/index.md b/static/usage/v9/breadcrumbs/theming/css-properties/index.md new file mode 100644 index 00000000000..986acadc0d4 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/javascript.md b/static/usage/v9/breadcrumbs/theming/css-properties/javascript.md new file mode 100644 index 00000000000..49e5c6688ff --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + Home + Electronics + Cameras + Film + + + +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/react/main_css.md b/static/usage/v9/breadcrumbs/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..3dc7c4640ad --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/react/main_css.md @@ -0,0 +1,7 @@ +```css +ion-breadcrumb { + --color: rgb(81, 155, 198); + --color-active: rgb(150, 112, 220); + --color-hover: rgb(103, 61, 180); +} +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/react/main_tsx.md b/static/usage/v9/breadcrumbs/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..7d168beeb60 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonBreadcrumb, IonBreadcrumbs } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Home + Electronics + Cameras + Film + + ); +} +export default Example; +``` diff --git a/static/usage/v9/breadcrumbs/theming/css-properties/vue.md b/static/usage/v9/breadcrumbs/theming/css-properties/vue.md new file mode 100644 index 00000000000..2b26b288cc4 --- /dev/null +++ b/static/usage/v9/breadcrumbs/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v9/button/basic/angular/example_component_html.md b/static/usage/v9/button/basic/angular/example_component_html.md new file mode 100644 index 00000000000..d313d7dcd23 --- /dev/null +++ b/static/usage/v9/button/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default Disabled +``` diff --git a/static/usage/v9/button/basic/angular/example_component_ts.md b/static/usage/v9/button/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/basic/demo.html b/static/usage/v9/button/basic/demo.html new file mode 100644 index 00000000000..08f80bf3519 --- /dev/null +++ b/static/usage/v9/button/basic/demo.html @@ -0,0 +1,23 @@ + + + + + + Button + + + + + + + + + +
+ Default + Disabled +
+ + + + diff --git a/static/usage/v9/button/basic/index.md b/static/usage/v9/button/basic/index.md new file mode 100644 index 00000000000..c8cbb715b22 --- /dev/null +++ b/static/usage/v9/button/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/basic/javascript.md b/static/usage/v9/button/basic/javascript.md new file mode 100644 index 00000000000..e298f5a1246 --- /dev/null +++ b/static/usage/v9/button/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Default Disabled +``` diff --git a/static/usage/v9/button/basic/react.md b/static/usage/v9/button/basic/react.md new file mode 100644 index 00000000000..8393e9cf2b7 --- /dev/null +++ b/static/usage/v9/button/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Disabled + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/basic/vue.md b/static/usage/v9/button/basic/vue.md new file mode 100644 index 00000000000..9c61bc538fd --- /dev/null +++ b/static/usage/v9/button/basic/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/button/expand/angular/example_component_html.md b/static/usage/v9/button/expand/angular/example_component_html.md new file mode 100644 index 00000000000..b49d2c767ae --- /dev/null +++ b/static/usage/v9/button/expand/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Block Full +``` diff --git a/static/usage/v9/button/expand/angular/example_component_ts.md b/static/usage/v9/button/expand/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/expand/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/expand/demo.html b/static/usage/v9/button/expand/demo.html new file mode 100644 index 00000000000..2abacd29c59 --- /dev/null +++ b/static/usage/v9/button/expand/demo.html @@ -0,0 +1,30 @@ + + + + + + Button + + + + + + + + + + + +
+ Block + Full +
+ + + + diff --git a/static/usage/v9/button/expand/index.md b/static/usage/v9/button/expand/index.md new file mode 100644 index 00000000000..9f1c2929d67 --- /dev/null +++ b/static/usage/v9/button/expand/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/expand/javascript.md b/static/usage/v9/button/expand/javascript.md new file mode 100644 index 00000000000..b49d2c767ae --- /dev/null +++ b/static/usage/v9/button/expand/javascript.md @@ -0,0 +1,3 @@ +```html +Block Full +``` diff --git a/static/usage/v9/button/expand/react.md b/static/usage/v9/button/expand/react.md new file mode 100644 index 00000000000..424d8e1494b --- /dev/null +++ b/static/usage/v9/button/expand/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Block + Full + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/expand/vue.md b/static/usage/v9/button/expand/vue.md new file mode 100644 index 00000000000..5d119164210 --- /dev/null +++ b/static/usage/v9/button/expand/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/button/fill/angular/example_component_html.md b/static/usage/v9/button/fill/angular/example_component_html.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/v9/button/fill/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/v9/button/fill/angular/example_component_ts.md b/static/usage/v9/button/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/fill/demo.html b/static/usage/v9/button/fill/demo.html new file mode 100644 index 00000000000..83796cfb004 --- /dev/null +++ b/static/usage/v9/button/fill/demo.html @@ -0,0 +1,25 @@ + + + + + + Button + + + + + + + + + +
+ Default + Clear + Outline + Solid +
+ + + + diff --git a/static/usage/v9/button/fill/index.md b/static/usage/v9/button/fill/index.md new file mode 100644 index 00000000000..a8827939b44 --- /dev/null +++ b/static/usage/v9/button/fill/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/fill/javascript.md b/static/usage/v9/button/fill/javascript.md new file mode 100644 index 00000000000..390ae848201 --- /dev/null +++ b/static/usage/v9/button/fill/javascript.md @@ -0,0 +1,6 @@ +```html +Default +Clear +Outline +Solid +``` diff --git a/static/usage/v9/button/fill/react.md b/static/usage/v9/button/fill/react.md new file mode 100644 index 00000000000..5a32a7d992d --- /dev/null +++ b/static/usage/v9/button/fill/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Clear + Outline + Solid + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/fill/vue.md b/static/usage/v9/button/fill/vue.md new file mode 100644 index 00000000000..7fbe17c866c --- /dev/null +++ b/static/usage/v9/button/fill/vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/button/icons/angular/example_component_html.md b/static/usage/v9/button/icons/angular/example_component_html.md new file mode 100644 index 00000000000..f6709fa5b95 --- /dev/null +++ b/static/usage/v9/button/icons/angular/example_component_html.md @@ -0,0 +1,43 @@ +```html + + + + + + + + + + + + + + + Left Icon + + + + + Left Icon + + + + + Left Icon + + + + Right Icon + + + + + Right Icon + + + + + Right Icon + + +``` diff --git a/static/usage/v9/button/icons/angular/example_component_ts.md b/static/usage/v9/button/icons/angular/example_component_ts.md new file mode 100644 index 00000000000..b7dd44fc50b --- /dev/null +++ b/static/usage/v9/button/icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { heart, logoApple, settingsSharp, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ heart, logoApple, settingsSharp, star }); + } +} +``` diff --git a/static/usage/v9/button/icons/demo.html b/static/usage/v9/button/icons/demo.html new file mode 100644 index 00000000000..280c16177aa --- /dev/null +++ b/static/usage/v9/button/icons/demo.html @@ -0,0 +1,70 @@ + + + + + + Button + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Left Icon + + + + + Left Icon + + + + + Left Icon + + + + Right Icon + + + + + Right Icon + + + + + Right Icon + + +
+ + + + diff --git a/static/usage/v9/button/icons/index.md b/static/usage/v9/button/icons/index.md new file mode 100644 index 00000000000..7d322789143 --- /dev/null +++ b/static/usage/v9/button/icons/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/icons/javascript/index_html.md b/static/usage/v9/button/icons/javascript/index_html.md new file mode 100644 index 00000000000..f6709fa5b95 --- /dev/null +++ b/static/usage/v9/button/icons/javascript/index_html.md @@ -0,0 +1,43 @@ +```html + + + + + + + + + + + + + + + Left Icon + + + + + Left Icon + + + + + Left Icon + + + + Right Icon + + + + + Right Icon + + + + + Right Icon + + +``` diff --git a/static/usage/v9/button/icons/javascript/index_ts.md b/static/usage/v9/button/icons/javascript/index_ts.md new file mode 100644 index 00000000000..bff3067043b --- /dev/null +++ b/static/usage/v9/button/icons/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { heart, logoApple, settingsSharp, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'heart': heart, 'logo-apple': logoApple, 'settings-sharp': settingsSharp, 'star': star }); + */ +addIcons({ heart, logoApple, settingsSharp, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/button/icons/react.md b/static/usage/v9/button/icons/react.md new file mode 100644 index 00000000000..68553487eb1 --- /dev/null +++ b/static/usage/v9/button/icons/react.md @@ -0,0 +1,54 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { heart, logoApple, settingsSharp, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + Left Icon + + + + + Left Icon + + + + + Left Icon + + + + Right Icon + + + + + Right Icon + + + + + Right Icon + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/icons/vue.md b/static/usage/v9/button/icons/vue.md new file mode 100644 index 00000000000..69219877768 --- /dev/null +++ b/static/usage/v9/button/icons/vue.md @@ -0,0 +1,50 @@ +```html + + + +``` diff --git a/static/usage/v9/button/shape/angular/example_component_html.md b/static/usage/v9/button/shape/angular/example_component_html.md new file mode 100644 index 00000000000..168a7615113 --- /dev/null +++ b/static/usage/v9/button/shape/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Default +Round + + + + + + +``` diff --git a/static/usage/v9/button/shape/angular/example_component_ts.md b/static/usage/v9/button/shape/angular/example_component_ts.md new file mode 100644 index 00000000000..a12a03624cb --- /dev/null +++ b/static/usage/v9/button/shape/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { heart } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ heart }); + } +} +``` diff --git a/static/usage/v9/button/shape/demo.html b/static/usage/v9/button/shape/demo.html new file mode 100644 index 00000000000..af03dfc109c --- /dev/null +++ b/static/usage/v9/button/shape/demo.html @@ -0,0 +1,29 @@ + + + + + + Button + + + + + + + + + +
+ Default + Round + + + + + + +
+ + + + diff --git a/static/usage/v9/button/shape/index.md b/static/usage/v9/button/shape/index.md new file mode 100644 index 00000000000..ba64288258d --- /dev/null +++ b/static/usage/v9/button/shape/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/shape/javascript/index_html.md b/static/usage/v9/button/shape/javascript/index_html.md new file mode 100644 index 00000000000..168a7615113 --- /dev/null +++ b/static/usage/v9/button/shape/javascript/index_html.md @@ -0,0 +1,10 @@ +```html +Default +Round + + + + + + +``` diff --git a/static/usage/v9/button/shape/javascript/index_ts.md b/static/usage/v9/button/shape/javascript/index_ts.md new file mode 100644 index 00000000000..80a45ea6fe3 --- /dev/null +++ b/static/usage/v9/button/shape/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { heart } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "heart" key. + * Alternatively, developers can do: + * addIcons({ 'heart': heart }); + */ +addIcons({ heart }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/button/shape/react.md b/static/usage/v9/button/shape/react.md new file mode 100644 index 00000000000..75e12e3ed7c --- /dev/null +++ b/static/usage/v9/button/shape/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; +import { heart } from 'ionicons/icons'; + +function Example() { + return ( + <> + Default + Round + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/shape/vue.md b/static/usage/v9/button/shape/vue.md new file mode 100644 index 00000000000..0e7f4b32156 --- /dev/null +++ b/static/usage/v9/button/shape/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/button/size/angular/example_component_html.md b/static/usage/v9/button/size/angular/example_component_html.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/v9/button/size/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/v9/button/size/angular/example_component_ts.md b/static/usage/v9/button/size/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/size/demo.html b/static/usage/v9/button/size/demo.html new file mode 100644 index 00000000000..aedc8e8f651 --- /dev/null +++ b/static/usage/v9/button/size/demo.html @@ -0,0 +1,24 @@ + + + + + + Button + + + + + + + + + +
+ Small + Default + Large +
+ + + + diff --git a/static/usage/v9/button/size/index.md b/static/usage/v9/button/size/index.md new file mode 100644 index 00000000000..f16edb8e466 --- /dev/null +++ b/static/usage/v9/button/size/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/size/javascript.md b/static/usage/v9/button/size/javascript.md new file mode 100644 index 00000000000..a24809c2d61 --- /dev/null +++ b/static/usage/v9/button/size/javascript.md @@ -0,0 +1,5 @@ +```html +Small +Default +Large +``` diff --git a/static/usage/v9/button/size/react.md b/static/usage/v9/button/size/react.md new file mode 100644 index 00000000000..8deb283a9d4 --- /dev/null +++ b/static/usage/v9/button/size/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Small + Default + Large + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/size/vue.md b/static/usage/v9/button/size/vue.md new file mode 100644 index 00000000000..38773138035 --- /dev/null +++ b/static/usage/v9/button/size/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/button/text-wrapping/angular/example_component_html.md b/static/usage/v9/button/text-wrapping/angular/example_component_html.md new file mode 100644 index 00000000000..876e9dc8344 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +``` diff --git a/static/usage/v9/button/text-wrapping/angular/example_component_ts.md b/static/usage/v9/button/text-wrapping/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/text-wrapping/demo.html b/static/usage/v9/button/text-wrapping/demo.html new file mode 100644 index 00000000000..af3515fb10a --- /dev/null +++ b/static/usage/v9/button/text-wrapping/demo.html @@ -0,0 +1,26 @@ + + + + + + Button + + + + + + + + + +
+ Default + This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +
+ + + + diff --git a/static/usage/v9/button/text-wrapping/index.md b/static/usage/v9/button/text-wrapping/index.md new file mode 100644 index 00000000000..376119dee28 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/text-wrapping/javascript.md b/static/usage/v9/button/text-wrapping/javascript.md new file mode 100644 index 00000000000..876e9dc8344 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/javascript.md @@ -0,0 +1,7 @@ +```html +Default +This is the button that never ends it just goes on and on and on and on and on and on and on and on my + friends +``` diff --git a/static/usage/v9/button/text-wrapping/react.md b/static/usage/v9/button/text-wrapping/react.md new file mode 100644 index 00000000000..babad89f4c1 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + + This is the button that never ends it just goes on and on and on and on and on and on and on and on my friends + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/text-wrapping/vue.md b/static/usage/v9/button/text-wrapping/vue.md new file mode 100644 index 00000000000..c35b49d5f44 --- /dev/null +++ b/static/usage/v9/button/text-wrapping/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/button/theming/colors/angular/example_component_html.md b/static/usage/v9/button/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/v9/button/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/button/theming/colors/angular/example_component_ts.md b/static/usage/v9/button/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/theming/colors/demo.html b/static/usage/v9/button/theming/colors/demo.html new file mode 100644 index 00000000000..ea7063cd8f4 --- /dev/null +++ b/static/usage/v9/button/theming/colors/demo.html @@ -0,0 +1,39 @@ + + + + + + Button + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v9/button/theming/colors/index.md b/static/usage/v9/button/theming/colors/index.md new file mode 100644 index 00000000000..58deb397f72 --- /dev/null +++ b/static/usage/v9/button/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/theming/colors/javascript.md b/static/usage/v9/button/theming/colors/javascript.md new file mode 100644 index 00000000000..fed23e8442d --- /dev/null +++ b/static/usage/v9/button/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/button/theming/colors/react.md b/static/usage/v9/button/theming/colors/react.md new file mode 100644 index 00000000000..066aaa06f59 --- /dev/null +++ b/static/usage/v9/button/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v9/button/theming/colors/vue.md b/static/usage/v9/button/theming/colors/vue.md new file mode 100644 index 00000000000..67fa0860f7e --- /dev/null +++ b/static/usage/v9/button/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/button/theming/css-properties/angular/example_component_css.md b/static/usage/v9/button/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..fa985cbe82f --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,22 @@ +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/v9/button/theming/css-properties/angular/example_component_html.md b/static/usage/v9/button/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..678df6cde1b --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Custom Button +``` diff --git a/static/usage/v9/button/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..cb027e630f8 --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/button/theming/css-properties/demo.html b/static/usage/v9/button/theming/css-properties/demo.html new file mode 100644 index 00000000000..5285ab2a1b3 --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/demo.html @@ -0,0 +1,45 @@ + + + + + + Button + + + + + + + + + + + +
+ Custom Button +
+ + + + diff --git a/static/usage/v9/button/theming/css-properties/index.md b/static/usage/v9/button/theming/css-properties/index.md new file mode 100644 index 00000000000..0e98748aad8 --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/button/theming/css-properties/javascript.md b/static/usage/v9/button/theming/css-properties/javascript.md new file mode 100644 index 00000000000..8bca67a3206 --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/javascript.md @@ -0,0 +1,26 @@ +```html + + +Custom Button +``` diff --git a/static/usage/v9/button/theming/css-properties/react/main_css.md b/static/usage/v9/button/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..fa985cbe82f --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/react/main_css.md @@ -0,0 +1,22 @@ +```css +ion-button { + --background: #93e9be; + --background-hover: #9ce0be; + --background-activated: #88f4be; + --background-focused: #88f4be; + + --color: blue; + + --border-radius: 0; + --border-color: #000; + --border-style: solid; + --border-width: 1px; + + --box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.25); + + --ripple-color: deeppink; + + --padding-top: 10px; + --padding-bottom: 10px; +} +``` diff --git a/static/usage/v9/button/theming/css-properties/react/main_tsx.md b/static/usage/v9/button/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..c8c432e1b9c --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Custom Button; +} +export default Example; +``` diff --git a/static/usage/v9/button/theming/css-properties/vue.md b/static/usage/v9/button/theming/css-properties/vue.md new file mode 100644 index 00000000000..00280cd4cd2 --- /dev/null +++ b/static/usage/v9/button/theming/css-properties/vue.md @@ -0,0 +1,32 @@ +```html + + + + + +``` diff --git a/static/usage/v9/buttons/basic/angular/example_component_html.md b/static/usage/v9/buttons/basic/angular/example_component_html.md new file mode 100644 index 00000000000..901587bfef1 --- /dev/null +++ b/static/usage/v9/buttons/basic/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Button + + Default Buttons + +``` diff --git a/static/usage/v9/buttons/basic/angular/example_component_ts.md b/static/usage/v9/buttons/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f834d08f0fa --- /dev/null +++ b/static/usage/v9/buttons/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/buttons/basic/demo.html b/static/usage/v9/buttons/basic/demo.html new file mode 100644 index 00000000000..7811c47b8ec --- /dev/null +++ b/static/usage/v9/buttons/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Buttons + + + + + + + + + +
+ + + Button + + Default Buttons + +
+ + + + diff --git a/static/usage/v9/buttons/basic/index.md b/static/usage/v9/buttons/basic/index.md new file mode 100644 index 00000000000..a252904395d --- /dev/null +++ b/static/usage/v9/buttons/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/buttons/basic/javascript.md b/static/usage/v9/buttons/basic/javascript.md new file mode 100644 index 00000000000..901587bfef1 --- /dev/null +++ b/static/usage/v9/buttons/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + + Button + + Default Buttons + +``` diff --git a/static/usage/v9/buttons/basic/react.md b/static/usage/v9/buttons/basic/react.md new file mode 100644 index 00000000000..4a73e0d4958 --- /dev/null +++ b/static/usage/v9/buttons/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Button + + Default Buttons + + ); +} +export default Example; +``` diff --git a/static/usage/v9/buttons/basic/vue.md b/static/usage/v9/buttons/basic/vue.md new file mode 100644 index 00000000000..56910d861f3 --- /dev/null +++ b/static/usage/v9/buttons/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/buttons/placement/angular/example_component_html.md b/static/usage/v9/buttons/placement/angular/example_component_html.md new file mode 100644 index 00000000000..8273655ad49 --- /dev/null +++ b/static/usage/v9/buttons/placement/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +``` diff --git a/static/usage/v9/buttons/placement/angular/example_component_ts.md b/static/usage/v9/buttons/placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f834d08f0fa --- /dev/null +++ b/static/usage/v9/buttons/placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/buttons/placement/demo.html b/static/usage/v9/buttons/placement/demo.html new file mode 100644 index 00000000000..af34eeabb3b --- /dev/null +++ b/static/usage/v9/buttons/placement/demo.html @@ -0,0 +1,47 @@ + + + + + + Buttons + + + + + + + + + + + +
+ + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +
+ + + + diff --git a/static/usage/v9/buttons/placement/index.md b/static/usage/v9/buttons/placement/index.md new file mode 100644 index 00000000000..b4e28031486 --- /dev/null +++ b/static/usage/v9/buttons/placement/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/buttons/placement/javascript.md b/static/usage/v9/buttons/placement/javascript.md new file mode 100644 index 00000000000..8273655ad49 --- /dev/null +++ b/static/usage/v9/buttons/placement/javascript.md @@ -0,0 +1,21 @@ +```html + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + +``` diff --git a/static/usage/v9/buttons/placement/react.md b/static/usage/v9/buttons/placement/react.md new file mode 100644 index 00000000000..27d6b54d4ba --- /dev/null +++ b/static/usage/v9/buttons/placement/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, IonButtons, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Start + + Buttons + + End + + + + + + Secondary + + Buttons + + Primary + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/buttons/placement/vue.md b/static/usage/v9/buttons/placement/vue.md new file mode 100644 index 00000000000..de7bee33b0d --- /dev/null +++ b/static/usage/v9/buttons/placement/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/buttons/types/angular/example_component_html.md b/static/usage/v9/buttons/types/angular/example_component_html.md new file mode 100644 index 00000000000..9562dbb3b47 --- /dev/null +++ b/static/usage/v9/buttons/types/angular/example_component_html.md @@ -0,0 +1,74 @@ +```html + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v9/buttons/types/angular/example_component_ts.md b/static/usage/v9/buttons/types/angular/example_component_ts.md new file mode 100644 index 00000000000..08f95df3d3c --- /dev/null +++ b/static/usage/v9/buttons/types/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + } +} +``` diff --git a/static/usage/v9/buttons/types/demo.html b/static/usage/v9/buttons/types/demo.html new file mode 100644 index 00000000000..6edf9a71ef6 --- /dev/null +++ b/static/usage/v9/buttons/types/demo.html @@ -0,0 +1,100 @@ + + + + + + Buttons + + + + + + + + + + + +
+ + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v9/buttons/types/index.md b/static/usage/v9/buttons/types/index.md new file mode 100644 index 00000000000..5eae5c3ce61 --- /dev/null +++ b/static/usage/v9/buttons/types/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/buttons/types/javascript/index_html.md b/static/usage/v9/buttons/types/javascript/index_html.md new file mode 100644 index 00000000000..9562dbb3b47 --- /dev/null +++ b/static/usage/v9/buttons/types/javascript/index_html.md @@ -0,0 +1,74 @@ +```html + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v9/buttons/types/javascript/index_ts.md b/static/usage/v9/buttons/types/javascript/index_ts.md new file mode 100644 index 00000000000..32e0670badf --- /dev/null +++ b/static/usage/v9/buttons/types/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical, + * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star }); + */ +addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/buttons/types/react.md b/static/usage/v9/buttons/types/react.md new file mode 100644 index 00000000000..01baca04d74 --- /dev/null +++ b/static/usage/v9/buttons/types/react.md @@ -0,0 +1,85 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Favorite + + Default Buttons + + Delete + + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/buttons/types/vue.md b/static/usage/v9/buttons/types/vue.md new file mode 100644 index 00000000000..53cb7f27ebb --- /dev/null +++ b/static/usage/v9/buttons/types/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v9/card/basic/angular/example_component_html.md b/static/usage/v9/card/basic/angular/example_component_html.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v9/card/basic/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v9/card/basic/angular/example_component_ts.md b/static/usage/v9/card/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f056b2b1b75 --- /dev/null +++ b/static/usage/v9/card/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/basic/demo.html b/static/usage/v9/card/basic/demo.html new file mode 100644 index 00000000000..369a172c9e3 --- /dev/null +++ b/static/usage/v9/card/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v9/card/basic/index.md b/static/usage/v9/card/basic/index.md new file mode 100644 index 00000000000..5baf52ca981 --- /dev/null +++ b/static/usage/v9/card/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/basic/javascript.md b/static/usage/v9/card/basic/javascript.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v9/card/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v9/card/basic/react.md b/static/usage/v9/card/basic/react.md new file mode 100644 index 00000000000..cc05f5ca481 --- /dev/null +++ b/static/usage/v9/card/basic/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/basic/vue.md b/static/usage/v9/card/basic/vue.md new file mode 100644 index 00000000000..de96e80972a --- /dev/null +++ b/static/usage/v9/card/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/card/buttons/angular/example_component_html.md b/static/usage/v9/card/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..c597c1dca7a --- /dev/null +++ b/static/usage/v9/card/buttons/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +``` diff --git a/static/usage/v9/card/buttons/angular/example_component_ts.md b/static/usage/v9/card/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..006b3fd7391 --- /dev/null +++ b/static/usage/v9/card/buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/buttons/demo.html b/static/usage/v9/card/buttons/demo.html new file mode 100644 index 00000000000..6293462fda9 --- /dev/null +++ b/static/usage/v9/card/buttons/demo.html @@ -0,0 +1,41 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +
+ + + + diff --git a/static/usage/v9/card/buttons/index.md b/static/usage/v9/card/buttons/index.md new file mode 100644 index 00000000000..1d7c4e798a9 --- /dev/null +++ b/static/usage/v9/card/buttons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/buttons/javascript.md b/static/usage/v9/card/buttons/javascript.md new file mode 100644 index 00000000000..c597c1dca7a --- /dev/null +++ b/static/usage/v9/card/buttons/javascript.md @@ -0,0 +1,15 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + Action 1 + Action 2 + +``` diff --git a/static/usage/v9/card/buttons/react.md b/static/usage/v9/card/buttons/react.md new file mode 100644 index 00000000000..af0e4bc6e14 --- /dev/null +++ b/static/usage/v9/card/buttons/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + Action 1 + Action 2 + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/buttons/vue.md b/static/usage/v9/card/buttons/vue.md new file mode 100644 index 00000000000..841239e7a1f --- /dev/null +++ b/static/usage/v9/card/buttons/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/card/list/angular/example_component_css.md b/static/usage/v9/card/list/angular/example_component_css.md new file mode 100644 index 00000000000..1e82c58ad8c --- /dev/null +++ b/static/usage/v9/card/list/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-item { + --padding-start: 0; +} +``` diff --git a/static/usage/v9/card/list/angular/example_component_html.md b/static/usage/v9/card/list/angular/example_component_html.md new file mode 100644 index 00000000000..850c62ec942 --- /dev/null +++ b/static/usage/v9/card/list/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + +``` diff --git a/static/usage/v9/card/list/angular/example_component_ts.md b/static/usage/v9/card/list/angular/example_component_ts.md new file mode 100644 index 00000000000..4f2ed7142c0 --- /dev/null +++ b/static/usage/v9/card/list/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/list/demo.html b/static/usage/v9/card/list/demo.html new file mode 100644 index 00000000000..659e0805fe5 --- /dev/null +++ b/static/usage/v9/card/list/demo.html @@ -0,0 +1,73 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + +
+ + + + diff --git a/static/usage/v9/card/list/index.md b/static/usage/v9/card/list/index.md new file mode 100644 index 00000000000..cc1329a6d70 --- /dev/null +++ b/static/usage/v9/card/list/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/list/javascript.md b/static/usage/v9/card/list/javascript.md new file mode 100644 index 00000000000..e640c5e9966 --- /dev/null +++ b/static/usage/v9/card/list/javascript.md @@ -0,0 +1,45 @@ +```html + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + + +``` diff --git a/static/usage/v9/card/list/react/main_css.md b/static/usage/v9/card/list/react/main_css.md new file mode 100644 index 00000000000..1e82c58ad8c --- /dev/null +++ b/static/usage/v9/card/list/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-item { + --padding-start: 0; +} +``` diff --git a/static/usage/v9/card/list/react/main_tsx.md b/static/usage/v9/card/list/react/main_tsx.md new file mode 100644 index 00000000000..8fe3d6973e9 --- /dev/null +++ b/static/usage/v9/card/list/react/main_tsx.md @@ -0,0 +1,59 @@ +```tsx +import React from 'react'; +import { + IonCard, + IonCardContent, + IonCardHeader, + IonCardSubtitle, + IonCardTitle, + IonItem, + IonLabel, + IonList, + IonThumbnail, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + Silhouette of mountains + + Item + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/list/vue.md b/static/usage/v9/card/list/vue.md new file mode 100644 index 00000000000..9c96e50c10f --- /dev/null +++ b/static/usage/v9/card/list/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v9/card/media/angular/example_component_html.md b/static/usage/v9/card/media/angular/example_component_html.md new file mode 100644 index 00000000000..2e074cd5c6d --- /dev/null +++ b/static/usage/v9/card/media/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v9/card/media/angular/example_component_ts.md b/static/usage/v9/card/media/angular/example_component_ts.md new file mode 100644 index 00000000000..f056b2b1b75 --- /dev/null +++ b/static/usage/v9/card/media/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/media/demo.html b/static/usage/v9/card/media/demo.html new file mode 100644 index 00000000000..443efbb3c22 --- /dev/null +++ b/static/usage/v9/card/media/demo.html @@ -0,0 +1,39 @@ + + + + + + Card + + + + + + + + + + + +
+ + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v9/card/media/index.md b/static/usage/v9/card/media/index.md new file mode 100644 index 00000000000..a5330406326 --- /dev/null +++ b/static/usage/v9/card/media/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/media/javascript.md b/static/usage/v9/card/media/javascript.md new file mode 100644 index 00000000000..2e074cd5c6d --- /dev/null +++ b/static/usage/v9/card/media/javascript.md @@ -0,0 +1,13 @@ +```html + + Silhouette of mountains + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v9/card/media/react.md b/static/usage/v9/card/media/react.md new file mode 100644 index 00000000000..29198c78081 --- /dev/null +++ b/static/usage/v9/card/media/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + + Silhouette of mountains + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/media/vue.md b/static/usage/v9/card/media/vue.md new file mode 100644 index 00000000000..c411a4d92eb --- /dev/null +++ b/static/usage/v9/card/media/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/card/theming/colors/angular/example_component_html.md b/static/usage/v9/card/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..8c3924e8365 --- /dev/null +++ b/static/usage/v9/card/theming/colors/angular/example_component_html.md @@ -0,0 +1,82 @@ +```html + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +``` diff --git a/static/usage/v9/card/theming/colors/angular/example_component_ts.md b/static/usage/v9/card/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f056b2b1b75 --- /dev/null +++ b/static/usage/v9/card/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/theming/colors/demo.html b/static/usage/v9/card/theming/colors/demo.html new file mode 100644 index 00000000000..b93a24e3e48 --- /dev/null +++ b/static/usage/v9/card/theming/colors/demo.html @@ -0,0 +1,111 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +
+ + + + diff --git a/static/usage/v9/card/theming/colors/index.md b/static/usage/v9/card/theming/colors/index.md new file mode 100644 index 00000000000..eaac55c7805 --- /dev/null +++ b/static/usage/v9/card/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/theming/colors/javascript.md b/static/usage/v9/card/theming/colors/javascript.md new file mode 100644 index 00000000000..8c3924e8365 --- /dev/null +++ b/static/usage/v9/card/theming/colors/javascript.md @@ -0,0 +1,82 @@ +```html + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + +``` diff --git a/static/usage/v9/card/theming/colors/react.md b/static/usage/v9/card/theming/colors/react.md new file mode 100644 index 00000000000..674a4266fdf --- /dev/null +++ b/static/usage/v9/card/theming/colors/react.md @@ -0,0 +1,92 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +function Example() { + return ( + <> + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + + + Card Title + Card Subtitle + + + Card Content + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/theming/colors/vue.md b/static/usage/v9/card/theming/colors/vue.md new file mode 100644 index 00000000000..863541a0227 --- /dev/null +++ b/static/usage/v9/card/theming/colors/vue.md @@ -0,0 +1,88 @@ +```html + + + +``` diff --git a/static/usage/v9/card/theming/css-properties/angular/example_component_css.md b/static/usage/v9/card/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..9e5b40683ac --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + --background: #000; + --color: #9efff0; +} + +ion-card-title { + --color: #52ffe4; +} + +ion-card-subtitle { + --color: #d1fff8; +} +``` diff --git a/static/usage/v9/card/theming/css-properties/angular/example_component_html.md b/static/usage/v9/card/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..d489fbc5e26 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +``` diff --git a/static/usage/v9/card/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/card/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f056b2b1b75 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/card/theming/css-properties/demo.html b/static/usage/v9/card/theming/css-properties/demo.html new file mode 100644 index 00000000000..21e42bb77fa --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/demo.html @@ -0,0 +1,51 @@ + + + + + + Card + + + + + + + + + + + +
+ + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + +
+ + + + diff --git a/static/usage/v9/card/theming/css-properties/index.md b/static/usage/v9/card/theming/css-properties/index.md new file mode 100644 index 00000000000..035e1f83d16 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/card/theming/css-properties/javascript.md b/static/usage/v9/card/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b8b50748719 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/javascript.md @@ -0,0 +1,27 @@ +```html + + + Card Title + Card Subtitle + + + + Here's a small text description for the card content. Nothing more, nothing less. + + + + +``` diff --git a/static/usage/v9/card/theming/css-properties/react/main_css.md b/static/usage/v9/card/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..9e5b40683ac --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + --background: #000; + --color: #9efff0; +} + +ion-card-title { + --color: #52ffe4; +} + +ion-card-subtitle { + --color: #d1fff8; +} +``` diff --git a/static/usage/v9/card/theming/css-properties/react/main_tsx.md b/static/usage/v9/card/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..a5b4ce3af35 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Card Title + Card Subtitle + + + Here's a small text description for the card content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v9/card/theming/css-properties/vue.md b/static/usage/v9/card/theming/css-properties/vue.md new file mode 100644 index 00000000000..87c9e6b3f55 --- /dev/null +++ b/static/usage/v9/card/theming/css-properties/vue.md @@ -0,0 +1,33 @@ +```html + + + + + +``` diff --git a/static/usage/v9/checkbox/alignment/angular/example_component_html.md b/static/usage/v9/checkbox/alignment/angular/example_component_html.md new file mode 100644 index 00000000000..4cb28d1b19b --- /dev/null +++ b/static/usage/v9/checkbox/alignment/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + Aligned to the Start + + + + Aligned to the Center + + +``` diff --git a/static/usage/v9/checkbox/alignment/angular/example_component_ts.md b/static/usage/v9/checkbox/alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..7cb3b22c5d3 --- /dev/null +++ b/static/usage/v9/checkbox/alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/alignment/demo.html b/static/usage/v9/checkbox/alignment/demo.html new file mode 100644 index 00000000000..f4b9124f6c9 --- /dev/null +++ b/static/usage/v9/checkbox/alignment/demo.html @@ -0,0 +1,29 @@ + + + + + + Checkbox + + + + + + + + +
+ + + Aligned to the Start + + + + Aligned to the Center + + +
+ + + + diff --git a/static/usage/v9/checkbox/alignment/index.md b/static/usage/v9/checkbox/alignment/index.md new file mode 100644 index 00000000000..b2c5841f263 --- /dev/null +++ b/static/usage/v9/checkbox/alignment/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/alignment/javascript.md b/static/usage/v9/checkbox/alignment/javascript.md new file mode 100644 index 00000000000..4cb28d1b19b --- /dev/null +++ b/static/usage/v9/checkbox/alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + Aligned to the Start + + + + Aligned to the Center + + +``` diff --git a/static/usage/v9/checkbox/alignment/react.md b/static/usage/v9/checkbox/alignment/react.md new file mode 100644 index 00000000000..16b9d9b18e2 --- /dev/null +++ b/static/usage/v9/checkbox/alignment/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + Aligned to the Start + + + + + + Aligned to the Center + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/alignment/vue.md b/static/usage/v9/checkbox/alignment/vue.md new file mode 100644 index 00000000000..0290b1791e7 --- /dev/null +++ b/static/usage/v9/checkbox/alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/basic/angular/example_component_html.md b/static/usage/v9/checkbox/basic/angular/example_component_html.md new file mode 100644 index 00000000000..985ef4cdc1e --- /dev/null +++ b/static/usage/v9/checkbox/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v9/checkbox/basic/angular/example_component_ts.md b/static/usage/v9/checkbox/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f3176273337 --- /dev/null +++ b/static/usage/v9/checkbox/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/basic/demo.html b/static/usage/v9/checkbox/basic/demo.html new file mode 100644 index 00000000000..32aab0133bc --- /dev/null +++ b/static/usage/v9/checkbox/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v9/checkbox/basic/index.md b/static/usage/v9/checkbox/basic/index.md new file mode 100644 index 00000000000..65522a910c9 --- /dev/null +++ b/static/usage/v9/checkbox/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/basic/javascript.md b/static/usage/v9/checkbox/basic/javascript.md new file mode 100644 index 00000000000..985ef4cdc1e --- /dev/null +++ b/static/usage/v9/checkbox/basic/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v9/checkbox/basic/react.md b/static/usage/v9/checkbox/basic/react.md new file mode 100644 index 00000000000..b2fbcb695d3 --- /dev/null +++ b/static/usage/v9/checkbox/basic/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return I agree to the terms and conditions; +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/basic/vue.md b/static/usage/v9/checkbox/basic/vue.md new file mode 100644 index 00000000000..27b27767c66 --- /dev/null +++ b/static/usage/v9/checkbox/basic/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/helper-error/angular/example_component_html.md b/static/usage/v9/checkbox/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..7153841ac36 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +
+ + I agree to the terms and conditions + + +
+ + Submit +
+``` diff --git a/static/usage/v9/checkbox/helper-error/angular/example_component_ts.md b/static/usage/v9/checkbox/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..12f83bc06b8 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { IonCheckbox, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + imports: [IonCheckbox, IonButton, ReactiveFormsModule], + templateUrl: './example.component.html', + styleUrl: './example.component.css', +}) +export class ExampleComponent { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + agree: [false, Validators.requiredTrue], + }); + } + + onSubmit() { + // Mark the control as touched to trigger the error message. + // This is needed if the user submits the form without interacting + // with the checkbox. + this.myForm.get('agree')!.markAsTouched(); + } +} +``` diff --git a/static/usage/v9/checkbox/helper-error/demo.html b/static/usage/v9/checkbox/helper-error/demo.html new file mode 100644 index 00000000000..015208cdb8b --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/demo.html @@ -0,0 +1,55 @@ + + + + + + Input + + + + + + + +
+
+ + I agree to the terms and conditions + + +
+ + Submit +
+
+ + + + diff --git a/static/usage/v9/checkbox/helper-error/index.md b/static/usage/v9/checkbox/helper-error/index.md new file mode 100644 index 00000000000..69536bc7c44 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/helper-error/javascript.md b/static/usage/v9/checkbox/helper-error/javascript.md new file mode 100644 index 00000000000..0f7d8901ae2 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/javascript.md @@ -0,0 +1,37 @@ +```html +
+ + I agree to the terms and conditions + + +
+ + Submit +
+ + +``` diff --git a/static/usage/v9/checkbox/helper-error/react.md b/static/usage/v9/checkbox/helper-error/react.md new file mode 100644 index 00000000000..7c861fce639 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/react.md @@ -0,0 +1,52 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonCheckbox, IonButton, CheckboxCustomEvent } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const agreeRef = useRef(null); + + const validateCheckbox = (event: CheckboxCustomEvent<{ checked: boolean }>) => { + setIsTouched(true); + setIsValid(event.detail.checked); + }; + + const submit = (event: React.FormEvent) => { + event.preventDefault(); + + if (agreeRef.current) { + validateCheckbox({ detail: { checked: agreeRef.current.checked } } as CheckboxCustomEvent<{ + checked: boolean; + }>); + } + }; + + return ( + <> +
+ validateCheckbox(event)} + > + I agree to the terms and conditions + + +
+ + + Submit + +
+ + ); +} + +export default Example; +``` diff --git a/static/usage/v9/checkbox/helper-error/vue.md b/static/usage/v9/checkbox/helper-error/vue.md new file mode 100644 index 00000000000..a3660823019 --- /dev/null +++ b/static/usage/v9/checkbox/helper-error/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/indeterminate/angular/example_component_html.md b/static/usage/v9/checkbox/indeterminate/angular/example_component_html.md new file mode 100644 index 00000000000..1ae617e7558 --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Indeterminate checkbox +``` diff --git a/static/usage/v9/checkbox/indeterminate/angular/example_component_ts.md b/static/usage/v9/checkbox/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..f3176273337 --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/indeterminate/demo.html b/static/usage/v9/checkbox/indeterminate/demo.html new file mode 100644 index 00000000000..7423934133c --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/demo.html @@ -0,0 +1,22 @@ + + + + + + Checkbox + + + + + + + + + +
+ Indeterminate checkbox +
+ + + + diff --git a/static/usage/v9/checkbox/indeterminate/index.md b/static/usage/v9/checkbox/indeterminate/index.md new file mode 100644 index 00000000000..f0da143bc35 --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/indeterminate/javascript.md b/static/usage/v9/checkbox/indeterminate/javascript.md new file mode 100644 index 00000000000..ee9fb8c422a --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/javascript.md @@ -0,0 +1,3 @@ +```html +Indeterminate checkbox +``` diff --git a/static/usage/v9/checkbox/indeterminate/react.md b/static/usage/v9/checkbox/indeterminate/react.md new file mode 100644 index 00000000000..9cfba0ca72b --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return Indeterminate checkbox; +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/indeterminate/vue.md b/static/usage/v9/checkbox/indeterminate/vue.md new file mode 100644 index 00000000000..d070624dae3 --- /dev/null +++ b/static/usage/v9/checkbox/indeterminate/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/justify/angular/example_component_html.md b/static/usage/v9/checkbox/justify/angular/example_component_html.md new file mode 100644 index 00000000000..9205434ceaa --- /dev/null +++ b/static/usage/v9/checkbox/justify/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +``` diff --git a/static/usage/v9/checkbox/justify/angular/example_component_ts.md b/static/usage/v9/checkbox/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..7cb3b22c5d3 --- /dev/null +++ b/static/usage/v9/checkbox/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/justify/demo.html b/static/usage/v9/checkbox/justify/demo.html new file mode 100644 index 00000000000..6349478332b --- /dev/null +++ b/static/usage/v9/checkbox/justify/demo.html @@ -0,0 +1,39 @@ + + + + + + Checkbox + + + + + + + + + + +
+ + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +
+ + + + diff --git a/static/usage/v9/checkbox/justify/index.md b/static/usage/v9/checkbox/justify/index.md new file mode 100644 index 00000000000..312b01f6ee0 --- /dev/null +++ b/static/usage/v9/checkbox/justify/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/justify/javascript.md b/static/usage/v9/checkbox/justify/javascript.md new file mode 100644 index 00000000000..9205434ceaa --- /dev/null +++ b/static/usage/v9/checkbox/justify/javascript.md @@ -0,0 +1,15 @@ +```html + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + +``` diff --git a/static/usage/v9/checkbox/justify/react.md b/static/usage/v9/checkbox/justify/react.md new file mode 100644 index 00000000000..667449c7808 --- /dev/null +++ b/static/usage/v9/checkbox/justify/react.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Packed at the Start of Line + + + + Packed at the End of Line + + + + Space Between Label and Control + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/justify/vue.md b/static/usage/v9/checkbox/justify/vue.md new file mode 100644 index 00000000000..e36b7e502b9 --- /dev/null +++ b/static/usage/v9/checkbox/justify/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/label-link/angular/example_component_html.md b/static/usage/v9/checkbox/label-link/angular/example_component_html.md new file mode 100644 index 00000000000..34ec3baab77 --- /dev/null +++ b/static/usage/v9/checkbox/label-link/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v9/checkbox/label-link/angular/example_component_ts.md b/static/usage/v9/checkbox/label-link/angular/example_component_ts.md new file mode 100644 index 00000000000..f3176273337 --- /dev/null +++ b/static/usage/v9/checkbox/label-link/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/label-link/demo.html b/static/usage/v9/checkbox/label-link/demo.html new file mode 100644 index 00000000000..7dc61409e3e --- /dev/null +++ b/static/usage/v9/checkbox/label-link/demo.html @@ -0,0 +1,24 @@ + + + + + + Checkbox + + + + + + + + + +
+ I agree to the terms and conditions +
+ + + + diff --git a/static/usage/v9/checkbox/label-link/index.md b/static/usage/v9/checkbox/label-link/index.md new file mode 100644 index 00000000000..5aa8ce806a7 --- /dev/null +++ b/static/usage/v9/checkbox/label-link/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/label-link/javascript.md b/static/usage/v9/checkbox/label-link/javascript.md new file mode 100644 index 00000000000..0ba60cf12fc --- /dev/null +++ b/static/usage/v9/checkbox/label-link/javascript.md @@ -0,0 +1,3 @@ +```html +I agree to the terms and conditions +``` diff --git a/static/usage/v9/checkbox/label-link/react.md b/static/usage/v9/checkbox/label-link/react.md new file mode 100644 index 00000000000..fa10eeb3ce8 --- /dev/null +++ b/static/usage/v9/checkbox/label-link/react.md @@ -0,0 +1,29 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + const ref = useRef(null); + + /** + * IonCheckbox will be listening for the native click event here so we need + * to call stopPropagation when the native click event instead of when the + * synthetic click event fires. + */ + useEffect(() => { + ref.current?.addEventListener('click', (event) => { + event.stopPropagation(); + }); + }, [ref]); + + return ( + + I agree to the{' '} + + terms and conditions + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/label-link/vue.md b/static/usage/v9/checkbox/label-link/vue.md new file mode 100644 index 00000000000..c7a28dad3dd --- /dev/null +++ b/static/usage/v9/checkbox/label-link/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/label-placement/angular/example_component_html.md b/static/usage/v9/checkbox/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..154f82929d8 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +Label at the Start + +
+ +Label at the End + +
+ +Fixed Width Label + +
+ +Stacked Label +``` diff --git a/static/usage/v9/checkbox/label-placement/angular/example_component_ts.md b/static/usage/v9/checkbox/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..f3176273337 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/label-placement/demo.html b/static/usage/v9/checkbox/label-placement/demo.html new file mode 100644 index 00000000000..bcbf9e06e41 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/demo.html @@ -0,0 +1,36 @@ + + + + + + Checkbox + + + + + + + + + +
+
+ Label at the Start + +
+ + Label at the End + +
+ + Fixed Width Label + +
+ + Stacked Label +
+
+ + + + diff --git a/static/usage/v9/checkbox/label-placement/index.md b/static/usage/v9/checkbox/label-placement/index.md new file mode 100644 index 00000000000..0de734e9d31 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/label-placement/javascript.md b/static/usage/v9/checkbox/label-placement/javascript.md new file mode 100644 index 00000000000..be18191d9a0 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/javascript.md @@ -0,0 +1,15 @@ +```html +Label at the Start + +
+ +Label at the End + +
+ +Fixed Width Label + +
+ +Stacked Label +``` diff --git a/static/usage/v9/checkbox/label-placement/react.md b/static/usage/v9/checkbox/label-placement/react.md new file mode 100644 index 00000000000..6fc222b9035 --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +function Example() { + return ( + <> + Label at the Start + +
+ + Label at the End + +
+ + Fixed Width Label + +
+ + Stacked Label + + ); +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/label-placement/vue.md b/static/usage/v9/checkbox/label-placement/vue.md new file mode 100644 index 00000000000..4652f8c075b --- /dev/null +++ b/static/usage/v9/checkbox/label-placement/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/angular/example_component_css.md b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5889591fd18 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --checkbox-background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/angular/example_component_html.md b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..ba23decbdba --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Themed checkbox +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f3176273337 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/demo.html b/static/usage/v9/checkbox/theming/css-properties/demo.html new file mode 100644 index 00000000000..44517bf60b9 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/demo.html @@ -0,0 +1,33 @@ + + + + + + Checkbox + + + + + + + + + + +
+ Themed checkbox +
+ + + + diff --git a/static/usage/v9/checkbox/theming/css-properties/index.md b/static/usage/v9/checkbox/theming/css-properties/index.md new file mode 100644 index 00000000000..6c8d0be7186 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/checkbox/theming/css-properties/javascript.md b/static/usage/v9/checkbox/theming/css-properties/javascript.md new file mode 100644 index 00000000000..90a415bf906 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/javascript.md @@ -0,0 +1,15 @@ +```html +Themed checkbox + + +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/react/main_css.md b/static/usage/v9/checkbox/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5889591fd18 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-checkbox { + --size: 32px; + --checkbox-background-checked: #6815ec; +} + +ion-checkbox::part(container) { + border-radius: 6px; + border: 2px solid #6815ec; +} +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/react/main_tsx.md b/static/usage/v9/checkbox/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8408e5825f2 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonCheckbox } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Themed checkbox; +} +export default Example; +``` diff --git a/static/usage/v9/checkbox/theming/css-properties/vue.md b/static/usage/v9/checkbox/theming/css-properties/vue.md new file mode 100644 index 00000000000..f582a7b2390 --- /dev/null +++ b/static/usage/v9/checkbox/theming/css-properties/vue.md @@ -0,0 +1,21 @@ +```html + + + + + +``` diff --git a/static/usage/v9/chip/basic/angular/example_component_html.md b/static/usage/v9/chip/basic/angular/example_component_html.md new file mode 100644 index 00000000000..0e9440b7ea8 --- /dev/null +++ b/static/usage/v9/chip/basic/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html +Default +Disabled +Outline +``` diff --git a/static/usage/v9/chip/basic/angular/example_component_ts.md b/static/usage/v9/chip/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..33a9c600dc4 --- /dev/null +++ b/static/usage/v9/chip/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/chip/basic/demo.html b/static/usage/v9/chip/basic/demo.html new file mode 100644 index 00000000000..2c3b2fd430f --- /dev/null +++ b/static/usage/v9/chip/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Chip + + + + + + + + + +
+ Default + Disabled + Outline +
+ + + + diff --git a/static/usage/v9/chip/basic/index.md b/static/usage/v9/chip/basic/index.md new file mode 100644 index 00000000000..8512b0a4bbc --- /dev/null +++ b/static/usage/v9/chip/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/chip/basic/javascript.md b/static/usage/v9/chip/basic/javascript.md new file mode 100644 index 00000000000..fb494e84571 --- /dev/null +++ b/static/usage/v9/chip/basic/javascript.md @@ -0,0 +1,5 @@ +```html +Default +Disabled +Outline +``` diff --git a/static/usage/v9/chip/basic/react.md b/static/usage/v9/chip/basic/react.md new file mode 100644 index 00000000000..cc1989f2d03 --- /dev/null +++ b/static/usage/v9/chip/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; +function Example() { + return ( + <> + Default + Disabled + Outline + + ); +} +export default Example; +``` diff --git a/static/usage/v9/chip/basic/vue.md b/static/usage/v9/chip/basic/vue.md new file mode 100644 index 00000000000..8e9a474ae51 --- /dev/null +++ b/static/usage/v9/chip/basic/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/chip/slots/angular/example_component_html.md b/static/usage/v9/chip/slots/angular/example_component_html.md new file mode 100644 index 00000000000..75f2e24dd8d --- /dev/null +++ b/static/usage/v9/chip/slots/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +``` diff --git a/static/usage/v9/chip/slots/angular/example_component_ts.md b/static/usage/v9/chip/slots/angular/example_component_ts.md new file mode 100644 index 00000000000..79c7f71d3b7 --- /dev/null +++ b/static/usage/v9/chip/slots/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { close, closeCircle, pin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonChip, IonIcon, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ close, closeCircle, pin }); + } +} +``` diff --git a/static/usage/v9/chip/slots/demo.html b/static/usage/v9/chip/slots/demo.html new file mode 100644 index 00000000000..b76fc456ec2 --- /dev/null +++ b/static/usage/v9/chip/slots/demo.html @@ -0,0 +1,34 @@ + + + + + + Chip + + + + + + + + + +
+ + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +
+ + + + diff --git a/static/usage/v9/chip/slots/index.md b/static/usage/v9/chip/slots/index.md new file mode 100644 index 00000000000..82abf69d920 --- /dev/null +++ b/static/usage/v9/chip/slots/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/chip/slots/javascript/index_html.md b/static/usage/v9/chip/slots/javascript/index_html.md new file mode 100644 index 00000000000..75f2e24dd8d --- /dev/null +++ b/static/usage/v9/chip/slots/javascript/index_html.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + +``` diff --git a/static/usage/v9/chip/slots/javascript/index_ts.md b/static/usage/v9/chip/slots/javascript/index_ts.md new file mode 100644 index 00000000000..53d576573c4 --- /dev/null +++ b/static/usage/v9/chip/slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { close, closeCircle, pin } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'close': close, 'close-circle': closeCircle, 'pin': pin }); + */ +addIcons({ close, closeCircle, pin }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/chip/slots/react.md b/static/usage/v9/chip/slots/react.md new file mode 100644 index 00000000000..35dbd057c70 --- /dev/null +++ b/static/usage/v9/chip/slots/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonChip, IonAvatar, IonLabel, IonIcon } from '@ionic/react'; +import { close, closeCircle, pin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Silhouette of a person's head + + Avatar Chip + + + + + + Icon Chip + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/chip/slots/vue.md b/static/usage/v9/chip/slots/vue.md new file mode 100644 index 00000000000..dc7288f8e99 --- /dev/null +++ b/static/usage/v9/chip/slots/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v9/chip/theming/colors/angular/example_component_html.md b/static/usage/v9/chip/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..db05dd6f248 --- /dev/null +++ b/static/usage/v9/chip/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/chip/theming/colors/angular/example_component_ts.md b/static/usage/v9/chip/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..33a9c600dc4 --- /dev/null +++ b/static/usage/v9/chip/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/chip/theming/colors/demo.html b/static/usage/v9/chip/theming/colors/demo.html new file mode 100644 index 00000000000..e0f9e454a85 --- /dev/null +++ b/static/usage/v9/chip/theming/colors/demo.html @@ -0,0 +1,43 @@ + + + + + + Chip + + + + + + + + + + + +
+
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+
+ + + + diff --git a/static/usage/v9/chip/theming/colors/index.md b/static/usage/v9/chip/theming/colors/index.md new file mode 100644 index 00000000000..6e1e732f3c1 --- /dev/null +++ b/static/usage/v9/chip/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/chip/theming/colors/javascript.md b/static/usage/v9/chip/theming/colors/javascript.md new file mode 100644 index 00000000000..db05dd6f248 --- /dev/null +++ b/static/usage/v9/chip/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/chip/theming/colors/react.md b/static/usage/v9/chip/theming/colors/react.md new file mode 100644 index 00000000000..8f12b4f978e --- /dev/null +++ b/static/usage/v9/chip/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v9/chip/theming/colors/vue.md b/static/usage/v9/chip/theming/colors/vue.md new file mode 100644 index 00000000000..0dbe1871c5f --- /dev/null +++ b/static/usage/v9/chip/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/chip/theming/css-properties/angular/example_component_css.md b/static/usage/v9/chip/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..60dc62c6417 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-chip { + --background: #00213f; + --color: #adefd1; +} +``` diff --git a/static/usage/v9/chip/theming/css-properties/angular/example_component_html.md b/static/usage/v9/chip/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..67c6144e7b8 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default +``` diff --git a/static/usage/v9/chip/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/chip/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..33a9c600dc4 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonChip } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonChip], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/chip/theming/css-properties/demo.html b/static/usage/v9/chip/theming/css-properties/demo.html new file mode 100644 index 00000000000..eaf23535d78 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/demo.html @@ -0,0 +1,29 @@ + + + + + + Chip + + + + + + + + + + + +
+ Default +
+ + + + diff --git a/static/usage/v9/chip/theming/css-properties/index.md b/static/usage/v9/chip/theming/css-properties/index.md new file mode 100644 index 00000000000..42effb3c238 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/chip/theming/css-properties/javascript.md b/static/usage/v9/chip/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b40912d73a2 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/javascript.md @@ -0,0 +1,10 @@ +```html + + +Default +``` diff --git a/static/usage/v9/chip/theming/css-properties/react/main_css.md b/static/usage/v9/chip/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..60dc62c6417 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-chip { + --background: #00213f; + --color: #adefd1; +} +``` diff --git a/static/usage/v9/chip/theming/css-properties/react/main_tsx.md b/static/usage/v9/chip/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..b4fc5f12cae --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonChip } from '@ionic/react'; + +import './main.css'; + +function Example() { + return Default; +} +export default Example; +``` diff --git a/static/usage/v9/chip/theming/css-properties/vue.md b/static/usage/v9/chip/theming/css-properties/vue.md new file mode 100644 index 00000000000..2a678970425 --- /dev/null +++ b/static/usage/v9/chip/theming/css-properties/vue.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v9/common.css b/static/usage/v9/common.css new file mode 100644 index 00000000000..c0cfced3ab9 --- /dev/null +++ b/static/usage/v9/common.css @@ -0,0 +1,24 @@ +@font-face { + font-family: "Roboto"; + src: url("../fonts/Roboto-Regular.ttf") format("truetype"); +} + +@font-face { + font-family: "Roboto"; + src: url("../fonts/Roboto-Medium.ttf") format("truetype"); + font-weight: 450 500; +} + +.container { + display: flex; + + align-items: center; + justify-content: center; + + height: 100%; +} + +:root { + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 22px; +} diff --git a/static/usage/v9/common.js b/static/usage/v9/common.js new file mode 100644 index 00000000000..486b95aab0c --- /dev/null +++ b/static/usage/v9/common.js @@ -0,0 +1,85 @@ +const linkElement = document.createElement('link'); + +linkElement.rel = 'stylesheet'; +linkElement.href = 'https://cdn.jsdelivr.net/npm/@ionic/core@9/css/palettes/dark.class.css'; + +document.head.appendChild(linkElement); + +/** + * Wait for the initial HTML document to be + * loaded and parsed before adding the message + * listener. Otherwise, it is possible that the message + * listener will fire before the body is ready. + */ +window.addEventListener('DOMContentLoaded', () => { + /** + * The parent Playground component will + * dispatch messages whenever the theme on + * the Ionic Docs website has changed so that + * the demos loaded in iframes can match the + * docs website theme. + */ + window.addEventListener('message', (event) => { + const { data } = event; + + if (data.darkMode) { + document.documentElement.classList.add('ion-theme-dark'); + } else { + document.documentElement.classList.remove('ion-theme-dark'); + } + }); + + /** + * Monkey-patch the console methods so we can dispatch + * events when they're called, allowing the data to be + * captured by the playground's console UI. + */ + const _log = console.log, + _warn = console.warn, + _error = console.error; + + const dispatchConsoleEvent = (type, arguments) => { + window.dispatchEvent( + new CustomEvent('console', { + detail: { + type, + message: Object.values(arguments).join(' '), + }, + }) + ); + }; + + console.log = function () { + dispatchConsoleEvent('log', arguments); + return _log.apply(console, arguments); + }; + + console.warn = function () { + dispatchConsoleEvent('warning', arguments); + return _warn.apply(console, arguments); + }; + + console.error = function () { + dispatchConsoleEvent('error', arguments); + return _error.apply(console, arguments); + }; + + /** + * The Playground needs to wait for the message listener + * to be created before sending any messages, otherwise + * they will be lost. Once the listener is done, fire + * the demoReady event. In the event that the Playground's + * useEffect hook fires before the message listener is created, + * the Playground component will wait for the demoReady event + * before proceeding. + * + * We also set window.demoReady in the event that the + * useEffect hook fires after the message listener is + * already created so that it does not wait on an event + * that was already fired. + */ + const event = new CustomEvent('demoReady'); + window.dispatchEvent(event); + + window.demoReady = true; +}); diff --git a/static/usage/v9/config/mode/angular/example_component_html.md b/static/usage/v9/config/mode/angular/example_component_html.md new file mode 100644 index 00000000000..759329a97da --- /dev/null +++ b/static/usage/v9/config/mode/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Current mode: {{ mode }} + +``` diff --git a/static/usage/v9/config/mode/angular/example_component_ts.md b/static/usage/v9/config/mode/angular/example_component_ts.md new file mode 100644 index 00000000000..bafca343812 --- /dev/null +++ b/static/usage/v9/config/mode/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { Config, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: './example.component.html', + imports: [IonButton], +}) +export class ExampleComponent { + mode: string; + constructor(public config: Config) { + this.mode = this.config.get('mode'); + } +} +``` diff --git a/static/usage/v9/config/mode/demo.html b/static/usage/v9/config/mode/demo.html new file mode 100644 index 00000000000..448ef6e333a --- /dev/null +++ b/static/usage/v9/config/mode/demo.html @@ -0,0 +1,41 @@ + + + + + + Ionic Config Mode + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v9/config/mode/index.md b/static/usage/v9/config/mode/index.md new file mode 100644 index 00000000000..0bd7835b418 --- /dev/null +++ b/static/usage/v9/config/mode/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/config/mode/javascript.md b/static/usage/v9/config/mode/javascript.md new file mode 100644 index 00000000000..86b8b111d5f --- /dev/null +++ b/static/usage/v9/config/mode/javascript.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/config/mode/react.md b/static/usage/v9/config/mode/react.md new file mode 100644 index 00000000000..3de2faf85a1 --- /dev/null +++ b/static/usage/v9/config/mode/react.md @@ -0,0 +1,24 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonButton } from '@ionic/react'; +import { getMode } from '@ionic/core'; + +function Example() { + const [mode, setMode] = useState(''); + + useEffect(() => { + const mode = getMode() || 'md'; + setMode(mode); + }, []); + + const color = mode === 'ios' ? 'secondary' : 'tertiary'; + const fill = mode === 'ios' ? 'outline' : 'solid'; + + return ( + + Current mode: {mode} + + ); +} +export default Example; +``` diff --git a/static/usage/v9/config/mode/vue.md b/static/usage/v9/config/mode/vue.md new file mode 100644 index 00000000000..a227337a408 --- /dev/null +++ b/static/usage/v9/config/mode/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/content/basic/angular/example_component_html.md b/static/usage/v9/content/basic/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v9/content/basic/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/basic/angular/example_component_ts.md b/static/usage/v9/content/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c629c19f36a --- /dev/null +++ b/static/usage/v9/content/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/basic/demo.html b/static/usage/v9/content/basic/demo.html new file mode 100644 index 00000000000..e9cd9887c36 --- /dev/null +++ b/static/usage/v9/content/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Content + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v9/content/basic/index.md b/static/usage/v9/content/basic/index.md new file mode 100644 index 00000000000..7fb059e50c5 --- /dev/null +++ b/static/usage/v9/content/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/basic/javascript.md b/static/usage/v9/content/basic/javascript.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v9/content/basic/javascript.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/basic/react.md b/static/usage/v9/content/basic/react.md new file mode 100644 index 00000000000..2ece824eea4 --- /dev/null +++ b/static/usage/v9/content/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/basic/vue.md b/static/usage/v9/content/basic/vue.md new file mode 100644 index 00000000000..1e40cc35777 --- /dev/null +++ b/static/usage/v9/content/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/content/fixed/angular/example_component_css.md b/static/usage/v9/content/fixed/angular/example_component_css.md new file mode 100644 index 00000000000..1146da9a4b1 --- /dev/null +++ b/static/usage/v9/content/fixed/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-button[slot='fixed'] { + top: 50%; + right: 20px; +} +``` diff --git a/static/usage/v9/content/fixed/angular/example_component_html.md b/static/usage/v9/content/fixed/angular/example_component_html.md new file mode 100644 index 00000000000..82cb3007125 --- /dev/null +++ b/static/usage/v9/content/fixed/angular/example_component_html.md @@ -0,0 +1,54 @@ +```html + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ +``` diff --git a/static/usage/v9/content/fixed/angular/example_component_ts.md b/static/usage/v9/content/fixed/angular/example_component_ts.md new file mode 100644 index 00000000000..eccfa1b4b27 --- /dev/null +++ b/static/usage/v9/content/fixed/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/fixed/demo.html b/static/usage/v9/content/fixed/demo.html new file mode 100644 index 00000000000..7d2174bae66 --- /dev/null +++ b/static/usage/v9/content/fixed/demo.html @@ -0,0 +1,76 @@ + + + + + + Content + + + + + + + + + + + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + diff --git a/static/usage/v9/content/fixed/index.md b/static/usage/v9/content/fixed/index.md new file mode 100644 index 00000000000..3d89983fdbb --- /dev/null +++ b/static/usage/v9/content/fixed/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/fixed/javascript.md b/static/usage/v9/content/fixed/javascript.md new file mode 100644 index 00000000000..8613ca29a0c --- /dev/null +++ b/static/usage/v9/content/fixed/javascript.md @@ -0,0 +1,61 @@ +```html + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + +``` diff --git a/static/usage/v9/content/fixed/react/main_css.md b/static/usage/v9/content/fixed/react/main_css.md new file mode 100644 index 00000000000..1146da9a4b1 --- /dev/null +++ b/static/usage/v9/content/fixed/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-button[slot='fixed'] { + top: 50%; + right: 20px; +} +``` diff --git a/static/usage/v9/content/fixed/react/main_tsx.md b/static/usage/v9/content/fixed/react/main_tsx.md new file mode 100644 index 00000000000..f81c3d02949 --- /dev/null +++ b/static/usage/v9/content/fixed/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Scroll the content and notice that the fixed button does not scroll.

+ + Normal Button + Fixed Button + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/fixed/vue.md b/static/usage/v9/content/fixed/vue.md new file mode 100644 index 00000000000..e32e09affe0 --- /dev/null +++ b/static/usage/v9/content/fixed/vue.md @@ -0,0 +1,67 @@ +```html + + + + + +``` diff --git a/static/usage/v9/content/fullscreen/angular/example_component_css.md b/static/usage/v9/content/fullscreen/angular/example_component_css.md new file mode 100644 index 00000000000..69fa48ad49e --- /dev/null +++ b/static/usage/v9/content/fullscreen/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-toolbar { + --opacity: 0.5; +} +``` diff --git a/static/usage/v9/content/fullscreen/angular/example_component_html.md b/static/usage/v9/content/fullscreen/angular/example_component_html.md new file mode 100644 index 00000000000..753f938b914 --- /dev/null +++ b/static/usage/v9/content/fullscreen/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + +``` diff --git a/static/usage/v9/content/fullscreen/angular/example_component_ts.md b/static/usage/v9/content/fullscreen/angular/example_component_ts.md new file mode 100644 index 00000000000..18f43fb210f --- /dev/null +++ b/static/usage/v9/content/fullscreen/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/fullscreen/demo.html b/static/usage/v9/content/fullscreen/demo.html new file mode 100644 index 00000000000..d8ab852e514 --- /dev/null +++ b/static/usage/v9/content/fullscreen/demo.html @@ -0,0 +1,82 @@ + + + + + + Content + + + + + + + + + + + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + + diff --git a/static/usage/v9/content/fullscreen/index.md b/static/usage/v9/content/fullscreen/index.md new file mode 100644 index 00000000000..46ea861d225 --- /dev/null +++ b/static/usage/v9/content/fullscreen/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/fullscreen/javascript.md b/static/usage/v9/content/fullscreen/javascript.md new file mode 100644 index 00000000000..2fb4c68b16c --- /dev/null +++ b/static/usage/v9/content/fullscreen/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + +``` diff --git a/static/usage/v9/content/fullscreen/react/main_css.md b/static/usage/v9/content/fullscreen/react/main_css.md new file mode 100644 index 00000000000..69fa48ad49e --- /dev/null +++ b/static/usage/v9/content/fullscreen/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-toolbar { + --opacity: 0.5; +} +``` diff --git a/static/usage/v9/content/fullscreen/react/main_tsx.md b/static/usage/v9/content/fullscreen/react/main_tsx.md new file mode 100644 index 00000000000..7302c484489 --- /dev/null +++ b/static/usage/v9/content/fullscreen/react/main_tsx.md @@ -0,0 +1,73 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Header + + + +

Scroll the content and notice that the text goes behind the header and footer.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/fullscreen/vue.md b/static/usage/v9/content/fullscreen/vue.md new file mode 100644 index 00000000000..5f662a566e4 --- /dev/null +++ b/static/usage/v9/content/fullscreen/vue.md @@ -0,0 +1,73 @@ +```html + + + + + +``` diff --git a/static/usage/v9/content/header-footer/angular/example_component_html.md b/static/usage/v9/content/header-footer/angular/example_component_html.md new file mode 100644 index 00000000000..35a9aadc4c1 --- /dev/null +++ b/static/usage/v9/content/header-footer/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + +``` diff --git a/static/usage/v9/content/header-footer/angular/example_component_ts.md b/static/usage/v9/content/header-footer/angular/example_component_ts.md new file mode 100644 index 00000000000..18f43fb210f --- /dev/null +++ b/static/usage/v9/content/header-footer/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/header-footer/demo.html b/static/usage/v9/content/header-footer/demo.html new file mode 100644 index 00000000000..f39dee43ed1 --- /dev/null +++ b/static/usage/v9/content/header-footer/demo.html @@ -0,0 +1,37 @@ + + + + + + Content + + + + + + + + + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + + + + diff --git a/static/usage/v9/content/header-footer/index.md b/static/usage/v9/content/header-footer/index.md new file mode 100644 index 00000000000..84884b8b338 --- /dev/null +++ b/static/usage/v9/content/header-footer/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/header-footer/javascript.md b/static/usage/v9/content/header-footer/javascript.md new file mode 100644 index 00000000000..35a9aadc4c1 --- /dev/null +++ b/static/usage/v9/content/header-footer/javascript.md @@ -0,0 +1,22 @@ +```html + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + +``` diff --git a/static/usage/v9/content/header-footer/react.md b/static/usage/v9/content/header-footer/react.md new file mode 100644 index 00000000000..e075e96cd81 --- /dev/null +++ b/static/usage/v9/content/header-footer/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/header-footer/vue.md b/static/usage/v9/content/header-footer/vue.md new file mode 100644 index 00000000000..8b8559cc790 --- /dev/null +++ b/static/usage/v9/content/header-footer/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/content/scroll-events/angular/example_component_html.md b/static/usage/v9/content/scroll-events/angular/example_component_html.md new file mode 100644 index 00000000000..4a66edad40a --- /dev/null +++ b/static/usage/v9/content/scroll-events/angular/example_component_html.md @@ -0,0 +1,59 @@ +```html + + + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ +``` diff --git a/static/usage/v9/content/scroll-events/angular/example_component_ts.md b/static/usage/v9/content/scroll-events/angular/example_component_ts.md new file mode 100644 index 00000000000..acf59c25362 --- /dev/null +++ b/static/usage/v9/content/scroll-events/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, ScrollDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent { + handleScrollStart() { + console.log('scroll start'); + } + + handleScroll(event: CustomEvent) { + console.log('scroll', JSON.stringify(event.detail)); + } + + handleScrollEnd() { + console.log('scroll end'); + } +} +``` diff --git a/static/usage/v9/content/scroll-events/demo.html b/static/usage/v9/content/scroll-events/demo.html new file mode 100644 index 00000000000..4a2d4d368ad --- /dev/null +++ b/static/usage/v9/content/scroll-events/demo.html @@ -0,0 +1,77 @@ + + + + + + Content + + + + + + + + + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + + + + diff --git a/static/usage/v9/content/scroll-events/index.md b/static/usage/v9/content/scroll-events/index.md new file mode 100644 index 00000000000..f5ef872749c --- /dev/null +++ b/static/usage/v9/content/scroll-events/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/scroll-events/javascript.md b/static/usage/v9/content/scroll-events/javascript.md new file mode 100644 index 00000000000..f143544dbfc --- /dev/null +++ b/static/usage/v9/content/scroll-events/javascript.md @@ -0,0 +1,62 @@ +```html + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + +``` diff --git a/static/usage/v9/content/scroll-events/react.md b/static/usage/v9/content/scroll-events/react.md new file mode 100644 index 00000000000..43b7a7e31ee --- /dev/null +++ b/static/usage/v9/content/scroll-events/react.md @@ -0,0 +1,78 @@ +```tsx +import React from 'react'; +import { IonContent, ScrollDetail } from '@ionic/react'; + +function Example() { + function handleScrollStart() { + console.log('scroll start'); + } + + function handleScroll(event: CustomEvent) { + console.log('scroll', JSON.stringify(event.detail)); + } + + function handleScrollEnd() { + console.log('scroll end'); + } + + return ( + // Scroll events are disabled by default for content for performance reasons, enable them to listen to them + +

Scroll to fire the scroll events and view them in the console.

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/scroll-events/vue.md b/static/usage/v9/content/scroll-events/vue.md new file mode 100644 index 00000000000..0d917636702 --- /dev/null +++ b/static/usage/v9/content/scroll-events/vue.md @@ -0,0 +1,76 @@ +```html + + + +``` diff --git a/static/usage/v9/content/scroll-methods/angular/example_component_html.md b/static/usage/v9/content/scroll-methods/angular/example_component_html.md new file mode 100644 index 00000000000..e585b97e78d --- /dev/null +++ b/static/usage/v9/content/scroll-methods/angular/example_component_html.md @@ -0,0 +1,55 @@ +```html + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + +``` diff --git a/static/usage/v9/content/scroll-methods/angular/example_component_ts.md b/static/usage/v9/content/scroll-methods/angular/example_component_ts.md new file mode 100644 index 00000000000..f1f8921bd63 --- /dev/null +++ b/static/usage/v9/content/scroll-methods/angular/example_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent], +}) +export class ExampleComponent { + @ViewChild(IonContent) content!: IonContent; + + scrollToBottom() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the bottom instead of instantly + this.content.scrollToBottom(500); + } + + scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + this.content.scrollToTop(500); + } +} +``` diff --git a/static/usage/v9/content/scroll-methods/demo.html b/static/usage/v9/content/scroll-methods/demo.html new file mode 100644 index 00000000000..ea77f1e779c --- /dev/null +++ b/static/usage/v9/content/scroll-methods/demo.html @@ -0,0 +1,86 @@ + + + + + + Content + + + + + + + + + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim + fermentum in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce + augue diam, sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada + mollis sed neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia + mauris quis ligula blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere + pulvinar. Nam varius ligula justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, + aliquet consectetur libero. Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, + pretium sit amet mi. In neque mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida + malesuada tellus, vel dapibus nisl dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. + Aenean venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero + odio, sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, + vehicula sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in + odio. Nunc et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. + Etiam lobortis tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan + condimentum vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt + libero finibus at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse + enim enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin + justo orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur + libero cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, + vehicula sed vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam + neque nisl, egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + + + + + + diff --git a/static/usage/v9/content/scroll-methods/index.md b/static/usage/v9/content/scroll-methods/index.md new file mode 100644 index 00000000000..182c7a734bd --- /dev/null +++ b/static/usage/v9/content/scroll-methods/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/scroll-methods/javascript.md b/static/usage/v9/content/scroll-methods/javascript.md new file mode 100644 index 00000000000..a53fbc7767b --- /dev/null +++ b/static/usage/v9/content/scroll-methods/javascript.md @@ -0,0 +1,71 @@ +```html + +

Click on the buttons to scroll the content.

+ + Scroll to Bottom + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum in + risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed neque. + Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula blandit + ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula justo, nec + placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. Etiam luctus + placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque mauris, placerat et + neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl dignissim vel. Cras ut + nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula sed + lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc et elit + faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis tristique + maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum et + elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue faucibus + justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis venenatis risus, + ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean sagittis congue mauris. + Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id molestie sed, pretium vitae + turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et sodales + fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit amet quam + facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. Phasellus congue + sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum vehicula vitae + lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus at. Mauris + condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce mattis + eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim enim, + venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo orci, + ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero cursus cursus. + Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed vestibulum id, + semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, egestas nec iaculis + sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + Scroll to Top + + + +``` diff --git a/static/usage/v9/content/scroll-methods/react.md b/static/usage/v9/content/scroll-methods/react.md new file mode 100644 index 00000000000..1d2d105e984 --- /dev/null +++ b/static/usage/v9/content/scroll-methods/react.md @@ -0,0 +1,81 @@ +```tsx +import React, { createRef } from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +function Example() { + const contentRef = createRef(); + + function scrollToBottom() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the bottom instead of instantly + contentRef.current?.scrollToBottom(500); + } + + function scrollToTop() { + // Passing a duration to the method makes it so the scroll slowly + // goes to the top instead of instantly + contentRef.current?.scrollToTop(500); + } + + return ( + +

Click on the buttons to scroll the content.

+ + + Scroll to Bottom + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed tellus nec mauris auctor dignissim fermentum + in risus. Sed nec convallis sapien, id tincidunt enim. Mauris ornare eleifend nunc id mattis. Fusce augue diam, + sagittis nec posuere at, consectetur tempor lectus. Nulla at lectus eget mauris iaculis malesuada mollis sed + neque. Curabitur et risus tristique, malesuada mauris finibus, elementum massa. Proin lacinia mauris quis ligula + blandit ullamcorper. Donec ut posuere lorem. In volutpat magna vitae tellus posuere pulvinar. Nam varius ligula + justo, nec placerat lacus pharetra ac. Aenean massa orci, tristique in nisl ut, aliquet consectetur libero. + Etiam luctus placerat vulputate. Aliquam ipsum massa, porttitor at mollis ut, pretium sit amet mi. In neque + mauris, placerat et neque vel, tempor interdum dolor. Suspendisse gravida malesuada tellus, vel dapibus nisl + dignissim vel. Cras ut nulla sit amet erat malesuada euismod vel a nulla. +

+

+ Phasellus sit amet iaculis odio, eget feugiat erat. Etiam sit amet turpis sit amet massa viverra maximus. Aenean + venenatis porttitor pharetra. Fusce vulputate urna purus, vel efficitur mauris auctor non. Etiam libero odio, + sodales in velit a, faucibus venenatis erat. Ut convallis sit amet urna in ultrices. Cras neque est, vehicula + sed lorem ac, placerat commodo elit. Praesent turpis metus, elementum eget iaculis ac, elementum in odio. Nunc + et elit faucibus, condimentum mauris consequat, ornare dolor. Sed ac lectus a est blandit tempor. Etiam lobortis + tristique maximus. +

+

+ Quisque tempus porttitor massa, vel condimentum risus finibus a. Aliquam viverra maximus odio, id ornare justo + tristique ac. Mauris euismod arcu eget neque sagittis rutrum. Ut vehicula porta lacus nec lobortis. Vestibulum + et elit ultrices, lacinia metus in, lobortis est. Vivamus nisi justo, venenatis sit amet arcu ac, congue + faucibus justo. Duis volutpat posuere enim, vel sagittis elit dictum et. Sed et congue mauris. Nam venenatis + venenatis risus, ac condimentum neque sagittis sed. In eget nulla ultricies urna sollicitudin posuere. Aenean + sagittis congue mauris. Proin nec libero mi. In hac habitasse platea dictumst. Praesent nunc nulla, dictum id + molestie sed, pretium vitae turpis. +

+

+ Pellentesque vitae dapibus lacus. Nullam suscipit ornare risus quis ullamcorper. Nullam feugiat, sapien et + sodales fermentum, risus ligula semper risus, id efficitur ligula augue id diam. Suspendisse lobortis est sit + amet quam facilisis, ut vestibulum nunc dignissim. Donec at vestibulum magna. Maecenas maximus pretium metus. + Phasellus congue sapien vel odio imperdiet, nec mollis odio euismod. Sed vel eros ut sapien accumsan condimentum + vehicula vitae lectus. Donec sed efficitur lorem. Aenean tristique mi libero, eleifend tincidunt libero finibus + at. Mauris condimentum fermentum rutrum. +

+

+ Nulla tristique ultricies suscipit. Donec non ornare elit. Vivamus id pretium mauris, nec sagittis leo. Fusce + mattis eget est id sollicitudin. Suspendisse dictum sem magna, in imperdiet metus suscipit et. Suspendisse enim + enim, venenatis et orci eu, suscipit congue lacus. Praesent vel ligula non eros tempor interdum. Proin justo + orci, ultricies vitae diam sed, semper consectetur ligula. Aenean finibus ante velit, nec efficitur libero + cursus cursus. Duis mi nunc, imperdiet sed condimentum vel, porttitor ut lacus. Quisque dui ipsum, vehicula sed + vestibulum id, semper vel libero. Suspendisse tincidunt mollis condimentum. Nulla facilisi. Etiam neque nisl, + egestas nec iaculis sed, tristique faucibus sem. Sed mollis dui quis ligula cursus rutrum. +

+ + + Scroll to Top + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/scroll-methods/vue.md b/static/usage/v9/content/scroll-methods/vue.md new file mode 100644 index 00000000000..168bcf3c99c --- /dev/null +++ b/static/usage/v9/content/scroll-methods/vue.md @@ -0,0 +1,76 @@ +```html + + + +``` diff --git a/static/usage/v9/content/theming/colors/angular/example_component_html.md b/static/usage/v9/content/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..4b2489b6dae --- /dev/null +++ b/static/usage/v9/content/theming/colors/angular/example_component_html.md @@ -0,0 +1,38 @@ +```html + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/theming/colors/angular/example_component_ts.md b/static/usage/v9/content/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..c629c19f36a --- /dev/null +++ b/static/usage/v9/content/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/theming/colors/demo.html b/static/usage/v9/content/theming/colors/demo.html new file mode 100644 index 00000000000..efe23b86c0a --- /dev/null +++ b/static/usage/v9/content/theming/colors/demo.html @@ -0,0 +1,67 @@ + + + + + + Content + + + + + + + + + + +
+ +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +
+ + + diff --git a/static/usage/v9/content/theming/colors/index.md b/static/usage/v9/content/theming/colors/index.md new file mode 100644 index 00000000000..fbc76d08e72 --- /dev/null +++ b/static/usage/v9/content/theming/colors/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/theming/colors/javascript.md b/static/usage/v9/content/theming/colors/javascript.md new file mode 100644 index 00000000000..4b2489b6dae --- /dev/null +++ b/static/usage/v9/content/theming/colors/javascript.md @@ -0,0 +1,38 @@ +```html + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/theming/colors/react.md b/static/usage/v9/content/theming/colors/react.md new file mode 100644 index 00000000000..5a24d44a829 --- /dev/null +++ b/static/usage/v9/content/theming/colors/react.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +function Example() { + return ( + <> + +

Primary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Secondary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Tertiary content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Success content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Warning content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Danger content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Light content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Medium content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + +

Dark content

+

Here's a small text description for the content. Nothing more, nothing less.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/theming/colors/vue.md b/static/usage/v9/content/theming/colors/vue.md new file mode 100644 index 00000000000..9020969c881 --- /dev/null +++ b/static/usage/v9/content/theming/colors/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v9/content/theming/css-properties/angular/example_component_css.md b/static/usage/v9/content/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-content { + --background: #d31373; + --color: #fff; +} +``` diff --git a/static/usage/v9/content/theming/css-properties/angular/example_component_html.md b/static/usage/v9/content/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/content/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..c629c19f36a --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/theming/css-properties/demo.html b/static/usage/v9/content/theming/css-properties/demo.html new file mode 100644 index 00000000000..51e691c9e85 --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/demo.html @@ -0,0 +1,34 @@ + + + + + + Content + + + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v9/content/theming/css-properties/index.md b/static/usage/v9/content/theming/css-properties/index.md new file mode 100644 index 00000000000..39033888e2b --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/theming/css-properties/javascript.md b/static/usage/v9/content/theming/css-properties/javascript.md new file mode 100644 index 00000000000..2ad2211af87 --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/javascript.md @@ -0,0 +1,19 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + +``` diff --git a/static/usage/v9/content/theming/css-properties/react/main_css.md b/static/usage/v9/content/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..be9b9d8063c --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-content { + --background: #d31373; + --color: #fff; +} +``` diff --git a/static/usage/v9/content/theming/css-properties/react/main_tsx.md b/static/usage/v9/content/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/theming/css-properties/vue.md b/static/usage/v9/content/theming/css-properties/vue.md new file mode 100644 index 00000000000..f28e211278f --- /dev/null +++ b/static/usage/v9/content/theming/css-properties/vue.md @@ -0,0 +1,25 @@ +```html + + + + + +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +ion-content::part(background) { + background: #d31373; +} + +ion-content::part(scroll) { + color: #fff; +} +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..31d6c7b092c --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..c629c19f36a --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/demo.html b/static/usage/v9/content/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..e10574cceab --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/demo.html @@ -0,0 +1,37 @@ + + + + + + Content + + + + + + + + + + + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + + diff --git a/static/usage/v9/content/theming/css-shadow-parts/index.md b/static/usage/v9/content/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..54db6bc7364 --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/content/theming/css-shadow-parts/javascript.md b/static/usage/v9/content/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..74124e4fdb3 --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/javascript.md @@ -0,0 +1,22 @@ +```html + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + + +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/content/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..29c3d353879 --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,9 @@ +```css +ion-content::part(background) { + background: #d31373; +} + +ion-content::part(scroll) { + color: #fff; +} +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/content/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..33f0e53433b --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + +

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+ +

Here's a small text description for the content. Nothing more, nothing less.

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/theming/css-shadow-parts/vue.md b/static/usage/v9/content/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..aec87ce684a --- /dev/null +++ b/static/usage/v9/content/theming/css-shadow-parts/vue.md @@ -0,0 +1,28 @@ +```html + + + + + +``` diff --git a/static/usage/v9/content/theming/safe-area/angular/example_component_css.md b/static/usage/v9/content/theming/safe-area/angular/example_component_css.md new file mode 100644 index 00000000000..17cf5c76c57 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v9/content/theming/safe-area/angular/example_component_html.md b/static/usage/v9/content/theming/safe-area/angular/example_component_html.md new file mode 100644 index 00000000000..d01b3935e35 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + +``` diff --git a/static/usage/v9/content/theming/safe-area/angular/example_component_ts.md b/static/usage/v9/content/theming/safe-area/angular/example_component_ts.md new file mode 100644 index 00000000000..c629c19f36a --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/content/theming/safe-area/angular/global_css.md b/static/usage/v9/content/theming/safe-area/angular/global_css.md new file mode 100644 index 00000000000..bd18709f492 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/angular/global_css.md @@ -0,0 +1,12 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; + --ion-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} +``` diff --git a/static/usage/v9/content/theming/safe-area/demo.html b/static/usage/v9/content/theming/safe-area/demo.html new file mode 100644 index 00000000000..ac2d3cbfff7 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/demo.html @@ -0,0 +1,36 @@ + + + + + + Content + + + + + + + + + + + + Here's a small text description for the content. Nothing more, nothing less. + + + + diff --git a/static/usage/v9/content/theming/safe-area/index.md b/static/usage/v9/content/theming/safe-area/index.md new file mode 100644 index 00000000000..ea341d234b6 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/index.md @@ -0,0 +1,38 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/content/theming/safe-area/javascript.md b/static/usage/v9/content/theming/safe-area/javascript.md new file mode 100644 index 00000000000..2dc819d6a60 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/javascript.md @@ -0,0 +1,25 @@ +```html + + Here's a small text description for the content. Nothing more, nothing less. + + + +``` diff --git a/static/usage/v9/content/theming/safe-area/react/main_css.md b/static/usage/v9/content/theming/safe-area/react/main_css.md new file mode 100644 index 00000000000..6466670f427 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/react/main_css.md @@ -0,0 +1,19 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; + --ion-safe-area-left: 20px; + --ion-safe-area-right: 20px; +} + +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); + padding-bottom: var(--ion-safe-area-bottom, 0); + padding-left: var(--ion-safe-area-left, 0); + padding-right: var(--ion-safe-area-right, 0); +} +``` diff --git a/static/usage/v9/content/theming/safe-area/react/main_tsx.md b/static/usage/v9/content/theming/safe-area/react/main_tsx.md new file mode 100644 index 00000000000..4f3ff8a34b4 --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonContent } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Here's a small text description for the content. Nothing more, nothing less. + + ); +} +export default Example; +``` diff --git a/static/usage/v9/content/theming/safe-area/vue.md b/static/usage/v9/content/theming/safe-area/vue.md new file mode 100644 index 00000000000..f13dc57a31f --- /dev/null +++ b/static/usage/v9/content/theming/safe-area/vue.md @@ -0,0 +1,33 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/datetime-button/basic/angular/example_component_html.md b/static/usage/v9/datetime-button/basic/angular/example_component_html.md new file mode 100644 index 00000000000..80a6ffe3724 --- /dev/null +++ b/static/usage/v9/datetime-button/basic/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/datetime-button/basic/angular/example_component_ts.md b/static/usage/v9/datetime-button/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..9581a257856 --- /dev/null +++ b/static/usage/v9/datetime-button/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime, IonDatetimeButton, IonModal], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime-button/basic/demo.html b/static/usage/v9/datetime-button/basic/demo.html new file mode 100644 index 00000000000..ee99910d74f --- /dev/null +++ b/static/usage/v9/datetime-button/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Datetime + + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v9/datetime-button/basic/index.md b/static/usage/v9/datetime-button/basic/index.md new file mode 100644 index 00000000000..01c8e25b6b7 --- /dev/null +++ b/static/usage/v9/datetime-button/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime-button/basic/javascript.md b/static/usage/v9/datetime-button/basic/javascript.md new file mode 100644 index 00000000000..3b39203bb90 --- /dev/null +++ b/static/usage/v9/datetime-button/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime-button/basic/react.md b/static/usage/v9/datetime-button/basic/react.md new file mode 100644 index 00000000000..62529cdb75f --- /dev/null +++ b/static/usage/v9/datetime-button/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react'; +function Example() { + return ( + <> + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime-button/basic/vue.md b/static/usage/v9/datetime-button/basic/vue.md new file mode 100644 index 00000000000..5b570b0a823 --- /dev/null +++ b/static/usage/v9/datetime-button/basic/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime-button/format-options/angular/example_component_html.md b/static/usage/v9/datetime-button/format-options/angular/example_component_html.md new file mode 100644 index 00000000000..72570e5242b --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/angular/example_component_html.md @@ -0,0 +1,24 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/datetime-button/format-options/angular/example_component_ts.md b/static/usage/v9/datetime-button/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..9581a257856 --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime, IonDatetimeButton, IonModal], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime-button/format-options/demo.html b/static/usage/v9/datetime-button/format-options/demo.html new file mode 100644 index 00000000000..5f2cbd922f6 --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/demo.html @@ -0,0 +1,41 @@ + + + + + + Datetime Button + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v9/datetime-button/format-options/index.md b/static/usage/v9/datetime-button/format-options/index.md new file mode 100644 index 00000000000..46885ef28b5 --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime-button/format-options/javascript.md b/static/usage/v9/datetime-button/format-options/javascript.md new file mode 100644 index 00000000000..a71c653a98b --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/javascript.md @@ -0,0 +1,22 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/datetime-button/format-options/react.md b/static/usage/v9/datetime-button/format-options/react.md new file mode 100644 index 00000000000..cf774d2cc98 --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/react.md @@ -0,0 +1,32 @@ +```tsx +import React from 'react'; +import { IonDatetime, IonDatetimeButton, IonModal } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime-button/format-options/vue.md b/static/usage/v9/datetime-button/format-options/vue.md new file mode 100644 index 00000000000..942808b08e2 --- /dev/null +++ b/static/usage/v9/datetime-button/format-options/vue.md @@ -0,0 +1,30 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/basic/angular/example_component_html.md b/static/usage/v9/datetime/basic/angular/example_component_html.md new file mode 100644 index 00000000000..676d4c61c18 --- /dev/null +++ b/static/usage/v9/datetime/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/basic/angular/example_component_ts.md b/static/usage/v9/datetime/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/basic/demo.html b/static/usage/v9/datetime/basic/demo.html new file mode 100644 index 00000000000..a7fe77e07a3 --- /dev/null +++ b/static/usage/v9/datetime/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/basic/index.md b/static/usage/v9/datetime/basic/index.md new file mode 100644 index 00000000000..fe1da6101d2 --- /dev/null +++ b/static/usage/v9/datetime/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/basic/javascript.md b/static/usage/v9/datetime/basic/javascript.md new file mode 100644 index 00000000000..676d4c61c18 --- /dev/null +++ b/static/usage/v9/datetime/basic/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/basic/react.md b/static/usage/v9/datetime/basic/react.md new file mode 100644 index 00000000000..fe17ddda39b --- /dev/null +++ b/static/usage/v9/datetime/basic/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/basic/vue.md b/static/usage/v9/datetime/basic/vue.md new file mode 100644 index 00000000000..6a0616d1f19 --- /dev/null +++ b/static/usage/v9/datetime/basic/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_html.md b/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_html.md new file mode 100644 index 00000000000..f9d6b66b986 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_ts.md b/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/demo.html b/static/usage/v9/datetime/buttons/customizing-button-texts/demo.html new file mode 100644 index 00000000000..d7db49d0ae8 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/demo.html @@ -0,0 +1,28 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/index.md b/static/usage/v9/datetime/buttons/customizing-button-texts/index.md new file mode 100644 index 00000000000..42d19a4eb02 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/javascript.md b/static/usage/v9/datetime/buttons/customizing-button-texts/javascript.md new file mode 100644 index 00000000000..addbae86356 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/react.md b/static/usage/v9/datetime/buttons/customizing-button-texts/react.md new file mode 100644 index 00000000000..8806828082b --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/react.md @@ -0,0 +1,8 @@ +```tsx +import React, { useRef } from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/buttons/customizing-button-texts/vue.md b/static/usage/v9/datetime/buttons/customizing-button-texts/vue.md new file mode 100644 index 00000000000..cd41ec43133 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-button-texts/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_html.md b/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_html.md new file mode 100644 index 00000000000..c5f1c5d8b9f --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + Reset + Never mind + All Set + + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_ts.md b/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..8c2bf0dc5a2 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/demo.html b/static/usage/v9/datetime/buttons/customizing-buttons/demo.html new file mode 100644 index 00000000000..ee2d2acb33d --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/demo.html @@ -0,0 +1,38 @@ + + + + + + Datetime + + + + + + + + + + +
+ + + Reset + Never mind + All Set + + +
+ + + + + + diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/index.md b/static/usage/v9/datetime/buttons/customizing-buttons/index.md new file mode 100644 index 00000000000..1bbf1fa6a35 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/javascript.md b/static/usage/v9/datetime/buttons/customizing-buttons/javascript.md new file mode 100644 index 00000000000..06ad3d83291 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/javascript.md @@ -0,0 +1,13 @@ +```html + + + Reset + Never mind + All Set + + + + +``` diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/react.md b/static/usage/v9/datetime/buttons/customizing-buttons/react.md new file mode 100644 index 00000000000..20435641f42 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/react.md @@ -0,0 +1,32 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButtons, IonButton, IonDatetime } from '@ionic/react'; +function Example() { + const datetime = useRef(null); + const reset = () => { + datetime.current?.reset(); + }; + const cancel = () => { + datetime.current?.cancel(); + }; + const confirm = () => { + datetime.current?.confirm(); + }; + return ( + + + + Reset + + + Never mind + + + All Set + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/buttons/customizing-buttons/vue.md b/static/usage/v9/datetime/buttons/customizing-buttons/vue.md new file mode 100644 index 00000000000..36d9fd61a63 --- /dev/null +++ b/static/usage/v9/datetime/buttons/customizing-buttons/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md new file mode 100644 index 00000000000..bf3bb712166 --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/demo.html b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/demo.html new file mode 100644 index 00000000000..f906aba1cfd --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/demo.html @@ -0,0 +1,28 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.md new file mode 100644 index 00000000000..e60f05aced6 --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/javascript.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/javascript.md new file mode 100644 index 00000000000..0c8a20f6672 --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/react.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/react.md new file mode 100644 index 00000000000..9409dc13911 --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/buttons/showing-confirmation-buttons/vue.md b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/vue.md new file mode 100644 index 00000000000..512b86560ba --- /dev/null +++ b/static/usage/v9/datetime/buttons/showing-confirmation-buttons/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_html.md b/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_html.md new file mode 100644 index 00000000000..3ceed6383ae --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_ts.md b/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_ts.md new file mode 100644 index 00000000000..d763311d477 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent { + isWeekday = (dateString: string) => { + const date = new Date(dateString); + const utcDay = date.getUTCDay(); + + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; +} +``` diff --git a/static/usage/v9/datetime/date-constraints/advanced/demo.html b/static/usage/v9/datetime/date-constraints/advanced/demo.html new file mode 100644 index 00000000000..dd18c0861da --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/demo.html @@ -0,0 +1,41 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/datetime/date-constraints/advanced/index.md b/static/usage/v9/datetime/date-constraints/advanced/index.md new file mode 100644 index 00000000000..4289149aaf4 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/date-constraints/advanced/javascript.md b/static/usage/v9/datetime/date-constraints/advanced/javascript.md new file mode 100644 index 00000000000..60a991725a0 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/javascript.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/date-constraints/advanced/react.md b/static/usage/v9/datetime/date-constraints/advanced/react.md new file mode 100644 index 00000000000..ece5aef6c9e --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + const isWeekday = (dateString: string) => { + const date = new Date(dateString); + const utcDay = date.getUTCDay(); + + /** + * Date will be enabled if it is not + * Sunday or Saturday + */ + return utcDay !== 0 && utcDay !== 6; + }; + + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/date-constraints/advanced/vue.md b/static/usage/v9/datetime/date-constraints/advanced/vue.md new file mode 100644 index 00000000000..781ef1678ec --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/advanced/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_html.md b/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_html.md new file mode 100644 index 00000000000..f37914bd457 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_ts.md b/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/date-constraints/max-min/demo.html b/static/usage/v9/datetime/date-constraints/max-min/demo.html new file mode 100644 index 00000000000..e3bbf2c4608 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/date-constraints/max-min/index.md b/static/usage/v9/datetime/date-constraints/max-min/index.md new file mode 100644 index 00000000000..285d6612642 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/date-constraints/max-min/javascript.md b/static/usage/v9/datetime/date-constraints/max-min/javascript.md new file mode 100644 index 00000000000..f37914bd457 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/date-constraints/max-min/react.md b/static/usage/v9/datetime/date-constraints/max-min/react.md new file mode 100644 index 00000000000..e2493659c23 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/date-constraints/max-min/vue.md b/static/usage/v9/datetime/date-constraints/max-min/vue.md new file mode 100644 index 00000000000..97903417425 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/max-min/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/date-constraints/values/angular/example_component_html.md b/static/usage/v9/datetime/date-constraints/values/angular/example_component_html.md new file mode 100644 index 00000000000..ab31d1fad20 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/date-constraints/values/angular/example_component_ts.md b/static/usage/v9/datetime/date-constraints/values/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/date-constraints/values/demo.html b/static/usage/v9/datetime/date-constraints/values/demo.html new file mode 100644 index 00000000000..466485b6301 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/date-constraints/values/index.md b/static/usage/v9/datetime/date-constraints/values/index.md new file mode 100644 index 00000000000..aaeaf779818 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/date-constraints/values/javascript.md b/static/usage/v9/datetime/date-constraints/values/javascript.md new file mode 100644 index 00000000000..670f19ca6ea --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/date-constraints/values/react.md b/static/usage/v9/datetime/date-constraints/values/react.md new file mode 100644 index 00000000000..74516943d6e --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/date-constraints/values/vue.md b/static/usage/v9/datetime/date-constraints/values/vue.md new file mode 100644 index 00000000000..ce95f7efae8 --- /dev/null +++ b/static/usage/v9/datetime/date-constraints/values/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/format-options/angular/example_component_html.md b/static/usage/v9/datetime/format-options/angular/example_component_html.md new file mode 100644 index 00000000000..8453ac416e8 --- /dev/null +++ b/static/usage/v9/datetime/format-options/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + Select Date + +``` diff --git a/static/usage/v9/datetime/format-options/angular/example_component_ts.md b/static/usage/v9/datetime/format-options/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/format-options/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/format-options/demo.html b/static/usage/v9/datetime/format-options/demo.html new file mode 100644 index 00000000000..ba2fa11070d --- /dev/null +++ b/static/usage/v9/datetime/format-options/demo.html @@ -0,0 +1,37 @@ + + + + + + Datetime + + + + + + + + + + +
+ + Select Date + +
+ + + + + + diff --git a/static/usage/v9/datetime/format-options/index.md b/static/usage/v9/datetime/format-options/index.md new file mode 100644 index 00000000000..5248fe9db2d --- /dev/null +++ b/static/usage/v9/datetime/format-options/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/format-options/javascript.md b/static/usage/v9/datetime/format-options/javascript.md new file mode 100644 index 00000000000..8476e5fe8a8 --- /dev/null +++ b/static/usage/v9/datetime/format-options/javascript.md @@ -0,0 +1,13 @@ +```html + + Select Date + + + +``` diff --git a/static/usage/v9/datetime/format-options/react.md b/static/usage/v9/datetime/format-options/react.md new file mode 100644 index 00000000000..5c5bcfb2882 --- /dev/null +++ b/static/usage/v9/datetime/format-options/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + return ( + + Select Date + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/format-options/vue.md b/static/usage/v9/datetime/format-options/vue.md new file mode 100644 index 00000000000..2d5ec106173 --- /dev/null +++ b/static/usage/v9/datetime/format-options/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/highlightedDates/array/angular/example_component_html.md b/static/usage/v9/datetime/highlightedDates/array/angular/example_component_html.md new file mode 100644 index 00000000000..25c15ca64c7 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/highlightedDates/array/angular/example_component_ts.md b/static/usage/v9/datetime/highlightedDates/array/angular/example_component_ts.md new file mode 100644 index 00000000000..d7e15f86189 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent { + highlightedDates = [ + { + date: '2023-01-05', + textColor: '#800080', + backgroundColor: '#ffc0cb', + border: '1px solid #e91e63', + }, + { + date: '2023-01-10', + textColor: '#09721b', + backgroundColor: '#c8e5d0', + border: '1px solid #4caf50', + }, + { + date: '2023-01-20', + textColor: 'var(--ion-color-secondary)', + backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)', + border: '1px solid var(--ion-color-secondary-shade)', + }, + { + date: '2023-01-23', + textColor: 'rgb(68, 10, 184)', + backgroundColor: 'rgb(211, 200, 229)', + border: '1px solid rgb(103, 58, 183)', + }, + ]; +} +``` diff --git a/static/usage/v9/datetime/highlightedDates/array/demo.html b/static/usage/v9/datetime/highlightedDates/array/demo.html new file mode 100644 index 00000000000..73f90536027 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/demo.html @@ -0,0 +1,57 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/datetime/highlightedDates/array/index.md b/static/usage/v9/datetime/highlightedDates/array/index.md new file mode 100644 index 00000000000..33e03874d1d --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/highlightedDates/array/javascript.md b/static/usage/v9/datetime/highlightedDates/array/javascript.md new file mode 100644 index 00000000000..9eae9580daf --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/javascript.md @@ -0,0 +1,33 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/highlightedDates/array/react.md b/static/usage/v9/datetime/highlightedDates/array/react.md new file mode 100644 index 00000000000..f49daad4da2 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/highlightedDates/array/vue.md b/static/usage/v9/datetime/highlightedDates/array/vue.md new file mode 100644 index 00000000000..0fb4b6e6f42 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/array/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_html.md b/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_html.md new file mode 100644 index 00000000000..634090ab0ab --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_ts.md b/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_ts.md new file mode 100644 index 00000000000..d15086ef936 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent { + highlightedDates = (isoString: string) => { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if (utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + border: '1px solid #e91e63', + }; + } + + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary)', + backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)', + border: '1px solid var(--ion-color-secondary-shade)', + }; + } + + return undefined; + }; +} +``` diff --git a/static/usage/v9/datetime/highlightedDates/callback/demo.html b/static/usage/v9/datetime/highlightedDates/callback/demo.html new file mode 100644 index 00000000000..e4d8ac56470 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/demo.html @@ -0,0 +1,53 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/datetime/highlightedDates/callback/index.md b/static/usage/v9/datetime/highlightedDates/callback/index.md new file mode 100644 index 00000000000..4b7f70ba2dc --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/highlightedDates/callback/javascript.md b/static/usage/v9/datetime/highlightedDates/callback/javascript.md new file mode 100644 index 00000000000..e7774445358 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/javascript.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/highlightedDates/callback/react.md b/static/usage/v9/datetime/highlightedDates/callback/react.md new file mode 100644 index 00000000000..b730427ea96 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/react.md @@ -0,0 +1,34 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + { + const date = new Date(isoString); + const utcDay = date.getUTCDate(); + + if (utcDay % 5 === 0) { + return { + textColor: '#800080', + backgroundColor: '#ffc0cb', + border: '1px solid #e91e63', + }; + } + + if (utcDay % 3 === 0) { + return { + textColor: 'var(--ion-color-secondary)', + backgroundColor: 'rgb(var(--ion-color-secondary-rgb), 0.18)', + border: '1px solid var(--ion-color-secondary-shade)', + }; + } + + return undefined; + }} + > + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/highlightedDates/callback/vue.md b/static/usage/v9/datetime/highlightedDates/callback/vue.md new file mode 100644 index 00000000000..19808c29f03 --- /dev/null +++ b/static/usage/v9/datetime/highlightedDates/callback/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/localization/custom-locale/angular/example_component_html.md b/static/usage/v9/datetime/localization/custom-locale/angular/example_component_html.md new file mode 100644 index 00000000000..c3697585c67 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/custom-locale/angular/example_component_ts.md b/static/usage/v9/datetime/localization/custom-locale/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/localization/custom-locale/demo.html b/static/usage/v9/datetime/localization/custom-locale/demo.html new file mode 100644 index 00000000000..d40c8cdcf91 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/localization/custom-locale/index.md b/static/usage/v9/datetime/localization/custom-locale/index.md new file mode 100644 index 00000000000..db274e4c6a5 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/localization/custom-locale/javascript.md b/static/usage/v9/datetime/localization/custom-locale/javascript.md new file mode 100644 index 00000000000..c3697585c67 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/custom-locale/react.md b/static/usage/v9/datetime/localization/custom-locale/react.md new file mode 100644 index 00000000000..f543b588cf4 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/localization/custom-locale/vue.md b/static/usage/v9/datetime/localization/custom-locale/vue.md new file mode 100644 index 00000000000..741b602b907 --- /dev/null +++ b/static/usage/v9/datetime/localization/custom-locale/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_html.md b/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_html.md new file mode 100644 index 00000000000..2281060074e --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_ts.md b/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/localization/first-day-of-week/demo.html b/static/usage/v9/datetime/localization/first-day-of-week/demo.html new file mode 100644 index 00000000000..c35b47edfac --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/localization/first-day-of-week/index.md b/static/usage/v9/datetime/localization/first-day-of-week/index.md new file mode 100644 index 00000000000..f7a637b7f61 --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/localization/first-day-of-week/javascript.md b/static/usage/v9/datetime/localization/first-day-of-week/javascript.md new file mode 100644 index 00000000000..420402e2d9c --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/first-day-of-week/react.md b/static/usage/v9/datetime/localization/first-day-of-week/react.md new file mode 100644 index 00000000000..b39bb91a837 --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/localization/first-day-of-week/vue.md b/static/usage/v9/datetime/localization/first-day-of-week/vue.md new file mode 100644 index 00000000000..f5fa2e15976 --- /dev/null +++ b/static/usage/v9/datetime/localization/first-day-of-week/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_html.md b/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_html.md new file mode 100644 index 00000000000..aeb27d6152b --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_ts.md b/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/localization/hour-cycle/demo.html b/static/usage/v9/datetime/localization/hour-cycle/demo.html new file mode 100644 index 00000000000..fcf81afe6a5 --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/localization/hour-cycle/index.md b/static/usage/v9/datetime/localization/hour-cycle/index.md new file mode 100644 index 00000000000..0ac91db3255 --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/localization/hour-cycle/javascript.md b/static/usage/v9/datetime/localization/hour-cycle/javascript.md new file mode 100644 index 00000000000..5f3638f13aa --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/hour-cycle/react.md b/static/usage/v9/datetime/localization/hour-cycle/react.md new file mode 100644 index 00000000000..e05544cd3cc --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/localization/hour-cycle/vue.md b/static/usage/v9/datetime/localization/hour-cycle/vue.md new file mode 100644 index 00000000000..ac5ac874a86 --- /dev/null +++ b/static/usage/v9/datetime/localization/hour-cycle/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_html.md b/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_html.md new file mode 100644 index 00000000000..828f85eeb0a --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_ts.md b/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/demo.html b/static/usage/v9/datetime/localization/locale-extension-tags/demo.html new file mode 100644 index 00000000000..cf847f3f334 --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/index.md b/static/usage/v9/datetime/localization/locale-extension-tags/index.md new file mode 100644 index 00000000000..94e2efe9b8b --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/javascript.md b/static/usage/v9/datetime/localization/locale-extension-tags/javascript.md new file mode 100644 index 00000000000..828f85eeb0a --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/react.md b/static/usage/v9/datetime/localization/locale-extension-tags/react.md new file mode 100644 index 00000000000..d945f768d3a --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/localization/locale-extension-tags/vue.md b/static/usage/v9/datetime/localization/locale-extension-tags/vue.md new file mode 100644 index 00000000000..c795de9de68 --- /dev/null +++ b/static/usage/v9/datetime/localization/locale-extension-tags/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/localization/time-label/angular/example_component_html.md b/static/usage/v9/datetime/localization/time-label/angular/example_component_html.md new file mode 100644 index 00000000000..38f0e697d3a --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Tiempo + +``` diff --git a/static/usage/v9/datetime/localization/time-label/angular/example_component_ts.md b/static/usage/v9/datetime/localization/time-label/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/localization/time-label/demo.html b/static/usage/v9/datetime/localization/time-label/demo.html new file mode 100644 index 00000000000..e804c96ecd8 --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/demo.html @@ -0,0 +1,29 @@ + + + + + + Datetime + + + + + + + + + + +
+ + Tiempo + +
+ + + + diff --git a/static/usage/v9/datetime/localization/time-label/index.md b/static/usage/v9/datetime/localization/time-label/index.md new file mode 100644 index 00000000000..4fe8dbfc635 --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/localization/time-label/javascript.md b/static/usage/v9/datetime/localization/time-label/javascript.md new file mode 100644 index 00000000000..38f0e697d3a --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/javascript.md @@ -0,0 +1,5 @@ +```html + + Tiempo + +``` diff --git a/static/usage/v9/datetime/localization/time-label/react.md b/static/usage/v9/datetime/localization/time-label/react.md new file mode 100644 index 00000000000..ba81f8743a8 --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/react.md @@ -0,0 +1,12 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + Tiempo + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/localization/time-label/vue.md b/static/usage/v9/datetime/localization/time-label/vue.md new file mode 100644 index 00000000000..0fb5e3ec49d --- /dev/null +++ b/static/usage/v9/datetime/localization/time-label/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/multiple/angular/example_component_html.md b/static/usage/v9/datetime/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..e26fe9e931d --- /dev/null +++ b/static/usage/v9/datetime/multiple/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/multiple/angular/example_component_ts.md b/static/usage/v9/datetime/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/multiple/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/multiple/demo.html b/static/usage/v9/datetime/multiple/demo.html new file mode 100644 index 00000000000..63f1dade7fc --- /dev/null +++ b/static/usage/v9/datetime/multiple/demo.html @@ -0,0 +1,32 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/datetime/multiple/index.md b/static/usage/v9/datetime/multiple/index.md new file mode 100644 index 00000000000..a3656a7dcdb --- /dev/null +++ b/static/usage/v9/datetime/multiple/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/multiple/javascript.md b/static/usage/v9/datetime/multiple/javascript.md new file mode 100644 index 00000000000..10455808ab2 --- /dev/null +++ b/static/usage/v9/datetime/multiple/javascript.md @@ -0,0 +1,8 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/multiple/react.md b/static/usage/v9/datetime/multiple/react.md new file mode 100644 index 00000000000..87028027d47 --- /dev/null +++ b/static/usage/v9/datetime/multiple/react.md @@ -0,0 +1,16 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + const datetime = useRef(null); + + useEffect(() => { + if (!datetime.current) return; + datetime.current.value = ['2022-06-03', '2022-06-13', '2022-06-29']; + }, []); + + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/multiple/vue.md b/static/usage/v9/datetime/multiple/vue.md new file mode 100644 index 00000000000..f4216f64646 --- /dev/null +++ b/static/usage/v9/datetime/multiple/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/presentation/date/angular/example_component_html.md b/static/usage/v9/datetime/presentation/date/angular/example_component_html.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/date/angular/example_component_ts.md b/static/usage/v9/datetime/presentation/date/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/presentation/date/demo.html b/static/usage/v9/datetime/presentation/date/demo.html new file mode 100644 index 00000000000..4126ea73fa3 --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/presentation/date/index.md b/static/usage/v9/datetime/presentation/date/index.md new file mode 100644 index 00000000000..b8eb2744d06 --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/presentation/date/javascript.md b/static/usage/v9/datetime/presentation/date/javascript.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/date/react.md b/static/usage/v9/datetime/presentation/date/react.md new file mode 100644 index 00000000000..72e24d86874 --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/presentation/date/vue.md b/static/usage/v9/datetime/presentation/date/vue.md new file mode 100644 index 00000000000..a57e823757f --- /dev/null +++ b/static/usage/v9/datetime/presentation/date/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_html.md b/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_html.md new file mode 100644 index 00000000000..fee755e147f --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_ts.md b/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/presentation/month-and-year/demo.html b/static/usage/v9/datetime/presentation/month-and-year/demo.html new file mode 100644 index 00000000000..54051ff17ff --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/presentation/month-and-year/index.md b/static/usage/v9/datetime/presentation/month-and-year/index.md new file mode 100644 index 00000000000..cf1680afe71 --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/presentation/month-and-year/javascript.md b/static/usage/v9/datetime/presentation/month-and-year/javascript.md new file mode 100644 index 00000000000..fee755e147f --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/month-and-year/react.md b/static/usage/v9/datetime/presentation/month-and-year/react.md new file mode 100644 index 00000000000..f140c4b09c0 --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/presentation/month-and-year/vue.md b/static/usage/v9/datetime/presentation/month-and-year/vue.md new file mode 100644 index 00000000000..fd61878679d --- /dev/null +++ b/static/usage/v9/datetime/presentation/month-and-year/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/presentation/time/angular/example_component_html.md b/static/usage/v9/datetime/presentation/time/angular/example_component_html.md new file mode 100644 index 00000000000..d54dd466706 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/time/angular/example_component_ts.md b/static/usage/v9/datetime/presentation/time/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/presentation/time/demo.html b/static/usage/v9/datetime/presentation/time/demo.html new file mode 100644 index 00000000000..93132122244 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/presentation/time/index.md b/static/usage/v9/datetime/presentation/time/index.md new file mode 100644 index 00000000000..4249aab1337 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/presentation/time/javascript.md b/static/usage/v9/datetime/presentation/time/javascript.md new file mode 100644 index 00000000000..d54dd466706 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/time/react.md b/static/usage/v9/datetime/presentation/time/react.md new file mode 100644 index 00000000000..30e0e206fbc --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/presentation/time/vue.md b/static/usage/v9/datetime/presentation/time/vue.md new file mode 100644 index 00000000000..581215e8e83 --- /dev/null +++ b/static/usage/v9/datetime/presentation/time/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/presentation/wheel/angular/example_component_html.md b/static/usage/v9/datetime/presentation/wheel/angular/example_component_html.md new file mode 100644 index 00000000000..f98877053c3 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/wheel/angular/example_component_ts.md b/static/usage/v9/datetime/presentation/wheel/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/presentation/wheel/demo.html b/static/usage/v9/datetime/presentation/wheel/demo.html new file mode 100644 index 00000000000..1cca0f79e69 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/presentation/wheel/index.md b/static/usage/v9/datetime/presentation/wheel/index.md new file mode 100644 index 00000000000..1734236a1a9 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/presentation/wheel/javascript.md b/static/usage/v9/datetime/presentation/wheel/javascript.md new file mode 100644 index 00000000000..83f43a87d61 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/presentation/wheel/react.md b/static/usage/v9/datetime/presentation/wheel/react.md new file mode 100644 index 00000000000..fc7873b4765 --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/presentation/wheel/vue.md b/static/usage/v9/datetime/presentation/wheel/vue.md new file mode 100644 index 00000000000..db4a28456ef --- /dev/null +++ b/static/usage/v9/datetime/presentation/wheel/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/show-adjacent-days/angular/example_component_html.md b/static/usage/v9/datetime/show-adjacent-days/angular/example_component_html.md new file mode 100644 index 00000000000..fcbe696cb02 --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/show-adjacent-days/angular/example_component_ts.md b/static/usage/v9/datetime/show-adjacent-days/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/show-adjacent-days/demo.html b/static/usage/v9/datetime/show-adjacent-days/demo.html new file mode 100644 index 00000000000..2223097f068 --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/show-adjacent-days/index.md b/static/usage/v9/datetime/show-adjacent-days/index.md new file mode 100644 index 00000000000..743d7178365 --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/show-adjacent-days/javascript.md b/static/usage/v9/datetime/show-adjacent-days/javascript.md new file mode 100644 index 00000000000..fcbe696cb02 --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/show-adjacent-days/react.md b/static/usage/v9/datetime/show-adjacent-days/react.md new file mode 100644 index 00000000000..b97b713880b --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/react.md @@ -0,0 +1,9 @@ +```tsx +import React, { useRef, useEffect } from 'react'; +import { IonDatetime } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/show-adjacent-days/vue.md b/static/usage/v9/datetime/show-adjacent-days/vue.md new file mode 100644 index 00000000000..a248214ebda --- /dev/null +++ b/static/usage/v9/datetime/show-adjacent-days/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/angular/example_component_css.md b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_css.md new file mode 100644 index 00000000000..c8a3e173e21 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_css.md @@ -0,0 +1,46 @@ +```css +/* +* Custom Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime::part(calendar-day) { + color: #da5296; +} + +ion-datetime::part(calendar-day today) { + color: #8462d1; +} + +ion-datetime::part(calendar-day):focus { + background-color: rgb(154 209 98 / 0.2); + box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); +} + +/* +* Custom Material Design Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.md::part(calendar-day active), +ion-datetime.md::part(calendar-day active):focus { + background-color: #9ad162; + border-color: #9ad162; + color: #fff; +} + +ion-datetime.md::part(calendar-day today) { + border-color: #8462d1; +} + +/* +* Custom iOS Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.ios::part(calendar-day active), +ion-datetime.ios::part(calendar-day active):focus { + background-color: rgb(154 209 98 / 0.2); + color: #9ad162; +} +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/angular/example_component_html.md b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_html.md new file mode 100644 index 00000000000..dde0aec7085 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/angular/example_component_ts.md b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_ts.md new file mode 100644 index 00000000000..89cefcc34a7 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; + +// ViewEncapsulation is turned off for this demo due to +// a lack of support for styling multiple css shadow parts +// See https://github.com/angular/angular/issues/22515 +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + encapsulation: ViewEncapsulation.None, + imports: [IonDatetime, FormsModule], +}) +export class ExampleComponent implements OnInit { + public datetime!: string; + + ngOnInit() { + const date = new Date(); + + // Set the value of the datetime to 2 days + // before the current day + let dayChange = -2; + + // If the day we are going to set the value to + // is in the previous month then set the day 2 days + // later instead so it remains in the same month + if (date.getDate() + dayChange <= 0) { + dayChange = -dayChange; + } + + // Set the value of the datetime to the day + // calculated above + date.setDate(date.getDate() + dayChange); + this.datetime = date.toISOString(); + } +} +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/demo.html b/static/usage/v9/datetime/styling/calendar-days/demo.html new file mode 100644 index 00000000000..f7234e76905 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/demo.html @@ -0,0 +1,91 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/datetime/styling/calendar-days/index.md b/static/usage/v9/datetime/styling/calendar-days/index.md new file mode 100644 index 00000000000..8795adf5214 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/styling/calendar-days/javascript.md b/static/usage/v9/datetime/styling/calendar-days/javascript.md new file mode 100644 index 00000000000..20aa37bb016 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/javascript.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/react/main_css.md b/static/usage/v9/datetime/styling/calendar-days/react/main_css.md new file mode 100644 index 00000000000..c8a3e173e21 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/react/main_css.md @@ -0,0 +1,46 @@ +```css +/* +* Custom Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime::part(calendar-day) { + color: #da5296; +} + +ion-datetime::part(calendar-day today) { + color: #8462d1; +} + +ion-datetime::part(calendar-day):focus { + background-color: rgb(154 209 98 / 0.2); + box-shadow: 0px 0px 0px 4px rgb(154 209 98 / 0.2); +} + +/* +* Custom Material Design Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.md::part(calendar-day active), +ion-datetime.md::part(calendar-day active):focus { + background-color: #9ad162; + border-color: #9ad162; + color: #fff; +} + +ion-datetime.md::part(calendar-day today) { + border-color: #8462d1; +} + +/* +* Custom iOS Datetime Day Parts +* ------------------------------------------- +*/ + +ion-datetime.ios::part(calendar-day active), +ion-datetime.ios::part(calendar-day active):focus { + background-color: rgb(154 209 98 / 0.2); + color: #9ad162; +} +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/react/main_tsx.md b/static/usage/v9/datetime/styling/calendar-days/react/main_tsx.md new file mode 100644 index 00000000000..fc76cb27d59 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + const [datetime, setDatetime] = useState(null); + + useEffect(() => { + const date = new Date(); + + // Set the value of the datetime to 2 days + // before the current day + let dayChange = -2; + + // If the day we are going to set the value to + // is in the previous month then set the day 2 days + // later instead so it remains in the same month + if (date.getDate() + dayChange <= 0) { + dayChange = -dayChange; + } + + // Set the value of the datetime to the day + // calculated above + date.setDate(date.getDate() + dayChange); + setDatetime(date.toISOString()); + }, []); + + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/styling/calendar-days/vue.md b/static/usage/v9/datetime/styling/calendar-days/vue.md new file mode 100644 index 00000000000..627a40123ae --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-days/vue.md @@ -0,0 +1,77 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/angular/example_component_css.md b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_css.md new file mode 100644 index 00000000000..f3ebd715337 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_css.md @@ -0,0 +1,30 @@ +```css +/* + * Custom Datetime Calendar Header Parts + * ------------------------------------------- + */ +ion-datetime::part(calendar-header) { + background-color: orange; +} + +ion-datetime::part(month-year-button) { + background-color: lightblue; +} + +ion-datetime::part(navigation-button) { + background-color: firebrick; +} + +ion-datetime::part(previous-button) { + color: white; +} + +ion-datetime::part(next-button) { + color: black; +} + +ion-datetime::part(calendar-days-of-week) { + background-color: #9ad162; + color: white; +} +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/angular/example_component_html.md b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_html.md new file mode 100644 index 00000000000..8694e723b1a --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/angular/example_component_ts.md b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_ts.md new file mode 100644 index 00000000000..75ed761f6e8 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/demo.html b/static/usage/v9/datetime/styling/calendar-header/demo.html new file mode 100644 index 00000000000..3bcef649038 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/demo.html @@ -0,0 +1,54 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/styling/calendar-header/index.md b/static/usage/v9/datetime/styling/calendar-header/index.md new file mode 100644 index 00000000000..302c8fbfe61 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/styling/calendar-header/javascript.md b/static/usage/v9/datetime/styling/calendar-header/javascript.md new file mode 100644 index 00000000000..84ed00226c7 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/javascript.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/react/main_css.md b/static/usage/v9/datetime/styling/calendar-header/react/main_css.md new file mode 100644 index 00000000000..f3ebd715337 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/react/main_css.md @@ -0,0 +1,30 @@ +```css +/* + * Custom Datetime Calendar Header Parts + * ------------------------------------------- + */ +ion-datetime::part(calendar-header) { + background-color: orange; +} + +ion-datetime::part(month-year-button) { + background-color: lightblue; +} + +ion-datetime::part(navigation-button) { + background-color: firebrick; +} + +ion-datetime::part(previous-button) { + color: white; +} + +ion-datetime::part(next-button) { + color: black; +} + +ion-datetime::part(calendar-days-of-week) { + background-color: #9ad162; + color: white; +} +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/react/main_tsx.md b/static/usage/v9/datetime/styling/calendar-header/react/main_tsx.md new file mode 100644 index 00000000000..e51f8f11e86 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/styling/calendar-header/vue.md b/static/usage/v9/datetime/styling/calendar-header/vue.md new file mode 100644 index 00000000000..72d57d77391 --- /dev/null +++ b/static/usage/v9/datetime/styling/calendar-header/vue.md @@ -0,0 +1,40 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/angular/example_component_css.md b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_css.md new file mode 100644 index 00000000000..d8e9e9e6341 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_css.md @@ -0,0 +1,17 @@ +```css +/* + * Custom Datetime Header Parts + * ------------------------------------------- + */ +ion-datetime::part(datetime-header) { + background-color: orange; +} + +ion-datetime::part(datetime-title) { + background-color: pink; +} + +ion-datetime::part(datetime-selected-date) { + background-color: violet; +} +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/angular/example_component_html.md b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_html.md new file mode 100644 index 00000000000..64b144ee4e8 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Select Date + +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/angular/example_component_ts.md b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_ts.md new file mode 100644 index 00000000000..75ed761f6e8 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/demo.html b/static/usage/v9/datetime/styling/datetime-header/demo.html new file mode 100644 index 00000000000..63f99c1f244 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/demo.html @@ -0,0 +1,43 @@ + + + + + + Datetime + + + + + + + + + + + +
+ + Select Date + +
+ + + + diff --git a/static/usage/v9/datetime/styling/datetime-header/index.md b/static/usage/v9/datetime/styling/datetime-header/index.md new file mode 100644 index 00000000000..328c2938051 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/styling/datetime-header/javascript.md b/static/usage/v9/datetime/styling/datetime-header/javascript.md new file mode 100644 index 00000000000..ebd98aff22d --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/javascript.md @@ -0,0 +1,23 @@ +```html + + Select Date + + + +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/react/main_css.md b/static/usage/v9/datetime/styling/datetime-header/react/main_css.md new file mode 100644 index 00000000000..d8e9e9e6341 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/react/main_css.md @@ -0,0 +1,17 @@ +```css +/* + * Custom Datetime Header Parts + * ------------------------------------------- + */ +ion-datetime::part(datetime-header) { + background-color: orange; +} + +ion-datetime::part(datetime-title) { + background-color: pink; +} + +ion-datetime::part(datetime-selected-date) { + background-color: violet; +} +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/react/main_tsx.md b/static/usage/v9/datetime/styling/datetime-header/react/main_tsx.md new file mode 100644 index 00000000000..b1cf2088469 --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Select Date + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/styling/datetime-header/vue.md b/static/usage/v9/datetime/styling/datetime-header/vue.md new file mode 100644 index 00000000000..f837edba6ef --- /dev/null +++ b/static/usage/v9/datetime/styling/datetime-header/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/styling/global-theming/angular/example_component_css.md b/static/usage/v9/datetime/styling/global-theming/angular/example_component_css.md new file mode 100644 index 00000000000..c7b7850960b --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v9/datetime/styling/global-theming/angular/example_component_html.md b/static/usage/v9/datetime/styling/global-theming/angular/example_component_html.md new file mode 100644 index 00000000000..0a38b1bc5b6 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/styling/global-theming/angular/example_component_ts.md b/static/usage/v9/datetime/styling/global-theming/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/styling/global-theming/demo.html b/static/usage/v9/datetime/styling/global-theming/demo.html new file mode 100644 index 00000000000..f6f96d39076 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/demo.html @@ -0,0 +1,96 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/styling/global-theming/index.md b/static/usage/v9/datetime/styling/global-theming/index.md new file mode 100644 index 00000000000..6ee17fec2c0 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/index.md @@ -0,0 +1,49 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue_example from './vue/example_vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v9/datetime/styling/global-theming/javascript/index_html.md b/static/usage/v9/datetime/styling/global-theming/javascript/index_html.md new file mode 100644 index 00000000000..04ef57b2e7d --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/javascript/index_html.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/styling/global-theming/react/main_css.md b/static/usage/v9/datetime/styling/global-theming/react/main_css.md new file mode 100644 index 00000000000..c7b7850960b --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/react/main_css.md @@ -0,0 +1,9 @@ +```css +ion-datetime { + --background: #fff1f2; + --background-rgb: 255, 241, 242; + + border-radius: 16px; + box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px; +} +``` diff --git a/static/usage/v9/datetime/styling/global-theming/react/main_tsx.md b/static/usage/v9/datetime/styling/global-theming/react/main_tsx.md new file mode 100644 index 00000000000..37e658cdcd1 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/styling/global-theming/theme/variables_css.md b/static/usage/v9/datetime/styling/global-theming/theme/variables_css.md new file mode 100644 index 00000000000..04a0ceb9f99 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/theme/variables_css.md @@ -0,0 +1,78 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets the CSS variables for the rose color */ +:root { + --ion-color-rose: #831843; + --ion-color-rose-rgb: 131, 24, 67; + --ion-color-rose-contrast: #ffffff; + --ion-color-rose-contrast-rgb: 255, 255, 255; + --ion-color-rose-shade: #73153b; + --ion-color-rose-tint: #8f2f56; +} + +/* This overrides the global CSS variables for both modes */ +:root.ios, +:root.md { + --ion-background-color: #ffffff; + --ion-background-color-rgb: 255, 255, 255; + + --ion-text-color: #881337; + --ion-text-color-rgb: 136, 19, 55; + + --ion-text-color-step-50: #8e1e40; + --ion-text-color-step-100: #94294a; + --ion-text-color-step-150: #9a3453; + --ion-text-color-step-200: #a03f5c; + --ion-text-color-step-250: #a64b66; + --ion-text-color-step-300: #ac566f; + --ion-text-color-step-350: #b26178; + --ion-text-color-step-400: #b86c82; + --ion-text-color-step-450: #be778b; + --ion-text-color-step-500: #c48295; + --ion-text-color-step-550: #c98d9e; + --ion-text-color-step-600: #cf98a7; + --ion-text-color-step-650: #d5a3b1; + --ion-text-color-step-700: #dbaeba; + --ion-text-color-step-750: #e1bac3; + --ion-text-color-step-800: #e7c5cd; + --ion-text-color-step-850: #edd0d6; + --ion-text-color-step-900: #f3dbdf; + --ion-text-color-step-950: #f9e6e9; + + --ion-background-color-step-50: #f9e6e9; + --ion-background-color-step-100: #f3dbdf; + --ion-background-color-step-150: #edd0d6; + --ion-background-color-step-200: #e7c5cd; + --ion-background-color-step-250: #e1bac3; + --ion-background-color-step-300: #dbaeba; + --ion-background-color-step-350: #d5a3b1; + --ion-background-color-step-400: #cf98a7; + --ion-background-color-step-450: #c98d9e; + --ion-background-color-step-500: #c48295; + --ion-background-color-step-550: #be778b; + --ion-background-color-step-600: #b86c82; + --ion-background-color-step-650: #b26178; + --ion-background-color-step-700: #ac566f; + --ion-background-color-step-750: #a64b66; + --ion-background-color-step-800: #a03f5c; + --ion-background-color-step-850: #9a3453; + --ion-background-color-step-900: #94294a; + --ion-background-color-step-950: #8e1e40; +} + +/* This adds the rose color */ +.ion-color-rose { + --ion-color-base: var(--ion-color-rose); + --ion-color-base-rgb: var(--ion-color-rose-rgb); + --ion-color-contrast: var(--ion-color-rose-contrast); + --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb); + --ion-color-shade: var(--ion-color-rose-shade); + --ion-color-tint: var(--ion-color-rose-tint); +} +``` diff --git a/static/usage/v9/datetime/styling/global-theming/vue/example_vue.md b/static/usage/v9/datetime/styling/global-theming/vue/example_vue.md new file mode 100644 index 00000000000..b2b99407031 --- /dev/null +++ b/static/usage/v9/datetime/styling/global-theming/vue/example_vue.md @@ -0,0 +1,19 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_css.md b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_css.md new file mode 100644 index 00000000000..d84fb8c9f09 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_css.md @@ -0,0 +1,21 @@ +```css +ion-datetime { + --background: rgb(245, 235, 247); + --background-rgb: 245, 235, 247; + --wheel-highlight-background: rgb(218, 216, 255); + --wheel-highlight-border-radius: 48px; + --wheel-fade-background-rgb: 245, 235, 247; +} + +ion-datetime::part(wheel):focus { + background: rgb(109, 208, 164); +} + +ion-datetime::part(wheel-item) { + color: rgb(255, 66, 97); +} + +ion-datetime::part(wheel-item active) { + color: rgb(128, 30, 171); +} +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_html.md b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_html.md new file mode 100644 index 00000000000..83c19decb31 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_ts.md b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_ts.md new file mode 100644 index 00000000000..1648682a3e0 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component, ViewEncapsulation } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +// ViewEncapsulation is turned off for this demo due to +// a lack of support for styling multiple css shadow parts +// See https://github.com/angular/angular/issues/22515 +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + encapsulation: ViewEncapsulation.None, + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/demo.html b/static/usage/v9/datetime/styling/wheel-styling/demo.html new file mode 100644 index 00000000000..a162992c999 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/demo.html @@ -0,0 +1,44 @@ + + + + + + Datetime + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/styling/wheel-styling/index.md b/static/usage/v9/datetime/styling/wheel-styling/index.md new file mode 100644 index 00000000000..9904c940d0a --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/styling/wheel-styling/javascript.md b/static/usage/v9/datetime/styling/wheel-styling/javascript.md new file mode 100644 index 00000000000..67a23fc7e7e --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/javascript.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/react/main_css.md b/static/usage/v9/datetime/styling/wheel-styling/react/main_css.md new file mode 100644 index 00000000000..d84fb8c9f09 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/react/main_css.md @@ -0,0 +1,21 @@ +```css +ion-datetime { + --background: rgb(245, 235, 247); + --background-rgb: 245, 235, 247; + --wheel-highlight-background: rgb(218, 216, 255); + --wheel-highlight-border-radius: 48px; + --wheel-fade-background-rgb: 245, 235, 247; +} + +ion-datetime::part(wheel):focus { + background: rgb(109, 208, 164); +} + +ion-datetime::part(wheel-item) { + color: rgb(255, 66, 97); +} + +ion-datetime::part(wheel-item active) { + color: rgb(128, 30, 171); +} +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/react/main_tsx.md b/static/usage/v9/datetime/styling/wheel-styling/react/main_tsx.md new file mode 100644 index 00000000000..6e01ae735c3 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/styling/wheel-styling/vue.md b/static/usage/v9/datetime/styling/wheel-styling/vue.md new file mode 100644 index 00000000000..4001c881c43 --- /dev/null +++ b/static/usage/v9/datetime/styling/wheel-styling/vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v9/datetime/title/customizing-title/angular/example_component_html.md b/static/usage/v9/datetime/title/customizing-title/angular/example_component_html.md new file mode 100644 index 00000000000..5f0ded69fbc --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Select a Reservation Date + +``` diff --git a/static/usage/v9/datetime/title/customizing-title/angular/example_component_ts.md b/static/usage/v9/datetime/title/customizing-title/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/title/customizing-title/demo.html b/static/usage/v9/datetime/title/customizing-title/demo.html new file mode 100644 index 00000000000..0c4bbcee200 --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/demo.html @@ -0,0 +1,29 @@ + + + + + + Datetime + + + + + + + + + + +
+ + Select a Reservation Date + +
+ + + + diff --git a/static/usage/v9/datetime/title/customizing-title/index.md b/static/usage/v9/datetime/title/customizing-title/index.md new file mode 100644 index 00000000000..eff55e92e3c --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/title/customizing-title/javascript.md b/static/usage/v9/datetime/title/customizing-title/javascript.md new file mode 100644 index 00000000000..5f0ded69fbc --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/javascript.md @@ -0,0 +1,5 @@ +```html + + Select a Reservation Date + +``` diff --git a/static/usage/v9/datetime/title/customizing-title/react.md b/static/usage/v9/datetime/title/customizing-title/react.md new file mode 100644 index 00000000000..ae4fec002d5 --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/react.md @@ -0,0 +1,12 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ( + + Select a Reservation Date + + ); +} +export default Example; +``` diff --git a/static/usage/v9/datetime/title/customizing-title/vue.md b/static/usage/v9/datetime/title/customizing-title/vue.md new file mode 100644 index 00000000000..5fbaa8b3962 --- /dev/null +++ b/static/usage/v9/datetime/title/customizing-title/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/datetime/title/showing-default-title/angular/example_component_html.md b/static/usage/v9/datetime/title/showing-default-title/angular/example_component_html.md new file mode 100644 index 00000000000..c67e022da04 --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/title/showing-default-title/angular/example_component_ts.md b/static/usage/v9/datetime/title/showing-default-title/angular/example_component_ts.md new file mode 100644 index 00000000000..99c58344016 --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonDatetime } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonDatetime], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/datetime/title/showing-default-title/demo.html b/static/usage/v9/datetime/title/showing-default-title/demo.html new file mode 100644 index 00000000000..7618244d3d5 --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/demo.html @@ -0,0 +1,27 @@ + + + + + + Datetime + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/datetime/title/showing-default-title/index.md b/static/usage/v9/datetime/title/showing-default-title/index.md new file mode 100644 index 00000000000..fe42651a472 --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/datetime/title/showing-default-title/javascript.md b/static/usage/v9/datetime/title/showing-default-title/javascript.md new file mode 100644 index 00000000000..6786deb32cf --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/datetime/title/showing-default-title/react.md b/static/usage/v9/datetime/title/showing-default-title/react.md new file mode 100644 index 00000000000..f04d7d55a36 --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonDatetime } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/datetime/title/showing-default-title/vue.md b/static/usage/v9/datetime/title/showing-default-title/vue.md new file mode 100644 index 00000000000..472da1096bc --- /dev/null +++ b/static/usage/v9/datetime/title/showing-default-title/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/basic/angular/example_component_html.md b/static/usage/v9/fab/basic/angular/example_component_html.md new file mode 100644 index 00000000000..b8394f90ed6 --- /dev/null +++ b/static/usage/v9/fab/basic/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/fab/basic/angular/example_component_ts.md b/static/usage/v9/fab/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..fd1573aa47b --- /dev/null +++ b/static/usage/v9/fab/basic/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add }); + } +} +``` diff --git a/static/usage/v9/fab/basic/demo.html b/static/usage/v9/fab/basic/demo.html new file mode 100644 index 00000000000..04615655c91 --- /dev/null +++ b/static/usage/v9/fab/basic/demo.html @@ -0,0 +1,26 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v9/fab/basic/index.md b/static/usage/v9/fab/basic/index.md new file mode 100644 index 00000000000..cf9a4e4e3da --- /dev/null +++ b/static/usage/v9/fab/basic/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/basic/javascript/index_html.md b/static/usage/v9/fab/basic/javascript/index_html.md new file mode 100644 index 00000000000..b8394f90ed6 --- /dev/null +++ b/static/usage/v9/fab/basic/javascript/index_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/fab/basic/javascript/index_ts.md b/static/usage/v9/fab/basic/javascript/index_ts.md new file mode 100644 index 00000000000..f27ef471644 --- /dev/null +++ b/static/usage/v9/fab/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "add" key. + * Alternatively, developers can do: + * addIcons({ 'add': add }); + */ +addIcons({ add }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/basic/react.md b/static/usage/v9/fab/basic/react.md new file mode 100644 index 00000000000..f1df86581d6 --- /dev/null +++ b/static/usage/v9/fab/basic/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/react'; +import { add } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/basic/vue.md b/static/usage/v9/fab/basic/vue.md new file mode 100644 index 00000000000..fa9261d132d --- /dev/null +++ b/static/usage/v9/fab/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/before-content/angular/example_component_html.md b/static/usage/v9/fab/before-content/angular/example_component_html.md new file mode 100644 index 00000000000..ea987ff7905 --- /dev/null +++ b/static/usage/v9/fab/before-content/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + + + + + @for (item of items; track item; let index = $index) { + + + avatar + + {{ item }} + + } + + + + + +``` diff --git a/static/usage/v9/fab/before-content/angular/example_component_ts.md b/static/usage/v9/fab/before-content/angular/example_component_ts.md new file mode 100644 index 00000000000..c2f91ade8f0 --- /dev/null +++ b/static/usage/v9/fab/before-content/angular/example_component_ts.md @@ -0,0 +1,67 @@ +```tsx +import { Component, OnInit } from '@angular/core'; +import { + InfiniteScrollCustomEvent, + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, + ], +}) +export class ExampleComponent implements OnInit { + items: string[] = []; + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add }); + } + + ngOnInit() { + this.generateItems(); + } + + private generateItems() { + const count = this.items.length + 1; + for (let i = 0; i < 50; i++) { + this.items.push(`Item ${count + i}`); + } + } + + onIonInfinite(event: InfiniteScrollCustomEvent) { + this.generateItems(); + setTimeout(() => { + event.target.complete(); + }, 500); + } +} +``` diff --git a/static/usage/v9/fab/before-content/demo.html b/static/usage/v9/fab/before-content/demo.html new file mode 100644 index 00000000000..e0e9b8254a0 --- /dev/null +++ b/static/usage/v9/fab/before-content/demo.html @@ -0,0 +1,66 @@ + + + + + + Fab + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/fab/before-content/index.md b/static/usage/v9/fab/before-content/index.md new file mode 100644 index 00000000000..a64cbbea92b --- /dev/null +++ b/static/usage/v9/fab/before-content/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/fab/before-content/javascript.md b/static/usage/v9/fab/before-content/javascript/index_html.md similarity index 100% rename from static/usage/v8/fab/before-content/javascript.md rename to static/usage/v9/fab/before-content/javascript/index_html.md diff --git a/static/usage/v9/fab/before-content/javascript/index_ts.md b/static/usage/v9/fab/before-content/javascript/index_ts.md new file mode 100644 index 00000000000..f27ef471644 --- /dev/null +++ b/static/usage/v9/fab/before-content/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "add" key. + * Alternatively, developers can do: + * addIcons({ 'add': add }); + */ +addIcons({ add }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/before-content/react.md b/static/usage/v9/fab/before-content/react.md new file mode 100644 index 00000000000..15ef68be93e --- /dev/null +++ b/static/usage/v9/fab/before-content/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonAvatar, + IonContent, + IonFab, + IonFabButton, + IonIcon, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + const generateItems = () => { + const newItems = []; + for (let i = 0; i < 50; i++) { + newItems.push(`Item ${1 + items.length + i}`); + } + setItems([...items, ...newItems]); + }; + + useEffect(() => { + generateItems(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + + + + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + { + generateItems(); + setTimeout(() => event.target.complete(), 500); + }} + > + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/before-content/vue.md b/static/usage/v9/fab/before-content/vue.md new file mode 100644 index 00000000000..901821d6bf6 --- /dev/null +++ b/static/usage/v9/fab/before-content/vue.md @@ -0,0 +1,56 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/button-sizing/angular/example_component_html.md b/static/usage/v9/fab/button-sizing/angular/example_component_html.md new file mode 100644 index 00000000000..31bd1874625 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/button-sizing/angular/example_component_ts.md b/static/usage/v9/fab/button-sizing/angular/example_component_ts.md new file mode 100644 index 00000000000..1e9729317a9 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, colorPalette, document, globe }); + } +} +``` diff --git a/static/usage/v9/fab/button-sizing/demo.html b/static/usage/v9/fab/button-sizing/demo.html new file mode 100644 index 00000000000..9d3cc27c02f --- /dev/null +++ b/static/usage/v9/fab/button-sizing/demo.html @@ -0,0 +1,37 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/fab/button-sizing/index.md b/static/usage/v9/fab/button-sizing/index.md new file mode 100644 index 00000000000..19a1471543b --- /dev/null +++ b/static/usage/v9/fab/button-sizing/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/button-sizing/javascript/index_html.md b/static/usage/v9/fab/button-sizing/javascript/index_html.md new file mode 100644 index 00000000000..31bd1874625 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/javascript/index_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/button-sizing/javascript/index_ts.md b/static/usage/v9/fab/button-sizing/javascript/index_ts.md new file mode 100644 index 00000000000..3f824e83770 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'color-palette': colorPalette, 'document': document, 'globe': globe }); + */ +addIcons({ add, colorPalette, document, globe }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/button-sizing/react.md b/static/usage/v9/fab/button-sizing/react.md new file mode 100644 index 00000000000..c6837284e08 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/button-sizing/vue.md b/static/usage/v9/fab/button-sizing/vue.md new file mode 100644 index 00000000000..f27ad915781 --- /dev/null +++ b/static/usage/v9/fab/button-sizing/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/list-side/angular/example_component_html.md b/static/usage/v9/fab/list-side/angular/example_component_html.md new file mode 100644 index 00000000000..17f7d1818c0 --- /dev/null +++ b/static/usage/v9/fab/list-side/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/list-side/angular/example_component_ts.md b/static/usage/v9/fab/list-side/angular/example_component_ts.md new file mode 100644 index 00000000000..14144546aba --- /dev/null +++ b/static/usage/v9/fab/list-side/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, chevronBack, chevronDown, chevronForward, chevronUp }); + } +} +``` diff --git a/static/usage/v9/fab/list-side/demo.html b/static/usage/v9/fab/list-side/demo.html new file mode 100644 index 00000000000..9d3ceae1059 --- /dev/null +++ b/static/usage/v9/fab/list-side/demo.html @@ -0,0 +1,52 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/fab/list-side/index.md b/static/usage/v9/fab/list-side/index.md new file mode 100644 index 00000000000..51cdcd64aa5 --- /dev/null +++ b/static/usage/v9/fab/list-side/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/list-side/javascript/index_html.md b/static/usage/v9/fab/list-side/javascript/index_html.md new file mode 100644 index 00000000000..17f7d1818c0 --- /dev/null +++ b/static/usage/v9/fab/list-side/javascript/index_html.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/list-side/javascript/index_ts.md b/static/usage/v9/fab/list-side/javascript/index_ts.md new file mode 100644 index 00000000000..95ee6136edd --- /dev/null +++ b/static/usage/v9/fab/list-side/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'chevron-back': chevronBack, 'chevron-down': chevronDown, 'chevron-forward': chevronForward, 'chevron-up': chevronUp }); + */ +addIcons({ add, chevronBack, chevronDown, chevronForward, chevronUp }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/list-side/react.md b/static/usage/v9/fab/list-side/react.md new file mode 100644 index 00000000000..b461d8c94eb --- /dev/null +++ b/static/usage/v9/fab/list-side/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/list-side/vue.md b/static/usage/v9/fab/list-side/vue.md new file mode 100644 index 00000000000..80255d2dc95 --- /dev/null +++ b/static/usage/v9/fab/list-side/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/positioning/angular/example_component_html.md b/static/usage/v9/fab/positioning/angular/example_component_html.md new file mode 100644 index 00000000000..7bca2f10d2f --- /dev/null +++ b/static/usage/v9/fab/positioning/angular/example_component_html.md @@ -0,0 +1,59 @@ +```html + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/positioning/angular/example_component_ts.md b/static/usage/v9/fab/positioning/angular/example_component_ts.md new file mode 100644 index 00000000000..01d2a415d31 --- /dev/null +++ b/static/usage/v9/fab/positioning/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { + chevronDownCircle, + chevronForwardCircle, + chevronUpCircle, + colorPalette, + document, + globe, +} from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe }); + } +} +``` diff --git a/static/usage/v9/fab/positioning/demo.html b/static/usage/v9/fab/positioning/demo.html new file mode 100644 index 00000000000..46de89f2f22 --- /dev/null +++ b/static/usage/v9/fab/positioning/demo.html @@ -0,0 +1,74 @@ + + + + + + Fab + + + + + + + + + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/fab/positioning/index.md b/static/usage/v9/fab/positioning/index.md new file mode 100644 index 00000000000..7aada7258cc --- /dev/null +++ b/static/usage/v9/fab/positioning/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/positioning/javascript/index_html.md b/static/usage/v9/fab/positioning/javascript/index_html.md new file mode 100644 index 00000000000..d9d93856bcd --- /dev/null +++ b/static/usage/v9/fab/positioning/javascript/index_html.md @@ -0,0 +1,59 @@ +```html + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/positioning/javascript/index_ts.md b/static/usage/v9/fab/positioning/javascript/index_ts.md new file mode 100644 index 00000000000..9e88b66339a --- /dev/null +++ b/static/usage/v9/fab/positioning/javascript/index_ts.md @@ -0,0 +1,54 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { + chevronDownCircle, + chevronForwardCircle, + chevronUpCircle, + colorPalette, + document, + globe, +} from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'chevron-down-circle': chevronDownCircle, 'chevron-forward-circle': chevronForwardCircle, + * 'chevron-up-circle': chevronUpCircle, 'color-palette': colorPalette, 'document': document, 'globe': globe }); + */ +addIcons({ chevronDownCircle, chevronForwardCircle, chevronUpCircle, colorPalette, document, globe }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/positioning/react.md b/static/usage/v9/fab/positioning/react.md new file mode 100644 index 00000000000..95253561d9d --- /dev/null +++ b/static/usage/v9/fab/positioning/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFab, IonFabButton, IonFabList, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/react'; +import { + chevronDownCircle, + chevronForwardCircle, + chevronUpCircle, + colorPalette, + document, + globe, +} from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Fab Buttons + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/positioning/vue.md b/static/usage/v9/fab/positioning/vue.md new file mode 100644 index 00000000000..ed3a23c9cbb --- /dev/null +++ b/static/usage/v9/fab/positioning/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/safe-area/angular/example_component_css.md b/static/usage/v9/fab/safe-area/angular/example_component_css.md new file mode 100644 index 00000000000..a19373c3cc5 --- /dev/null +++ b/static/usage/v9/fab/safe-area/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-fab { + margin-top: var(--ion-safe-area-top, 0); + margin-bottom: var(--ion-safe-area-bottom, 0); +} +``` diff --git a/static/usage/v9/fab/safe-area/angular/example_component_html.md b/static/usage/v9/fab/safe-area/angular/example_component_html.md new file mode 100644 index 00000000000..3ba464d7f58 --- /dev/null +++ b/static/usage/v9/fab/safe-area/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/fab/safe-area/angular/example_component_ts.md b/static/usage/v9/fab/safe-area/angular/example_component_ts.md new file mode 100644 index 00000000000..fd1573aa47b --- /dev/null +++ b/static/usage/v9/fab/safe-area/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add }); + } +} +``` diff --git a/static/usage/v9/fab/safe-area/angular/global_css.md b/static/usage/v9/fab/safe-area/angular/global_css.md new file mode 100644 index 00000000000..d1b434fa246 --- /dev/null +++ b/static/usage/v9/fab/safe-area/angular/global_css.md @@ -0,0 +1,10 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; +} +``` diff --git a/static/usage/v9/fab/safe-area/demo.html b/static/usage/v9/fab/safe-area/demo.html new file mode 100644 index 00000000000..45e4523bd77 --- /dev/null +++ b/static/usage/v9/fab/safe-area/demo.html @@ -0,0 +1,28 @@ + + + + + + Fab + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/fab/safe-area/index.md b/static/usage/v9/fab/safe-area/index.md new file mode 100644 index 00000000000..5c44bc2fb6b --- /dev/null +++ b/static/usage/v9/fab/safe-area/index.md @@ -0,0 +1,43 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/fab/safe-area/javascript/index_html.md b/static/usage/v9/fab/safe-area/javascript/index_html.md new file mode 100644 index 00000000000..4585b8d545c --- /dev/null +++ b/static/usage/v9/fab/safe-area/javascript/index_html.md @@ -0,0 +1,23 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/fab/safe-area/javascript/index_ts.md b/static/usage/v9/fab/safe-area/javascript/index_ts.md new file mode 100644 index 00000000000..9fe4aea60f5 --- /dev/null +++ b/static/usage/v9/fab/safe-area/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to an "add" key. + * Alternatively, developers can do: + * addIcons({ 'add': add }); + */ +addIcons({ add }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/safe-area/react/main_css.md b/static/usage/v9/fab/safe-area/react/main_css.md new file mode 100644 index 00000000000..ecbcce54651 --- /dev/null +++ b/static/usage/v9/fab/safe-area/react/main_css.md @@ -0,0 +1,15 @@ +```css +:root { + /** + * Setting the variables for DEMO purposes only. + * Values will be set automatically when building an iOS or Android app. + */ + --ion-safe-area-top: 20px; + --ion-safe-area-bottom: 20px; +} + +ion-fab { + margin-top: var(--ion-safe-area-top, 0); + margin-bottom: var(--ion-safe-area-bottom, 0); +} +``` diff --git a/static/usage/v9/fab/safe-area/react/main_tsx.md b/static/usage/v9/fab/safe-area/react/main_tsx.md new file mode 100644 index 00000000000..d5a790048e7 --- /dev/null +++ b/static/usage/v9/fab/safe-area/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonIcon } from '@ionic/react'; +import { add } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/safe-area/vue.md b/static/usage/v9/fab/safe-area/vue.md new file mode 100644 index 00000000000..bccc14b5c8f --- /dev/null +++ b/static/usage/v9/fab/safe-area/vue.md @@ -0,0 +1,32 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/colors/angular/example_component_html.md b/static/usage/v9/fab/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..66d4db84a0f --- /dev/null +++ b/static/usage/v9/fab/theming/colors/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/colors/angular/example_component_ts.md b/static/usage/v9/fab/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..14144546aba --- /dev/null +++ b/static/usage/v9/fab/theming/colors/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, chevronBack, chevronDown, chevronForward, chevronUp }); + } +} +``` diff --git a/static/usage/v9/fab/theming/colors/demo.html b/static/usage/v9/fab/theming/colors/demo.html new file mode 100644 index 00000000000..27b962188e8 --- /dev/null +++ b/static/usage/v9/fab/theming/colors/demo.html @@ -0,0 +1,52 @@ + + + + + + Fab + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/fab/theming/colors/index.md b/static/usage/v9/fab/theming/colors/index.md new file mode 100644 index 00000000000..cf9ba1c6404 --- /dev/null +++ b/static/usage/v9/fab/theming/colors/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/theming/colors/javascript/index_html.md b/static/usage/v9/fab/theming/colors/javascript/index_html.md new file mode 100644 index 00000000000..66d4db84a0f --- /dev/null +++ b/static/usage/v9/fab/theming/colors/javascript/index_html.md @@ -0,0 +1,33 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/colors/javascript/index_ts.md b/static/usage/v9/fab/theming/colors/javascript/index_ts.md new file mode 100644 index 00000000000..8c3a3fc84cb --- /dev/null +++ b/static/usage/v9/fab/theming/colors/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'chevron-back': chevronBack, 'chevron-down': chevronDown, 'chevron-forward': chevronForward, + * 'chevron-up': chevronUp }); + */ +addIcons({ add, chevronBack, chevronDown, chevronForward, chevronUp }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/theming/colors/react.md b/static/usage/v9/fab/theming/colors/react.md new file mode 100644 index 00000000000..c600aaca898 --- /dev/null +++ b/static/usage/v9/fab/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, chevronBack, chevronDown, chevronForward, chevronUp } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/theming/colors/vue.md b/static/usage/v9/fab/theming/colors/vue.md new file mode 100644 index 00000000000..e90266e1c19 --- /dev/null +++ b/static/usage/v9/fab/theming/colors/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_css.md b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_css.md new file mode 100644 index 00000000000..ce1d9d06816 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-fab-button { + --background: #b7f399; + --background-activated: #87d361; + --background-hover: #a3e681; + --border-radius: 15px; + --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --color: black; +} +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_html.md b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4db1e796e3a --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_ts.md b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..1e9729317a9 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, colorPalette, document, globe }); + } +} +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/demo.html b/static/usage/v9/fab/theming/css-custom-properties/demo.html new file mode 100644 index 00000000000..2053586e290 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/demo.html @@ -0,0 +1,48 @@ + + + + + + Fab + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/fab/theming/css-custom-properties/index.md b/static/usage/v9/fab/theming/css-custom-properties/index.md new file mode 100644 index 00000000000..8138ee6a52b --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/index.md @@ -0,0 +1,40 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/theming/css-custom-properties/javascript/index_html.md b/static/usage/v9/fab/theming/css-custom-properties/javascript/index_html.md new file mode 100644 index 00000000000..55df4e255bd --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/javascript/index_html.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/javascript/index_ts.md b/static/usage/v9/fab/theming/css-custom-properties/javascript/index_ts.md new file mode 100644 index 00000000000..3f824e83770 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'color-palette': colorPalette, 'document': document, 'globe': globe }); + */ +addIcons({ add, colorPalette, document, globe }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/react/main_css.md b/static/usage/v9/fab/theming/css-custom-properties/react/main_css.md new file mode 100644 index 00000000000..ce1d9d06816 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/react/main_css.md @@ -0,0 +1,10 @@ +```css +ion-fab-button { + --background: #b7f399; + --background-activated: #87d361; + --background-hover: #a3e681; + --border-radius: 15px; + --box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + --color: black; +} +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/react/main_tsx.md b/static/usage/v9/fab/theming/css-custom-properties/react/main_tsx.md new file mode 100644 index 00000000000..8a1371c77ec --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/react/main_tsx.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/theming/css-custom-properties/vue.md b/static/usage/v9/fab/theming/css-custom-properties/vue.md new file mode 100644 index 00000000000..e600c1550b8 --- /dev/null +++ b/static/usage/v9/fab/theming/css-custom-properties/vue.md @@ -0,0 +1,36 @@ +```html + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..4bb8b96988c --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-fab-button::part(native) { + background-color: #b7f399; + border-radius: 15px; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + color: black; +} + +ion-fab-button::part(native):hover::after { + background-color: #a3e681; +} + +ion-fab-button::part(native):active::after { + background-color: #87d361; +} +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4db1e796e3a --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..1e9729317a9 --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, colorPalette, document, globe }); + } +} +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/demo.html b/static/usage/v9/fab/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..50b93d2e0d9 --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/demo.html @@ -0,0 +1,54 @@ + + + + + + Fab + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/fab/theming/css-shadow-parts/index.md b/static/usage/v9/fab/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..b31c1015404 --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/index.md @@ -0,0 +1,40 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/fab/theming/css-shadow-parts/javascript.md b/static/usage/v9/fab/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..19c1441fe2f --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_html.md b/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_html.md new file mode 100644 index 00000000000..19c1441fe2f --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_html.md @@ -0,0 +1,35 @@ +```html + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_ts.md b/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_ts.md new file mode 100644 index 00000000000..3f824e83770 --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'color-palette': colorPalette, 'document': document, 'globe': globe }); + */ +addIcons({ add, colorPalette, document, globe }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/fab/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..4bb8b96988c --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-fab-button::part(native) { + background-color: #b7f399; + border-radius: 15px; + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15); + color: black; +} + +ion-fab-button::part(native):hover::after { + background-color: #a3e681; +} + +ion-fab-button::part(native):active::after { + background-color: #87d361; +} +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/fab/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..8a1371c77ec --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/theming/css-shadow-parts/vue.md b/static/usage/v9/fab/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..972bf430cc9 --- /dev/null +++ b/static/usage/v9/fab/theming/css-shadow-parts/vue.md @@ -0,0 +1,42 @@ +```html + + + + + +``` diff --git a/static/usage/v9/footer/basic/angular/example_component_html.md b/static/usage/v9/footer/basic/angular/example_component_html.md new file mode 100644 index 00000000000..b0506781582 --- /dev/null +++ b/static/usage/v9/footer/basic/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/basic/angular/example_component_ts.md b/static/usage/v9/footer/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7198fd986ce --- /dev/null +++ b/static/usage/v9/footer/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/footer/basic/demo.html b/static/usage/v9/footer/basic/demo.html new file mode 100644 index 00000000000..0a866dbe866 --- /dev/null +++ b/static/usage/v9/footer/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Footer + + + + + + + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v9/footer/basic/index.md b/static/usage/v9/footer/basic/index.md new file mode 100644 index 00000000000..47f30bb0e71 --- /dev/null +++ b/static/usage/v9/footer/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/footer/basic/javascript.md b/static/usage/v9/footer/basic/javascript.md new file mode 100644 index 00000000000..b0506781582 --- /dev/null +++ b/static/usage/v9/footer/basic/javascript.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/basic/react.md b/static/usage/v9/footer/basic/react.md new file mode 100644 index 00000000000..6d7119f0f3f --- /dev/null +++ b/static/usage/v9/footer/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Content

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/footer/basic/vue.md b/static/usage/v9/footer/basic/vue.md new file mode 100644 index 00000000000..b37a0a96dde --- /dev/null +++ b/static/usage/v9/footer/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/footer/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/footer/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/footer/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/footer/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..a0429f5e23b --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,69 @@ +```html + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/footer/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..7198fd986ce --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/footer/custom-scroll-target/demo.html b/static/usage/v9/footer/custom-scroll-target/demo.html new file mode 100644 index 00000000000..55ec7b1666e --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/demo.html @@ -0,0 +1,98 @@ + + + + + + Footer + + + + + + + + + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + Footer + + + + + diff --git a/static/usage/v9/footer/custom-scroll-target/index.md b/static/usage/v9/footer/custom-scroll-target/index.md new file mode 100644 index 00000000000..d2b44f55cb4 --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/footer/custom-scroll-target/javascript.md b/static/usage/v9/footer/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..411ccb1df59 --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/javascript.md @@ -0,0 +1,81 @@ +```html + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ + + + Footer + + + + +``` diff --git a/static/usage/v9/footer/custom-scroll-target/react/main_css.md b/static/usage/v9/footer/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/react/main_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/footer/custom-scroll-target/react/main_tsx.md b/static/usage/v9/footer/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..9066d4c4a91 --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/footer/custom-scroll-target/vue.md b/static/usage/v9/footer/custom-scroll-target/vue.md new file mode 100644 index 00000000000..9aa360476fd --- /dev/null +++ b/static/usage/v9/footer/custom-scroll-target/vue.md @@ -0,0 +1,87 @@ +```html + + + + + +``` diff --git a/static/usage/v9/footer/fade/angular/example_component_html.md b/static/usage/v9/footer/fade/angular/example_component_html.md new file mode 100644 index 00000000000..f600e4511df --- /dev/null +++ b/static/usage/v9/footer/fade/angular/example_component_html.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/fade/angular/example_component_ts.md b/static/usage/v9/footer/fade/angular/example_component_ts.md new file mode 100644 index 00000000000..7198fd986ce --- /dev/null +++ b/static/usage/v9/footer/fade/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/footer/fade/demo.html b/static/usage/v9/footer/fade/demo.html new file mode 100644 index 00000000000..96bebd85765 --- /dev/null +++ b/static/usage/v9/footer/fade/demo.html @@ -0,0 +1,82 @@ + + + + + + Footer + + + + + + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + + diff --git a/static/usage/v9/footer/fade/index.md b/static/usage/v9/footer/fade/index.md new file mode 100644 index 00000000000..df4fadab154 --- /dev/null +++ b/static/usage/v9/footer/fade/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/footer/fade/javascript.md b/static/usage/v9/footer/fade/javascript.md new file mode 100644 index 00000000000..f600e4511df --- /dev/null +++ b/static/usage/v9/footer/fade/javascript.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/fade/react.md b/static/usage/v9/footer/fade/react.md new file mode 100644 index 00000000000..d7142f57ecd --- /dev/null +++ b/static/usage/v9/footer/fade/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/footer/fade/vue.md b/static/usage/v9/footer/fade/vue.md new file mode 100644 index 00000000000..b08b461fb2e --- /dev/null +++ b/static/usage/v9/footer/fade/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v9/footer/no-border/angular/example_component_html.md b/static/usage/v9/footer/no-border/angular/example_component_html.md new file mode 100644 index 00000000000..6b31b329d96 --- /dev/null +++ b/static/usage/v9/footer/no-border/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/no-border/angular/example_component_ts.md b/static/usage/v9/footer/no-border/angular/example_component_ts.md new file mode 100644 index 00000000000..7198fd986ce --- /dev/null +++ b/static/usage/v9/footer/no-border/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/footer/no-border/demo.html b/static/usage/v9/footer/no-border/demo.html new file mode 100644 index 00000000000..f5ae5a11323 --- /dev/null +++ b/static/usage/v9/footer/no-border/demo.html @@ -0,0 +1,25 @@ + + + + + + Footer + + + + + + + + + +

Content

+ + + + Footer + + + + + diff --git a/static/usage/v9/footer/no-border/index.md b/static/usage/v9/footer/no-border/index.md new file mode 100644 index 00000000000..3305c223421 --- /dev/null +++ b/static/usage/v9/footer/no-border/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/footer/no-border/javascript.md b/static/usage/v9/footer/no-border/javascript.md new file mode 100644 index 00000000000..6b31b329d96 --- /dev/null +++ b/static/usage/v9/footer/no-border/javascript.md @@ -0,0 +1,10 @@ +```html + +

Content

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/no-border/react.md b/static/usage/v9/footer/no-border/react.md new file mode 100644 index 00000000000..2c58e513063 --- /dev/null +++ b/static/usage/v9/footer/no-border/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Content

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/footer/no-border/vue.md b/static/usage/v9/footer/no-border/vue.md new file mode 100644 index 00000000000..53a4aa171a7 --- /dev/null +++ b/static/usage/v9/footer/no-border/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/footer/translucent/angular/example_component_html.md b/static/usage/v9/footer/translucent/angular/example_component_html.md new file mode 100644 index 00000000000..a58f761cc8c --- /dev/null +++ b/static/usage/v9/footer/translucent/angular/example_component_html.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/translucent/angular/example_component_ts.md b/static/usage/v9/footer/translucent/angular/example_component_ts.md new file mode 100644 index 00000000000..7198fd986ce --- /dev/null +++ b/static/usage/v9/footer/translucent/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFooter, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/footer/translucent/demo.html b/static/usage/v9/footer/translucent/demo.html new file mode 100644 index 00000000000..8c1d320f28d --- /dev/null +++ b/static/usage/v9/footer/translucent/demo.html @@ -0,0 +1,82 @@ + + + + + + Footer + + + + + + + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + + diff --git a/static/usage/v9/footer/translucent/index.md b/static/usage/v9/footer/translucent/index.md new file mode 100644 index 00000000000..f2e7eb71141 --- /dev/null +++ b/static/usage/v9/footer/translucent/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/footer/translucent/javascript.md b/static/usage/v9/footer/translucent/javascript.md new file mode 100644 index 00000000000..bdff28e0dca --- /dev/null +++ b/static/usage/v9/footer/translucent/javascript.md @@ -0,0 +1,67 @@ +```html + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + +``` diff --git a/static/usage/v9/footer/translucent/react.md b/static/usage/v9/footer/translucent/react.md new file mode 100644 index 00000000000..ab7ff2221e0 --- /dev/null +++ b/static/usage/v9/footer/translucent/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/footer/translucent/vue.md b/static/usage/v9/footer/translucent/vue.md new file mode 100644 index 00000000000..669bcd31de9 --- /dev/null +++ b/static/usage/v9/footer/translucent/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v9/gestures/basic/angular/example_component_css.md b/static/usage/v9/gestures/basic/angular/example_component_css.md new file mode 100644 index 00000000000..4532a98eac4 --- /dev/null +++ b/static/usage/v9/gestures/basic/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + position: absolute; + + left: 0; + right: 0; + + user-select: none; +} + +ion-card.active { + box-shadow: var(--ion-color-warning) 0px 4px 16px; +} +``` diff --git a/static/usage/v9/gestures/basic/angular/example_component_html.md b/static/usage/v9/gestures/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e8a575523d6 --- /dev/null +++ b/static/usage/v9/gestures/basic/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + +``` diff --git a/static/usage/v9/gestures/basic/angular/example_component_ts.md b/static/usage/v9/gestures/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..f9aee1ecf5e --- /dev/null +++ b/static/usage/v9/gestures/basic/angular/example_component_ts.md @@ -0,0 +1,51 @@ +```ts +import { ChangeDetectorRef, Component, ElementRef, ViewChild } from '@angular/core'; +import { GestureController, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle } from '@ionic/angular'; +import type { GestureDetail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCard, IonCardContent, IonCardHeader, IonCardSubtitle], +}) +export class ExampleComponent { + @ViewChild(IonCard, { read: ElementRef }) card!: ElementRef; + @ViewChild('debug', { read: ElementRef }) debug!: ElementRef; + + isCardActive = false; + + constructor(private el: ElementRef, private gestureCtrl: GestureController, private cdRef: ChangeDetectorRef) {} + + ngAfterViewInit() { + const gesture = this.gestureCtrl.create({ + el: this.el.nativeElement.closest('ion-content'), + onStart: () => this.onStart(), + onMove: (detail) => this.onMove(detail), + onEnd: () => this.onEnd(), + gestureName: 'example', + }); + + gesture.enable(); + } + + private onStart() { + this.isCardActive = true; + this.cdRef.detectChanges(); + } + + private onMove(detail: GestureDetail) { + const { type, currentX, deltaX, velocityX } = detail; + this.debug.nativeElement.innerHTML = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + + private onEnd() { + this.isCardActive = false; + this.cdRef.detectChanges(); + } +} +``` diff --git a/static/usage/v9/gestures/basic/demo.html b/static/usage/v9/gestures/basic/demo.html new file mode 100644 index 00000000000..83c70296705 --- /dev/null +++ b/static/usage/v9/gestures/basic/demo.html @@ -0,0 +1,81 @@ + + + + + + Gesture + + + + + + + + + + +
+ + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + +
+ + diff --git a/static/usage/v9/gestures/basic/index.md b/static/usage/v9/gestures/basic/index.md new file mode 100644 index 00000000000..5afc160fddd --- /dev/null +++ b/static/usage/v9/gestures/basic/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/gestures/basic/javascript.md b/static/usage/v9/gestures/basic/javascript.md new file mode 100644 index 00000000000..71153daeec5 --- /dev/null +++ b/static/usage/v9/gestures/basic/javascript.md @@ -0,0 +1,58 @@ +```html + + + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + + +``` diff --git a/static/usage/v9/gestures/basic/react/main_css.md b/static/usage/v9/gestures/basic/react/main_css.md new file mode 100644 index 00000000000..4532a98eac4 --- /dev/null +++ b/static/usage/v9/gestures/basic/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-card { + position: absolute; + + left: 0; + right: 0; + + user-select: none; +} + +ion-card.active { + box-shadow: var(--ion-color-warning) 0px 4px 16px; +} +``` diff --git a/static/usage/v9/gestures/basic/react/main_tsx.md b/static/usage/v9/gestures/basic/react/main_tsx.md new file mode 100644 index 00000000000..2004c3b9066 --- /dev/null +++ b/static/usage/v9/gestures/basic/react/main_tsx.md @@ -0,0 +1,62 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardHeader, IonCardSubtitle, IonCardContent, createGesture } from '@ionic/react'; +import type { GestureDetail } from '@ionic/react'; + +import './main.css'; + +function Example() { + const card = useRef(null); + const debug = useRef(null); + + useEffect(() => { + if (card.current) { + const target = card.current.closest('ion-content'); + + if (target) { + const gesture = createGesture({ + el: target, + onStart: () => onStart(), + onMove: (detail) => onMove(detail), + onEnd: () => onEnd(), + gestureName: 'example', + }); + + gesture.enable(); + } + } + }, [card]); + + const onStart = () => { + card.current?.classList.add('active'); + }; + + const onMove = (detail: GestureDetail) => { + const { type, currentX, deltaX, velocityX } = detail; + + if (debug.current) { + debug.current.innerHTML = ` +
Type: ${type}
+
Current X: ${currentX}
+
Delta X: ${deltaX}
+
Velocity X: ${velocityX}
`; + } + }; + + const onEnd = () => { + card.current?.classList.remove('active'); + }; + + return ( + + + Pan the Screen + + +

Gesture information will display after interaction.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/gestures/basic/vue.md b/static/usage/v9/gestures/basic/vue.md new file mode 100644 index 00000000000..0ab757dcbea --- /dev/null +++ b/static/usage/v9/gestures/basic/vue.md @@ -0,0 +1,67 @@ +```html + + + + +``` diff --git a/static/usage/v9/gestures/double-click/angular/example_component_css.md b/static/usage/v9/gestures/double-click/angular/example_component_css.md new file mode 100644 index 00000000000..043d289ab58 --- /dev/null +++ b/static/usage/v9/gestures/double-click/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-card { + transform: translateX(0); + user-select: none; +} +``` diff --git a/static/usage/v9/gestures/double-click/angular/example_component_html.md b/static/usage/v9/gestures/double-click/angular/example_component_html.md new file mode 100644 index 00000000000..b0b24e75d67 --- /dev/null +++ b/static/usage/v9/gestures/double-click/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Double click me to move the card. + +``` diff --git a/static/usage/v9/gestures/double-click/angular/example_component_ts.md b/static/usage/v9/gestures/double-click/angular/example_component_ts.md new file mode 100644 index 00000000000..34e2ac44a71 --- /dev/null +++ b/static/usage/v9/gestures/double-click/angular/example_component_ts.md @@ -0,0 +1,52 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { GestureController, IonCard, IonCardContent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonCard, IonCardContent], +}) +export class ExampleComponent { + @ViewChild('card', { read: ElementRef }) card!: ElementRef; + + private currentOffset: number = 0; + private lastOnStart: number = 0; + private DOUBLE_CLICK_THRESHOLD: number = 500; + + constructor(private el: ElementRef, private gestureCtrl: GestureController) {} + + ngAfterViewInit() { + const gesture = this.gestureCtrl.create({ + el: this.card.nativeElement, + threshold: 0, + onStart: () => this.onStart(), + gestureName: 'double-click', + }); + + gesture.enable(); + } + + private onStart() { + const now = Date.now(); + + if (Math.abs(now - this.lastOnStart) <= this.DOUBLE_CLICK_THRESHOLD) { + this.card.nativeElement.style.setProperty('transform', this.getNewTransform()); + this.lastOnStart = 0; + } else { + this.lastOnStart = now; + } + } + + private getNewTransform() { + if (this.currentOffset >= 100) { + this.currentOffset = 0; + } else { + this.currentOffset += 20; + } + + return `translateX(${this.currentOffset}px)`; + } +} +``` diff --git a/static/usage/v9/gestures/double-click/demo.html b/static/usage/v9/gestures/double-click/demo.html new file mode 100644 index 00000000000..9ce6603cef5 --- /dev/null +++ b/static/usage/v9/gestures/double-click/demo.html @@ -0,0 +1,67 @@ + + + + + + Double-Click Gestures + + + + + + + + + + + + + + Double click me to move the card. + + + + diff --git a/static/usage/v9/gestures/double-click/index.md b/static/usage/v9/gestures/double-click/index.md new file mode 100644 index 00000000000..96167c1612a --- /dev/null +++ b/static/usage/v9/gestures/double-click/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/gestures/double-click/javascript.md b/static/usage/v9/gestures/double-click/javascript.md new file mode 100644 index 00000000000..a45b7255bbe --- /dev/null +++ b/static/usage/v9/gestures/double-click/javascript.md @@ -0,0 +1,49 @@ +```html + + Double click me to move the card. + + + + + +``` diff --git a/static/usage/v9/gestures/double-click/react/main_css.md b/static/usage/v9/gestures/double-click/react/main_css.md new file mode 100644 index 00000000000..043d289ab58 --- /dev/null +++ b/static/usage/v9/gestures/double-click/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-card { + transform: translateX(0); + user-select: none; +} +``` diff --git a/static/usage/v9/gestures/double-click/react/main_tsx.md b/static/usage/v9/gestures/double-click/react/main_tsx.md new file mode 100644 index 00000000000..4e9e90cf243 --- /dev/null +++ b/static/usage/v9/gestures/double-click/react/main_tsx.md @@ -0,0 +1,57 @@ +```tsx +import React, { useEffect, useRef } from 'react'; +import { IonCard, IonCardContent, createGesture } from '@ionic/react'; + +import './main.css'; + +function Example() { + const DOUBLE_CLICK_THRESHOLD = 500; + const card = useRef(null); + + let lastOnStart = 0; + let currentOffset = 0; + + const getNewTransform = () => { + if (currentOffset >= 100) { + currentOffset = 0; + } else { + currentOffset += 20; + } + + return `translateX(${currentOffset}px)`; + }; + + const onStart = () => { + const now = Date.now(); + + if (Math.abs(now - lastOnStart) <= DOUBLE_CLICK_THRESHOLD) { + if (card.current) { + card.current.style.setProperty('transform', getNewTransform()); + lastOnStart = 0; + } + } else { + lastOnStart = now; + } + }; + + useEffect(() => { + if (card.current) { + const gesture = createGesture({ + el: card.current, + threshold: 0, + onStart, + gestureName: 'double-click', + }); + + gesture.enable(); + } + }); + + return ( + + Double click me to move the card. + + ); +} +export default Example; +``` diff --git a/static/usage/v9/gestures/double-click/vue.md b/static/usage/v9/gestures/double-click/vue.md new file mode 100644 index 00000000000..99886533328 --- /dev/null +++ b/static/usage/v9/gestures/double-click/vue.md @@ -0,0 +1,57 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/basic/angular/example_component_css.md b/static/usage/v9/grid/basic/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/basic/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/basic/angular/example_component_html.md b/static/usage/v9/grid/basic/angular/example_component_html.md new file mode 100644 index 00000000000..daa37c1e31f --- /dev/null +++ b/static/usage/v9/grid/basic/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +``` diff --git a/static/usage/v9/grid/basic/angular/example_component_ts.md b/static/usage/v9/grid/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/basic/demo.html b/static/usage/v9/grid/basic/demo.html new file mode 100644 index 00000000000..949f7cd5224 --- /dev/null +++ b/static/usage/v9/grid/basic/demo.html @@ -0,0 +1,75 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + +
+ + + + diff --git a/static/usage/v9/grid/basic/index.md b/static/usage/v9/grid/basic/index.md new file mode 100644 index 00000000000..759ddb8a46d --- /dev/null +++ b/static/usage/v9/grid/basic/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/basic/javascript.md b/static/usage/v9/grid/basic/javascript.md new file mode 100644 index 00000000000..53e0dd4f8c9 --- /dev/null +++ b/static/usage/v9/grid/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + + + +``` diff --git a/static/usage/v9/grid/basic/react/main_css.md b/static/usage/v9/grid/basic/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/basic/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/basic/react/main_tsx.md b/static/usage/v9/grid/basic/react/main_tsx.md new file mode 100644 index 00000000000..9fb9652e4ce --- /dev/null +++ b/static/usage/v9/grid/basic/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + 1 + 2 + 3 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + + 1 + 2 + 3 + 4 + 5 + 6 + 7 + 8 + 9 + 10 + 11 + 12 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/basic/vue.md b/static/usage/v9/grid/basic/vue.md new file mode 100644 index 00000000000..bf68e83e78b --- /dev/null +++ b/static/usage/v9/grid/basic/vue.md @@ -0,0 +1,52 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/customizing/column-number/angular/example_component_css.md b/static/usage/v9/grid/customizing/column-number/angular/example_component_css.md new file mode 100644 index 00000000000..ceadac1c05c --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-grid { + --ion-grid-columns: 6; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/column-number/angular/example_component_html.md b/static/usage/v9/grid/customizing/column-number/angular/example_component_html.md new file mode 100644 index 00000000000..6e9b744b161 --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html +Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +``` diff --git a/static/usage/v9/grid/customizing/column-number/angular/example_component_ts.md b/static/usage/v9/grid/customizing/column-number/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/customizing/column-number/demo.html b/static/usage/v9/grid/customizing/column-number/demo.html new file mode 100644 index 00000000000..0b95ae58454 --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/demo.html @@ -0,0 +1,51 @@ + + + + + + Grid + + + + + + + + + + + +
+ Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + +
+ + + + diff --git a/static/usage/v9/grid/customizing/column-number/index.md b/static/usage/v9/grid/customizing/column-number/index.md new file mode 100644 index 00000000000..ea0657217d1 --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/customizing/column-number/javascript.md b/static/usage/v9/grid/customizing/column-number/javascript.md new file mode 100644 index 00000000000..5c4c6edf166 --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/javascript.md @@ -0,0 +1,24 @@ +```html +Total number of columns is set to 6, column size is set to 1 + + + 1 + 2 + 3 + 4 + + + + +``` diff --git a/static/usage/v9/grid/customizing/column-number/react/main_css.md b/static/usage/v9/grid/customizing/column-number/react/main_css.md new file mode 100644 index 00000000000..ceadac1c05c --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-grid { + --ion-grid-columns: 6; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/column-number/react/main_tsx.md b/static/usage/v9/grid/customizing/column-number/react/main_tsx.md new file mode 100644 index 00000000000..23f618b020a --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Total number of columns is set to 6, column size is set to 1 + + + + 1 + 2 + 3 + 4 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/customizing/column-number/vue.md b/static/usage/v9/grid/customizing/column-number/vue.md new file mode 100644 index 00000000000..ed180c8e9fe --- /dev/null +++ b/static/usage/v9/grid/customizing/column-number/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/customizing/padding/angular/example_component_css.md b/static/usage/v9/grid/customizing/padding/angular/example_component_css.md new file mode 100644 index 00000000000..c7d165d3b75 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/angular/example_component_css.md @@ -0,0 +1,26 @@ +```css +ion-grid { + --ion-grid-padding: 20px; + + --ion-grid-padding-xs: 20px; + --ion-grid-padding-sm: 20px; + --ion-grid-padding-md: 20px; + --ion-grid-padding-lg: 20px; + --ion-grid-padding-xl: 20px; + + --ion-grid-column-padding: 30px; + + --ion-grid-column-padding-xs: 30px; + --ion-grid-column-padding-sm: 30px; + --ion-grid-column-padding-md: 30px; + --ion-grid-column-padding-lg: 30px; + --ion-grid-column-padding-xl: 30px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/padding/angular/example_component_html.md b/static/usage/v9/grid/customizing/padding/angular/example_component_html.md new file mode 100644 index 00000000000..74811052b30 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v9/grid/customizing/padding/angular/example_component_ts.md b/static/usage/v9/grid/customizing/padding/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/customizing/padding/demo.html b/static/usage/v9/grid/customizing/padding/demo.html new file mode 100644 index 00000000000..9640b210c58 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/demo.html @@ -0,0 +1,63 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v9/grid/customizing/padding/index.md b/static/usage/v9/grid/customizing/padding/index.md new file mode 100644 index 00000000000..9cf0aeb9402 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/customizing/padding/javascript.md b/static/usage/v9/grid/customizing/padding/javascript.md new file mode 100644 index 00000000000..fea0d256a72 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/javascript.md @@ -0,0 +1,36 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v9/grid/customizing/padding/react/main_css.md b/static/usage/v9/grid/customizing/padding/react/main_css.md new file mode 100644 index 00000000000..c7d165d3b75 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/react/main_css.md @@ -0,0 +1,26 @@ +```css +ion-grid { + --ion-grid-padding: 20px; + + --ion-grid-padding-xs: 20px; + --ion-grid-padding-sm: 20px; + --ion-grid-padding-md: 20px; + --ion-grid-padding-lg: 20px; + --ion-grid-padding-xl: 20px; + + --ion-grid-column-padding: 30px; + + --ion-grid-column-padding-xs: 30px; + --ion-grid-column-padding-sm: 30px; + --ion-grid-column-padding-md: 30px; + --ion-grid-column-padding-lg: 30px; + --ion-grid-column-padding-xl: 30px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/padding/react/main_tsx.md b/static/usage/v9/grid/customizing/padding/react/main_tsx.md new file mode 100644 index 00000000000..4faf0a3cac1 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/react/main_tsx.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + 1 + 2 + 3 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/customizing/padding/vue.md b/static/usage/v9/grid/customizing/padding/vue.md new file mode 100644 index 00000000000..9a4eca25097 --- /dev/null +++ b/static/usage/v9/grid/customizing/padding/vue.md @@ -0,0 +1,42 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/customizing/width/angular/example_component_css.md b/static/usage/v9/grid/customizing/width/angular/example_component_css.md new file mode 100644 index 00000000000..bbb8f04519a --- /dev/null +++ b/static/usage/v9/grid/customizing/width/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-grid { + --ion-grid-width: 50%; + + --ion-grid-width-xs: 50%; + --ion-grid-width-sm: 288px; + --ion-grid-width-md: 384px; + --ion-grid-width-lg: 480px; + --ion-grid-width-xl: 570px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/width/angular/example_component_html.md b/static/usage/v9/grid/customizing/width/angular/example_component_html.md new file mode 100644 index 00000000000..0688212c247 --- /dev/null +++ b/static/usage/v9/grid/customizing/width/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v9/grid/customizing/width/angular/example_component_ts.md b/static/usage/v9/grid/customizing/width/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/customizing/width/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/customizing/width/demo.html b/static/usage/v9/grid/customizing/width/demo.html new file mode 100644 index 00000000000..8eb7d3a4e12 --- /dev/null +++ b/static/usage/v9/grid/customizing/width/demo.html @@ -0,0 +1,54 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v9/grid/customizing/width/index.md b/static/usage/v9/grid/customizing/width/index.md new file mode 100644 index 00000000000..ce484ca76c6 --- /dev/null +++ b/static/usage/v9/grid/customizing/width/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/customizing/width/javascript.md b/static/usage/v9/grid/customizing/width/javascript.md new file mode 100644 index 00000000000..2ff36295b70 --- /dev/null +++ b/static/usage/v9/grid/customizing/width/javascript.md @@ -0,0 +1,28 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v9/grid/customizing/width/react/main_css.md b/static/usage/v9/grid/customizing/width/react/main_css.md new file mode 100644 index 00000000000..bbb8f04519a --- /dev/null +++ b/static/usage/v9/grid/customizing/width/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-grid { + --ion-grid-width: 50%; + + --ion-grid-width-xs: 50%; + --ion-grid-width-sm: 288px; + --ion-grid-width-md: 384px; + --ion-grid-width-lg: 480px; + --ion-grid-width-xl: 570px; +} + +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/customizing/width/react/main_tsx.md b/static/usage/v9/grid/customizing/width/react/main_tsx.md new file mode 100644 index 00000000000..73ccebd0606 --- /dev/null +++ b/static/usage/v9/grid/customizing/width/react/main_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + 1 + 2 + 3 + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/customizing/width/vue.md b/static/usage/v9/grid/customizing/width/vue.md new file mode 100644 index 00000000000..7b2fec8af9a --- /dev/null +++ b/static/usage/v9/grid/customizing/width/vue.md @@ -0,0 +1,34 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/fixed/angular/example_component_css.md b/static/usage/v9/grid/fixed/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/fixed/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/fixed/angular/example_component_html.md b/static/usage/v9/grid/fixed/angular/example_component_html.md new file mode 100644 index 00000000000..0688212c247 --- /dev/null +++ b/static/usage/v9/grid/fixed/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + 1 + 2 + 3 + + +``` diff --git a/static/usage/v9/grid/fixed/angular/example_component_ts.md b/static/usage/v9/grid/fixed/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/fixed/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/fixed/demo.html b/static/usage/v9/grid/fixed/demo.html new file mode 100644 index 00000000000..aac4c61db3b --- /dev/null +++ b/static/usage/v9/grid/fixed/demo.html @@ -0,0 +1,46 @@ + + + + + + Grid + + + + + + + + + + + +
+ + + 1 + 2 + 3 + + +
+ + + + diff --git a/static/usage/v9/grid/fixed/index.md b/static/usage/v9/grid/fixed/index.md new file mode 100644 index 00000000000..3afe8ba9e02 --- /dev/null +++ b/static/usage/v9/grid/fixed/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/fixed/javascript.md b/static/usage/v9/grid/fixed/javascript.md new file mode 100644 index 00000000000..5fa9672a8ab --- /dev/null +++ b/static/usage/v9/grid/fixed/javascript.md @@ -0,0 +1,18 @@ +```html + + + 1 + 2 + 3 + + + + +``` diff --git a/static/usage/v9/grid/fixed/react/main_css.md b/static/usage/v9/grid/fixed/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/fixed/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/fixed/react/main_tsx.md b/static/usage/v9/grid/fixed/react/main_tsx.md new file mode 100644 index 00000000000..73ccebd0606 --- /dev/null +++ b/static/usage/v9/grid/fixed/react/main_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + 1 + 2 + 3 + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/fixed/vue.md b/static/usage/v9/grid/fixed/vue.md new file mode 100644 index 00000000000..429e17de5a1 --- /dev/null +++ b/static/usage/v9/grid/fixed/vue.md @@ -0,0 +1,24 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/horizontal-alignment/angular/example_component_css.md b/static/usage/v9/grid/horizontal-alignment/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/horizontal-alignment/angular/example_component_html.md b/static/usage/v9/grid/horizontal-alignment/angular/example_component_html.md new file mode 100644 index 00000000000..1f7300dba04 --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html +Columns aligned at the start + + + 1 + 2 + + + +Columns aligned at the center + + + 1 + 2 + + + +Columns aligned at the end + + + 1 + 2 + + + +Columns aligned with space around + + + 1 + 2 + + + +Columns aligned with space between + + + 1 + 2 + + +``` diff --git a/static/usage/v9/grid/horizontal-alignment/angular/example_component_ts.md b/static/usage/v9/grid/horizontal-alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/horizontal-alignment/demo.html b/static/usage/v9/grid/horizontal-alignment/demo.html new file mode 100644 index 00000000000..e64afeff844 --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/demo.html @@ -0,0 +1,79 @@ + + + + + + Grid + + + + + + + + + + + +
+ Columns aligned at the start + + + 1 + 2 + + + + Columns aligned at the center + + + 1 + 2 + + + + Columns aligned at the end + + + 1 + 2 + + + + Columns aligned with space around + + + 1 + 2 + + + + Columns aligned with space between + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v9/grid/horizontal-alignment/index.md b/static/usage/v9/grid/horizontal-alignment/index.md new file mode 100644 index 00000000000..c2e9c94f40a --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/horizontal-alignment/javascript.md b/static/usage/v9/grid/horizontal-alignment/javascript.md new file mode 100644 index 00000000000..13c25523a4c --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/javascript.md @@ -0,0 +1,50 @@ +```html +Columns aligned at the start + + + 1 + 2 + + + +Columns aligned at the center + + + 1 + 2 + + + +Columns aligned at the end + + + 1 + 2 + + + +Columns aligned with space around + + + 1 + 2 + + + +Columns aligned with space between + + + 1 + 2 + + + + +``` diff --git a/static/usage/v9/grid/horizontal-alignment/react/main_css.md b/static/usage/v9/grid/horizontal-alignment/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/horizontal-alignment/react/main_tsx.md b/static/usage/v9/grid/horizontal-alignment/react/main_tsx.md new file mode 100644 index 00000000000..0ec66ddb95a --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/react/main_tsx.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Columns aligned at the start + + + 1 + 2 + + + + Columns aligned at the center + + + 1 + 2 + + + + Columns aligned at the end + + + 1 + 2 + + + + Columns aligned with space around + + + 1 + 2 + + + + Columns aligned with space between + + + 1 + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/horizontal-alignment/vue.md b/static/usage/v9/grid/horizontal-alignment/vue.md new file mode 100644 index 00000000000..349270c2113 --- /dev/null +++ b/static/usage/v9/grid/horizontal-alignment/vue.md @@ -0,0 +1,56 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/offset-responsive/angular/example_component_css.md b/static/usage/v9/grid/offset-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/offset-responsive/angular/example_component_html.md b/static/usage/v9/grid/offset-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..09088adcd03 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + +No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + +Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + +``` diff --git a/static/usage/v9/grid/offset-responsive/angular/example_component_ts.md b/static/usage/v9/grid/offset-responsive/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/offset-responsive/demo.html b/static/usage/v9/grid/offset-responsive/demo.html new file mode 100644 index 00000000000..1e1afb2885d --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/demo.html @@ -0,0 +1,68 @@ + + + + + + Grid + + + + + + + + + + + +
+ No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + + No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + + Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v9/grid/offset-responsive/index.md b/static/usage/v9/grid/offset-responsive/index.md new file mode 100644 index 00000000000..48e300659a4 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/offset-responsive/javascript.md b/static/usage/v9/grid/offset-responsive/javascript.md new file mode 100644 index 00000000000..f380aa503c0 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/javascript.md @@ -0,0 +1,39 @@ +```html +No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + +No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + +Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + 1 + 2 + + + + +``` diff --git a/static/usage/v9/grid/offset-responsive/react/main_css.md b/static/usage/v9/grid/offset-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/offset-responsive/react/main_tsx.md b/static/usage/v9/grid/offset-responsive/react/main_tsx.md new file mode 100644 index 00000000000..8721fbfc523 --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/react/main_tsx.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + No offset for xs breakpoint, offset 1st column for sm and up + + + 1 + 2 + 3 + 4 + 5 + + + + No offset for xs breakpoint, offset last 3 columns for md and up + + + 1 + 2 + 3 + 4 + + + + Offset all columns by 6 for xs breakpoint, offset by 4 for md, offset by 2 for lg and up + + + + 1 + + + 2 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/offset-responsive/vue.md b/static/usage/v9/grid/offset-responsive/vue.md new file mode 100644 index 00000000000..380d673728b --- /dev/null +++ b/static/usage/v9/grid/offset-responsive/vue.md @@ -0,0 +1,45 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/offset/angular/example_component_css.md b/static/usage/v9/grid/offset/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/offset/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/offset/angular/example_component_html.md b/static/usage/v9/grid/offset/angular/example_component_html.md new file mode 100644 index 00000000000..66e044507a8 --- /dev/null +++ b/static/usage/v9/grid/offset/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html +Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + +Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + +Column 1 has offset set to "4" + + + 1 + 2 + + +``` diff --git a/static/usage/v9/grid/offset/angular/example_component_ts.md b/static/usage/v9/grid/offset/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/offset/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/offset/demo.html b/static/usage/v9/grid/offset/demo.html new file mode 100644 index 00000000000..8cbdf8a4283 --- /dev/null +++ b/static/usage/v9/grid/offset/demo.html @@ -0,0 +1,67 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + + Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + + Column 1 has offset set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v9/grid/offset/index.md b/static/usage/v9/grid/offset/index.md new file mode 100644 index 00000000000..63fa4d3ef9b --- /dev/null +++ b/static/usage/v9/grid/offset/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/offset/javascript.md b/static/usage/v9/grid/offset/javascript.md new file mode 100644 index 00000000000..dcb717dd8d2 --- /dev/null +++ b/static/usage/v9/grid/offset/javascript.md @@ -0,0 +1,38 @@ +```html +Column 2 has offset set to "3" + + + 1 + 2 + 3 + + + +Column 5 has offset set to "2" + + + 1 + 2 + 3 + 4 + 5 + + + +Column 1 has offset set to "4" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v9/grid/offset/react/main_css.md b/static/usage/v9/grid/offset/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/offset/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/offset/react/main_tsx.md b/static/usage/v9/grid/offset/react/main_tsx.md new file mode 100644 index 00000000000..e24f5a47918 --- /dev/null +++ b/static/usage/v9/grid/offset/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 2 has offset set to "3" + + + + 1 + 2 + 3 + + + + + Column 5 has offset set to "2" + + + + 1 + 2 + 3 + 4 + 5 + + + + + Column 1 has offset set to "4" + + + + + 1 + + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/offset/vue.md b/static/usage/v9/grid/offset/vue.md new file mode 100644 index 00000000000..611de1c42ec --- /dev/null +++ b/static/usage/v9/grid/offset/vue.md @@ -0,0 +1,44 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/push-pull-responsive/angular/example_component_css.md b/static/usage/v9/grid/push-pull-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/push-pull-responsive/angular/example_component_html.md b/static/usage/v9/grid/push-pull-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..4e67838643e --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/angular/example_component_html.md @@ -0,0 +1,31 @@ +```html +No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + +No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + +Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +``` diff --git a/static/usage/v9/grid/push-pull-responsive/angular/example_component_ts.md b/static/usage/v9/grid/push-pull-responsive/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/push-pull-responsive/demo.html b/static/usage/v9/grid/push-pull-responsive/demo.html new file mode 100644 index 00000000000..a68f6efef01 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/demo.html @@ -0,0 +1,69 @@ + + + + + + Grid + + + + + + + + + + + +
+ No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + + No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + + Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +
+ + + + diff --git a/static/usage/v9/grid/push-pull-responsive/index.md b/static/usage/v9/grid/push-pull-responsive/index.md new file mode 100644 index 00000000000..6f72a7a812a --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/push-pull-responsive/javascript.md b/static/usage/v9/grid/push-pull-responsive/javascript.md new file mode 100644 index 00000000000..05c03f1def8 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/javascript.md @@ -0,0 +1,40 @@ +```html +No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + +No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + +Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + +``` diff --git a/static/usage/v9/grid/push-pull-responsive/react/main_css.md b/static/usage/v9/grid/push-pull-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/push-pull-responsive/react/main_tsx.md b/static/usage/v9/grid/push-pull-responsive/react/main_tsx.md new file mode 100644 index 00000000000..85955f3ebd2 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/react/main_tsx.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + No change for xs breakpoint, push 1st column & pull 2nd column for sm and up + + + 1 + 2 + + + + No change for xs breakpoint, push middle columns & pull last column for md and up + + + 1 + 2 + 3 + 4 + + + + Switch first and last 3 columns for xs breakpoints, reverse columns for lg and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/push-pull-responsive/vue.md b/static/usage/v9/grid/push-pull-responsive/vue.md new file mode 100644 index 00000000000..9898d173897 --- /dev/null +++ b/static/usage/v9/grid/push-pull-responsive/vue.md @@ -0,0 +1,46 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/push-pull/angular/example_component_css.md b/static/usage/v9/grid/push-pull/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/push-pull/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/push-pull/angular/example_component_html.md b/static/usage/v9/grid/push-pull/angular/example_component_html.md new file mode 100644 index 00000000000..a93c12fef81 --- /dev/null +++ b/static/usage/v9/grid/push-pull/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html +Column 1 has push set to "4" and column 2 has pull set to "4" + + + 1 + 2 + 3 + + + +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Column 1 has push set to "3" and column 2 has pull set to "9" + + + 1 + 2 + + +``` diff --git a/static/usage/v9/grid/push-pull/angular/example_component_ts.md b/static/usage/v9/grid/push-pull/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/push-pull/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/push-pull/demo.html b/static/usage/v9/grid/push-pull/demo.html new file mode 100644 index 00000000000..153c11eb74d --- /dev/null +++ b/static/usage/v9/grid/push-pull/demo.html @@ -0,0 +1,77 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 1 has push set to "4" and column 2 has pull set to + "4" + + + 1 + 2 + 3 + + + + Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + Column 1 has push set to "3" and column 2 has pull set to + "9" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v9/grid/push-pull/index.md b/static/usage/v9/grid/push-pull/index.md new file mode 100644 index 00000000000..6d3d5b75c38 --- /dev/null +++ b/static/usage/v9/grid/push-pull/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/push-pull/javascript.md b/static/usage/v9/grid/push-pull/javascript.md new file mode 100644 index 00000000000..b911da1791b --- /dev/null +++ b/static/usage/v9/grid/push-pull/javascript.md @@ -0,0 +1,42 @@ +```html +Column 1 has push set to "4" and column 2 has pull set to "4" + + + 1 + 2 + 3 + + + +Column 2 has push set to "4" and column 3 & 4 have pull set to + "2" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Column 1 has push set to "3" and column 2 has pull set to "9" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v9/grid/push-pull/react/main_css.md b/static/usage/v9/grid/push-pull/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/push-pull/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/push-pull/react/main_tsx.md b/static/usage/v9/grid/push-pull/react/main_tsx.md new file mode 100644 index 00000000000..aa7c1d1c809 --- /dev/null +++ b/static/usage/v9/grid/push-pull/react/main_tsx.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 1 has push set to "4" and column 2 has pull set to{' '} + "4" + + + + 1 + 2 + 3 + + + + + Column 2 has push set to "4" and column 3 & 4 have pull set to{' '} + "2" + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + Column 1 has push set to "3" and column 2 has pull set to{' '} + "9" + + + + + 1 + + + 2 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/push-pull/vue.md b/static/usage/v9/grid/push-pull/vue.md new file mode 100644 index 00000000000..326501b4ce3 --- /dev/null +++ b/static/usage/v9/grid/push-pull/vue.md @@ -0,0 +1,54 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/size-auto/angular/example_component_css.md b/static/usage/v9/grid/size-auto/angular/example_component_css.md new file mode 100644 index 00000000000..be364843a89 --- /dev/null +++ b/static/usage/v9/grid/size-auto/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-col { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + background-color: #135d54; + border: solid 1px #fff; + color: #fff; +} +``` diff --git a/static/usage/v9/grid/size-auto/angular/example_component_html.md b/static/usage/v9/grid/size-auto/angular/example_component_html.md new file mode 100644 index 00000000000..fc4515ea984 --- /dev/null +++ b/static/usage/v9/grid/size-auto/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html +Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + +Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + +Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +``` diff --git a/static/usage/v9/grid/size-auto/angular/example_component_ts.md b/static/usage/v9/grid/size-auto/angular/example_component_ts.md new file mode 100644 index 00000000000..ef7fe6726b7 --- /dev/null +++ b/static/usage/v9/grid/size-auto/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonInput, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/size-auto/demo.html b/static/usage/v9/grid/size-auto/demo.html new file mode 100644 index 00000000000..8309adecbfd --- /dev/null +++ b/static/usage/v9/grid/size-auto/demo.html @@ -0,0 +1,76 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + + Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + + Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + +
+ + + + diff --git a/static/usage/v9/grid/size-auto/index.md b/static/usage/v9/grid/size-auto/index.md new file mode 100644 index 00000000000..ac2523db6b8 --- /dev/null +++ b/static/usage/v9/grid/size-auto/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/size-auto/javascript.md b/static/usage/v9/grid/size-auto/javascript.md new file mode 100644 index 00000000000..7f6619df1f5 --- /dev/null +++ b/static/usage/v9/grid/size-auto/javascript.md @@ -0,0 +1,47 @@ +```html +Column 1 has size set to "auto" + + + 1 + 2 + 3 + + + +Column 3 contains an input and has size set to "auto" + + + 1 + 2 + + + + 4 + 5 + 6 + + + +Column 2 has size set to "auto" and a defined width + + + 1 + +
2
+ + + + + +``` diff --git a/static/usage/v9/grid/size-auto/react/main_css.md b/static/usage/v9/grid/size-auto/react/main_css.md new file mode 100644 index 00000000000..be364843a89 --- /dev/null +++ b/static/usage/v9/grid/size-auto/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-col { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + background-color: #135d54; + border: solid 1px #fff; + color: #fff; +} +``` diff --git a/static/usage/v9/grid/size-auto/react/main_tsx.md b/static/usage/v9/grid/size-auto/react/main_tsx.md new file mode 100644 index 00000000000..64276d4cacd --- /dev/null +++ b/static/usage/v9/grid/size-auto/react/main_tsx.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonInput, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 1 has size set to "auto" + + + + 1 + 2 + 3 + + + + + Column 3 contains an input and has size set to "auto" + + + + 1 + 2 + + + + 4 + 5 + 6 + + + + + Column 2 has size set to "auto" and a defined width + + + + 1 + +
2
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/size-auto/vue.md b/static/usage/v9/grid/size-auto/vue.md new file mode 100644 index 00000000000..e4895d0acf1 --- /dev/null +++ b/static/usage/v9/grid/size-auto/vue.md @@ -0,0 +1,53 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/size-responsive/angular/example_component_css.md b/static/usage/v9/grid/size-responsive/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/size-responsive/angular/example_component_html.md b/static/usage/v9/grid/size-responsive/angular/example_component_html.md new file mode 100644 index 00000000000..62f96cb5800 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html +Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + +Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + +2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +``` diff --git a/static/usage/v9/grid/size-responsive/angular/example_component_ts.md b/static/usage/v9/grid/size-responsive/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/size-responsive/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/size-responsive/demo.html b/static/usage/v9/grid/size-responsive/demo.html new file mode 100644 index 00000000000..4b974007200 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/demo.html @@ -0,0 +1,70 @@ + + + + + + Grid + + + + + + + + + + + +
+ Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + + Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + + 2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + +
+ + + + diff --git a/static/usage/v9/grid/size-responsive/index.md b/static/usage/v9/grid/size-responsive/index.md new file mode 100644 index 00000000000..b726edad606 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/size-responsive/javascript.md b/static/usage/v9/grid/size-responsive/javascript.md new file mode 100644 index 00000000000..1b10d349bf4 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/javascript.md @@ -0,0 +1,41 @@ +```html +Stacked for xs breakpoint, equal width for sm and up + + + 1 + 2 + 3 + 4 + + + +Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + +2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + +``` diff --git a/static/usage/v9/grid/size-responsive/react/main_css.md b/static/usage/v9/grid/size-responsive/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/size-responsive/react/main_tsx.md b/static/usage/v9/grid/size-responsive/react/main_tsx.md new file mode 100644 index 00000000000..32a037e47bd --- /dev/null +++ b/static/usage/v9/grid/size-responsive/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Stacked for xs breakpoint, equal width for sm and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + + + Equal width until md breakpoint, last column takes full width for md and up + + + 1 + 2 + 3 + + + + 2 per row until md breakpoint, 3 per row for md, equal width for lg and up + + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/size-responsive/vue.md b/static/usage/v9/grid/size-responsive/vue.md new file mode 100644 index 00000000000..8789c634c15 --- /dev/null +++ b/static/usage/v9/grid/size-responsive/vue.md @@ -0,0 +1,47 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/size/angular/example_component_css.md b/static/usage/v9/grid/size/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/size/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/size/angular/example_component_html.md b/static/usage/v9/grid/size/angular/example_component_html.md new file mode 100644 index 00000000000..dc47b3de0dd --- /dev/null +++ b/static/usage/v9/grid/size/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +Column 2 has size set to "8" + + + 1 + 2 + 3 + + + +Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +``` diff --git a/static/usage/v9/grid/size/angular/example_component_ts.md b/static/usage/v9/grid/size/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/size/demo.html b/static/usage/v9/grid/size/demo.html new file mode 100644 index 00000000000..7f95e605e2a --- /dev/null +++ b/static/usage/v9/grid/size/demo.html @@ -0,0 +1,68 @@ + + + + + + Grid + + + + + + + + + + + +
+ Column 2 has size set to "8" + + + 1 + 2 + 3 + + + + Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + Columns 1 & 2 have size set to "4" + + + 1 + 2 + + +
+ + + + diff --git a/static/usage/v9/grid/size/index.md b/static/usage/v9/grid/size/index.md new file mode 100644 index 00000000000..b84dbe9e219 --- /dev/null +++ b/static/usage/v9/grid/size/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/size/javascript.md b/static/usage/v9/grid/size/javascript.md new file mode 100644 index 00000000000..576234e746e --- /dev/null +++ b/static/usage/v9/grid/size/javascript.md @@ -0,0 +1,39 @@ +```html +Column 2 has size set to "8" + + + 1 + 2 + 3 + + + +Columns 3 & 4 have size set to "3" + + + 1 + 2 + 3 + 4 + 5 + 6 + + + +Columns 1 & 2 have size set to "4" + + + 1 + 2 + + + + +``` diff --git a/static/usage/v9/grid/size/react/main_css.md b/static/usage/v9/grid/size/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/size/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/size/react/main_tsx.md b/static/usage/v9/grid/size/react/main_tsx.md new file mode 100644 index 00000000000..5cfa4f62f0e --- /dev/null +++ b/static/usage/v9/grid/size/react/main_tsx.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Column 2 has size set to "8" + + + + 1 + 2 + 3 + + + + + Columns 3 & 4 have size set to "3" + + + + 1 + 2 + 3 + 4 + 5 + 6 + + + + + Columns 1 & 2 have size set to "4" + + + + 1 + 2 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/size/vue.md b/static/usage/v9/grid/size/vue.md new file mode 100644 index 00000000000..6568a6b34fe --- /dev/null +++ b/static/usage/v9/grid/size/vue.md @@ -0,0 +1,45 @@ +```html + + + + + +``` diff --git a/static/usage/v9/grid/vertical-alignment/angular/example_component_css.md b/static/usage/v9/grid/vertical-alignment/angular/example_component_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/vertical-alignment/angular/example_component_html.md b/static/usage/v9/grid/vertical-alignment/angular/example_component_html.md new file mode 100644 index 00000000000..0c12d96a0d2 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/angular/example_component_html.md @@ -0,0 +1,46 @@ +```html +Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +``` diff --git a/static/usage/v9/grid/vertical-alignment/angular/example_component_ts.md b/static/usage/v9/grid/vertical-alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..12161908e4d --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCol, IonGrid, IonRow } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCol, IonGrid, IonRow], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/grid/vertical-alignment/demo.html b/static/usage/v9/grid/vertical-alignment/demo.html new file mode 100644 index 00000000000..b3066207aa9 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/demo.html @@ -0,0 +1,84 @@ + + + + + + Grid + + + + + + + + + + + +
+ Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + +
+ + + + diff --git a/static/usage/v9/grid/vertical-alignment/index.md b/static/usage/v9/grid/vertical-alignment/index.md new file mode 100644 index 00000000000..a647b25b5bc --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/grid/vertical-alignment/javascript.md b/static/usage/v9/grid/vertical-alignment/javascript.md new file mode 100644 index 00000000000..6285096acdc --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/javascript.md @@ -0,0 +1,55 @@ +```html +Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + +Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + +``` diff --git a/static/usage/v9/grid/vertical-alignment/react/main_css.md b/static/usage/v9/grid/vertical-alignment/react/main_css.md new file mode 100644 index 00000000000..3aae3216f34 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-col { + background-color: #135d54; + border: solid 1px #fff; + color: #fff; + text-align: center; +} +``` diff --git a/static/usage/v9/grid/vertical-alignment/react/main_tsx.md b/static/usage/v9/grid/vertical-alignment/react/main_tsx.md new file mode 100644 index 00000000000..04a492566f6 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/react/main_tsx.md @@ -0,0 +1,58 @@ +```tsx +import React from 'react'; +import { IonCol, IonGrid, IonRow } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Columns aligned at the top + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the center + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + Columns aligned at the bottom + + + 1 + 2 + 3 + + 4
+ #
+ #
+ #
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/grid/vertical-alignment/vue.md b/static/usage/v9/grid/vertical-alignment/vue.md new file mode 100644 index 00000000000..ec2d0218207 --- /dev/null +++ b/static/usage/v9/grid/vertical-alignment/vue.md @@ -0,0 +1,61 @@ +```html + + + + + +``` diff --git a/static/usage/v9/header/basic/angular/example_component_html.md b/static/usage/v9/header/basic/angular/example_component_html.md new file mode 100644 index 00000000000..9edf1a22f27 --- /dev/null +++ b/static/usage/v9/header/basic/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v9/header/basic/angular/example_component_ts.md b/static/usage/v9/header/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/basic/demo.html b/static/usage/v9/header/basic/demo.html new file mode 100644 index 00000000000..77ce77c1b13 --- /dev/null +++ b/static/usage/v9/header/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v9/header/basic/index.md b/static/usage/v9/header/basic/index.md new file mode 100644 index 00000000000..11c023628b1 --- /dev/null +++ b/static/usage/v9/header/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/basic/javascript.md b/static/usage/v9/header/basic/javascript.md new file mode 100644 index 00000000000..9edf1a22f27 --- /dev/null +++ b/static/usage/v9/header/basic/javascript.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v9/header/basic/react.md b/static/usage/v9/header/basic/react.md new file mode 100644 index 00000000000..0dd2df0474d --- /dev/null +++ b/static/usage/v9/header/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Content

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/basic/vue.md b/static/usage/v9/header/basic/vue.md new file mode 100644 index 00000000000..3f7d5ec3ebf --- /dev/null +++ b/static/usage/v9/header/basic/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/header/condense/angular/example_component_html.md b/static/usage/v9/header/condense/angular/example_component_html.md new file mode 100644 index 00000000000..1741b1f1706 --- /dev/null +++ b/static/usage/v9/header/condense/angular/example_component_html.md @@ -0,0 +1,75 @@ +```html + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v9/header/condense/angular/example_component_ts.md b/static/usage/v9/header/condense/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/condense/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/condense/demo.html b/static/usage/v9/header/condense/demo.html new file mode 100644 index 00000000000..e68dd889475 --- /dev/null +++ b/static/usage/v9/header/condense/demo.html @@ -0,0 +1,92 @@ + + + + + + Header + + + + + + + + + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + diff --git a/static/usage/v9/header/condense/index.md b/static/usage/v9/header/condense/index.md new file mode 100644 index 00000000000..e916b37781f --- /dev/null +++ b/static/usage/v9/header/condense/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/condense/javascript.md b/static/usage/v9/header/condense/javascript.md new file mode 100644 index 00000000000..f2e2a1d53cc --- /dev/null +++ b/static/usage/v9/header/condense/javascript.md @@ -0,0 +1,75 @@ +```html + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v9/header/condense/react.md b/static/usage/v9/header/condense/react.md new file mode 100644 index 00000000000..6dc06c54cff --- /dev/null +++ b/static/usage/v9/header/condense/react.md @@ -0,0 +1,87 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/condense/vue.md b/static/usage/v9/header/condense/vue.md new file mode 100644 index 00000000000..bd860dda6cf --- /dev/null +++ b/static/usage/v9/header/condense/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v9/header/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/header/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/header/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/header/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..742d531cb9d --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,69 @@ +```html + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, + while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 + teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to + reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+
+ +``` diff --git a/static/usage/v9/header/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/header/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/custom-scroll-target/demo.html b/static/usage/v9/header/custom-scroll-target/demo.html new file mode 100644 index 00000000000..9341e2c07a8 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/demo.html @@ -0,0 +1,98 @@ + + + + + + Header + + + + + + + + + + + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + + diff --git a/static/usage/v9/header/custom-scroll-target/index.md b/static/usage/v9/header/custom-scroll-target/index.md new file mode 100644 index 00000000000..f0c0d1d2464 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/custom-scroll-target/javascript.md b/static/usage/v9/header/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..64077515677 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/javascript.md @@ -0,0 +1,43 @@ +```html + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while the Javan rhino and one-horned rhino have one horn.

+ +

Sea Turtle

+ brown sea turtle in water +

Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for swimming, so they are vulnerable while on land.

+ +

Giraffe

+ giraffe sticking its tongue out +

Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from.

+ +

Elephant

+ two grey elephants on grass plains during sunset +

Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up water for drinking or bathing.

+ +

Dolphin

+ black and white dolphin in water +

Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces.

+ + + +``` diff --git a/static/usage/v9/header/custom-scroll-target/react/main_css.md b/static/usage/v9/header/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..5fe74c95f50 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/react/main_css.md @@ -0,0 +1,10 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/header/custom-scroll-target/react/main_tsx.md b/static/usage/v9/header/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..923ea715aa7 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Header + + + +
+

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies + on the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have + two horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and + have a spotted pattern similar to that of a leopard. Because of the combination of these features, some + people called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes + from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, + or suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, + gray, blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout + with about 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a + flap that opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it + surfaces. +

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/custom-scroll-target/vue.md b/static/usage/v9/header/custom-scroll-target/vue.md new file mode 100644 index 00000000000..1129415b233 --- /dev/null +++ b/static/usage/v9/header/custom-scroll-target/vue.md @@ -0,0 +1,87 @@ +```html + + + + + +``` diff --git a/static/usage/v9/header/fade/angular/example_component_html.md b/static/usage/v9/header/fade/angular/example_component_html.md new file mode 100644 index 00000000000..473ad54c8da --- /dev/null +++ b/static/usage/v9/header/fade/angular/example_component_html.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v9/header/fade/angular/example_component_ts.md b/static/usage/v9/header/fade/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/fade/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/fade/demo.html b/static/usage/v9/header/fade/demo.html new file mode 100644 index 00000000000..2158c932198 --- /dev/null +++ b/static/usage/v9/header/fade/demo.html @@ -0,0 +1,82 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + diff --git a/static/usage/v9/header/fade/index.md b/static/usage/v9/header/fade/index.md new file mode 100644 index 00000000000..c9aaafdb33f --- /dev/null +++ b/static/usage/v9/header/fade/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/fade/javascript.md b/static/usage/v9/header/fade/javascript.md new file mode 100644 index 00000000000..473ad54c8da --- /dev/null +++ b/static/usage/v9/header/fade/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v9/header/fade/react.md b/static/usage/v9/header/fade/react.md new file mode 100644 index 00000000000..085bea0296d --- /dev/null +++ b/static/usage/v9/header/fade/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/fade/vue.md b/static/usage/v9/header/fade/vue.md new file mode 100644 index 00000000000..e18de2b186b --- /dev/null +++ b/static/usage/v9/header/fade/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v9/header/no-border/angular/example_component_html.md b/static/usage/v9/header/no-border/angular/example_component_html.md new file mode 100644 index 00000000000..064fa753744 --- /dev/null +++ b/static/usage/v9/header/no-border/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v9/header/no-border/angular/example_component_ts.md b/static/usage/v9/header/no-border/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/no-border/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/no-border/demo.html b/static/usage/v9/header/no-border/demo.html new file mode 100644 index 00000000000..e561641903a --- /dev/null +++ b/static/usage/v9/header/no-border/demo.html @@ -0,0 +1,25 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Content

+ + + + diff --git a/static/usage/v9/header/no-border/index.md b/static/usage/v9/header/no-border/index.md new file mode 100644 index 00000000000..1ecd316f083 --- /dev/null +++ b/static/usage/v9/header/no-border/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/no-border/javascript.md b/static/usage/v9/header/no-border/javascript.md new file mode 100644 index 00000000000..064fa753744 --- /dev/null +++ b/static/usage/v9/header/no-border/javascript.md @@ -0,0 +1,10 @@ +```html + + + Header + + + +

Content

+ +``` diff --git a/static/usage/v9/header/no-border/react.md b/static/usage/v9/header/no-border/react.md new file mode 100644 index 00000000000..2eb14f6882f --- /dev/null +++ b/static/usage/v9/header/no-border/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Content

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/no-border/vue.md b/static/usage/v9/header/no-border/vue.md new file mode 100644 index 00000000000..b390d195a69 --- /dev/null +++ b/static/usage/v9/header/no-border/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/header/translucent/angular/example_component_html.md b/static/usage/v9/header/translucent/angular/example_component_html.md new file mode 100644 index 00000000000..657a88bf066 --- /dev/null +++ b/static/usage/v9/header/translucent/angular/example_component_html.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v9/header/translucent/angular/example_component_ts.md b/static/usage/v9/header/translucent/angular/example_component_ts.md new file mode 100644 index 00000000000..afba56786aa --- /dev/null +++ b/static/usage/v9/header/translucent/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/header/translucent/demo.html b/static/usage/v9/header/translucent/demo.html new file mode 100644 index 00000000000..8b8ba4e5fd4 --- /dev/null +++ b/static/usage/v9/header/translucent/demo.html @@ -0,0 +1,82 @@ + + + + + + Header + + + + + + + + + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + + diff --git a/static/usage/v9/header/translucent/index.md b/static/usage/v9/header/translucent/index.md new file mode 100644 index 00000000000..23659b507f3 --- /dev/null +++ b/static/usage/v9/header/translucent/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/header/translucent/javascript.md b/static/usage/v9/header/translucent/javascript.md new file mode 100644 index 00000000000..5c0048c019c --- /dev/null +++ b/static/usage/v9/header/translucent/javascript.md @@ -0,0 +1,67 @@ +```html + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from the + Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on the + species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two horns, while + the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other turtles, + sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are adapted for + swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have a + spotted pattern similar to that of a leopard. Because of the combination of these features, some people called the + giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ long + trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or suck up + water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, blue, + and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about 100 teeth + and a streamlined body. They have a single blowhole on top of their head, which has a flap that opens to reveal a + pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ +``` diff --git a/static/usage/v9/header/translucent/react.md b/static/usage/v9/header/translucent/react.md new file mode 100644 index 00000000000..def835913c3 --- /dev/null +++ b/static/usage/v9/header/translucent/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + +

Animal Facts

+ +

Rhinoceros

+ rhino standing near grass +

+ The rhinoceros gets its name from one of its most notable features: its horns. The word rhinoceros come from + the Greek words rhino meaning “nose” and ceros meaning “horn.” The number of horns that a rhino has varies on + the species. The two African species (the black rhino and the white rhino) and the Sumatran rhino have two + horns, while the Javan rhino and one-horned rhino have one horn. +

+ +

Sea Turtle

+ brown sea turtle in water +

+ Sea turtles are characterized by a large, streamlined shell and non-retractile head and limbs. Unlike other + turtles, sea turtles cannot pull their limbs and head inside their shells. Their limbs are flippers that are + adapted for swimming, so they are vulnerable while on land. +

+ +

Giraffe

+ giraffe sticking its tongue out +

+ Giraffes are known for their long, tall appearance. They have a small hump on their back like a camel and have + a spotted pattern similar to that of a leopard. Because of the combination of these features, some people + called the giraffe a “camel-leopard.” That’s where the giraffe’s species name “camelopardalis” comes from. +

+ +

Elephant

+ two grey elephants on grass plains during sunset +

+ Elephants are the largest existing land animal, with massive bodies, large ears, and long trunks. Elephants’ + long trunks are multifunctional. They are used to pick up objects, trumpet warnings, greet other elephants, or + suck up water for drinking or bathing. +

+ +

Dolphin

+ black and white dolphin in water +

+ Dolphins range in color depending on the species, from white, pearl, and pink to darker shades of brown, gray, + blue, and black. They have smooth skin, flippers, and a dorsal fin. They have a long, slender snout with about + 100 teeth and a streamlined body. They have a single blowhole on top of their head, which has a flap that + opens to reveal a pair of nostrils. The dolphin uses these nostrils for breathing when it surfaces. +

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/header/translucent/vue.md b/static/usage/v9/header/translucent/vue.md new file mode 100644 index 00000000000..97bffb7dfa3 --- /dev/null +++ b/static/usage/v9/header/translucent/vue.md @@ -0,0 +1,73 @@ +```html + + + +``` diff --git a/static/usage/v9/icon/basic/angular/example_component_html.md b/static/usage/v9/icon/basic/angular/example_component_html.md new file mode 100644 index 00000000000..7dba86b2634 --- /dev/null +++ b/static/usage/v9/icon/basic/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/icon/basic/angular/example_component_ts.md b/static/usage/v9/icon/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..97f61f05fb7 --- /dev/null +++ b/static/usage/v9/icon/basic/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` diff --git a/static/usage/v9/icon/basic/demo.html b/static/usage/v9/icon/basic/demo.html new file mode 100644 index 00000000000..ed04a8db2ae --- /dev/null +++ b/static/usage/v9/icon/basic/demo.html @@ -0,0 +1,25 @@ + + + + + + Icon + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/icon/basic/index.md b/static/usage/v9/icon/basic/index.md new file mode 100644 index 00000000000..b4b2cc4d31f --- /dev/null +++ b/static/usage/v9/icon/basic/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/icon/basic/javascript/index_html.md b/static/usage/v9/icon/basic/javascript/index_html.md new file mode 100644 index 00000000000..7dba86b2634 --- /dev/null +++ b/static/usage/v9/icon/basic/javascript/index_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/icon/basic/javascript/index_ts.md b/static/usage/v9/icon/basic/javascript/index_ts.md new file mode 100644 index 00000000000..389fa6d96b1 --- /dev/null +++ b/static/usage/v9/icon/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ +addIcons({ logoIonic }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/icon/basic/react.md b/static/usage/v9/icon/basic/react.md new file mode 100644 index 00000000000..57383875130 --- /dev/null +++ b/static/usage/v9/icon/basic/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonIcon } from '@ionic/react'; +import { logoIonic } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/icon/basic/vue.md b/static/usage/v9/icon/basic/vue.md new file mode 100644 index 00000000000..e305ee5c2a9 --- /dev/null +++ b/static/usage/v9/icon/basic/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_css.md b/static/usage/v9/icon/custom-svgs/angular/example_component_css.md new file mode 100644 index 00000000000..e84f55040f5 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +.row { + display: flex; + gap: 12px; +} + +.row > ion-icon { + font-size: 32px; +} +``` diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_html.md b/static/usage/v9/icon/custom-svgs/angular/example_component_html.md new file mode 100644 index 00000000000..1886e147e14 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/angular/example_component_html.md @@ -0,0 +1,27 @@ +```html +

External SVG Files

+
+ + + +
+ +

Inline SVG Content

+
+ + + + + + + + + + + + + + + +
+``` diff --git a/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md b/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md new file mode 100644 index 00000000000..521ef924383 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/icon/custom-svgs/demo.html b/static/usage/v9/icon/custom-svgs/demo.html new file mode 100644 index 00000000000..c2a0746baa8 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/demo.html @@ -0,0 +1,63 @@ + + + + + + Custom SVGs + + + + + + + + + + + +
+

External SVG Files

+
+ + + +
+ +

Inline SVG Content

+
+ + + + + + + + + + + + + + + +
+
+ + + + diff --git a/static/usage/v9/icon/custom-svgs/index.md b/static/usage/v9/icon/custom-svgs/index.md new file mode 100644 index 00000000000..ee9fecc280c --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/icon/custom-svgs/javascript.md b/static/usage/v9/icon/custom-svgs/javascript.md new file mode 100644 index 00000000000..5bd4a7452c7 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/javascript.md @@ -0,0 +1,38 @@ +```html +

External SVG Files

+
+ + + +
+ +

Inline SVG Content

+
+ + + + + + + + + + + + + + + +
+ + +``` diff --git a/static/usage/v9/icon/custom-svgs/react/main_css.md b/static/usage/v9/icon/custom-svgs/react/main_css.md new file mode 100644 index 00000000000..e84f55040f5 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/react/main_css.md @@ -0,0 +1,10 @@ +```css +.row { + display: flex; + gap: 12px; +} + +.row > ion-icon { + font-size: 32px; +} +``` diff --git a/static/usage/v9/icon/custom-svgs/react/main_tsx.md b/static/usage/v9/icon/custom-svgs/react/main_tsx.md new file mode 100644 index 00000000000..b2fb0611892 --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/react/main_tsx.md @@ -0,0 +1,40 @@ +```tsx +import React from 'react'; +import { IonIcon } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> +

External SVG Files

+
+ + + +
+ +

Inline SVG Content

+
+ + + + + + + + + + + + + + + +
+ + ); +} + +export default Example; +``` diff --git a/static/usage/v9/icon/custom-svgs/vue.md b/static/usage/v9/icon/custom-svgs/vue.md new file mode 100644 index 00000000000..4e848d3963d --- /dev/null +++ b/static/usage/v9/icon/custom-svgs/vue.md @@ -0,0 +1,44 @@ +```vue + + + + + +``` diff --git a/static/usage/v9/icon/font-icons/angular/example_component_css.md b/static/usage/v9/icon/font-icons/angular/example_component_css.md new file mode 100644 index 00000000000..4ab90c623ce --- /dev/null +++ b/static/usage/v9/icon/font-icons/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +.row { + display: flex; + gap: 12px; + margin-bottom: 16px; +} + +.row > ion-icon { + font-size: 24px; +} +``` diff --git a/static/usage/v9/icon/font-icons/angular/example_component_html.md b/static/usage/v9/icon/font-icons/angular/example_component_html.md new file mode 100644 index 00000000000..8ee2e3835e9 --- /dev/null +++ b/static/usage/v9/icon/font-icons/angular/example_component_html.md @@ -0,0 +1,169 @@ +```html +

Font Awesome Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Bootstrap Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Remix Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Phosphor Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+``` diff --git a/static/usage/v9/icon/font-icons/angular/example_component_ts.md b/static/usage/v9/icon/font-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..ce17a10dac7 --- /dev/null +++ b/static/usage/v9/icon/font-icons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/icon/font-icons/angular/global_css.md b/static/usage/v9/icon/font-icons/angular/global_css.md new file mode 100644 index 00000000000..f433b543bf6 --- /dev/null +++ b/static/usage/v9/icon/font-icons/angular/global_css.md @@ -0,0 +1,13 @@ +```css +/* Font Awesome Icons */ +@import '@fortawesome/fontawesome-free/css/all.min.css'; + +/* Bootstrap Icons */ +@import 'bootstrap-icons/font/bootstrap-icons.css'; + +/* Remix Icons */ +@import 'remixicon/fonts/remixicon.css'; + +/* Phosphor Icons */ +@import '@phosphor-icons/web/fill/style.css'; +``` diff --git a/static/usage/v9/icon/font-icons/demo.html b/static/usage/v9/icon/font-icons/demo.html new file mode 100644 index 00000000000..0cf98072ecb --- /dev/null +++ b/static/usage/v9/icon/font-icons/demo.html @@ -0,0 +1,221 @@ + + + + + + Font Icons + + + + + + + + + + + + + + + + + + + + + + + +
+

Font Awesome Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Bootstrap Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Remix Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Phosphor Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+
+ + + + diff --git a/static/usage/v9/icon/font-icons/index.md b/static/usage/v9/icon/font-icons/index.md new file mode 100644 index 00000000000..81ffc09069d --- /dev/null +++ b/static/usage/v9/icon/font-icons/index.md @@ -0,0 +1,76 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; +import react_app_tsx from './react/app_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/icon/font-icons/javascript/index_html.md b/static/usage/v9/icon/font-icons/javascript/index_html.md new file mode 100644 index 00000000000..46d46477996 --- /dev/null +++ b/static/usage/v9/icon/font-icons/javascript/index_html.md @@ -0,0 +1,181 @@ +```html +

Font Awesome Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Bootstrap Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Remix Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Phosphor Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ + +``` diff --git a/static/usage/v9/icon/font-icons/javascript/index_ts.md b/static/usage/v9/icon/font-icons/javascript/index_ts.md new file mode 100644 index 00000000000..15b210024c0 --- /dev/null +++ b/static/usage/v9/icon/font-icons/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/* Font Awesome Icons */ +import '@fortawesome/fontawesome-free/css/all.min.css'; + +/* Bootstrap Icons */ +import 'bootstrap-icons/font/bootstrap-icons.css'; + +/* Remix Icon */ +import 'remixicon/fonts/remixicon.css'; + +/* Phosphor Icons */ +import '@phosphor-icons/web/fill/style.css'; + +defineCustomElements(); +``` diff --git a/static/usage/v9/icon/font-icons/react/app_tsx.md b/static/usage/v9/icon/font-icons/react/app_tsx.md new file mode 100644 index 00000000000..481d043ccc6 --- /dev/null +++ b/static/usage/v9/icon/font-icons/react/app_tsx.md @@ -0,0 +1,60 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp, IonContent } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/* Font Awesome Icons */ +import '@fortawesome/fontawesome-free/css/all.min.css'; + +/* Bootstrap Icons */ +import 'bootstrap-icons/font/bootstrap-icons.css'; + +/* Remix Icon */ +import 'remixicon/fonts/remixicon.css'; + +/* Phosphor Icons */ +import '@phosphor-icons/web/fill/style.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/static/usage/v9/icon/font-icons/react/main_css.md b/static/usage/v9/icon/font-icons/react/main_css.md new file mode 100644 index 00000000000..4ab90c623ce --- /dev/null +++ b/static/usage/v9/icon/font-icons/react/main_css.md @@ -0,0 +1,11 @@ +```css +.row { + display: flex; + gap: 12px; + margin-bottom: 16px; +} + +.row > ion-icon { + font-size: 24px; +} +``` diff --git a/static/usage/v9/icon/font-icons/react/main_tsx.md b/static/usage/v9/icon/font-icons/react/main_tsx.md new file mode 100644 index 00000000000..5b290b65bfc --- /dev/null +++ b/static/usage/v9/icon/font-icons/react/main_tsx.md @@ -0,0 +1,182 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> +

Font Awesome Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Bootstrap Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Remix Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ +

Phosphor Icons

+
+ + + + + + + + + + + + + + + + + + +
+
+ + + + + Home + + + + + + Save + + + + + + Trash + +
+ + ); +} + +export default Example; +``` diff --git a/static/usage/v9/icon/font-icons/vue/example_vue.md b/static/usage/v9/icon/font-icons/vue/example_vue.md new file mode 100644 index 00000000000..12e56ca706d --- /dev/null +++ b/static/usage/v9/icon/font-icons/vue/example_vue.md @@ -0,0 +1,187 @@ +```vue + + + + + +``` diff --git a/static/usage/v9/icon/font-icons/vue/main_ts.md b/static/usage/v9/icon/font-icons/vue/main_ts.md new file mode 100644 index 00000000000..e026db8938a --- /dev/null +++ b/static/usage/v9/icon/font-icons/vue/main_ts.md @@ -0,0 +1,50 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/* Font Awesome Icons */ +import '@fortawesome/fontawesome-free/css/all.min.css'; + +/* Bootstrap Icons */ +import 'bootstrap-icons/font/bootstrap-icons.css'; + +/* Remix Icon */ +import 'remixicon/fonts/remixicon.css'; + +/* Phosphor Icons */ +import '@phosphor-icons/web/fill/style.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/img/basic/angular/example_component_html.md b/static/usage/v9/img/basic/angular/example_component_html.md new file mode 100644 index 00000000000..61e27f8b9d6 --- /dev/null +++ b/static/usage/v9/img/basic/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v9/img/basic/angular/example_component_ts.md b/static/usage/v9/img/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..c390454f057 --- /dev/null +++ b/static/usage/v9/img/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonImg } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonImg], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/img/basic/demo.html b/static/usage/v9/img/basic/demo.html new file mode 100644 index 00000000000..baed8638724 --- /dev/null +++ b/static/usage/v9/img/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Image + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/img/basic/index.md b/static/usage/v9/img/basic/index.md new file mode 100644 index 00000000000..afd5e7c305f --- /dev/null +++ b/static/usage/v9/img/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/img/basic/javascript.md b/static/usage/v9/img/basic/javascript.md new file mode 100644 index 00000000000..61e27f8b9d6 --- /dev/null +++ b/static/usage/v9/img/basic/javascript.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v9/img/basic/react.md b/static/usage/v9/img/basic/react.md new file mode 100644 index 00000000000..0236cc28976 --- /dev/null +++ b/static/usage/v9/img/basic/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonImg } from '@ionic/react'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/img/basic/vue.md b/static/usage/v9/img/basic/vue.md new file mode 100644 index 00000000000..cccf7e8d759 --- /dev/null +++ b/static/usage/v9/img/basic/vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md b/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md new file mode 100644 index 00000000000..962be4924aa --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + @for (item of items; track item; let index = $index) { + + + avatar + + {{ item }} + + } + + + + + +``` diff --git a/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bb576646dc5 --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```tsx +import { Component, OnInit } from '@angular/core'; +import { + InfiniteScrollCustomEvent, + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], +}) +export class ExampleComponent implements OnInit { + items: string[] = []; + + ngOnInit() { + this.generateItems(); + } + + private generateItems() { + const count = this.items.length + 1; + for (let i = 0; i < 50; i++) { + this.items.push(`Item ${count + i}`); + } + } + + onIonInfinite(event: InfiniteScrollCustomEvent) { + this.generateItems(); + setTimeout(() => { + event.target.complete(); + }, 500); + } +} +``` diff --git a/static/usage/v9/infinite-scroll/basic/demo.html b/static/usage/v9/infinite-scroll/basic/demo.html new file mode 100644 index 00000000000..29b7784e6cf --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/demo.html @@ -0,0 +1,60 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/infinite-scroll/basic/index.md b/static/usage/v9/infinite-scroll/basic/index.md new file mode 100644 index 00000000000..b4938a3cb6f --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/infinite-scroll/basic/javascript.md b/static/usage/v9/infinite-scroll/basic/javascript.md new file mode 100644 index 00000000000..b61db4c6ae3 --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v9/infinite-scroll/basic/react.md b/static/usage/v9/infinite-scroll/basic/react.md new file mode 100644 index 00000000000..145aa32dd47 --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/react.md @@ -0,0 +1,53 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonList, + IonItem, + IonAvatar, + IonLabel, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + const generateItems = () => { + const newItems = []; + for (let i = 0; i < 50; i++) { + newItems.push(`Item ${1 + items.length + i}`); + } + setItems([...items, ...newItems]); + }; + + useEffect(() => { + generateItems(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + { + generateItems(); + setTimeout(() => event.target.complete(), 500); + }} + > + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/infinite-scroll/basic/vue.md b/static/usage/v9/infinite-scroll/basic/vue.md new file mode 100644 index 00000000000..324f8d515f1 --- /dev/null +++ b/static/usage/v9/infinite-scroll/basic/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md new file mode 100644 index 00000000000..9f14adbc405 --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +svg { + width: 20px; + height: 20px; + display: inline-block; +} + +.infinite-scroll-content { + text-align: center; + padding: 20px 0; +} +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md new file mode 100644 index 00000000000..fb41f8761c7 --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_html.md @@ -0,0 +1,70 @@ +```html + + + @for (item of items; track item; let index = $index) { + + + avatar + + {{ item }} + + } + + +
+ + + + + + + + + +
+ + +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md new file mode 100644 index 00000000000..0e35b19accf --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```tsx +import { Component, OnInit } from '@angular/core'; +import { IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonItem, IonLabel, IonList], +}) +export class ExampleComponent implements OnInit { + items: string[] = []; + + ngOnInit() { + for (let i = 1; i < 51; i++) { + this.items.push(`Item ${i}`); + } + } +} +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html new file mode 100644 index 00000000000..95dc010360c --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/demo.html @@ -0,0 +1,117 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + + + diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md new file mode 100644 index 00000000000..b7e73189dde --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/javascript.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/javascript.md new file mode 100644 index 00000000000..721eb0c0ad4 --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/javascript.md @@ -0,0 +1,104 @@ +```html + + + + + +
+ + + + + + + + + +
+ + + + +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md new file mode 100644 index 00000000000..9f14adbc405 --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_css.md @@ -0,0 +1,12 @@ +```css +svg { + width: 20px; + height: 20px; + display: inline-block; +} + +.infinite-scroll-content { + text-align: center; + padding: 20px 0; +} +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md new file mode 100644 index 00000000000..1139f55920d --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/react/main_tsx.md @@ -0,0 +1,89 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonContent, IonInfiniteScroll, IonList, IonItem, IonAvatar, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + const [items, setItems] = useState([]); + + useEffect(() => { + const newItems = []; + for (let i = 1; i < 51; i++) { + newItems.push(`Item ${items.length + i}`); + } + setItems([...items, ...newItems]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + +
+ + + + + + + + + +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md new file mode 100644 index 00000000000..0c850de11dd --- /dev/null +++ b/static/usage/v9/infinite-scroll/custom-infinite-scroll-content/vue.md @@ -0,0 +1,94 @@ +```html + + + + + +``` diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md new file mode 100644 index 00000000000..d73da989437 --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + @for (item of items; track item; let index = $index) { + + + avatar + + {{ item }} + + } + + + + + +``` diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md new file mode 100644 index 00000000000..85c15d47b7e --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```tsx +import { Component, OnInit } from '@angular/core'; +import { + IonAvatar, + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonItem, + IonLabel, + IonList, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonItem, IonLabel, IonList], +}) +export class ExampleComponent implements OnInit { + items: string[] = []; + + ngOnInit() { + for (let i = 1; i < 51; i++) { + this.items.push(`Item ${i}`); + } + } +} +``` diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html b/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html new file mode 100644 index 00000000000..de95908d8d8 --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/demo.html @@ -0,0 +1,53 @@ + + + + + + Infinite Scroll + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md new file mode 100644 index 00000000000..f37da3c2a53 --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/javascript.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/javascript.md new file mode 100644 index 00000000000..6b2a9bb409f --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/javascript.md @@ -0,0 +1,38 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md new file mode 100644 index 00000000000..2c2b5f77b8a --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/react.md @@ -0,0 +1,44 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { + IonContent, + IonInfiniteScroll, + IonInfiniteScrollContent, + IonList, + IonItem, + IonAvatar, + IonLabel, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([]); + + useEffect(() => { + const newItems = []; + for (let i = 1; i < 51; i++) { + newItems.push(`Item ${items.length + i}`); + } + setItems([...items, ...newItems]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + + + {items.map((item, index) => ( + + + avatar + + {item} + + ))} + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md b/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md new file mode 100644 index 00000000000..b2d02c1db4d --- /dev/null +++ b/static/usage/v9/infinite-scroll/infinite-scroll-content/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/basic/angular/example_component_html.md b/static/usage/v9/input-otp/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e915f538363 --- /dev/null +++ b/static/usage/v9/input-otp/basic/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v9/input-otp/basic/angular/example_component_ts.md b/static/usage/v9/input-otp/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/basic/demo.html b/static/usage/v9/input-otp/basic/demo.html new file mode 100644 index 00000000000..5bb3b201172 --- /dev/null +++ b/static/usage/v9/input-otp/basic/demo.html @@ -0,0 +1,29 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Didn't get a code? Resend the code + Didn't get a code? Resend the code +
+ + + + diff --git a/static/usage/v9/input-otp/basic/index.md b/static/usage/v9/input-otp/basic/index.md new file mode 100644 index 00000000000..74aacd2bc70 --- /dev/null +++ b/static/usage/v9/input-otp/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/basic/javascript.md b/static/usage/v9/input-otp/basic/javascript.md new file mode 100644 index 00000000000..e915f538363 --- /dev/null +++ b/static/usage/v9/input-otp/basic/javascript.md @@ -0,0 +1,4 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v9/input-otp/basic/react.md b/static/usage/v9/input-otp/basic/react.md new file mode 100644 index 00000000000..833c82db83d --- /dev/null +++ b/static/usage/v9/input-otp/basic/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/basic/vue.md b/static/usage/v9/input-otp/basic/vue.md new file mode 100644 index 00000000000..c1ceb4fa5b1 --- /dev/null +++ b/static/usage/v9/input-otp/basic/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/fill/angular/example_component_html.md b/static/usage/v9/input-otp/fill/angular/example_component_html.md new file mode 100644 index 00000000000..705348532cb --- /dev/null +++ b/static/usage/v9/input-otp/fill/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + Outline Solid +``` diff --git a/static/usage/v9/input-otp/fill/angular/example_component_ts.md b/static/usage/v9/input-otp/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/fill/demo.html b/static/usage/v9/input-otp/fill/demo.html new file mode 100644 index 00000000000..629bb749df3 --- /dev/null +++ b/static/usage/v9/input-otp/fill/demo.html @@ -0,0 +1,29 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Outline + Solid +
+ + + + diff --git a/static/usage/v9/input-otp/fill/index.md b/static/usage/v9/input-otp/fill/index.md new file mode 100644 index 00000000000..770b3bb72c5 --- /dev/null +++ b/static/usage/v9/input-otp/fill/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/fill/javascript.md b/static/usage/v9/input-otp/fill/javascript.md new file mode 100644 index 00000000000..705348532cb --- /dev/null +++ b/static/usage/v9/input-otp/fill/javascript.md @@ -0,0 +1,3 @@ +```html + Outline Solid +``` diff --git a/static/usage/v9/input-otp/fill/react.md b/static/usage/v9/input-otp/fill/react.md new file mode 100644 index 00000000000..06171508008 --- /dev/null +++ b/static/usage/v9/input-otp/fill/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Outline + Solid + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/fill/vue.md b/static/usage/v9/input-otp/fill/vue.md new file mode 100644 index 00000000000..387e6edc050 --- /dev/null +++ b/static/usage/v9/input-otp/fill/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/pattern/angular/example_component_html.md b/static/usage/v9/input-otp/pattern/angular/example_component_html.md new file mode 100644 index 00000000000..042b8df6d14 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + Numbers 1-4 only + All characters allowed + Capital Latin letters only + Greek characters only + Arabic characters only + Chinese characters only +``` diff --git a/static/usage/v9/input-otp/pattern/angular/example_component_ts.md b/static/usage/v9/input-otp/pattern/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/pattern/demo.html b/static/usage/v9/input-otp/pattern/demo.html new file mode 100644 index 00000000000..a6bcb682824 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/demo.html @@ -0,0 +1,35 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Numbers 1-4 only + All characters allowed + + Capital Latin letters only + + Greek characters only + Arabic characters only + Chinese characters only +
+ + + + diff --git a/static/usage/v9/input-otp/pattern/index.md b/static/usage/v9/input-otp/pattern/index.md new file mode 100644 index 00000000000..1accdae3785 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/pattern/javascript.md b/static/usage/v9/input-otp/pattern/javascript.md new file mode 100644 index 00000000000..042b8df6d14 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/javascript.md @@ -0,0 +1,8 @@ +```html + Numbers 1-4 only + All characters allowed + Capital Latin letters only + Greek characters only + Arabic characters only + Chinese characters only +``` diff --git a/static/usage/v9/input-otp/pattern/react.md b/static/usage/v9/input-otp/pattern/react.md new file mode 100644 index 00000000000..f491b7e757b --- /dev/null +++ b/static/usage/v9/input-otp/pattern/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + + Numbers 1-4 only + + + All characters allowed + + + Capital Latin letters only + + + Greek characters only + + + Arabic characters only + + + Chinese characters only + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/pattern/vue.md b/static/usage/v9/input-otp/pattern/vue.md new file mode 100644 index 00000000000..e7873f07ca0 --- /dev/null +++ b/static/usage/v9/input-otp/pattern/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/separators/angular/example_component_html.md b/static/usage/v9/input-otp/separators/angular/example_component_html.md new file mode 100644 index 00000000000..3587056c4c7 --- /dev/null +++ b/static/usage/v9/input-otp/separators/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v9/input-otp/separators/angular/example_component_ts.md b/static/usage/v9/input-otp/separators/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/separators/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/separators/demo.html b/static/usage/v9/input-otp/separators/demo.html new file mode 100644 index 00000000000..adb5a1e2f8b --- /dev/null +++ b/static/usage/v9/input-otp/separators/demo.html @@ -0,0 +1,30 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Didn't get a code? Resend the code + Didn't get a code? Resend the code + Didn't get a code? Resend the code +
+ + + + diff --git a/static/usage/v9/input-otp/separators/index.md b/static/usage/v9/input-otp/separators/index.md new file mode 100644 index 00000000000..e07b35ed8a3 --- /dev/null +++ b/static/usage/v9/input-otp/separators/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/separators/javascript.md b/static/usage/v9/input-otp/separators/javascript.md new file mode 100644 index 00000000000..3587056c4c7 --- /dev/null +++ b/static/usage/v9/input-otp/separators/javascript.md @@ -0,0 +1,5 @@ +```html + Didn't get a code? Resend the code + Didn't get a code? Resend the code + Didn't get a code? Resend the code +``` diff --git a/static/usage/v9/input-otp/separators/react.md b/static/usage/v9/input-otp/separators/react.md new file mode 100644 index 00000000000..67e68eb1f1f --- /dev/null +++ b/static/usage/v9/input-otp/separators/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/separators/vue.md b/static/usage/v9/input-otp/separators/vue.md new file mode 100644 index 00000000000..7385329fc24 --- /dev/null +++ b/static/usage/v9/input-otp/separators/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/shape/angular/example_component_html.md b/static/usage/v9/input-otp/shape/angular/example_component_html.md new file mode 100644 index 00000000000..1f81f9cc5fe --- /dev/null +++ b/static/usage/v9/input-otp/shape/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Round + Soft + Rectangular +``` diff --git a/static/usage/v9/input-otp/shape/angular/example_component_ts.md b/static/usage/v9/input-otp/shape/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/shape/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/shape/demo.html b/static/usage/v9/input-otp/shape/demo.html new file mode 100644 index 00000000000..0631c515b2d --- /dev/null +++ b/static/usage/v9/input-otp/shape/demo.html @@ -0,0 +1,30 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Round + Soft + Rectangular +
+ + + + diff --git a/static/usage/v9/input-otp/shape/index.md b/static/usage/v9/input-otp/shape/index.md new file mode 100644 index 00000000000..b710df13bea --- /dev/null +++ b/static/usage/v9/input-otp/shape/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/shape/javascript.md b/static/usage/v9/input-otp/shape/javascript.md new file mode 100644 index 00000000000..1f81f9cc5fe --- /dev/null +++ b/static/usage/v9/input-otp/shape/javascript.md @@ -0,0 +1,5 @@ +```html + Round + Soft + Rectangular +``` diff --git a/static/usage/v9/input-otp/shape/react.md b/static/usage/v9/input-otp/shape/react.md new file mode 100644 index 00000000000..da104a6231e --- /dev/null +++ b/static/usage/v9/input-otp/shape/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Round + Soft + Rectangular + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/shape/vue.md b/static/usage/v9/input-otp/shape/vue.md new file mode 100644 index 00000000000..3d5e70d516a --- /dev/null +++ b/static/usage/v9/input-otp/shape/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/size/angular/example_component_html.md b/static/usage/v9/input-otp/size/angular/example_component_html.md new file mode 100644 index 00000000000..340cbf8f58e --- /dev/null +++ b/static/usage/v9/input-otp/size/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + Small + Medium + Large +``` diff --git a/static/usage/v9/input-otp/size/angular/example_component_ts.md b/static/usage/v9/input-otp/size/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/size/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/size/demo.html b/static/usage/v9/input-otp/size/demo.html new file mode 100644 index 00000000000..46f9893937d --- /dev/null +++ b/static/usage/v9/input-otp/size/demo.html @@ -0,0 +1,30 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Small + Medium + Large +
+ + + + diff --git a/static/usage/v9/input-otp/size/index.md b/static/usage/v9/input-otp/size/index.md new file mode 100644 index 00000000000..13919a63b0d --- /dev/null +++ b/static/usage/v9/input-otp/size/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/size/javascript.md b/static/usage/v9/input-otp/size/javascript.md new file mode 100644 index 00000000000..340cbf8f58e --- /dev/null +++ b/static/usage/v9/input-otp/size/javascript.md @@ -0,0 +1,5 @@ +```html + Small + Medium + Large +``` diff --git a/static/usage/v9/input-otp/size/react.md b/static/usage/v9/input-otp/size/react.md new file mode 100644 index 00000000000..a48763ca483 --- /dev/null +++ b/static/usage/v9/input-otp/size/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Small + Medium + Large + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/size/vue.md b/static/usage/v9/input-otp/size/vue.md new file mode 100644 index 00000000000..97b45f6de2a --- /dev/null +++ b/static/usage/v9/input-otp/size/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/states/angular/example_component_html.md b/static/usage/v9/input-otp/states/angular/example_component_html.md new file mode 100644 index 00000000000..a482162948b --- /dev/null +++ b/static/usage/v9/input-otp/states/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + Disabled + Readonly +
+ {{ getValidationText('first') }} + {{ getValidationText('second') }} +
+``` diff --git a/static/usage/v9/input-otp/states/angular/example_component_ts.md b/static/usage/v9/input-otp/states/angular/example_component_ts.md new file mode 100644 index 00000000000..363e7bb88f8 --- /dev/null +++ b/static/usage/v9/input-otp/states/angular/example_component_ts.md @@ -0,0 +1,65 @@ +```ts +import { Component, OnInit } from '@angular/core'; +import { + FormBuilder, + FormGroup, + FormsModule, + ReactiveFormsModule, + Validators, + AbstractControl, + ValidationErrors, +} from '@angular/forms'; +import { IonInputOtp } from '@ionic/angular'; + +function otpRequiredLength(length: number) { + return (control: AbstractControl): ValidationErrors | null => { + const value = control.value; + if (!value || value.toString().length !== length) { + return { otpLength: true }; + } + return null; + }; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp, ReactiveFormsModule, FormsModule], +}) +export class ExampleComponent implements OnInit { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + first: [12, [Validators.required, otpRequiredLength(4)]], + second: [1234, [Validators.required, otpRequiredLength(4)]], + }); + } + + ngOnInit() { + this.markFormGroupTouched(this.myForm); + } + + markFormGroupTouched(formGroup: FormGroup) { + Object.keys(formGroup.controls).forEach((key) => { + const control = formGroup.get(key); + if (control) { + control.markAsTouched(); + } + }); + } + + getValidationText(controlName: string): string { + const control = this.myForm.get(controlName); + if (!control) return ''; + + if (control.valid && control.value) { + return 'Valid'; + } else if (control.invalid && control.touched) { + return 'Invalid'; + } + return ''; + } +} +``` diff --git a/static/usage/v9/input-otp/states/demo.html b/static/usage/v9/input-otp/states/demo.html new file mode 100644 index 00000000000..165db912d02 --- /dev/null +++ b/static/usage/v9/input-otp/states/demo.html @@ -0,0 +1,65 @@ + + + + + + Input OTP + + + + + + + + + + + +
+ Disabled + Readonly + + +
+ + + + + + diff --git a/static/usage/v9/input-otp/states/index.md b/static/usage/v9/input-otp/states/index.md new file mode 100644 index 00000000000..d9fb87adf65 --- /dev/null +++ b/static/usage/v9/input-otp/states/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/states/javascript.md b/static/usage/v9/input-otp/states/javascript.md new file mode 100644 index 00000000000..bdba0c0aaae --- /dev/null +++ b/static/usage/v9/input-otp/states/javascript.md @@ -0,0 +1,40 @@ +```html + Disabled + Readonly + + + + +``` diff --git a/static/usage/v9/input-otp/states/react.md b/static/usage/v9/input-otp/states/react.md new file mode 100644 index 00000000000..ae310c2c1ef --- /dev/null +++ b/static/usage/v9/input-otp/states/react.md @@ -0,0 +1,41 @@ +```tsx +import React, { useState } from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + const [inputs, setInputs] = useState([{ value: '12' }, { value: '1234' }]); + + const getValidationState = (value: string) => ({ + class: value.length === 4 ? 'ion-valid' : 'ion-invalid', + text: value.length === 4 ? 'Valid' : 'Invalid', + }); + + const handleInput = (index: number, value: string) => { + setInputs((prev) => prev.map((input, i) => (i === index ? { ...input, value } : input))); + }; + + return ( + <> + + Disabled + + + Readonly + + + {inputs.map((input, index) => ( + handleInput(index, e.detail.value!)} + className={`ion-touched ${index === 1 ? 'has-focus' : ''} ${getValidationState(input.value).class}`} + > + {getValidationState(input.value).text} + + ))} + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/input-otp/states/vue.md b/static/usage/v9/input-otp/states/vue.md new file mode 100644 index 00000000000..72ec224236d --- /dev/null +++ b/static/usage/v9/input-otp/states/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md b/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..eb86c698eac --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +``` diff --git a/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md b/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/theming/colors/demo.html b/static/usage/v9/input-otp/theming/colors/demo.html new file mode 100644 index 00000000000..1ca302e79f3 --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Badge + + + + + + + + + + + +
+ Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v9/input-otp/theming/colors/index.md b/static/usage/v9/input-otp/theming/colors/index.md new file mode 100644 index 00000000000..04f1ad034b0 --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/theming/colors/javascript.md b/static/usage/v9/input-otp/theming/colors/javascript.md new file mode 100644 index 00000000000..eb86c698eac --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +``` diff --git a/static/usage/v9/input-otp/theming/colors/react.md b/static/usage/v9/input-otp/theming/colors/react.md new file mode 100644 index 00000000000..ed1b462c677 --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Primary + Secondary + Tertiary + Success + >Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/theming/colors/vue.md b/static/usage/v9/input-otp/theming/colors/vue.md new file mode 100644 index 00000000000..bfc52cd1a7d --- /dev/null +++ b/static/usage/v9/input-otp/theming/colors/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..1e1c85a1143 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,16 @@ +```css +ion-input-otp.custom { + --separator-color: rgb(90, 23, 237, 0.12); + --highlight-color-focused: #5a17ed; +} + +.input-otp-fill-outline.custom { + --border-color: rgb(90, 23, 237, 0.6); + --color: #5a17ed; +} + +.input-otp-fill-solid.custom { + --border-color: rgb(90, 23, 237, 0.12); + --background: rgb(90, 23, 237, 0.12); +} +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..b1852f16cfc --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + Didn't get a code? Resend the code + + Didn't get a code? Resend the code + +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/demo.html b/static/usage/v9/input-otp/theming/css-properties/demo.html new file mode 100644 index 00000000000..b606feb1137 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/demo.html @@ -0,0 +1,48 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + +
+ + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code + +
+ + + + diff --git a/static/usage/v9/input-otp/theming/css-properties/index.md b/static/usage/v9/input-otp/theming/css-properties/index.md new file mode 100644 index 00000000000..335676ecdc9 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/theming/css-properties/javascript.md b/static/usage/v9/input-otp/theming/css-properties/javascript.md new file mode 100644 index 00000000000..01a652f035b --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/javascript.md @@ -0,0 +1,23 @@ +```html + Didn't get a code? Resend the code + + Didn't get a code? Resend the code + + + +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/react/main_css.md b/static/usage/v9/input-otp/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..1e1c85a1143 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/react/main_css.md @@ -0,0 +1,16 @@ +```css +ion-input-otp.custom { + --separator-color: rgb(90, 23, 237, 0.12); + --highlight-color-focused: #5a17ed; +} + +.input-otp-fill-outline.custom { + --border-color: rgb(90, 23, 237, 0.6); + --color: #5a17ed; +} + +.input-otp-fill-solid.custom { + --border-color: rgb(90, 23, 237, 0.12); + --background: rgb(90, 23, 237, 0.12); +} +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md b/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..7c6d19186e0 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Didn't get a code? Resend the code + + + Didn't get a code? Resend the code + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/theming/css-properties/vue.md b/static/usage/v9/input-otp/theming/css-properties/vue.md new file mode 100644 index 00000000000..f204cdc92e6 --- /dev/null +++ b/static/usage/v9/input-otp/theming/css-properties/vue.md @@ -0,0 +1,29 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input-otp/type/angular/example_component_html.md b/static/usage/v9/input-otp/type/angular/example_component_html.md new file mode 100644 index 00000000000..8871303bb1f --- /dev/null +++ b/static/usage/v9/input-otp/type/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + Numbers only Letters and numbers +``` diff --git a/static/usage/v9/input-otp/type/angular/example_component_ts.md b/static/usage/v9/input-otp/type/angular/example_component_ts.md new file mode 100644 index 00000000000..a5cf4e26f23 --- /dev/null +++ b/static/usage/v9/input-otp/type/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInputOtp } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInputOtp], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-otp/type/demo.html b/static/usage/v9/input-otp/type/demo.html new file mode 100644 index 00000000000..77fd034270c --- /dev/null +++ b/static/usage/v9/input-otp/type/demo.html @@ -0,0 +1,30 @@ + + + + + + Input OTP + + + + + + + + + + + + +
+ Numbers only + Letters and numbers +
+ + + + diff --git a/static/usage/v9/input-otp/type/index.md b/static/usage/v9/input-otp/type/index.md new file mode 100644 index 00000000000..820b4e2084f --- /dev/null +++ b/static/usage/v9/input-otp/type/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-otp/type/javascript.md b/static/usage/v9/input-otp/type/javascript.md new file mode 100644 index 00000000000..8871303bb1f --- /dev/null +++ b/static/usage/v9/input-otp/type/javascript.md @@ -0,0 +1,3 @@ +```html + Numbers only Letters and numbers +``` diff --git a/static/usage/v9/input-otp/type/react.md b/static/usage/v9/input-otp/type/react.md new file mode 100644 index 00000000000..6408687fe7b --- /dev/null +++ b/static/usage/v9/input-otp/type/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonInputOtp } from '@ionic/react'; + +function Example() { + return ( + <> + Numbers only + Letters and numbers + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-otp/type/vue.md b/static/usage/v9/input-otp/type/vue.md new file mode 100644 index 00000000000..95a420f7549 --- /dev/null +++ b/static/usage/v9/input-otp/type/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md b/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md new file mode 100644 index 00000000000..5a1acf3ffc3 --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md b/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..19d1c9fad0a --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonInputPasswordToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonInputPasswordToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input-password-toggle/basic/demo.html b/static/usage/v9/input-password-toggle/basic/demo.html new file mode 100644 index 00000000000..620fa0c3a91 --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + + + +
+ + + +
+ + + + diff --git a/static/usage/v9/input-password-toggle/basic/index.md b/static/usage/v9/input-password-toggle/basic/index.md new file mode 100644 index 00000000000..47aa8f44a54 --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input-password-toggle/basic/javascript.md b/static/usage/v9/input-password-toggle/basic/javascript.md new file mode 100644 index 00000000000..5a1acf3ffc3 --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v9/input-password-toggle/basic/react.md b/static/usage/v9/input-password-toggle/basic/react.md new file mode 100644 index 00000000000..88ade62f97c --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonInput, IonInputPasswordToggle } from '@ionic/react'; + +function Example() { + return ( + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input-password-toggle/basic/vue.md b/static/usage/v9/input-password-toggle/basic/vue.md new file mode 100644 index 00000000000..670f7365c5d --- /dev/null +++ b/static/usage/v9/input-password-toggle/basic/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/input/basic/angular/example_component_html.md b/static/usage/v9/input/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a8678178aa6 --- /dev/null +++ b/static/usage/v9/input/basic/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/basic/angular/example_component_ts.md b/static/usage/v9/input/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/basic/demo.html b/static/usage/v9/input/basic/demo.html new file mode 100644 index 00000000000..63b2c737d62 --- /dev/null +++ b/static/usage/v9/input/basic/demo.html @@ -0,0 +1,48 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/basic/index.md b/static/usage/v9/input/basic/index.md new file mode 100644 index 00000000000..4ab4a4da810 --- /dev/null +++ b/static/usage/v9/input/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/basic/javascript.md b/static/usage/v9/input/basic/javascript.md new file mode 100644 index 00000000000..75e521fa3b6 --- /dev/null +++ b/static/usage/v9/input/basic/javascript.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/basic/react.md b/static/usage/v9/input/basic/react.md new file mode 100644 index 00000000000..ff799a11f62 --- /dev/null +++ b/static/usage/v9/input/basic/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/basic/vue.md b/static/usage/v9/input/basic/vue.md new file mode 100644 index 00000000000..70dc672fef3 --- /dev/null +++ b/static/usage/v9/input/basic/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/input/clear/angular/example_component_html.md b/static/usage/v9/input/clear/angular/example_component_html.md new file mode 100644 index 00000000000..fc52d3b55e8 --- /dev/null +++ b/static/usage/v9/input/clear/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/clear/angular/example_component_ts.md b/static/usage/v9/input/clear/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/clear/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/clear/demo.html b/static/usage/v9/input/clear/demo.html new file mode 100644 index 00000000000..09d36e52439 --- /dev/null +++ b/static/usage/v9/input/clear/demo.html @@ -0,0 +1,59 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/clear/index.md b/static/usage/v9/input/clear/index.md new file mode 100644 index 00000000000..6e214a5ade5 --- /dev/null +++ b/static/usage/v9/input/clear/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/clear/javascript.md b/static/usage/v9/input/clear/javascript.md new file mode 100644 index 00000000000..743ebd8cfd8 --- /dev/null +++ b/static/usage/v9/input/clear/javascript.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/clear/react.md b/static/usage/v9/input/clear/react.md new file mode 100644 index 00000000000..959702b5e9e --- /dev/null +++ b/static/usage/v9/input/clear/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/clear/vue.md b/static/usage/v9/input/clear/vue.md new file mode 100644 index 00000000000..dd00c9abd2f --- /dev/null +++ b/static/usage/v9/input/clear/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v9/input/counter-alignment/angular/example_component_html.md b/static/usage/v9/input/counter-alignment/angular/example_component_html.md new file mode 100644 index 00000000000..c08e1cdd758 --- /dev/null +++ b/static/usage/v9/input/counter-alignment/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v9/input/counter-alignment/angular/example_component_ts.md b/static/usage/v9/input/counter-alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/counter-alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/counter-alignment/demo.html b/static/usage/v9/input/counter-alignment/demo.html new file mode 100644 index 00000000000..aed09e45535 --- /dev/null +++ b/static/usage/v9/input/counter-alignment/demo.html @@ -0,0 +1,30 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ +
+ +
+ + + + diff --git a/static/usage/v9/input/counter-alignment/index.md b/static/usage/v9/input/counter-alignment/index.md new file mode 100644 index 00000000000..49f8b939e33 --- /dev/null +++ b/static/usage/v9/input/counter-alignment/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/counter-alignment/javascript.md b/static/usage/v9/input/counter-alignment/javascript.md new file mode 100644 index 00000000000..3a9b526ba70 --- /dev/null +++ b/static/usage/v9/input/counter-alignment/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + +
+ +
+ +``` diff --git a/static/usage/v9/input/counter-alignment/react.md b/static/usage/v9/input/counter-alignment/react.md new file mode 100644 index 00000000000..5687f244f0c --- /dev/null +++ b/static/usage/v9/input/counter-alignment/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + +
+ +
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/counter-alignment/vue.md b/static/usage/v9/input/counter-alignment/vue.md new file mode 100644 index 00000000000..832cae69ceb --- /dev/null +++ b/static/usage/v9/input/counter-alignment/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/input/counter/angular/example_component_html.md b/static/usage/v9/input/counter/angular/example_component_html.md new file mode 100644 index 00000000000..633ff54c719 --- /dev/null +++ b/static/usage/v9/input/counter/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/input/counter/angular/example_component_ts.md b/static/usage/v9/input/counter/angular/example_component_ts.md new file mode 100644 index 00000000000..14784a211ac --- /dev/null +++ b/static/usage/v9/input/counter/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent { + customCounterFormatter(inputLength: number, maxLength: number) { + return `${maxLength - inputLength} characters remaining`; + } +} +``` diff --git a/static/usage/v9/input/counter/demo.html b/static/usage/v9/input/counter/demo.html new file mode 100644 index 00000000000..0fb81c1b2db --- /dev/null +++ b/static/usage/v9/input/counter/demo.html @@ -0,0 +1,44 @@ + + + + + + Item + + + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v9/input/counter/index.md b/static/usage/v9/input/counter/index.md new file mode 100644 index 00000000000..ec85a7ff1de --- /dev/null +++ b/static/usage/v9/input/counter/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/counter/javascript.md b/static/usage/v9/input/counter/javascript.md new file mode 100644 index 00000000000..f794dc12691 --- /dev/null +++ b/static/usage/v9/input/counter/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input/counter/react.md b/static/usage/v9/input/counter/react.md new file mode 100644 index 00000000000..f3c6cdcd5a6 --- /dev/null +++ b/static/usage/v9/input/counter/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + + `${maxLength - inputLength} characters remaining`} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/counter/vue.md b/static/usage/v9/input/counter/vue.md new file mode 100644 index 00000000000..e01bdb2e716 --- /dev/null +++ b/static/usage/v9/input/counter/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v9/input/fill/angular/example_component_html.md b/static/usage/v9/input/fill/angular/example_component_html.md new file mode 100644 index 00000000000..60af531cd45 --- /dev/null +++ b/static/usage/v9/input/fill/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v9/input/fill/angular/example_component_ts.md b/static/usage/v9/input/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..f7a64600892 --- /dev/null +++ b/static/usage/v9/input/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/fill/demo.html b/static/usage/v9/input/fill/demo.html new file mode 100644 index 00000000000..dd3607da870 --- /dev/null +++ b/static/usage/v9/input/fill/demo.html @@ -0,0 +1,39 @@ + + + + + + Input + + + + + + + + + + + +
+ + + +
+ + + + diff --git a/static/usage/v9/input/fill/index.md b/static/usage/v9/input/fill/index.md new file mode 100644 index 00000000000..85eb4034cea --- /dev/null +++ b/static/usage/v9/input/fill/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/fill/javascript.md b/static/usage/v9/input/fill/javascript.md new file mode 100644 index 00000000000..60af531cd45 --- /dev/null +++ b/static/usage/v9/input/fill/javascript.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v9/input/fill/react.md b/static/usage/v9/input/fill/react.md new file mode 100644 index 00000000000..d62ea62084c --- /dev/null +++ b/static/usage/v9/input/fill/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/fill/vue.md b/static/usage/v9/input/fill/vue.md new file mode 100644 index 00000000000..b974339fb82 --- /dev/null +++ b/static/usage/v9/input/fill/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/input/filtering/angular/example_component_html.md b/static/usage/v9/input/filtering/angular/example_component_html.md new file mode 100644 index 00000000000..31ddc03f197 --- /dev/null +++ b/static/usage/v9/input/filtering/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input/filtering/angular/example_component_ts.md b/static/usage/v9/input/filtering/angular/example_component_ts.md new file mode 100644 index 00000000000..da2d0c35b69 --- /dev/null +++ b/static/usage/v9/input/filtering/angular/example_component_ts.md @@ -0,0 +1,29 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent { + inputModel = ''; + + @ViewChild('ionInputEl', { static: true }) ionInputEl!: IonInput; + + onInput(event: CustomEvent) { + const value = (event.target as HTMLIonInputElement).value ?? ''; + + // Removes non alphanumeric characters + const filteredValue = (value as string).replace(/[^a-zA-Z0-9]+/g, ''); + + /** + * Update both the state variable and + * the component to keep them in sync. + */ + this.ionInputEl.value = this.inputModel = filteredValue; + } +} +``` diff --git a/static/usage/v9/input/filtering/demo.html b/static/usage/v9/input/filtering/demo.html new file mode 100644 index 00000000000..6c4ef5c8736 --- /dev/null +++ b/static/usage/v9/input/filtering/demo.html @@ -0,0 +1,36 @@ + + + + + + Input + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v9/input/filtering/index.md b/static/usage/v9/input/filtering/index.md new file mode 100644 index 00000000000..ec50da1c07d --- /dev/null +++ b/static/usage/v9/input/filtering/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/filtering/javascript.md b/static/usage/v9/input/filtering/javascript.md new file mode 100644 index 00000000000..8b17b16723b --- /dev/null +++ b/static/usage/v9/input/filtering/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/input/filtering/react.md b/static/usage/v9/input/filtering/react.md new file mode 100644 index 00000000000..af36ce43c2b --- /dev/null +++ b/static/usage/v9/input/filtering/react.md @@ -0,0 +1,36 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + const [inputModel, setInputModel] = useState(''); + const ionInputEl = useRef(null); + + const onInput = (event: Event) => { + const value = (event.target as HTMLIonInputElement).value as string; + + // Removes non alphanumeric characters + const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, ''); + + /** + * Update both the state variable and + * the component to keep them in sync. + */ + setInputModel(filteredValue); + + const inputCmp = ionInputEl.current; + if (inputCmp !== null) { + inputCmp.value = filteredValue; + } + }; + + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/filtering/vue.md b/static/usage/v9/input/filtering/vue.md new file mode 100644 index 00000000000..2684a14976e --- /dev/null +++ b/static/usage/v9/input/filtering/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/input/helper-error/angular/example_component_html.md b/static/usage/v9/input/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..ba5030c0026 --- /dev/null +++ b/static/usage/v9/input/helper-error/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + +``` diff --git a/static/usage/v9/input/helper-error/angular/example_component_ts.md b/static/usage/v9/input/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..f7a64600892 --- /dev/null +++ b/static/usage/v9/input/helper-error/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/helper-error/demo.html b/static/usage/v9/input/helper-error/demo.html new file mode 100644 index 00000000000..a489cb11a3f --- /dev/null +++ b/static/usage/v9/input/helper-error/demo.html @@ -0,0 +1,62 @@ + + + + + + Input + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/input/helper-error/index.md b/static/usage/v9/input/helper-error/index.md new file mode 100644 index 00000000000..8822546740e --- /dev/null +++ b/static/usage/v9/input/helper-error/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/helper-error/javascript.md b/static/usage/v9/input/helper-error/javascript.md new file mode 100644 index 00000000000..406f1e6e797 --- /dev/null +++ b/static/usage/v9/input/helper-error/javascript.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/input/helper-error/react.md b/static/usage/v9/input/helper-error/react.md new file mode 100644 index 00000000000..88b2051f003 --- /dev/null +++ b/static/usage/v9/input/helper-error/react.md @@ -0,0 +1,44 @@ +```tsx +import React, { useState } from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const validateEmail = (email: string) => { + return email.match( + /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ + ); + }; + + const validate = (event: Event) => { + const value = (event.target as HTMLInputElement).value; + + setIsValid(undefined); + + if (value === '') return; + + validateEmail(value) !== null ? setIsValid(true) : setIsValid(false); + }; + + const markTouched = () => { + setIsTouched(true); + }; + + return ( + validate(event)} + onIonBlur={() => markTouched()} + > + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/helper-error/vue.md b/static/usage/v9/input/helper-error/vue.md new file mode 100644 index 00000000000..d46816d6030 --- /dev/null +++ b/static/usage/v9/input/helper-error/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v9/input/label-placement/angular/example_component_html.md b/static/usage/v9/input/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..151adb55b5d --- /dev/null +++ b/static/usage/v9/input/label-placement/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/label-placement/angular/example_component_ts.md b/static/usage/v9/input/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/label-placement/demo.html b/static/usage/v9/input/label-placement/demo.html new file mode 100644 index 00000000000..7953ec266a7 --- /dev/null +++ b/static/usage/v9/input/label-placement/demo.html @@ -0,0 +1,44 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/label-placement/index.md b/static/usage/v9/input/label-placement/index.md new file mode 100644 index 00000000000..74a5b4c5ee4 --- /dev/null +++ b/static/usage/v9/input/label-placement/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/label-placement/javascript.md b/static/usage/v9/input/label-placement/javascript.md new file mode 100644 index 00000000000..f9c79fc46ae --- /dev/null +++ b/static/usage/v9/input/label-placement/javascript.md @@ -0,0 +1,19 @@ +```html + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/label-placement/react.md b/static/usage/v9/input/label-placement/react.md new file mode 100644 index 00000000000..aa4f1b3c484 --- /dev/null +++ b/static/usage/v9/input/label-placement/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/label-placement/vue.md b/static/usage/v9/input/label-placement/vue.md new file mode 100644 index 00000000000..628492195a3 --- /dev/null +++ b/static/usage/v9/input/label-placement/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/input/label-slot/angular/example_component_html.md b/static/usage/v9/input/label-slot/angular/example_component_html.md new file mode 100644 index 00000000000..21bdbf74b64 --- /dev/null +++ b/static/usage/v9/input/label-slot/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v9/input/label-slot/angular/example_component_ts.md b/static/usage/v9/input/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..3c7b62f436e --- /dev/null +++ b/static/usage/v9/input/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/label-slot/demo.html b/static/usage/v9/input/label-slot/demo.html new file mode 100644 index 00000000000..00d5652a23c --- /dev/null +++ b/static/usage/v9/input/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + input + + + + + + + + + +
+ + + +
Email (Required)
+ + + +
+ + + + diff --git a/static/usage/v9/input/label-slot/index.md b/static/usage/v9/input/label-slot/index.md new file mode 100644 index 00000000000..39b54ce1747 --- /dev/null +++ b/static/usage/v9/input/label-slot/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/label-slot/javascript.md b/static/usage/v9/input/label-slot/javascript.md new file mode 100644 index 00000000000..494d85ba6cb --- /dev/null +++ b/static/usage/v9/input/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Email (Required)
+ + + +``` diff --git a/static/usage/v9/input/label-slot/react.md b/static/usage/v9/input/label-slot/react.md new file mode 100644 index 00000000000..144a7e80e97 --- /dev/null +++ b/static/usage/v9/input/label-slot/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Email (Required) +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/label-slot/vue.md b/static/usage/v9/input/label-slot/vue.md new file mode 100644 index 00000000000..97906146a2e --- /dev/null +++ b/static/usage/v9/input/label-slot/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v9/input/mask/angular/example_component_html.md b/static/usage/v9/input/mask/angular/example_component_html.md new file mode 100644 index 00000000000..2484e0c64e3 --- /dev/null +++ b/static/usage/v9/input/mask/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v9/input/mask/angular/example_component_ts.md b/static/usage/v9/input/mask/angular/example_component_ts.md new file mode 100644 index 00000000000..e2876fc942f --- /dev/null +++ b/static/usage/v9/input/mask/angular/example_component_ts.md @@ -0,0 +1,39 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; +import { FormsModule } from '@angular/forms'; + +import { MaskitoOptions, MaskitoElementPredicate, maskitoTransform } from '@maskito/core'; +import { MaskitoDirective } from '@maskito/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [FormsModule, IonInput, IonItem, IonList, MaskitoDirective], +}) +export class ExampleComponent { + readonly phoneMask: MaskitoOptions = { + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], + }; + + //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid + myPhoneNumber = maskitoTransform('5555551212', this.phoneMask); + + readonly cardMask: MaskitoOptions = { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(3).fill(/\d/), + ], + }; + + readonly maskPredicate: MaskitoElementPredicate = async (el) => (el as HTMLIonInputElement).getInputElement(); +} +``` diff --git a/static/usage/v9/input/mask/demo.html b/static/usage/v9/input/mask/demo.html new file mode 100644 index 00000000000..dc45874e043 --- /dev/null +++ b/static/usage/v9/input/mask/demo.html @@ -0,0 +1,77 @@ + + + + + + Input + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + diff --git a/static/usage/v9/input/mask/index.md b/static/usage/v9/input/mask/index.md new file mode 100644 index 00000000000..3afbcad9ccf --- /dev/null +++ b/static/usage/v9/input/mask/index.md @@ -0,0 +1,56 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react.md'; + +import vue_example_vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/mask/javascript/index_html.md b/static/usage/v9/input/mask/javascript/index_html.md new file mode 100644 index 00000000000..9d2f90c90dd --- /dev/null +++ b/static/usage/v9/input/mask/javascript/index_html.md @@ -0,0 +1,48 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/input/mask/javascript/index_ts.md b/static/usage/v9/input/mask/javascript/index_ts.md new file mode 100644 index 00000000000..21d48d06c02 --- /dev/null +++ b/static/usage/v9/input/mask/javascript/index_ts.md @@ -0,0 +1,40 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { Maskito, maskitoTransform } from '@maskito/core'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); + +(window as any).Maskito = Maskito; +(window as any).maskitoTransform = maskitoTransform; +``` diff --git a/static/usage/v9/input/mask/react.md b/static/usage/v9/input/mask/react.md new file mode 100644 index 00000000000..d6df2eb4bde --- /dev/null +++ b/static/usage/v9/input/mask/react.md @@ -0,0 +1,65 @@ +```tsx +import { useState } from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +import { MaskitoOptions, maskitoTransform } from '@maskito/core'; +import { useMaskito } from '@maskito/react'; + +function Example() { + const cardMask = useMaskito({ + options: { + mask: [ + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(4).fill(/\d/), + ' ', + ...Array(3).fill(/\d/), + ], + }, + }); + + const phoneMaskOptions: MaskitoOptions = { + mask: ['+', '1', ' ', '(', /\d/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/], + }; + const phoneMask = useMaskito({ options: phoneMaskOptions }); + + //If you need to set an initial value, you can use maskitoTransform to ensure the value is valid + const [myPhoneNumber, setMyPhoneNumber] = useState(maskitoTransform('5555551212', phoneMaskOptions)); + + return ( + + + { + if (cardRef) { + const input = await cardRef.getInputElement(); + cardMask(input); + } + }} + label="Card number" + placeholder="0000 0000 0000 0000" + > + + + { + if (phoneInput) { + const input = await phoneInput.getInputElement(); + phoneMask(input); + } + }} + value={myPhoneNumber} + onIonInput={(e) => setMyPhoneNumber(e.detail.value || '')} + label="US phone number" + placeholder="+1 (xxx) xxx-xxxx" + > + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/mask/vue.md b/static/usage/v9/input/mask/vue.md new file mode 100644 index 00000000000..815a2d51386 --- /dev/null +++ b/static/usage/v9/input/mask/vue.md @@ -0,0 +1,60 @@ +```html + + + +``` diff --git a/static/usage/v9/input/no-visible-label/angular/example_component_html.md b/static/usage/v9/input/no-visible-label/angular/example_component_html.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v9/input/no-visible-label/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input/no-visible-label/angular/example_component_ts.md b/static/usage/v9/input/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/no-visible-label/demo.html b/static/usage/v9/input/no-visible-label/demo.html new file mode 100644 index 00000000000..cb90ecfe0c7 --- /dev/null +++ b/static/usage/v9/input/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + input + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v9/input/no-visible-label/index.md b/static/usage/v9/input/no-visible-label/index.md new file mode 100644 index 00000000000..623a71f53e9 --- /dev/null +++ b/static/usage/v9/input/no-visible-label/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/no-visible-label/javascript.md b/static/usage/v9/input/no-visible-label/javascript.md new file mode 100644 index 00000000000..32616a6a196 --- /dev/null +++ b/static/usage/v9/input/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input/no-visible-label/react.md b/static/usage/v9/input/no-visible-label/react.md new file mode 100644 index 00000000000..38842ecb0b6 --- /dev/null +++ b/static/usage/v9/input/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/no-visible-label/vue.md b/static/usage/v9/input/no-visible-label/vue.md new file mode 100644 index 00000000000..ceaa97a294b --- /dev/null +++ b/static/usage/v9/input/no-visible-label/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/input/set-focus/angular/example_component_html.md b/static/usage/v9/input/set-focus/angular/example_component_html.md new file mode 100644 index 00000000000..92c9d6b2561 --- /dev/null +++ b/static/usage/v9/input/set-focus/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Click to set focus + + + + + +``` diff --git a/static/usage/v9/input/set-focus/angular/example_component_ts.md b/static/usage/v9/input/set-focus/angular/example_component_ts.md new file mode 100644 index 00000000000..1551bbb018f --- /dev/null +++ b/static/usage/v9/input/set-focus/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/set-focus/demo.html b/static/usage/v9/input/set-focus/demo.html new file mode 100644 index 00000000000..97c172db82f --- /dev/null +++ b/static/usage/v9/input/set-focus/demo.html @@ -0,0 +1,33 @@ + + + + + + setFocus + + + + + + + + + + + + Click to set focus + + + + + + + + + + diff --git a/static/usage/v9/input/set-focus/index.md b/static/usage/v9/input/set-focus/index.md new file mode 100644 index 00000000000..24213243435 --- /dev/null +++ b/static/usage/v9/input/set-focus/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import vue from './vue.md'; +import react from './react.md'; + + diff --git a/static/usage/v9/input/set-focus/javascript.md b/static/usage/v9/input/set-focus/javascript.md new file mode 100644 index 00000000000..1d5a5b4cfbc --- /dev/null +++ b/static/usage/v9/input/set-focus/javascript.md @@ -0,0 +1,17 @@ +```html + + + Click to set focus + + + + + + + +``` diff --git a/static/usage/v9/input/set-focus/react.md b/static/usage/v9/input/set-focus/react.md new file mode 100644 index 00000000000..023abbd8968 --- /dev/null +++ b/static/usage/v9/input/set-focus/react.md @@ -0,0 +1,21 @@ +```tsx +import React, { useRef } from 'react'; +import { IonInput, IonItem, IonList, IonButton } from '@ionic/react'; + +const Home = () => { + const input = useRef(null); + + return ( + + + input.current?.setFocus()}>Click to set focus + + + + + + ); +}; + +export default Home; +``` diff --git a/static/usage/v9/input/set-focus/vue.md b/static/usage/v9/input/set-focus/vue.md new file mode 100644 index 00000000000..84ee1879142 --- /dev/null +++ b/static/usage/v9/input/set-focus/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/input/start-end-slots/angular/example_component_html.md b/static/usage/v9/input/start-end-slots/angular/example_component_html.md new file mode 100644 index 00000000000..b33306d4727 --- /dev/null +++ b/static/usage/v9/input/start-end-slots/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/input/start-end-slots/angular/example_component_ts.md b/static/usage/v9/input/start-end-slots/angular/example_component_ts.md new file mode 100644 index 00000000000..a4eca7f62fb --- /dev/null +++ b/static/usage/v9/input/start-end-slots/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { eye, lockClosed } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonInput, IonItem, IonList], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ eye, lockClosed }); + } +} +``` diff --git a/static/usage/v9/input/start-end-slots/demo.html b/static/usage/v9/input/start-end-slots/demo.html new file mode 100644 index 00000000000..c327f737abe --- /dev/null +++ b/static/usage/v9/input/start-end-slots/demo.html @@ -0,0 +1,31 @@ + + + + + + Input + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/start-end-slots/index.md b/static/usage/v9/input/start-end-slots/index.md new file mode 100644 index 00000000000..5665679ae71 --- /dev/null +++ b/static/usage/v9/input/start-end-slots/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/start-end-slots/javascript/index_html.md b/static/usage/v9/input/start-end-slots/javascript/index_html.md new file mode 100644 index 00000000000..ed192bb8c41 --- /dev/null +++ b/static/usage/v9/input/start-end-slots/javascript/index_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/input/start-end-slots/javascript/index_ts.md b/static/usage/v9/input/start-end-slots/javascript/index_ts.md new file mode 100644 index 00000000000..002e3ae87ac --- /dev/null +++ b/static/usage/v9/input/start-end-slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { eye, lockClosed } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'eye': eye, 'lock-closed': lockClosed }); + */ +addIcons({ eye, lockClosed }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/input/start-end-slots/react.md b/static/usage/v9/input/start-end-slots/react.md new file mode 100644 index 00000000000..e15086ee6f4 --- /dev/null +++ b/static/usage/v9/input/start-end-slots/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/react'; +import { eye, lockClosed } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/start-end-slots/vue.md b/static/usage/v9/input/start-end-slots/vue.md new file mode 100644 index 00000000000..77f2a5d472b --- /dev/null +++ b/static/usage/v9/input/start-end-slots/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/input/theming/colors/angular/example_component_html.md b/static/usage/v9/input/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..88a63e9a102 --- /dev/null +++ b/static/usage/v9/input/theming/colors/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/input/theming/colors/angular/example_component_ts.md b/static/usage/v9/input/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..f7a64600892 --- /dev/null +++ b/static/usage/v9/input/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/theming/colors/demo.html b/static/usage/v9/input/theming/colors/demo.html new file mode 100644 index 00000000000..97cfc345a51 --- /dev/null +++ b/static/usage/v9/input/theming/colors/demo.html @@ -0,0 +1,42 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/theming/colors/index.md b/static/usage/v9/input/theming/colors/index.md new file mode 100644 index 00000000000..c02a2a16e0e --- /dev/null +++ b/static/usage/v9/input/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/theming/colors/javascript.md b/static/usage/v9/input/theming/colors/javascript.md new file mode 100644 index 00000000000..88a63e9a102 --- /dev/null +++ b/static/usage/v9/input/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/input/theming/colors/react.md b/static/usage/v9/input/theming/colors/react.md new file mode 100644 index 00000000000..7242cd393d6 --- /dev/null +++ b/static/usage/v9/input/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/theming/colors/vue.md b/static/usage/v9/input/theming/colors/vue.md new file mode 100644 index 00000000000..60968a1cd27 --- /dev/null +++ b/static/usage/v9/input/theming/colors/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/input/theming/css-properties/angular/example_component_css.md b/static/usage/v9/input/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..4885a193f87 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-input.custom { + --background: #373737; + --color: #fff; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; + + --padding-bottom: 10px; + --padding-end: 10px; + --padding-start: 10px; + --padding-top: 10px; +} +``` diff --git a/static/usage/v9/input/theming/css-properties/angular/example_component_html.md b/static/usage/v9/input/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..243bb91401b --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +``` diff --git a/static/usage/v9/input/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/input/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..f7a64600892 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/theming/css-properties/angular/global_css.md b/static/usage/v9/input/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..ba3ec022284 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-input + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v9/input/theming/css-properties/demo.html b/static/usage/v9/input/theming/css-properties/demo.html new file mode 100644 index 00000000000..d82461b2113 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/demo.html @@ -0,0 +1,55 @@ + + + + + + Input + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/input/theming/css-properties/index.md b/static/usage/v9/input/theming/css-properties/index.md new file mode 100644 index 00000000000..f153179e686 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/input/theming/css-properties/javascript.md b/static/usage/v9/input/theming/css-properties/javascript.md new file mode 100644 index 00000000000..5f81aae2da0 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/javascript.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v9/input/theming/css-properties/react/main_css.md b/static/usage/v9/input/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..6dd25be2d40 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/react/main_css.md @@ -0,0 +1,20 @@ +```css +ion-input.custom { + --background: #373737; + --color: #fff; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; + + --padding-bottom: 10px; + --padding-end: 10px; + --padding-start: 10px; + --padding-top: 10px; +} + +ion-input.custom.ios .input-bottom .helper-text, +ion-input.custom.ios .input-bottom .counter, +ion-input.custom.md .input-bottom .helper-text, +ion-input.custom.md .input-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v9/input/theming/css-properties/react/main_tsx.md b/static/usage/v9/input/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8206bb3161e --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonInput } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/theming/css-properties/vue.md b/static/usage/v9/input/theming/css-properties/vue.md new file mode 100644 index 00000000000..71f9ab13376 --- /dev/null +++ b/static/usage/v9/input/theming/css-properties/vue.md @@ -0,0 +1,37 @@ +```html + + + + + +``` diff --git a/static/usage/v9/input/types/angular/example_component_html.md b/static/usage/v9/input/types/angular/example_component_html.md new file mode 100644 index 00000000000..ff696b22cd8 --- /dev/null +++ b/static/usage/v9/input/types/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/types/angular/example_component_ts.md b/static/usage/v9/input/types/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/input/types/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/input/types/demo.html b/static/usage/v9/input/types/demo.html new file mode 100644 index 00000000000..a73aa8cd7fd --- /dev/null +++ b/static/usage/v9/input/types/demo.html @@ -0,0 +1,48 @@ + + + + + + Input + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/input/types/index.md b/static/usage/v9/input/types/index.md new file mode 100644 index 00000000000..75555b4efa2 --- /dev/null +++ b/static/usage/v9/input/types/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/input/types/javascript.md b/static/usage/v9/input/types/javascript.md new file mode 100644 index 00000000000..ff696b22cd8 --- /dev/null +++ b/static/usage/v9/input/types/javascript.md @@ -0,0 +1,25 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/input/types/react.md b/static/usage/v9/input/types/react.md new file mode 100644 index 00000000000..e5534ec2e1e --- /dev/null +++ b/static/usage/v9/input/types/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/input/types/vue.md b/static/usage/v9/input/types/vue.md new file mode 100644 index 00000000000..c0e129ce4ce --- /dev/null +++ b/static/usage/v9/input/types/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/item-divider/basic/angular/example_component_html.md b/static/usage/v9/item-divider/basic/angular/example_component_html.md new file mode 100644 index 00000000000..35dccbdbc88 --- /dev/null +++ b/static/usage/v9/item-divider/basic/angular/example_component_html.md @@ -0,0 +1,35 @@ +```html + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +``` diff --git a/static/usage/v9/item-divider/basic/angular/example_component_ts.md b/static/usage/v9/item-divider/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..3afb8329d3a --- /dev/null +++ b/static/usage/v9/item-divider/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-divider/basic/demo.html b/static/usage/v9/item-divider/basic/demo.html new file mode 100644 index 00000000000..ce5fb25eab6 --- /dev/null +++ b/static/usage/v9/item-divider/basic/demo.html @@ -0,0 +1,60 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +
+ + + + diff --git a/static/usage/v9/item-divider/basic/index.md b/static/usage/v9/item-divider/basic/index.md new file mode 100644 index 00000000000..7f43e781773 --- /dev/null +++ b/static/usage/v9/item-divider/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-divider/basic/javascript.md b/static/usage/v9/item-divider/basic/javascript.md new file mode 100644 index 00000000000..35dccbdbc88 --- /dev/null +++ b/static/usage/v9/item-divider/basic/javascript.md @@ -0,0 +1,35 @@ +```html + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + +``` diff --git a/static/usage/v9/item-divider/basic/react.md b/static/usage/v9/item-divider/basic/react.md new file mode 100644 index 00000000000..14ad85b1c82 --- /dev/null +++ b/static/usage/v9/item-divider/basic/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Section A + + + + A1 + + + A2 + + + A3 + + + + + + Section B + + + + B1 + + + B2 + + + B3 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-divider/basic/vue.md b/static/usage/v9/item-divider/basic/vue.md new file mode 100644 index 00000000000..6d182a324fe --- /dev/null +++ b/static/usage/v9/item-divider/basic/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md b/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..e23070ec5a0 --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md b/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..ffcd27c4cae --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-divider/theming/colors/demo.html b/static/usage/v9/item-divider/theming/colors/demo.html new file mode 100644 index 00000000000..24dc0354eee --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v9/item-divider/theming/colors/index.md b/static/usage/v9/item-divider/theming/colors/index.md new file mode 100644 index 00000000000..b508059f3f6 --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-divider/theming/colors/javascript.md b/static/usage/v9/item-divider/theming/colors/javascript.md new file mode 100644 index 00000000000..e23070ec5a0 --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v9/item-divider/theming/colors/react.md b/static/usage/v9/item-divider/theming/colors/react.md new file mode 100644 index 00000000000..7bf4cd2193f --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonItemDivider, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-divider/theming/colors/vue.md b/static/usage/v9/item-divider/theming/colors/vue.md new file mode 100644 index 00000000000..60f964551f5 --- /dev/null +++ b/static/usage/v9/item-divider/theming/colors/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..7c29ebdd846 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-item-divider { + --background: #19422d; + --color: #fff; + + --padding-top: 10px; + --padding-bottom: 10px; + --padding-start: 20px; + --padding-end: 20px; +} +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..172fdad114f --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Item Divider + +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..ffcd27c4cae --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItemDivider, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItemDivider, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/demo.html b/static/usage/v9/item-divider/theming/css-properties/demo.html new file mode 100644 index 00000000000..7f5e55bad5b --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/demo.html @@ -0,0 +1,36 @@ + + + + + + Item Divider + + + + + + + + + + + +
+ + Item Divider + +
+ + + + diff --git a/static/usage/v9/item-divider/theming/css-properties/index.md b/static/usage/v9/item-divider/theming/css-properties/index.md new file mode 100644 index 00000000000..93740387e56 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-divider/theming/css-properties/javascript.md b/static/usage/v9/item-divider/theming/css-properties/javascript.md new file mode 100644 index 00000000000..0c0cdc26f55 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/javascript.md @@ -0,0 +1,17 @@ +```html + + + + Item Divider + +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/react/main_css.md b/static/usage/v9/item-divider/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..7c29ebdd846 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-item-divider { + --background: #19422d; + --color: #fff; + + --padding-top: 10px; + --padding-bottom: 10px; + --padding-start: 20px; + --padding-end: 20px; +} +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md b/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..b3083033541 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonItemDivider, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Item Divider + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-divider/theming/css-properties/vue.md b/static/usage/v9/item-divider/theming/css-properties/vue.md new file mode 100644 index 00000000000..2a6776fcb76 --- /dev/null +++ b/static/usage/v9/item-divider/theming/css-properties/vue.md @@ -0,0 +1,23 @@ +```html + + + + + +``` diff --git a/static/usage/v9/item-group/basic/angular/example_component_html.md b/static/usage/v9/item-group/basic/angular/example_component_html.md new file mode 100644 index 00000000000..8ea0ff7cef9 --- /dev/null +++ b/static/usage/v9/item-group/basic/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +``` diff --git a/static/usage/v9/item-group/basic/angular/example_component_ts.md b/static/usage/v9/item-group/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..71496d3e7ab --- /dev/null +++ b/static/usage/v9/item-group/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-group/basic/demo.html b/static/usage/v9/item-group/basic/demo.html new file mode 100644 index 00000000000..748afc90ee8 --- /dev/null +++ b/static/usage/v9/item-group/basic/demo.html @@ -0,0 +1,58 @@ + + + + + + Item Group + + + + + + + + + + + +
+ + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +
+ + + + diff --git a/static/usage/v9/item-group/basic/index.md b/static/usage/v9/item-group/basic/index.md new file mode 100644 index 00000000000..6485ed86256 --- /dev/null +++ b/static/usage/v9/item-group/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-group/basic/javascript.md b/static/usage/v9/item-group/basic/javascript.md new file mode 100644 index 00000000000..8ea0ff7cef9 --- /dev/null +++ b/static/usage/v9/item-group/basic/javascript.md @@ -0,0 +1,33 @@ +```html + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + +``` diff --git a/static/usage/v9/item-group/basic/react.md b/static/usage/v9/item-group/basic/react.md new file mode 100644 index 00000000000..ddb3f381230 --- /dev/null +++ b/static/usage/v9/item-group/basic/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + + A + + + + Angola + + + Argentina + + + Armenia + + + + + + B + + + + Bangladesh + + + Belarus + + + Belgium + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-group/basic/vue.md b/static/usage/v9/item-group/basic/vue.md new file mode 100644 index 00000000000..4b643fad6fb --- /dev/null +++ b/static/usage/v9/item-group/basic/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/item-group/sliding-items/angular/example_component_html.md b/static/usage/v9/item-group/sliding-items/angular/example_component_html.md new file mode 100644 index 00000000000..2708fde7acc --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/angular/example_component_html.md @@ -0,0 +1,67 @@ +```html + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +``` diff --git a/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md b/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md new file mode 100644 index 00000000000..79999529281 --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-group/sliding-items/demo.html b/static/usage/v9/item-group/sliding-items/demo.html new file mode 100644 index 00000000000..9b1438916e5 --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/demo.html @@ -0,0 +1,92 @@ + + + + + + Item Group + + + + + + + + + + + +
+ + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +
+ + + + diff --git a/static/usage/v9/item-group/sliding-items/index.md b/static/usage/v9/item-group/sliding-items/index.md new file mode 100644 index 00000000000..454627b462a --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-group/sliding-items/javascript.md b/static/usage/v9/item-group/sliding-items/javascript.md new file mode 100644 index 00000000000..2708fde7acc --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/javascript.md @@ -0,0 +1,67 @@ +```html + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + +``` diff --git a/static/usage/v9/item-group/sliding-items/react.md b/static/usage/v9/item-group/sliding-items/react.md new file mode 100644 index 00000000000..716935f065c --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/react.md @@ -0,0 +1,85 @@ +```tsx +import React from 'react'; +import { + IonItem, + IonItemDivider, + IonItemGroup, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, +} from '@ionic/react'; + +function Example() { + return ( + <> + + + Fruits + + + + + Grapes + + + Favorite + + + + + + Apples + + + Favorite + + + + + + Bananas + + + Favorite + + + + + + + Vegetables + + + + + Carrots + + + Favorite + + + + + + Broccoli + + + Favorite + + + + + + Celery + + + Favorite + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-group/sliding-items/vue.md b/static/usage/v9/item-group/sliding-items/vue.md new file mode 100644 index 00000000000..16ae176267c --- /dev/null +++ b/static/usage/v9/item-group/sliding-items/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v9/item-sliding/basic/angular/example_component_html.md b/static/usage/v9/item-sliding/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a5404da4cb4 --- /dev/null +++ b/static/usage/v9/item-sliding/basic/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v9/item-sliding/basic/angular/example_component_ts.md b/static/usage/v9/item-sliding/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..262c2d479c4 --- /dev/null +++ b/static/usage/v9/item-sliding/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-sliding/basic/demo.html b/static/usage/v9/item-sliding/basic/demo.html new file mode 100644 index 00000000000..2f26e0e210d --- /dev/null +++ b/static/usage/v9/item-sliding/basic/demo.html @@ -0,0 +1,64 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v9/item-sliding/basic/index.md b/static/usage/v9/item-sliding/basic/index.md new file mode 100644 index 00000000000..bbacafc0f6b --- /dev/null +++ b/static/usage/v9/item-sliding/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-sliding/basic/javascript.md b/static/usage/v9/item-sliding/basic/javascript.md new file mode 100644 index 00000000000..a5404da4cb4 --- /dev/null +++ b/static/usage/v9/item-sliding/basic/javascript.md @@ -0,0 +1,39 @@ +```html + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v9/item-sliding/basic/react.md b/static/usage/v9/item-sliding/basic/react.md new file mode 100644 index 00000000000..d9b45125574 --- /dev/null +++ b/static/usage/v9/item-sliding/basic/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Sliding Item with End Options + + + + Favorite + Delete + + + + + + Archive + + + + Sliding Item with Start Options + + + + + + Archive + + + + Sliding Item with Options on Both Sides + + + + Favorite + Delete + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-sliding/basic/vue.md b/static/usage/v9/item-sliding/basic/vue.md new file mode 100644 index 00000000000..4df17bf5d97 --- /dev/null +++ b/static/usage/v9/item-sliding/basic/vue.md @@ -0,0 +1,45 @@ +```html + + + +``` diff --git a/static/usage/v9/item-sliding/expandable/angular/example_component_html.md b/static/usage/v9/item-sliding/expandable/angular/example_component_html.md new file mode 100644 index 00000000000..b7e37fa57c7 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md b/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md new file mode 100644 index 00000000000..262c2d479c4 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item-sliding/expandable/demo.html b/static/usage/v9/item-sliding/expandable/demo.html new file mode 100644 index 00000000000..6ceebea9641 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/demo.html @@ -0,0 +1,43 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +
+ + + + diff --git a/static/usage/v9/item-sliding/expandable/index.md b/static/usage/v9/item-sliding/expandable/index.md new file mode 100644 index 00000000000..f9b4ca4a346 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-sliding/expandable/javascript.md b/static/usage/v9/item-sliding/expandable/javascript.md new file mode 100644 index 00000000000..b7e37fa57c7 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/javascript.md @@ -0,0 +1,18 @@ +```html + + + + Archive + + + + Sliding Item with Expandable Options + + + + Favorite + Delete + + + +``` diff --git a/static/usage/v9/item-sliding/expandable/react.md b/static/usage/v9/item-sliding/expandable/react.md new file mode 100644 index 00000000000..6879f80f7c1 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + Archive + + + + + Sliding Item with Expandable Options + + + + Favorite + + Delete + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-sliding/expandable/vue.md b/static/usage/v9/item-sliding/expandable/vue.md new file mode 100644 index 00000000000..91bd715d899 --- /dev/null +++ b/static/usage/v9/item-sliding/expandable/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v9/item-sliding/icons/angular/example_component_html.md b/static/usage/v9/item-sliding/icons/angular/example_component_html.md new file mode 100644 index 00000000000..6556b41e94b --- /dev/null +++ b/static/usage/v9/item-sliding/icons/angular/example_component_html.md @@ -0,0 +1,120 @@ +```html + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +``` diff --git a/static/usage/v9/item-sliding/icons/angular/example_component_ts.md b/static/usage/v9/item-sliding/icons/angular/example_component_ts.md new file mode 100644 index 00000000000..9383c9b120f --- /dev/null +++ b/static/usage/v9/item-sliding/icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { archive, heart, trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ archive, heart, trash }); + } +} +``` diff --git a/static/usage/v9/item-sliding/icons/demo.html b/static/usage/v9/item-sliding/icons/demo.html new file mode 100644 index 00000000000..a2d58f248e1 --- /dev/null +++ b/static/usage/v9/item-sliding/icons/demo.html @@ -0,0 +1,146 @@ + + + + + + Item Sliding + + + + + + + + + + + +
+ + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +
+ + + + diff --git a/static/usage/v9/item-sliding/icons/index.md b/static/usage/v9/item-sliding/icons/index.md new file mode 100644 index 00000000000..2ae98f306af --- /dev/null +++ b/static/usage/v9/item-sliding/icons/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item-sliding/icons/javascript/index_html.md b/static/usage/v9/item-sliding/icons/javascript/index_html.md new file mode 100644 index 00000000000..6556b41e94b --- /dev/null +++ b/static/usage/v9/item-sliding/icons/javascript/index_html.md @@ -0,0 +1,120 @@ +```html + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + +``` diff --git a/static/usage/v9/item-sliding/icons/javascript/index_ts.md b/static/usage/v9/item-sliding/icons/javascript/index_ts.md new file mode 100644 index 00000000000..d7dbf2289ee --- /dev/null +++ b/static/usage/v9/item-sliding/icons/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { archive, heart, trash } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'archive': archive, 'heart': heart, 'trash': trash }); + */ +addIcons({ archive, heart, trash }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item-sliding/icons/react.md b/static/usage/v9/item-sliding/icons/react.md new file mode 100644 index 00000000000..8961a06b352 --- /dev/null +++ b/static/usage/v9/item-sliding/icons/react.md @@ -0,0 +1,129 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonList } from '@ionic/react'; +import { archive, heart, trash } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + Sliding Item with Icons Only + + + + + + + + + + + + + + + + + Archive + + + + + Sliding Item with Start Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with End Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Top Icons + + + + + + Favorite + + + + Delete + + + + + + + + + Archive + + + + + Sliding Item with Bottom Icons + + + + + + Favorite + + + + Delete + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item-sliding/icons/vue.md b/static/usage/v9/item-sliding/icons/vue.md new file mode 100644 index 00000000000..92e2aa7fcd3 --- /dev/null +++ b/static/usage/v9/item-sliding/icons/vue.md @@ -0,0 +1,127 @@ +```html + + + +``` diff --git a/static/usage/v9/item/basic/angular/example_component_html.md b/static/usage/v9/item/basic/angular/example_component_html.md new file mode 100644 index 00000000000..3f50edc287e --- /dev/null +++ b/static/usage/v9/item/basic/angular/example_component_html.md @@ -0,0 +1,40 @@ +```html + + Basic Item + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v9/item/basic/angular/example_component_ts.md b/static/usage/v9/item/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/basic/demo.html b/static/usage/v9/item/basic/demo.html new file mode 100644 index 00000000000..1530a541672 --- /dev/null +++ b/static/usage/v9/item/basic/demo.html @@ -0,0 +1,65 @@ + + + + + + Item + + + + + + + + + + + +
+ + Basic Item + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v9/item/basic/index.md b/static/usage/v9/item/basic/index.md new file mode 100644 index 00000000000..aee7219bc60 --- /dev/null +++ b/static/usage/v9/item/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/basic/javascript.md b/static/usage/v9/item/basic/javascript.md new file mode 100644 index 00000000000..3f50edc287e --- /dev/null +++ b/static/usage/v9/item/basic/javascript.md @@ -0,0 +1,40 @@ +```html + + Basic Item + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v9/item/basic/react.md b/static/usage/v9/item/basic/react.md new file mode 100644 index 00000000000..2c78219aee4 --- /dev/null +++ b/static/usage/v9/item/basic/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Basic Item + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

H1 Heading

+

Paragraph

+ + + + + +

H2 Heading

+

Paragraph

+ + + + + +

H3 Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/basic/vue.md b/static/usage/v9/item/basic/vue.md new file mode 100644 index 00000000000..494e7c62f0c --- /dev/null +++ b/static/usage/v9/item/basic/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v9/item/buttons/angular/example_component_html.md b/static/usage/v9/item/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..4d77ff8b9d8 --- /dev/null +++ b/static/usage/v9/item/buttons/angular/example_component_html.md @@ -0,0 +1,36 @@ +```html + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +``` diff --git a/static/usage/v9/item/buttons/angular/example_component_ts.md b/static/usage/v9/item/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..a1be1f73cb6 --- /dev/null +++ b/static/usage/v9/item/buttons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { home, navigate, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ home, navigate, star }); + } +} +``` diff --git a/static/usage/v9/item/buttons/demo.html b/static/usage/v9/item/buttons/demo.html new file mode 100644 index 00000000000..25b0613c0f4 --- /dev/null +++ b/static/usage/v9/item/buttons/demo.html @@ -0,0 +1,62 @@ + + + + + + Item + + + + + + + + + + + +
+ + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +
+ + + + diff --git a/static/usage/v9/item/buttons/index.md b/static/usage/v9/item/buttons/index.md new file mode 100644 index 00000000000..db28c6ec055 --- /dev/null +++ b/static/usage/v9/item/buttons/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/buttons/javascript/index_html.md b/static/usage/v9/item/buttons/javascript/index_html.md new file mode 100644 index 00000000000..4d77ff8b9d8 --- /dev/null +++ b/static/usage/v9/item/buttons/javascript/index_html.md @@ -0,0 +1,36 @@ +```html + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + Small + Default + Large + +``` diff --git a/static/usage/v9/item/buttons/javascript/index_ts.md b/static/usage/v9/item/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..f0acd815b07 --- /dev/null +++ b/static/usage/v9/item/buttons/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { home, navigate, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'home': home, 'navigate': navigate, 'star': star }); + */ +addIcons({ home, navigate, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item/buttons/react.md b/static/usage/v9/item/buttons/react.md new file mode 100644 index 00000000000..fda29c7f11a --- /dev/null +++ b/static/usage/v9/item/buttons/react.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonLabel } from '@ionic/react'; +import { home, navigate, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + Start + Default Buttons + End + + + + + Start + + + Buttons with Icons + + + End + + + + + + + + Icon only Buttons + + + + + + + Button Sizes + + Small + + + Default + + + Large + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/buttons/vue.md b/static/usage/v9/item/buttons/vue.md new file mode 100644 index 00000000000..44438d0bcd9 --- /dev/null +++ b/static/usage/v9/item/buttons/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v9/item/clickable/angular/example_component_html.md b/static/usage/v9/item/clickable/angular/example_component_html.md new file mode 100644 index 00000000000..7e8ac266eb2 --- /dev/null +++ b/static/usage/v9/item/clickable/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +``` diff --git a/static/usage/v9/item/clickable/angular/example_component_ts.md b/static/usage/v9/item/clickable/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/clickable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/clickable/demo.html b/static/usage/v9/item/clickable/demo.html new file mode 100644 index 00000000000..b2e63e391c5 --- /dev/null +++ b/static/usage/v9/item/clickable/demo.html @@ -0,0 +1,42 @@ + + + + + + Item + + + + + + + + + + + +
+ + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +
+ + + + diff --git a/static/usage/v9/item/clickable/index.md b/static/usage/v9/item/clickable/index.md new file mode 100644 index 00000000000..37dafeb1278 --- /dev/null +++ b/static/usage/v9/item/clickable/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/clickable/javascript.md b/static/usage/v9/item/clickable/javascript.md new file mode 100644 index 00000000000..7e8ac266eb2 --- /dev/null +++ b/static/usage/v9/item/clickable/javascript.md @@ -0,0 +1,17 @@ +```html + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + +``` diff --git a/static/usage/v9/item/clickable/react.md b/static/usage/v9/item/clickable/react.md new file mode 100644 index 00000000000..c83845b65c7 --- /dev/null +++ b/static/usage/v9/item/clickable/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Anchor Item + + + + Disabled Anchor Item + + + + Button Item + + + + Disabled Button Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/clickable/vue.md b/static/usage/v9/item/clickable/vue.md new file mode 100644 index 00000000000..bb2f1a06ee9 --- /dev/null +++ b/static/usage/v9/item/clickable/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/item/content-types/actions/angular/example_component_html.md b/static/usage/v9/item/content-types/actions/angular/example_component_html.md new file mode 100644 index 00000000000..f70c70b90c4 --- /dev/null +++ b/static/usage/v9/item/content-types/actions/angular/example_component_html.md @@ -0,0 +1,150 @@ +```html + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/item/content-types/actions/angular/example_component_ts.md b/static/usage/v9/item/content-types/actions/angular/example_component_ts.md new file mode 100644 index 00000000000..48357843616 --- /dev/null +++ b/static/usage/v9/item/content-types/actions/angular/example_component_ts.md @@ -0,0 +1,50 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { pin, share, trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOption, + IonItemOptions, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ pin, share, trash }); + } +} +``` diff --git a/static/usage/v9/item/content-types/actions/demo.html b/static/usage/v9/item/content-types/actions/demo.html new file mode 100644 index 00000000000..f5ba56e5c0d --- /dev/null +++ b/static/usage/v9/item/content-types/actions/demo.html @@ -0,0 +1,165 @@ + + + + + + Item + + + + + + + + + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/item/content-types/actions/index.md b/static/usage/v9/item/content-types/actions/index.md new file mode 100644 index 00000000000..b55d1688ee8 --- /dev/null +++ b/static/usage/v9/item/content-types/actions/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/content-types/actions/javascript/index_html.md b/static/usage/v9/item/content-types/actions/javascript/index_html.md new file mode 100644 index 00000000000..5d9e403c93a --- /dev/null +++ b/static/usage/v9/item/content-types/actions/javascript/index_html.md @@ -0,0 +1,150 @@ +```html + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/item/content-types/actions/javascript/index_ts.md b/static/usage/v9/item/content-types/actions/javascript/index_ts.md new file mode 100644 index 00000000000..88e9cbe5aa1 --- /dev/null +++ b/static/usage/v9/item/content-types/actions/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { pin, share, trash } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'pin': pin, 'share': share, 'trash': trash }); + */ +addIcons({ pin, share, trash }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item/content-types/actions/react.md b/static/usage/v9/item/content-types/actions/react.md new file mode 100644 index 00000000000..59699517fb9 --- /dev/null +++ b/static/usage/v9/item/content-types/actions/react.md @@ -0,0 +1,174 @@ +```tsx +import React from 'react'; +import { + IonAvatar, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonItemOptions, + IonItemOption, + IonItemSliding, + IonLabel, + IonList, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { pin, share, trash } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Example + + + + + + + + Rick Astley + + + + + + + + + + + + + + + + + + Leeroy Jenkins + + + + + + + + + + + + + + + + + + Ionitron + + + + + + + + + + + + + + + + + + Wall-E + + + + + + + + + + + + + + + + + + Cortana + + + + + + + + + + + + + + + + + + Bender + + + + + + + + + + + + + + + + + + BB-8 + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/content-types/actions/vue.md b/static/usage/v9/item/content-types/actions/vue.md new file mode 100644 index 00000000000..f8992c1d4bf --- /dev/null +++ b/static/usage/v9/item/content-types/actions/vue.md @@ -0,0 +1,170 @@ +```html + + + +``` diff --git a/static/usage/v9/item/content-types/controls/angular/example_component_html.md b/static/usage/v9/item/content-types/controls/angular/example_component_html.md new file mode 100644 index 00000000000..2275f6468cd --- /dev/null +++ b/static/usage/v9/item/content-types/controls/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/item/content-types/controls/angular/example_component_ts.md b/static/usage/v9/item/content-types/controls/angular/example_component_ts.md new file mode 100644 index 00000000000..d9dbc55b9ff --- /dev/null +++ b/static/usage/v9/item/content-types/controls/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/content-types/controls/demo.html b/static/usage/v9/item/content-types/controls/demo.html new file mode 100644 index 00000000000..0514f72d6ca --- /dev/null +++ b/static/usage/v9/item/content-types/controls/demo.html @@ -0,0 +1,54 @@ + + + + + + Item + + + + + + + + + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/item/content-types/controls/index.md b/static/usage/v9/item/content-types/controls/index.md new file mode 100644 index 00000000000..698cd8ab9b5 --- /dev/null +++ b/static/usage/v9/item/content-types/controls/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/content-types/controls/javascript.md b/static/usage/v9/item/content-types/controls/javascript.md new file mode 100644 index 00000000000..421c9ff6924 --- /dev/null +++ b/static/usage/v9/item/content-types/controls/javascript.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/item/content-types/controls/react.md b/static/usage/v9/item/content-types/controls/react.md new file mode 100644 index 00000000000..fef330390b1 --- /dev/null +++ b/static/usage/v9/item/content-types/controls/react.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonContent, IonHeader, IonInput, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Example + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/content-types/controls/vue.md b/static/usage/v9/item/content-types/controls/vue.md new file mode 100644 index 00000000000..7b5e44f890a --- /dev/null +++ b/static/usage/v9/item/content-types/controls/vue.md @@ -0,0 +1,45 @@ +```html + + + +``` diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_css.md b/static/usage/v9/item/content-types/metadata/angular/example_component_css.md new file mode 100644 index 00000000000..44f7e0d5e43 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/angular/example_component_css.md @@ -0,0 +1,41 @@ +```css +.unread-indicator { + background: var(--ion-color-primary); + + width: 10px; + height: 10px; + + border-radius: 100%; + + position: absolute; + + inset-inline-start: 12px; + top: 12px; +} + +.metadata-end-wrapper { + position: absolute; + + top: 10px; + inset-inline-end: 10px; + + font-size: 0.8rem; + + display: flex; + align-items: center; +} + +ion-label strong { + display: block; + + max-width: calc(100% - 60px); + + overflow: hidden; + + text-overflow: ellipsis; +} + +ion-label ion-note { + font-size: 0.9rem; +} +``` diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_html.md b/static/usage/v9/item/content-types/metadata/angular/example_component_html.md new file mode 100644 index 00000000000..bb97bb4a70a --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/angular/example_component_html.md @@ -0,0 +1,90 @@ +```html + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + +``` diff --git a/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md b/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md new file mode 100644 index 00000000000..35bd7da33ef --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonNote, + IonText, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { chevronForward, listCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonNote, IonText, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ chevronForward, listCircle }); + } +} +``` diff --git a/static/usage/v9/item/content-types/metadata/demo.html b/static/usage/v9/item/content-types/metadata/demo.html new file mode 100644 index 00000000000..2475f5cd5f0 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/demo.html @@ -0,0 +1,146 @@ + + + + + + Item + + + + + + + + + + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + + + + diff --git a/static/usage/v9/item/content-types/metadata/index.md b/static/usage/v9/item/content-types/metadata/index.md new file mode 100644 index 00000000000..7047d99f205 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/content-types/metadata/javascript/index_html.md b/static/usage/v9/item/content-types/metadata/javascript/index_html.md new file mode 100644 index 00000000000..60e16a46273 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/javascript/index_html.md @@ -0,0 +1,132 @@ +```html + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient
+ That is all. + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0
+ This version is one more than Ionic 6! + +
+ Yesterday + +
+ + + + + +``` diff --git a/static/usage/v9/item/content-types/metadata/javascript/index_ts.md b/static/usage/v9/item/content-types/metadata/javascript/index_ts.md new file mode 100644 index 00000000000..cd85a029c74 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { chevronForward, listCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'chevron-forward': chevronForward, 'list-circle': listCircle }); + */ +addIcons({ chevronForward, listCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item/content-types/metadata/react/main_css.md b/static/usage/v9/item/content-types/metadata/react/main_css.md new file mode 100644 index 00000000000..44f7e0d5e43 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/react/main_css.md @@ -0,0 +1,41 @@ +```css +.unread-indicator { + background: var(--ion-color-primary); + + width: 10px; + height: 10px; + + border-radius: 100%; + + position: absolute; + + inset-inline-start: 12px; + top: 12px; +} + +.metadata-end-wrapper { + position: absolute; + + top: 10px; + inset-inline-end: 10px; + + font-size: 0.8rem; + + display: flex; + align-items: center; +} + +ion-label strong { + display: block; + + max-width: calc(100% - 60px); + + overflow: hidden; + + text-overflow: ellipsis; +} + +ion-label ion-note { + font-size: 0.9rem; +} +``` diff --git a/static/usage/v9/item/content-types/metadata/react/main_tsx.md b/static/usage/v9/item/content-types/metadata/react/main_tsx.md new file mode 100644 index 00000000000..e15dfc2d314 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/react/main_tsx.md @@ -0,0 +1,122 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonNote, + IonText, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import { chevronForward, listCircle } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + <> + + + Example + + + + + + + General + 6 + + + + Shopping + 15 + + + + Cleaning + 3 + + + + Reminders + 8 + + + + + +
+
+
+ + Rick Astley + Never Gonna Give You Up +
+ + Never gonna give you up Never gonna let you down Never gonna run... + + +
+ 06:11 + +
+ + +
+ + Ionitron + I have become sentient +
+ + That is all. + + +
+ 03:44 + +
+ + +
+
+
+ + Steam + Game Store Sale +
+ + That game you added to your wish list 2 years ago is now on sale! + + +
+ Yesterday + +
+ + +
+ + Ionic + Announcing Ionic 7.0 +
+ + This version is one more than Ionic 6! + + +
+ Yesterday + +
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/content-types/metadata/vue.md b/static/usage/v9/item/content-types/metadata/vue.md new file mode 100644 index 00000000000..5f6090d0f97 --- /dev/null +++ b/static/usage/v9/item/content-types/metadata/vue.md @@ -0,0 +1,150 @@ +```html + + + + + +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md new file mode 100644 index 00000000000..e4ae4368ea2 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_html.md @@ -0,0 +1,47 @@ +```html + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md new file mode 100644 index 00000000000..c4f5d14431f --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonIcon, IonItem, IonLabel, IonList } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { airplane, bluetooth, call, wifi } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonIcon, IonItem, IonLabel, IonList], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ airplane, bluetooth, call, wifi }); + } +} +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/demo.html b/static/usage/v9/item/content-types/supporting-visuals/demo.html new file mode 100644 index 00000000000..0e18c634ab5 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/demo.html @@ -0,0 +1,66 @@ + + + + + + Item + + + + + + + + + +
+ + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +
+ + + + diff --git a/static/usage/v9/item/content-types/supporting-visuals/index.md b/static/usage/v9/item/content-types/supporting-visuals/index.md new file mode 100644 index 00000000000..3abf5e9adbc --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/content-types/supporting-visuals/javascript/index_html.md b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_html.md new file mode 100644 index 00000000000..e4ae4368ea2 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_html.md @@ -0,0 +1,47 @@ +```html + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md new file mode 100644 index 00000000000..879c69145c3 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { airplane, bluetooth, call, wifi } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'airplane': airplane, 'bluetooth': bluetooth, 'call': call, 'wifi': wifi }); + */ +addIcons({ airplane, bluetooth, call, wifi }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/react.md b/static/usage/v9/item/content-types/supporting-visuals/react.md new file mode 100644 index 00000000000..d9f6a53c916 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/react.md @@ -0,0 +1,58 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel, IonList, IonIcon } from '@ionic/react'; +import { airplane, bluetooth, call, wifi } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + Airplane Mode + + + + Wi-Fi + + + + Bluetooth + + + + Cellular + + + + + + + Huey + + + + Dewey + + + + Louie + + + + Fooie + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/content-types/supporting-visuals/vue.md b/static/usage/v9/item/content-types/supporting-visuals/vue.md new file mode 100644 index 00000000000..02cdb617e36 --- /dev/null +++ b/static/usage/v9/item/content-types/supporting-visuals/vue.md @@ -0,0 +1,54 @@ +```html + + + +``` diff --git a/static/usage/v9/item/content-types/text/angular/example_component_css.md b/static/usage/v9/item/content-types/text/angular/example_component_css.md new file mode 100644 index 00000000000..65190f24e16 --- /dev/null +++ b/static/usage/v9/item/content-types/text/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + display: block; +} +``` diff --git a/static/usage/v9/item/content-types/text/angular/example_component_html.md b/static/usage/v9/item/content-types/text/angular/example_component_html.md new file mode 100644 index 00000000000..7cf6fac8392 --- /dev/null +++ b/static/usage/v9/item/content-types/text/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + +``` diff --git a/static/usage/v9/item/content-types/text/angular/example_component_ts.md b/static/usage/v9/item/content-types/text/angular/example_component_ts.md new file mode 100644 index 00000000000..c165a0ce5ea --- /dev/null +++ b/static/usage/v9/item/content-types/text/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonInput, + IonItem, + IonLabel, + IonList, + IonNote, + IonTextarea, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonContent, + IonHeader, + IonInput, + IonItem, + IonLabel, + IonList, + IonNote, + IonTextarea, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/content-types/text/demo.html b/static/usage/v9/item/content-types/text/demo.html new file mode 100644 index 00000000000..7681665a339 --- /dev/null +++ b/static/usage/v9/item/content-types/text/demo.html @@ -0,0 +1,53 @@ + + + + + + Item + + + + + + + + + + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + + diff --git a/static/usage/v9/item/content-types/text/index.md b/static/usage/v9/item/content-types/text/index.md new file mode 100644 index 00000000000..06cae8f16e5 --- /dev/null +++ b/static/usage/v9/item/content-types/text/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/content-types/text/javascript.md b/static/usage/v9/item/content-types/text/javascript.md new file mode 100644 index 00000000000..951d0474733 --- /dev/null +++ b/static/usage/v9/item/content-types/text/javascript.md @@ -0,0 +1,39 @@ +```html + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + +``` diff --git a/static/usage/v9/item/content-types/text/react/main_css.md b/static/usage/v9/item/content-types/text/react/main_css.md new file mode 100644 index 00000000000..65190f24e16 --- /dev/null +++ b/static/usage/v9/item/content-types/text/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + display: block; +} +``` diff --git a/static/usage/v9/item/content-types/text/react/main_tsx.md b/static/usage/v9/item/content-types/text/react/main_tsx.md new file mode 100644 index 00000000000..107dbe79540 --- /dev/null +++ b/static/usage/v9/item/content-types/text/react/main_tsx.md @@ -0,0 +1,57 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonInput, + IonItem, + IonLabel, + IonList, + IonNote, + IonTextarea, + IonToggle, + IonToolbar, + IonTitle, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Example + + + + + + + + + + + + + Allow Notifications + Unsubscribe at any time + + + + + + + + + + + + Your comments will be kept anonymous and will only be used to improve the reliability of our products. + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/content-types/text/vue.md b/static/usage/v9/item/content-types/text/vue.md new file mode 100644 index 00000000000..37d26cd8767 --- /dev/null +++ b/static/usage/v9/item/content-types/text/vue.md @@ -0,0 +1,57 @@ +```html + + + + + +``` diff --git a/static/usage/v9/item/detail-arrows/angular/example_component_html.md b/static/usage/v9/item/detail-arrows/angular/example_component_html.md new file mode 100644 index 00000000000..aa14eb9ec2d --- /dev/null +++ b/static/usage/v9/item/detail-arrows/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +``` diff --git a/static/usage/v9/item/detail-arrows/angular/example_component_ts.md b/static/usage/v9/item/detail-arrows/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/detail-arrows/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/detail-arrows/demo.html b/static/usage/v9/item/detail-arrows/demo.html new file mode 100644 index 00000000000..a757c9eb853 --- /dev/null +++ b/static/usage/v9/item/detail-arrows/demo.html @@ -0,0 +1,62 @@ + + + + + + Item + + + + + + + + + + + +
+ + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +
+ + + + diff --git a/static/usage/v9/item/detail-arrows/index.md b/static/usage/v9/item/detail-arrows/index.md new file mode 100644 index 00000000000..5b2334b2ba5 --- /dev/null +++ b/static/usage/v9/item/detail-arrows/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/detail-arrows/javascript.md b/static/usage/v9/item/detail-arrows/javascript.md new file mode 100644 index 00000000000..aa14eb9ec2d --- /dev/null +++ b/static/usage/v9/item/detail-arrows/javascript.md @@ -0,0 +1,37 @@ +```html + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + +``` diff --git a/static/usage/v9/item/detail-arrows/react.md b/static/usage/v9/item/detail-arrows/react.md new file mode 100644 index 00000000000..de16b10fde6 --- /dev/null +++ b/static/usage/v9/item/detail-arrows/react.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; +import { caretForwardOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + +

Text Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Default detail - detail arrow displays on iOS only

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+ + + + + +

Button Item

+

Detail set to false - detail arrow hidden on both modes

+ + + + + +

Button Item

+

Detail set to true - detail arrow displays on both modes

+

Detail icon set to caret-forward-outline

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/detail-arrows/vue.md b/static/usage/v9/item/detail-arrows/vue.md new file mode 100644 index 00000000000..052683b709c --- /dev/null +++ b/static/usage/v9/item/detail-arrows/vue.md @@ -0,0 +1,44 @@ +```html + + + +``` diff --git a/static/usage/v9/item/inputs/angular/example_component_html.md b/static/usage/v9/item/inputs/angular/example_component_html.md new file mode 100644 index 00000000000..548e6239f98 --- /dev/null +++ b/static/usage/v9/item/inputs/angular/example_component_html.md @@ -0,0 +1,43 @@ +```html + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + +``` diff --git a/static/usage/v9/item/inputs/angular/example_component_ts.md b/static/usage/v9/item/inputs/angular/example_component_ts.md new file mode 100644 index 00000000000..d804a4ea83f --- /dev/null +++ b/static/usage/v9/item/inputs/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/inputs/demo.html b/static/usage/v9/item/inputs/demo.html new file mode 100644 index 00000000000..d09da10eb5a --- /dev/null +++ b/static/usage/v9/item/inputs/demo.html @@ -0,0 +1,68 @@ + + + + + + Item + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + +
+ + + + diff --git a/static/usage/v9/item/inputs/index.md b/static/usage/v9/item/inputs/index.md new file mode 100644 index 00000000000..391aa011329 --- /dev/null +++ b/static/usage/v9/item/inputs/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/inputs/javascript.md b/static/usage/v9/item/inputs/javascript.md new file mode 100644 index 00000000000..53c2e4cb6e8 --- /dev/null +++ b/static/usage/v9/item/inputs/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + +
Toggle
+ + + + + +
Checkbox
+ + + + + +
Range
+ + +``` diff --git a/static/usage/v9/item/inputs/react.md b/static/usage/v9/item/inputs/react.md new file mode 100644 index 00000000000..b7f41601048 --- /dev/null +++ b/static/usage/v9/item/inputs/react.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonRange, IonSelect, IonSelectOption, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + + + + + No Game Console + NES + Nintendo64 + PlayStation + Sega Genesis + Sega Saturn + SNES + + + + + Toggle + + + + Checkbox + + + + +
Range
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/inputs/vue.md b/static/usage/v9/item/inputs/vue.md new file mode 100644 index 00000000000..c1d85fda588 --- /dev/null +++ b/static/usage/v9/item/inputs/vue.md @@ -0,0 +1,58 @@ +```html + + + +``` diff --git a/static/usage/v9/item/lines/angular/example_component_html.md b/static/usage/v9/item/lines/angular/example_component_html.md new file mode 100644 index 00000000000..022573e9d9d --- /dev/null +++ b/static/usage/v9/item/lines/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +``` diff --git a/static/usage/v9/item/lines/angular/example_component_ts.md b/static/usage/v9/item/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..6c210783025 --- /dev/null +++ b/static/usage/v9/item/lines/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonItem, IonLabel } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { informationCircle, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ informationCircle, star }); + } +} +``` diff --git a/static/usage/v9/item/lines/demo.html b/static/usage/v9/item/lines/demo.html new file mode 100644 index 00000000000..0abd1628eb1 --- /dev/null +++ b/static/usage/v9/item/lines/demo.html @@ -0,0 +1,66 @@ + + + + + + Item + + + + + + + + + + + +
+ + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +
+ + + + diff --git a/static/usage/v9/item/lines/index.md b/static/usage/v9/item/lines/index.md new file mode 100644 index 00000000000..855260d383f --- /dev/null +++ b/static/usage/v9/item/lines/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/lines/javascript/index_html.md b/static/usage/v9/item/lines/javascript/index_html.md new file mode 100644 index 00000000000..022573e9d9d --- /dev/null +++ b/static/usage/v9/item/lines/javascript/index_html.md @@ -0,0 +1,41 @@ +```html + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + +``` diff --git a/static/usage/v9/item/lines/javascript/index_ts.md b/static/usage/v9/item/lines/javascript/index_ts.md new file mode 100644 index 00000000000..b763e9e3032 --- /dev/null +++ b/static/usage/v9/item/lines/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { informationCircle, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'information-circle': informationCircle, 'star': star }); + */ +addIcons({ informationCircle, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/item/lines/react.md b/static/usage/v9/item/lines/react.md new file mode 100644 index 00000000000..dbe79214349 --- /dev/null +++ b/static/usage/v9/item/lines/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonLabel } from '@ionic/react'; +import { informationCircle, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + Default Item Lines + + + + Item Lines Inset + + + + Item Lines Full + + + + Item Lines None + + + + + Default Item Lines + + + + + + Item Lines Inset + + + + + + Item Lines Full + + + + + + Item Lines None + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/lines/vue.md b/static/usage/v9/item/lines/vue.md new file mode 100644 index 00000000000..891ed66bf3c --- /dev/null +++ b/static/usage/v9/item/lines/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v9/item/media/angular/example_component_html.md b/static/usage/v9/item/media/angular/example_component_html.md new file mode 100644 index 00000000000..c51ab29463a --- /dev/null +++ b/static/usage/v9/item/media/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +``` diff --git a/static/usage/v9/item/media/angular/example_component_ts.md b/static/usage/v9/item/media/angular/example_component_ts.md new file mode 100644 index 00000000000..90191dc1ffa --- /dev/null +++ b/static/usage/v9/item/media/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/media/demo.html b/static/usage/v9/item/media/demo.html new file mode 100644 index 00000000000..99ef636e6c3 --- /dev/null +++ b/static/usage/v9/item/media/demo.html @@ -0,0 +1,40 @@ + + + + + + Item + + + + + + + + + + + +
+ + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +
+ + + + diff --git a/static/usage/v9/item/media/index.md b/static/usage/v9/item/media/index.md new file mode 100644 index 00000000000..40be49ca089 --- /dev/null +++ b/static/usage/v9/item/media/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/media/javascript.md b/static/usage/v9/item/media/javascript.md new file mode 100644 index 00000000000..c51ab29463a --- /dev/null +++ b/static/usage/v9/item/media/javascript.md @@ -0,0 +1,15 @@ +```html + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + +``` diff --git a/static/usage/v9/item/media/react.md b/static/usage/v9/item/media/react.md new file mode 100644 index 00000000000..dae8042c9ae --- /dev/null +++ b/static/usage/v9/item/media/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonAvatar, IonItem, IonLabel, IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + + Silhouette of a person's head + + Avatar Item + + + + + Silhouette of mountains + + Thumbnail Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/media/vue.md b/static/usage/v9/item/media/vue.md new file mode 100644 index 00000000000..dc3078f9741 --- /dev/null +++ b/static/usage/v9/item/media/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/item/theming/colors/angular/example_component_html.md b/static/usage/v9/item/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..f1b6dd45e0c --- /dev/null +++ b/static/usage/v9/item/theming/colors/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +``` diff --git a/static/usage/v9/item/theming/colors/angular/example_component_ts.md b/static/usage/v9/item/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/theming/colors/demo.html b/static/usage/v9/item/theming/colors/demo.html new file mode 100644 index 00000000000..71cc7d275ba --- /dev/null +++ b/static/usage/v9/item/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + Item + + + + + + + + + + + +
+ + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +
+ + + + diff --git a/static/usage/v9/item/theming/colors/index.md b/static/usage/v9/item/theming/colors/index.md new file mode 100644 index 00000000000..e3cc18e2da5 --- /dev/null +++ b/static/usage/v9/item/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/theming/colors/javascript.md b/static/usage/v9/item/theming/colors/javascript.md new file mode 100644 index 00000000000..f1b6dd45e0c --- /dev/null +++ b/static/usage/v9/item/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + +``` diff --git a/static/usage/v9/item/theming/colors/react.md b/static/usage/v9/item/theming/colors/react.md new file mode 100644 index 00000000000..2efad83cba3 --- /dev/null +++ b/static/usage/v9/item/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Item + + + Primary Item + + + Secondary Item + + + Tertiary Item + + + Success Item + + + Warning Item + + + Danger Item + + + Light Item + + + Medium Item + + + Dark Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/theming/colors/vue.md b/static/usage/v9/item/theming/colors/vue.md new file mode 100644 index 00000000000..5500e0c9083 --- /dev/null +++ b/static/usage/v9/item/theming/colors/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_css.md b/static/usage/v9/item/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..8a8b6be7f5b --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-item { + --background: #19422d; + --color: #fff; + + --border-color: #fff; + --border-style: dashed; + --border-width: 2px; + + --border-radius: 20px; + + --ripple-color: purple; + + --detail-icon-color: white; + --detail-icon-opacity: 1; + --detail-icon-font-size: 20px; +} +``` diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_html.md b/static/usage/v9/item/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4bc8310465a --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + +``` diff --git a/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/theming/css-properties/demo.html b/static/usage/v9/item/theming/css-properties/demo.html new file mode 100644 index 00000000000..549555682d2 --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/demo.html @@ -0,0 +1,55 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v9/item/theming/css-properties/index.md b/static/usage/v9/item/theming/css-properties/index.md new file mode 100644 index 00000000000..0e166d596ae --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/theming/css-properties/javascript.md b/static/usage/v9/item/theming/css-properties/javascript.md new file mode 100644 index 00000000000..d1ad4121c2d --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/javascript.md @@ -0,0 +1,32 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + + + +``` diff --git a/static/usage/v9/item/theming/css-properties/react/main_css.md b/static/usage/v9/item/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..8a8b6be7f5b --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-item { + --background: #19422d; + --color: #fff; + + --border-color: #fff; + --border-style: dashed; + --border-width: 2px; + + --border-radius: 20px; + + --ripple-color: purple; + + --detail-icon-color: white; + --detail-icon-opacity: 1; + --detail-icon-font-size: 20px; +} +``` diff --git a/static/usage/v9/item/theming/css-properties/react/main_tsx.md b/static/usage/v9/item/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..0d8329f134a --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Item + + + + Custom Item + + + + Custom Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/theming/css-properties/vue.md b/static/usage/v9/item/theming/css-properties/vue.md new file mode 100644 index 00000000000..d1adc06485d --- /dev/null +++ b/static/usage/v9/item/theming/css-properties/vue.md @@ -0,0 +1,38 @@ +```html + + + + + +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..0c5e9969494 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,18 @@ +```css +ion-item::part(native) { + background: #19422d; + color: #fff; + + border-color: #fff; + border-style: dashed; + border-width: 2px; + + border-radius: 20px; +} + +ion-item::part(detail-icon) { + color: white; + opacity: 1; + font-size: 20px; +} +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4bc8310465a --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/demo.html b/static/usage/v9/item/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..1b5f723eeaf --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/demo.html @@ -0,0 +1,55 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Item + + + + Custom Item + + + + Custom Item + +
+ + + + diff --git a/static/usage/v9/item/theming/css-shadow-parts/index.md b/static/usage/v9/item/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..b710bd4c2a1 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/theming/css-shadow-parts/javascript.md b/static/usage/v9/item/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..1991ad6c139 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/javascript.md @@ -0,0 +1,32 @@ +```html + + Custom Item + + + + Custom Item + + + + Custom Item + + + +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..0c5e9969494 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,18 @@ +```css +ion-item::part(native) { + background: #19422d; + color: #fff; + + border-color: #fff; + border-style: dashed; + border-width: 2px; + + border-radius: 20px; +} + +ion-item::part(detail-icon) { + color: white; + opacity: 1; + font-size: 20px; +} +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..0d8329f134a --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Item + + + + Custom Item + + + + Custom Item + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/theming/css-shadow-parts/vue.md b/static/usage/v9/item/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..2bcda2b8979 --- /dev/null +++ b/static/usage/v9/item/theming/css-shadow-parts/vue.md @@ -0,0 +1,38 @@ +```html + + + + + +``` diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md new file mode 100644 index 00000000000..59a5e5928a9 --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +``` diff --git a/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md b/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/item/theming/input-highlight/demo.html b/static/usage/v9/item/theming/input-highlight/demo.html new file mode 100644 index 00000000000..065f7f4d151 --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/demo.html @@ -0,0 +1,48 @@ + + + + + + Item + + + + + + + + + + + +
+ + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + +
+ + + + diff --git a/static/usage/v9/item/theming/input-highlight/index.md b/static/usage/v9/item/theming/input-highlight/index.md new file mode 100644 index 00000000000..278c739b47a --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/item/theming/input-highlight/javascript.md b/static/usage/v9/item/theming/input-highlight/javascript.md new file mode 100644 index 00000000000..b26cebd530e --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/javascript.md @@ -0,0 +1,25 @@ +```html + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + +``` diff --git a/static/usage/v9/item/theming/input-highlight/react/main_css.md b/static/usage/v9/item/theming/input-highlight/react/main_css.md new file mode 100644 index 00000000000..5d7cfd49c7c --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-item { + --highlight-height: 2px; + --highlight-color-focused: #43e7f3; + --highlight-color-valid: #6f58d8; + --highlight-color-invalid: #ff46be; +} +``` diff --git a/static/usage/v9/item/theming/input-highlight/react/main_tsx.md b/static/usage/v9/item/theming/input-highlight/react/main_tsx.md new file mode 100644 index 00000000000..67d46a73267 --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/react/main_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonInput, IonItem, IonLabel } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Custom Input Highlight: Focused + + + + + Custom Input Highlight: Focused & Valid + + + + + Custom Input Highlight: Focused & Invalid + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/item/theming/input-highlight/vue.md b/static/usage/v9/item/theming/input-highlight/vue.md new file mode 100644 index 00000000000..7d4b9a93de1 --- /dev/null +++ b/static/usage/v9/item/theming/input-highlight/vue.md @@ -0,0 +1,31 @@ +```html + + + + + +``` diff --git a/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md new file mode 100644 index 00000000000..a5fe24f6d7c --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/keyboard/enterkeyhint/demo.html b/static/usage/v9/keyboard/enterkeyhint/demo.html new file mode 100644 index 00000000000..c5db385acf0 --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/demo.html @@ -0,0 +1,33 @@ + + + + + + Keyboard + + + + + + + + + +
+ + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +
+ + + + diff --git a/static/usage/v9/keyboard/enterkeyhint/index.md b/static/usage/v9/keyboard/enterkeyhint/index.md new file mode 100644 index 00000000000..7dfe2c1ec87 --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/keyboard/enterkeyhint/javascript.md b/static/usage/v9/keyboard/enterkeyhint/javascript.md new file mode 100644 index 00000000000..c3ca7469739 --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/javascript.md @@ -0,0 +1,14 @@ +```html + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + +``` diff --git a/static/usage/v9/keyboard/enterkeyhint/react.md b/static/usage/v9/keyboard/enterkeyhint/react.md new file mode 100644 index 00000000000..eb088650737 --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + enterkeyhint="search" + + + + + enterkeyhint="send" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/keyboard/enterkeyhint/vue.md b/static/usage/v9/keyboard/enterkeyhint/vue.md new file mode 100644 index 00000000000..6e46fc8e46b --- /dev/null +++ b/static/usage/v9/keyboard/enterkeyhint/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/keyboard/inputmode/angular/example_component_html.md b/static/usage/v9/keyboard/inputmode/angular/example_component_html.md new file mode 100644 index 00000000000..36124635c54 --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md b/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md new file mode 100644 index 00000000000..132e3291d4c --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonInput, IonItem, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonInput, IonItem, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/keyboard/inputmode/demo.html b/static/usage/v9/keyboard/inputmode/demo.html new file mode 100644 index 00000000000..af9eab2c697 --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/demo.html @@ -0,0 +1,44 @@ + + + + + + Keyboard + + + + + + + + + + + +
+ + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +
+ + + + diff --git a/static/usage/v9/keyboard/inputmode/index.md b/static/usage/v9/keyboard/inputmode/index.md new file mode 100644 index 00000000000..5aa921f6981 --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/keyboard/inputmode/javascript.md b/static/usage/v9/keyboard/inputmode/javascript.md new file mode 100644 index 00000000000..d4be8a190c0 --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/javascript.md @@ -0,0 +1,19 @@ +```html + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + +``` diff --git a/static/usage/v9/keyboard/inputmode/react.md b/static/usage/v9/keyboard/inputmode/react.md new file mode 100644 index 00000000000..5e56f0973bd --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonInput } from '@ionic/react'; + +function Example() { + return ( + + + + inputmode="email" + + + + + inputmode="numeric" + + + + + inputmode="decimal" + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/keyboard/inputmode/vue.md b/static/usage/v9/keyboard/inputmode/vue.md new file mode 100644 index 00000000000..6ad97abbd75 --- /dev/null +++ b/static/usage/v9/keyboard/inputmode/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/label/basic/angular/example_component_html.md b/static/usage/v9/label/basic/angular/example_component_html.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/v9/label/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/v9/label/basic/angular/example_component_ts.md b/static/usage/v9/label/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..05c8c0860bc --- /dev/null +++ b/static/usage/v9/label/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/label/basic/demo.html b/static/usage/v9/label/basic/demo.html new file mode 100644 index 00000000000..5acfa6924f0 --- /dev/null +++ b/static/usage/v9/label/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Label + + + + + + + + + +
+ Label +
+ + + + diff --git a/static/usage/v9/label/basic/index.md b/static/usage/v9/label/basic/index.md new file mode 100644 index 00000000000..6bd760cee04 --- /dev/null +++ b/static/usage/v9/label/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/label/basic/javascript.md b/static/usage/v9/label/basic/javascript.md new file mode 100644 index 00000000000..c3125f70b5f --- /dev/null +++ b/static/usage/v9/label/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Label +``` diff --git a/static/usage/v9/label/basic/react.md b/static/usage/v9/label/basic/react.md new file mode 100644 index 00000000000..8eb985452c0 --- /dev/null +++ b/static/usage/v9/label/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Label + + ); +} +export default Example; +``` diff --git a/static/usage/v9/label/basic/vue.md b/static/usage/v9/label/basic/vue.md new file mode 100644 index 00000000000..2b1aaca0a93 --- /dev/null +++ b/static/usage/v9/label/basic/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/label/input/angular/example_component_html.md b/static/usage/v9/label/input/angular/example_component_html.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v9/label/input/angular/example_component_html.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v9/label/input/angular/example_component_ts.md b/static/usage/v9/label/input/angular/example_component_ts.md new file mode 100644 index 00000000000..897d7f87289 --- /dev/null +++ b/static/usage/v9/label/input/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonCheckbox, IonInput, IonItem, IonLabel, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/label/input/demo.html b/static/usage/v9/label/input/demo.html new file mode 100644 index 00000000000..4bdb561eeaa --- /dev/null +++ b/static/usage/v9/label/input/demo.html @@ -0,0 +1,56 @@ + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +
+ + + + diff --git a/static/usage/v9/label/input/index.md b/static/usage/v9/label/input/index.md new file mode 100644 index 00000000000..ac42fd23a49 --- /dev/null +++ b/static/usage/v9/label/input/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/label/input/javascript.md b/static/usage/v9/label/input/javascript.md new file mode 100644 index 00000000000..75278afd44b --- /dev/null +++ b/static/usage/v9/label/input/javascript.md @@ -0,0 +1,31 @@ +```html + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + +``` diff --git a/static/usage/v9/label/input/react.md b/static/usage/v9/label/input/react.md new file mode 100644 index 00000000000..ff11fd1f176 --- /dev/null +++ b/static/usage/v9/label/input/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonCheckbox, IonInput, IonItem, IonLabel, IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Fixed Label + + + + + Floating Label + + + + + Stacked Label + + + + + Toggle + + + + + + Checkbox + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/label/input/vue.md b/static/usage/v9/label/input/vue.md new file mode 100644 index 00000000000..dfb7541d20f --- /dev/null +++ b/static/usage/v9/label/input/vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v9/label/item/angular/example_component_html.md b/static/usage/v9/label/item/angular/example_component_html.md new file mode 100644 index 00000000000..54f24979079 --- /dev/null +++ b/static/usage/v9/label/item/angular/example_component_html.md @@ -0,0 +1,26 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v9/label/item/angular/example_component_ts.md b/static/usage/v9/label/item/angular/example_component_ts.md new file mode 100644 index 00000000000..bb1d05933b2 --- /dev/null +++ b/static/usage/v9/label/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/label/item/demo.html b/static/usage/v9/label/item/demo.html new file mode 100644 index 00000000000..d552e11ed07 --- /dev/null +++ b/static/usage/v9/label/item/demo.html @@ -0,0 +1,51 @@ + + + + + + Label + + + + + + + + + + + +
+ + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +
+ + + + diff --git a/static/usage/v9/label/item/index.md b/static/usage/v9/label/item/index.md new file mode 100644 index 00000000000..0c59e175528 --- /dev/null +++ b/static/usage/v9/label/item/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/label/item/javascript.md b/static/usage/v9/label/item/javascript.md new file mode 100644 index 00000000000..54f24979079 --- /dev/null +++ b/static/usage/v9/label/item/javascript.md @@ -0,0 +1,26 @@ +```html + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, consectetur + adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + +``` diff --git a/static/usage/v9/label/item/react.md b/static/usage/v9/label/item/react.md new file mode 100644 index 00000000000..f5bdf5a5d1b --- /dev/null +++ b/static/usage/v9/label/item/react.md @@ -0,0 +1,36 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Label + + + + + Multi-line text that should ellipsis when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + + Multi-line text that should wrap when it is too long to fit on one line. Lorem ipsum dolor sit amet, + consectetur adipiscing elit. + + + + + +

Heading

+

Paragraph

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/label/item/vue.md b/static/usage/v9/label/item/vue.md new file mode 100644 index 00000000000..268cd971f17 --- /dev/null +++ b/static/usage/v9/label/item/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v9/label/theming/colors/angular/example_component_html.md b/static/usage/v9/label/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/v9/label/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/label/theming/colors/angular/example_component_ts.md b/static/usage/v9/label/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..05c8c0860bc --- /dev/null +++ b/static/usage/v9/label/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/label/theming/colors/demo.html b/static/usage/v9/label/theming/colors/demo.html new file mode 100644 index 00000000000..a560d6c5876 --- /dev/null +++ b/static/usage/v9/label/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Label + + + + + + + + + + + +
+ Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark +
+ + + + diff --git a/static/usage/v9/label/theming/colors/index.md b/static/usage/v9/label/theming/colors/index.md new file mode 100644 index 00000000000..b9d954a98c9 --- /dev/null +++ b/static/usage/v9/label/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/label/theming/colors/javascript.md b/static/usage/v9/label/theming/colors/javascript.md new file mode 100644 index 00000000000..1fbebb19888 --- /dev/null +++ b/static/usage/v9/label/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default +Primary +Secondary +Tertiary +Success +Warning +Danger +Light +Medium +Dark +``` diff --git a/static/usage/v9/label/theming/colors/react.md b/static/usage/v9/label/theming/colors/react.md new file mode 100644 index 00000000000..6680a644fb6 --- /dev/null +++ b/static/usage/v9/label/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel } from '@ionic/react'; + +function Example() { + return ( + <> + Default + Primary + Secondary + Tertiary + Success + Warning + Danger + Light + Medium + Dark + + ); +} +export default Example; +``` diff --git a/static/usage/v9/label/theming/colors/vue.md b/static/usage/v9/label/theming/colors/vue.md new file mode 100644 index 00000000000..d58a0591693 --- /dev/null +++ b/static/usage/v9/label/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md new file mode 100644 index 00000000000..76687ae8b81 --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md new file mode 100644 index 00000000000..1831eb8f7d2 --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/angular/example_component_ts.md @@ -0,0 +1,56 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { create } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ create }); + } +} +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/demo.html b/static/usage/v9/layout/dynamic-font-scaling/demo.html new file mode 100644 index 00000000000..a486f91572d --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/demo.html @@ -0,0 +1,60 @@ + + + + + + Dynamic Font Scaling + + + + + + + + + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + + + + diff --git a/static/usage/v9/layout/dynamic-font-scaling/index.md b/static/usage/v9/layout/dynamic-font-scaling/index.md new file mode 100644 index 00000000000..ed406f3e8ea --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/layout/dynamic-font-scaling/javascript/index_html.md b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_html.md new file mode 100644 index 00000000000..03ddb39e0c3 --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md new file mode 100644 index 00000000000..fc0ba6ecfb5 --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { create } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "create" key. + * Alternatively, developers can do: + * addIcons({ 'create': create }); + */ +addIcons({ create }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/react.md b/static/usage/v9/layout/dynamic-font-scaling/react.md new file mode 100644 index 00000000000..863d4e269d3 --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/react.md @@ -0,0 +1,74 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonFooter, + IonHeader, + IonIcon, + IonInput, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { create } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + <> + + + + + + Title + + + + + + + + + + + + + + Check for a free puppy + + + Enable Notifications + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/layout/dynamic-font-scaling/vue.md b/static/usage/v9/layout/dynamic-font-scaling/vue.md new file mode 100644 index 00000000000..4564caa820f --- /dev/null +++ b/static/usage/v9/layout/dynamic-font-scaling/vue.md @@ -0,0 +1,68 @@ +```html + + + +``` diff --git a/static/usage/v9/list-header/basic/angular/example_component_html.md b/static/usage/v9/list-header/basic/angular/example_component_html.md new file mode 100644 index 00000000000..d2e2f3fb345 --- /dev/null +++ b/static/usage/v9/list-header/basic/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list-header/basic/angular/example_component_ts.md b/static/usage/v9/list-header/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..4a7586f8d93 --- /dev/null +++ b/static/usage/v9/list-header/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list-header/basic/demo.html b/static/usage/v9/list-header/basic/demo.html new file mode 100644 index 00000000000..88c71bf4f86 --- /dev/null +++ b/static/usage/v9/list-header/basic/demo.html @@ -0,0 +1,47 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v9/list-header/basic/index.md b/static/usage/v9/list-header/basic/index.md new file mode 100644 index 00000000000..a7326887c5b --- /dev/null +++ b/static/usage/v9/list-header/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list-header/basic/javascript.md b/static/usage/v9/list-header/basic/javascript.md new file mode 100644 index 00000000000..d2e2f3fb345 --- /dev/null +++ b/static/usage/v9/list-header/basic/javascript.md @@ -0,0 +1,22 @@ +```html + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list-header/basic/react.md b/static/usage/v9/list-header/basic/react.md new file mode 100644 index 00000000000..b48a05b05da --- /dev/null +++ b/static/usage/v9/list-header/basic/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + + + Video Games + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list-header/basic/vue.md b/static/usage/v9/list-header/basic/vue.md new file mode 100644 index 00000000000..d891af18198 --- /dev/null +++ b/static/usage/v9/list-header/basic/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/list-header/buttons/angular/example_component_html.md b/static/usage/v9/list-header/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..7c24d9242a2 --- /dev/null +++ b/static/usage/v9/list-header/buttons/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list-header/buttons/angular/example_component_ts.md b/static/usage/v9/list-header/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..392f375817e --- /dev/null +++ b/static/usage/v9/list-header/buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list-header/buttons/demo.html b/static/usage/v9/list-header/buttons/demo.html new file mode 100644 index 00000000000..42a91202bca --- /dev/null +++ b/static/usage/v9/list-header/buttons/demo.html @@ -0,0 +1,48 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v9/list-header/buttons/index.md b/static/usage/v9/list-header/buttons/index.md new file mode 100644 index 00000000000..7eccf6c78c2 --- /dev/null +++ b/static/usage/v9/list-header/buttons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list-header/buttons/javascript.md b/static/usage/v9/list-header/buttons/javascript.md new file mode 100644 index 00000000000..7c24d9242a2 --- /dev/null +++ b/static/usage/v9/list-header/buttons/javascript.md @@ -0,0 +1,23 @@ +```html + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list-header/buttons/react.md b/static/usage/v9/list-header/buttons/react.md new file mode 100644 index 00000000000..d5d45b36ab0 --- /dev/null +++ b/static/usage/v9/list-header/buttons/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + + + Video Games + See All + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list-header/buttons/vue.md b/static/usage/v9/list-header/buttons/vue.md new file mode 100644 index 00000000000..94ca0cda062 --- /dev/null +++ b/static/usage/v9/list-header/buttons/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/list-header/lines/angular/example_component_html.md b/static/usage/v9/list-header/lines/angular/example_component_html.md new file mode 100644 index 00000000000..7feb30bd27d --- /dev/null +++ b/static/usage/v9/list-header/lines/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +``` diff --git a/static/usage/v9/list-header/lines/angular/example_component_ts.md b/static/usage/v9/list-header/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..4a7586f8d93 --- /dev/null +++ b/static/usage/v9/list-header/lines/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list-header/lines/demo.html b/static/usage/v9/list-header/lines/demo.html new file mode 100644 index 00000000000..c283438c153 --- /dev/null +++ b/static/usage/v9/list-header/lines/demo.html @@ -0,0 +1,62 @@ + + + + + + List Header + + + + + + + + + + + +
+ + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +
+ + + + diff --git a/static/usage/v9/list-header/lines/index.md b/static/usage/v9/list-header/lines/index.md new file mode 100644 index 00000000000..b9e40b8e486 --- /dev/null +++ b/static/usage/v9/list-header/lines/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list-header/lines/javascript.md b/static/usage/v9/list-header/lines/javascript.md new file mode 100644 index 00000000000..7feb30bd27d --- /dev/null +++ b/static/usage/v9/list-header/lines/javascript.md @@ -0,0 +1,37 @@ +```html + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + +``` diff --git a/static/usage/v9/list-header/lines/react.md b/static/usage/v9/list-header/lines/react.md new file mode 100644 index 00000000000..9ab1c69d35e --- /dev/null +++ b/static/usage/v9/list-header/lines/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Item + + + Item + + + + + + Inset + + + Item + + + Item + + + + + + Full + + + Item + + + Item + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list-header/lines/vue.md b/static/usage/v9/list-header/lines/vue.md new file mode 100644 index 00000000000..06f43b5cbf1 --- /dev/null +++ b/static/usage/v9/list-header/lines/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v9/list-header/theming/colors/angular/example_component_html.md b/static/usage/v9/list-header/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..88d5b12d912 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md b/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..392539d86d3 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list-header/theming/colors/demo.html b/static/usage/v9/list-header/theming/colors/demo.html new file mode 100644 index 00000000000..3f5dd6c4c85 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/demo.html @@ -0,0 +1,57 @@ + + + + + + List Header + + + + + + + + + + + +
+ + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +
+ + + + diff --git a/static/usage/v9/list-header/theming/colors/index.md b/static/usage/v9/list-header/theming/colors/index.md new file mode 100644 index 00000000000..0c975085c50 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list-header/theming/colors/javascript.md b/static/usage/v9/list-header/theming/colors/javascript.md new file mode 100644 index 00000000000..88d5b12d912 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + +``` diff --git a/static/usage/v9/list-header/theming/colors/react.md b/static/usage/v9/list-header/theming/colors/react.md new file mode 100644 index 00000000000..f00ce7c16d1 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonLabel, IonListHeader } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + Primary + + + Secondary + + + Tertiary + + + Success + + + Warning + + + Danger + + + Light + + + Medium + + + Dark + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list-header/theming/colors/vue.md b/static/usage/v9/list-header/theming/colors/vue.md new file mode 100644 index 00000000000..ddf26984441 --- /dev/null +++ b/static/usage/v9/list-header/theming/colors/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..9609437fd1d --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-list-header { + --background: #19422d; + --color: #fff; + + --border-width: 0 0 4px 0; + --border-color: #f24aec; + --border-style: double; +} +``` diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..0bf6d9fa3fe --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Custom List Header + +``` diff --git a/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..392539d86d3 --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonListHeader } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonListHeader], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list-header/theming/css-properties/demo.html b/static/usage/v9/list-header/theming/css-properties/demo.html new file mode 100644 index 00000000000..6e729e4ccea --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + List Header + + + + + + + + + + + +
+ + Custom List Header + +
+ + + + diff --git a/static/usage/v9/list-header/theming/css-properties/index.md b/static/usage/v9/list-header/theming/css-properties/index.md new file mode 100644 index 00000000000..7f990becaf9 --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list-header/theming/css-properties/javascript.md b/static/usage/v9/list-header/theming/css-properties/javascript.md new file mode 100644 index 00000000000..5ac75dc4f0f --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + Custom List Header + + + +``` diff --git a/static/usage/v9/list-header/theming/css-properties/react/main_css.md b/static/usage/v9/list-header/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..9609437fd1d --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/react/main_css.md @@ -0,0 +1,10 @@ +```css +ion-list-header { + --background: #19422d; + --color: #fff; + + --border-width: 0 0 4px 0; + --border-color: #f24aec; + --border-style: double; +} +``` diff --git a/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md b/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..169485b3365 --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonLabel, IonListHeader } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Custom List Header + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list-header/theming/css-properties/vue.md b/static/usage/v9/list-header/theming/css-properties/vue.md new file mode 100644 index 00000000000..572b4155e28 --- /dev/null +++ b/static/usage/v9/list-header/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v9/list/basic/angular/example_component_html.md b/static/usage/v9/list/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f36481075e8 --- /dev/null +++ b/static/usage/v9/list/basic/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list/basic/angular/example_component_ts.md b/static/usage/v9/list/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..892385aa931 --- /dev/null +++ b/static/usage/v9/list/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list/basic/demo.html b/static/usage/v9/list/basic/demo.html new file mode 100644 index 00000000000..05a81de43e4 --- /dev/null +++ b/static/usage/v9/list/basic/demo.html @@ -0,0 +1,44 @@ + + + + + + List + + + + + + + + + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v9/list/basic/index.md b/static/usage/v9/list/basic/index.md new file mode 100644 index 00000000000..cf6bdbefc7e --- /dev/null +++ b/static/usage/v9/list/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list/basic/javascript.md b/static/usage/v9/list/basic/javascript.md new file mode 100644 index 00000000000..f36481075e8 --- /dev/null +++ b/static/usage/v9/list/basic/javascript.md @@ -0,0 +1,19 @@ +```html + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +``` diff --git a/static/usage/v9/list/basic/react.md b/static/usage/v9/list/basic/react.md new file mode 100644 index 00000000000..51b30335ccd --- /dev/null +++ b/static/usage/v9/list/basic/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list/basic/vue.md b/static/usage/v9/list/basic/vue.md new file mode 100644 index 00000000000..8bc0e26f836 --- /dev/null +++ b/static/usage/v9/list/basic/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/list/inset/angular/example_component_html.md b/static/usage/v9/list/inset/angular/example_component_html.md new file mode 100644 index 00000000000..cd94c838cb9 --- /dev/null +++ b/static/usage/v9/list/inset/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + +``` diff --git a/static/usage/v9/list/inset/angular/example_component_ts.md b/static/usage/v9/list/inset/angular/example_component_ts.md new file mode 100644 index 00000000000..86cabbe72f2 --- /dev/null +++ b/static/usage/v9/list/inset/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list/inset/demo.html b/static/usage/v9/list/inset/demo.html new file mode 100644 index 00000000000..34ff4ef6b48 --- /dev/null +++ b/static/usage/v9/list/inset/demo.html @@ -0,0 +1,45 @@ + + + + + + List + + + + + + + + + + + +
+ + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + +
+ + + + diff --git a/static/usage/v9/list/inset/index.md b/static/usage/v9/list/inset/index.md new file mode 100644 index 00000000000..4950d841628 --- /dev/null +++ b/static/usage/v9/list/inset/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list/inset/javascript.md b/static/usage/v9/list/inset/javascript.md new file mode 100644 index 00000000000..28766d76267 --- /dev/null +++ b/static/usage/v9/list/inset/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + +``` diff --git a/static/usage/v9/list/inset/react.md b/static/usage/v9/list/inset/react.md new file mode 100644 index 00000000000..37e00fc1048 --- /dev/null +++ b/static/usage/v9/list/inset/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonContent, IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + Pokémon Yellow + + + Mega Man X + + + The Legend of Zelda + + + Pac-Man + + + Super Mario World + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list/inset/vue.md b/static/usage/v9/list/inset/vue.md new file mode 100644 index 00000000000..d3af6eb591a --- /dev/null +++ b/static/usage/v9/list/inset/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/list/lines/angular/example_component_html.md b/static/usage/v9/list/lines/angular/example_component_html.md new file mode 100644 index 00000000000..b311cb8ad0a --- /dev/null +++ b/static/usage/v9/list/lines/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +``` diff --git a/static/usage/v9/list/lines/angular/example_component_ts.md b/static/usage/v9/list/lines/angular/example_component_ts.md new file mode 100644 index 00000000000..892385aa931 --- /dev/null +++ b/static/usage/v9/list/lines/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/list/lines/demo.html b/static/usage/v9/list/lines/demo.html new file mode 100644 index 00000000000..2c5de893e77 --- /dev/null +++ b/static/usage/v9/list/lines/demo.html @@ -0,0 +1,64 @@ + + + + + + List + + + + + + + + + + + +
+ + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +
+ + + + diff --git a/static/usage/v9/list/lines/index.md b/static/usage/v9/list/lines/index.md new file mode 100644 index 00000000000..2ddad9b640b --- /dev/null +++ b/static/usage/v9/list/lines/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/list/lines/javascript.md b/static/usage/v9/list/lines/javascript.md new file mode 100644 index 00000000000..b311cb8ad0a --- /dev/null +++ b/static/usage/v9/list/lines/javascript.md @@ -0,0 +1,37 @@ +```html + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + +``` diff --git a/static/usage/v9/list/lines/react.md b/static/usage/v9/list/lines/react.md new file mode 100644 index 00000000000..16754ad804b --- /dev/null +++ b/static/usage/v9/list/lines/react.md @@ -0,0 +1,47 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList } from '@ionic/react'; + +function Example() { + return ( + <> + + + Full Lines + + + Full Lines + + + Full Lines + + + + + + Inset Lines + + + Inset Lines + + + Inset Lines + + + + + + No Lines + + + No Lines + + + No Lines + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/list/lines/vue.md b/static/usage/v9/list/lines/vue.md new file mode 100644 index 00000000000..f1accc7a794 --- /dev/null +++ b/static/usage/v9/list/lines/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v9/loading/controller/angular/example_component_html.md b/static/usage/v9/loading/controller/angular/example_component_html.md new file mode 100644 index 00000000000..f4f3d701d2f --- /dev/null +++ b/static/usage/v9/loading/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Show Loading +``` diff --git a/static/usage/v9/loading/controller/angular/example_component_ts.md b/static/usage/v9/loading/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..b3d7bb9870f --- /dev/null +++ b/static/usage/v9/loading/controller/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, LoadingController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent { + constructor(private loadingCtrl: LoadingController) {} + + async showLoading() { + const loading = await this.loadingCtrl.create({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + + loading.present(); + } +} +``` diff --git a/static/usage/v9/loading/controller/demo.html b/static/usage/v9/loading/controller/demo.html new file mode 100644 index 00000000000..8d4fc9231e0 --- /dev/null +++ b/static/usage/v9/loading/controller/demo.html @@ -0,0 +1,37 @@ + + + + + + Datetime + + + + + + + + + + +
+ Show Loading +
+ + + + + + diff --git a/static/usage/v9/loading/controller/index.md b/static/usage/v9/loading/controller/index.md new file mode 100644 index 00000000000..d7336c2cf87 --- /dev/null +++ b/static/usage/v9/loading/controller/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/loading/controller/javascript.md b/static/usage/v9/loading/controller/javascript.md new file mode 100644 index 00000000000..f54756c396b --- /dev/null +++ b/static/usage/v9/loading/controller/javascript.md @@ -0,0 +1,14 @@ +```html +Show Loading + + +``` diff --git a/static/usage/v9/loading/controller/react.md b/static/usage/v9/loading/controller/react.md new file mode 100644 index 00000000000..06dc3413bab --- /dev/null +++ b/static/usage/v9/loading/controller/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, useIonLoading } from '@ionic/react'; +function Example() { + /** + * This example does not make use of the dismiss + * method returned from `useIonLoading`, but it can + * be used for more complex scenarios. + */ + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [present, dismiss] = useIonLoading(); + return ( + { + present({ + message: 'Dismissing after 3 seconds...', + duration: 3000, + }); + }} + > + Show Loading + + ); +} +export default Example; +``` diff --git a/static/usage/v9/loading/controller/vue.md b/static/usage/v9/loading/controller/vue.md new file mode 100644 index 00000000000..0f55dbf9d4a --- /dev/null +++ b/static/usage/v9/loading/controller/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/loading/inline/angular/example_component_html.md b/static/usage/v9/loading/inline/angular/example_component_html.md new file mode 100644 index 00000000000..d0a24c72f61 --- /dev/null +++ b/static/usage/v9/loading/inline/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v9/loading/inline/angular/example_component_ts.md b/static/usage/v9/loading/inline/angular/example_component_ts.md new file mode 100644 index 00000000000..a1c7f11682c --- /dev/null +++ b/static/usage/v9/loading/inline/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/loading/inline/demo.html b/static/usage/v9/loading/inline/demo.html new file mode 100644 index 00000000000..55e15f89200 --- /dev/null +++ b/static/usage/v9/loading/inline/demo.html @@ -0,0 +1,23 @@ + + + + + + Loading + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v9/loading/inline/index.md b/static/usage/v9/loading/inline/index.md new file mode 100644 index 00000000000..3d8d18d6294 --- /dev/null +++ b/static/usage/v9/loading/inline/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/loading/inline/javascript.md b/static/usage/v9/loading/inline/javascript.md new file mode 100644 index 00000000000..d0a24c72f61 --- /dev/null +++ b/static/usage/v9/loading/inline/javascript.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v9/loading/inline/react.md b/static/usage/v9/loading/inline/react.md new file mode 100644 index 00000000000..54ab6144881 --- /dev/null +++ b/static/usage/v9/loading/inline/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonButton, IonLoading } from '@ionic/react'; +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/loading/inline/vue.md b/static/usage/v9/loading/inline/vue.md new file mode 100644 index 00000000000..1a8b98e6ae5 --- /dev/null +++ b/static/usage/v9/loading/inline/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/loading/spinners/angular/example_component_html.md b/static/usage/v9/loading/spinners/angular/example_component_html.md new file mode 100644 index 00000000000..9f4eb5f13a0 --- /dev/null +++ b/static/usage/v9/loading/spinners/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v9/loading/spinners/angular/example_component_ts.md b/static/usage/v9/loading/spinners/angular/example_component_ts.md new file mode 100644 index 00000000000..a1c7f11682c --- /dev/null +++ b/static/usage/v9/loading/spinners/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/loading/spinners/demo.html b/static/usage/v9/loading/spinners/demo.html new file mode 100644 index 00000000000..d2d5360512b --- /dev/null +++ b/static/usage/v9/loading/spinners/demo.html @@ -0,0 +1,23 @@ + + + + + + Loading + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v9/loading/spinners/index.md b/static/usage/v9/loading/spinners/index.md new file mode 100644 index 00000000000..34874e5d378 --- /dev/null +++ b/static/usage/v9/loading/spinners/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import react from './react.md'; +import vue from './vue.md'; + + diff --git a/static/usage/v9/loading/spinners/javascript.md b/static/usage/v9/loading/spinners/javascript.md new file mode 100644 index 00000000000..4e2105dcd5e --- /dev/null +++ b/static/usage/v9/loading/spinners/javascript.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v9/loading/spinners/react.md b/static/usage/v9/loading/spinners/react.md new file mode 100644 index 00000000000..2bfa2eb4aa1 --- /dev/null +++ b/static/usage/v9/loading/spinners/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonButton, useIonLoading } from '@ionic/react'; +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/loading/spinners/vue.md b/static/usage/v9/loading/spinners/vue.md new file mode 100644 index 00000000000..beaa1cd866b --- /dev/null +++ b/static/usage/v9/loading/spinners/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/loading/theming/angular/example_component_html.md b/static/usage/v9/loading/theming/angular/example_component_html.md new file mode 100644 index 00000000000..0696c7c4342 --- /dev/null +++ b/static/usage/v9/loading/theming/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Show Loading + +``` diff --git a/static/usage/v9/loading/theming/angular/example_component_ts.md b/static/usage/v9/loading/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..a1c7f11682c --- /dev/null +++ b/static/usage/v9/loading/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonLoading } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonLoading], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/loading/theming/angular/global_css.md b/static/usage/v9/loading/theming/angular/global_css.md new file mode 100644 index 00000000000..af410626c52 --- /dev/null +++ b/static/usage/v9/loading/theming/angular/global_css.md @@ -0,0 +1,8 @@ +```css +ion-loading.custom-loading { + --background: #e3edff; + --spinner-color: #1c6dff; + + color: #1c6dff; +} +``` diff --git a/static/usage/v9/loading/theming/demo.html b/static/usage/v9/loading/theming/demo.html new file mode 100644 index 00000000000..053bcfff292 --- /dev/null +++ b/static/usage/v9/loading/theming/demo.html @@ -0,0 +1,35 @@ + + + + + + Datetime + + + + + + + + + + + +
+ Show Loading + +
+ + + + diff --git a/static/usage/v9/loading/theming/index.md b/static/usage/v9/loading/theming/index.md new file mode 100644 index 00000000000..adcef8d6ec8 --- /dev/null +++ b/static/usage/v9/loading/theming/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/loading/theming/javascript.md b/static/usage/v9/loading/theming/javascript.md new file mode 100644 index 00000000000..4fcaf2ff32d --- /dev/null +++ b/static/usage/v9/loading/theming/javascript.md @@ -0,0 +1,13 @@ +```html +Show Loading + + + +``` diff --git a/static/usage/v9/loading/theming/react/main_css.md b/static/usage/v9/loading/theming/react/main_css.md new file mode 100644 index 00000000000..af410626c52 --- /dev/null +++ b/static/usage/v9/loading/theming/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-loading.custom-loading { + --background: #e3edff; + --spinner-color: #1c6dff; + + color: #1c6dff; +} +``` diff --git a/static/usage/v9/loading/theming/react/main_tsx.md b/static/usage/v9/loading/theming/react/main_tsx.md new file mode 100644 index 00000000000..01a84ed7f30 --- /dev/null +++ b/static/usage/v9/loading/theming/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonButton, IonLoading } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Show Loading + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/loading/theming/vue.md b/static/usage/v9/loading/theming/vue.md new file mode 100644 index 00000000000..d7ced5afac5 --- /dev/null +++ b/static/usage/v9/loading/theming/vue.md @@ -0,0 +1,18 @@ +```html + + + + +``` diff --git a/static/usage/v9/menu/basic/angular/example_component_html.md b/static/usage/v9/menu/basic/angular/example_component_html.md new file mode 100644 index 00000000000..0fb5465519f --- /dev/null +++ b/static/usage/v9/menu/basic/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v9/menu/basic/angular/example_component_ts.md b/static/usage/v9/menu/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..9e85696db9c --- /dev/null +++ b/static/usage/v9/menu/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/menu/basic/demo.html b/static/usage/v9/menu/basic/demo.html new file mode 100644 index 00000000000..1a1a2f26ab2 --- /dev/null +++ b/static/usage/v9/menu/basic/demo.html @@ -0,0 +1,36 @@ + + + + + + Menu + + + + + + + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v9/menu/basic/index.md b/static/usage/v9/menu/basic/index.md new file mode 100644 index 00000000000..cbc6d4147d1 --- /dev/null +++ b/static/usage/v9/menu/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/basic/javascript.md b/static/usage/v9/menu/basic/javascript.md new file mode 100644 index 00000000000..afb14178ea4 --- /dev/null +++ b/static/usage/v9/menu/basic/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v9/menu/basic/react.md b/static/usage/v9/menu/basic/react.md new file mode 100644 index 00000000000..671dba8a744 --- /dev/null +++ b/static/usage/v9/menu/basic/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + + + + Menu + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/basic/vue.md b/static/usage/v9/menu/basic/vue.md new file mode 100644 index 00000000000..81657010c8f --- /dev/null +++ b/static/usage/v9/menu/basic/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/menu/multiple/angular/example_component_html.md b/static/usage/v9/menu/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..a81d2020f5d --- /dev/null +++ b/static/usage/v9/menu/multiple/angular/example_component_html.md @@ -0,0 +1,43 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+``` diff --git a/static/usage/v9/menu/multiple/angular/example_component_ts.md b/static/usage/v9/menu/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..813767075f2 --- /dev/null +++ b/static/usage/v9/menu/multiple/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar, MenuController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonMenu, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor(private menuCtrl: MenuController) {} + + openFirstMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + this.menuCtrl.open('first-menu'); + } + + openSecondMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + this.menuCtrl.open('second-menu'); + } + + openEndMenu() { + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ + this.menuCtrl.open('end'); + } +} +``` diff --git a/static/usage/v9/menu/multiple/demo.html b/static/usage/v9/menu/multiple/demo.html new file mode 100644 index 00000000000..3f21bbe58f0 --- /dev/null +++ b/static/usage/v9/menu/multiple/demo.html @@ -0,0 +1,92 @@ + + + + + + Menu + + + + + + + + + + + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + + + + diff --git a/static/usage/v9/menu/multiple/index.md b/static/usage/v9/menu/multiple/index.md new file mode 100644 index 00000000000..b148d660a25 --- /dev/null +++ b/static/usage/v9/menu/multiple/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/multiple/javascript.md b/static/usage/v9/menu/multiple/javascript.md new file mode 100644 index 00000000000..cecfc4c71af --- /dev/null +++ b/static/usage/v9/menu/multiple/javascript.md @@ -0,0 +1,72 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + +``` diff --git a/static/usage/v9/menu/multiple/react.md b/static/usage/v9/menu/multiple/react.md new file mode 100644 index 00000000000..d77ae05a8a8 --- /dev/null +++ b/static/usage/v9/menu/multiple/react.md @@ -0,0 +1,87 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { menuController } from '@ionic/core/components'; + +function Example() { + async function openFirstMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + await menuController.open('first-menu'); + } + + async function openSecondMenu() { + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ + await menuController.open('second-menu'); + } + + async function openEndMenu() { + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ + await menuController.open('end'); + } + + return ( + <> + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + + + + + Menu + + + +

Tap a button below to open a specific menu.

+ + + Open First Menu + + + Open Second Menu + + + Open End Menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/multiple/vue.md b/static/usage/v9/menu/multiple/vue.md new file mode 100644 index 00000000000..6f66b5f29ac --- /dev/null +++ b/static/usage/v9/menu/multiple/vue.md @@ -0,0 +1,76 @@ +```html + + + +``` diff --git a/static/usage/v9/menu/sides/angular/example_component_html.md b/static/usage/v9/menu/sides/angular/example_component_html.md new file mode 100644 index 00000000000..b9f7a01069d --- /dev/null +++ b/static/usage/v9/menu/sides/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v9/menu/sides/angular/example_component_ts.md b/static/usage/v9/menu/sides/angular/example_component_ts.md new file mode 100644 index 00000000000..9e85696db9c --- /dev/null +++ b/static/usage/v9/menu/sides/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/menu/sides/demo.html b/static/usage/v9/menu/sides/demo.html new file mode 100644 index 00000000000..43523316a70 --- /dev/null +++ b/static/usage/v9/menu/sides/demo.html @@ -0,0 +1,37 @@ + + + + + + Menu + + + + + + + + + + + + Menu Content + + + This is the menu content. + + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v9/menu/sides/index.md b/static/usage/v9/menu/sides/index.md new file mode 100644 index 00000000000..a91015269d5 --- /dev/null +++ b/static/usage/v9/menu/sides/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/sides/javascript.md b/static/usage/v9/menu/sides/javascript.md new file mode 100644 index 00000000000..543806395fc --- /dev/null +++ b/static/usage/v9/menu/sides/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v9/menu/sides/react.md b/static/usage/v9/menu/sides/react.md new file mode 100644 index 00000000000..cbb73598dae --- /dev/null +++ b/static/usage/v9/menu/sides/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + Menu + + + + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/sides/vue.md b/static/usage/v9/menu/sides/vue.md new file mode 100644 index 00000000000..7633eef1786 --- /dev/null +++ b/static/usage/v9/menu/sides/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/menu/theming/angular/example_component_css.md b/static/usage/v9/menu/theming/angular/example_component_css.md new file mode 100644 index 00000000000..1bba1305577 --- /dev/null +++ b/static/usage/v9/menu/theming/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-menu::part(backdrop) { + background-color: rgba(255, 0, 255, 0.5); +} + +ion-menu::part(container) { + border-radius: 0 20px 20px 0; + + box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); +} +``` diff --git a/static/usage/v9/menu/theming/angular/example_component_html.md b/static/usage/v9/menu/theming/angular/example_component_html.md new file mode 100644 index 00000000000..f46819d3e99 --- /dev/null +++ b/static/usage/v9/menu/theming/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ +``` diff --git a/static/usage/v9/menu/theming/angular/example_component_ts.md b/static/usage/v9/menu/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..6cef32b6fbf --- /dev/null +++ b/static/usage/v9/menu/theming/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { + IonApp, + IonButtons, + IonContent, + IonHeader, + IonMenu, + IonMenuButton, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonApp, IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/menu/theming/demo.html b/static/usage/v9/menu/theming/demo.html new file mode 100644 index 00000000000..5b89ad39cc1 --- /dev/null +++ b/static/usage/v9/menu/theming/demo.html @@ -0,0 +1,47 @@ + + + + + + Menu + + + + + + + + + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v9/menu/theming/index.md b/static/usage/v9/menu/theming/index.md new file mode 100644 index 00000000000..f4e3a88792c --- /dev/null +++ b/static/usage/v9/menu/theming/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/theming/javascript.md b/static/usage/v9/menu/theming/javascript.md new file mode 100644 index 00000000000..6df6026c610 --- /dev/null +++ b/static/usage/v9/menu/theming/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + Menu Content + + + This is the menu content. + +
+ + + + + + Menu + + + Tap the button in the toolbar to open the menu. +
+ + + +``` diff --git a/static/usage/v9/menu/theming/react/main_css.md b/static/usage/v9/menu/theming/react/main_css.md new file mode 100644 index 00000000000..1bba1305577 --- /dev/null +++ b/static/usage/v9/menu/theming/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-menu::part(backdrop) { + background-color: rgba(255, 0, 255, 0.5); +} + +ion-menu::part(container) { + border-radius: 0 20px 20px 0; + + box-shadow: 4px 0px 16px rgba(255, 0, 255, 0.18); +} +``` diff --git a/static/usage/v9/menu/theming/react/main_tsx.md b/static/usage/v9/menu/theming/react/main_tsx.md new file mode 100644 index 00000000000..c2f3d72ab2b --- /dev/null +++ b/static/usage/v9/menu/theming/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + + + + Menu + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/theming/vue.md b/static/usage/v9/menu/theming/vue.md new file mode 100644 index 00000000000..c3f9e0abd79 --- /dev/null +++ b/static/usage/v9/menu/theming/vue.md @@ -0,0 +1,39 @@ +```html + + + + + +``` diff --git a/static/usage/v9/menu/toggle/angular/example_component_html.md b/static/usage/v9/menu/toggle/angular/example_component_html.md new file mode 100644 index 00000000000..d2ecafc7904 --- /dev/null +++ b/static/usage/v9/menu/toggle/angular/example_component_html.md @@ -0,0 +1,26 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+``` diff --git a/static/usage/v9/menu/toggle/angular/example_component_ts.md b/static/usage/v9/menu/toggle/angular/example_component_ts.md new file mode 100644 index 00000000000..c718eb735af --- /dev/null +++ b/static/usage/v9/menu/toggle/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/menu/toggle/demo.html b/static/usage/v9/menu/toggle/demo.html new file mode 100644 index 00000000000..9fff9da463b --- /dev/null +++ b/static/usage/v9/menu/toggle/demo.html @@ -0,0 +1,41 @@ + + + + + + Menu - Toggle + + + + + + + + + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+ + + diff --git a/static/usage/v9/menu/toggle/index.md b/static/usage/v9/menu/toggle/index.md new file mode 100644 index 00000000000..3adbcc7a804 --- /dev/null +++ b/static/usage/v9/menu/toggle/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/toggle/javascript.md b/static/usage/v9/menu/toggle/javascript.md new file mode 100644 index 00000000000..660e0b4d1b6 --- /dev/null +++ b/static/usage/v9/menu/toggle/javascript.md @@ -0,0 +1,26 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + +
+ + + Menu + + + + + Click to open the menu + + +
+``` diff --git a/static/usage/v9/menu/toggle/react.md b/static/usage/v9/menu/toggle/react.md new file mode 100644 index 00000000000..3428aaa42d0 --- /dev/null +++ b/static/usage/v9/menu/toggle/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonMenuToggle, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + + + Click to close the menu + + + + + + + Menu + + + + + Click to open the menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/toggle/vue.md b/static/usage/v9/menu/toggle/vue.md new file mode 100644 index 00000000000..377b67c4e17 --- /dev/null +++ b/static/usage/v9/menu/toggle/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v9/menu/type/angular/example_component_html.md b/static/usage/v9/menu/type/angular/example_component_html.md new file mode 100644 index 00000000000..25ff9c152e0 --- /dev/null +++ b/static/usage/v9/menu/type/angular/example_component_html.md @@ -0,0 +1,46 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+``` diff --git a/static/usage/v9/menu/type/angular/example_component_ts.md b/static/usage/v9/menu/type/angular/example_component_ts.md new file mode 100644 index 00000000000..7f403ab28bb --- /dev/null +++ b/static/usage/v9/menu/type/angular/example_component_ts.md @@ -0,0 +1,38 @@ +```ts +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { + IonButton, + IonContent, + IonHeader, + IonItem, + IonMenu, + IonMenuToggle, + IonRadio, + IonRadioGroup, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + FormsModule, + IonButton, + IonContent, + IonHeader, + IonItem, + IonMenu, + IonMenuToggle, + IonRadio, + IonRadioGroup, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + menuType: string = 'overlay'; +} +``` diff --git a/static/usage/v9/menu/type/demo.html b/static/usage/v9/menu/type/demo.html new file mode 100644 index 00000000000..3a948b0a9e2 --- /dev/null +++ b/static/usage/v9/menu/type/demo.html @@ -0,0 +1,70 @@ + + + + + + Menu - Type + + + + + + + + + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+ + + + + diff --git a/static/usage/v9/menu/type/index.md b/static/usage/v9/menu/type/index.md new file mode 100644 index 00000000000..c02514a349f --- /dev/null +++ b/static/usage/v9/menu/type/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/menu/type/javascript.md b/static/usage/v9/menu/type/javascript.md new file mode 100644 index 00000000000..a6b5b7e5fc1 --- /dev/null +++ b/static/usage/v9/menu/type/javascript.md @@ -0,0 +1,55 @@ +```html + + + + Menu Content + + + + + Click to close the menu + + + + +
+ + + Menu + + + +

Select an overlay type:

+ + + + overlay + + + + + reveal + + + + + push + + + +
+ + Click to open the menu + + +
+ + +``` diff --git a/static/usage/v9/menu/type/react.md b/static/usage/v9/menu/type/react.md new file mode 100644 index 00000000000..af341a0e753 --- /dev/null +++ b/static/usage/v9/menu/type/react.md @@ -0,0 +1,74 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonContent, + IonHeader, + IonItem, + IonMenu, + IonMenuToggle, + IonPage, + IonRadio, + IonRadioGroup, + IonTitle, + IonToolbar, +} from '@ionic/react'; +import type { RadioGroupCustomEvent } from '@ionic/react'; + +function Example() { + const [menuType, setMenuType] = useState('overlay'); + + return ( + <> + + + + Menu Content + + + + + Click to close the menu + + + + + + + Menu + + + +

Select an overlay type:

+ { + setMenuType(event.detail.value); + }} + > + + + overlay + + + + + reveal + + + + + push + + +
+ + Click to open the menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/menu/type/vue.md b/static/usage/v9/menu/type/vue.md new file mode 100644 index 00000000000..59a98b0f9ba --- /dev/null +++ b/static/usage/v9/menu/type/vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md new file mode 100644 index 00000000000..593098daca1 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + + +
+``` diff --git a/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_ts.md b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_ts.md new file mode 100644 index 00000000000..93d50b21946 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { + CheckboxCustomEvent, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + canDismiss = false; + + presentingElement!: HTMLElement | null; + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + onTermsChanged(event: CheckboxCustomEvent) { + this.canDismiss = event.detail.checked; + } +} +``` diff --git a/static/usage/v9/modal/can-dismiss/boolean/demo.html b/static/usage/v9/modal/can-dismiss/boolean/demo.html new file mode 100644 index 00000000000..1ce0224555e --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/demo.html @@ -0,0 +1,64 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + +
+ + + + + diff --git a/static/usage/v9/modal/can-dismiss/boolean/index.md b/static/usage/v9/modal/can-dismiss/boolean/index.md new file mode 100644 index 00000000000..bcf706ac795 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/can-dismiss/boolean/javascript.md b/static/usage/v9/modal/can-dismiss/boolean/javascript.md new file mode 100644 index 00000000000..3dde7734e5a --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/javascript.md @@ -0,0 +1,49 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You must accept the terms and conditions to close this modal.

+ + +
Do you accept the terms and conditions?
+ + + + + +
+ + +``` diff --git a/static/usage/v9/modal/can-dismiss/boolean/react.md b/static/usage/v9/modal/can-dismiss/boolean/react.md new file mode 100644 index 00000000000..0b817b8f185 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/react.md @@ -0,0 +1,72 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonCheckbox, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(undefined); + + const [canDismiss, setCanDismiss] = useState(false); + const [presentingElement, setPresentingElement] = useState(undefined); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

You must accept the terms and conditions to close this modal.

+ + { + setCanDismiss(event.detail.checked); + }} + > +
Do you accept the terms and conditions?
+ + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/can-dismiss/boolean/vue.md b/static/usage/v9/modal/can-dismiss/boolean/vue.md new file mode 100644 index 00000000000..b33d7799a10 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/boolean/vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md new file mode 100644 index 00000000000..3bef90bc0f9 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_html.md @@ -0,0 +1,24 @@ +```html +
+ + + Modal + + Close + + + + + + + + Override Dismiss
+ Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + +
+``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md new file mode 100644 index 00000000000..9c59b4f2a08 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/angular/child_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component, Input, Output, EventEmitter } from '@angular/core'; + +import { + CheckboxCustomEvent, + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonModal, + IonNote, + IonToolbar, + IonTitle, +} from '@ionic/angular'; + +@Component({ + selector: 'app-child', + templateUrl: 'child.component.html', + imports: [IonButton, IonButtons, IonCheckbox, IonContent, IonHeader, IonItem, IonList, IonNote, IonToolbar, IonTitle], +}) +export class ChildComponent { + @Input() modal!: IonModal; + + @Output() dismissChange = new EventEmitter(); + + checkboxChanged(event: CheckboxCustomEvent) { + const checked = event.detail.checked; + + this.dismissChange.emit(checked); + } +} +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md new file mode 100644 index 00000000000..aeed41b7408 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html +
+ + + App + + + + Open + + + + + + +
+``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_ts.md b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_ts.md new file mode 100644 index 00000000000..58067b2b4d5 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/angular/example_component_ts.md @@ -0,0 +1,70 @@ +```ts +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { + ActionSheetController, + IonButton, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { ChildComponent } from './child.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ChildComponent, FormsModule, IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + presentingElement!: HTMLElement | null; + + private canDismissOverride = false; + + constructor(private actionSheetCtrl: ActionSheetController) {} + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + onDismissChange(canDismiss: boolean) { + // Allows the modal to be dismissed based on the state of the checkbox + this.canDismissOverride = canDismiss; + } + + onWillPresent() { + // Resets the override when the modal is presented + this.canDismissOverride = false; + } + + canDismiss = async () => { + if (this.canDismissOverride) { + // Checks for the override flag to return early if we can dismiss the overlay immediately + return true; + } + + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + }); + + actionSheet.present(); + + const { role } = await actionSheet.onWillDismiss(); + + return role === 'confirm'; + }; +} +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/demo.html b/static/usage/v9/modal/can-dismiss/child-state/demo.html new file mode 100644 index 00000000000..100ca0c7e23 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/demo.html @@ -0,0 +1,92 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + + + + + Override Dismiss
+ Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + + + +
+ + + + + diff --git a/static/usage/v9/modal/can-dismiss/child-state/index.md b/static/usage/v9/modal/can-dismiss/child-state/index.md new file mode 100644 index 00000000000..6c8f2b9c264 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/index.md @@ -0,0 +1,40 @@ +import Playground from '@site/src/components/global/Playground'; + +import vue_example_vue from './vue/example_vue.md'; +import vue_child_vue from './vue/child_vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_child_tsx from './react/child_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_child_component_html from './angular/child_component_html.md'; +import angular_child_component_ts from './angular/child_component_ts.md'; + + diff --git a/static/usage/v9/modal/can-dismiss/child-state/react/child_tsx.md b/static/usage/v9/modal/can-dismiss/child-state/react/child_tsx.md new file mode 100644 index 00000000000..f87706f75cf --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/react/child_tsx.md @@ -0,0 +1,55 @@ +```tsx +import { + IonHeader, + IonToolbar, + IonTitle, + IonButtons, + IonButton, + IonContent, + IonList, + IonItem, + IonCheckbox, + IonNote, +} from '@ionic/react'; + +import type { CheckboxCustomEvent } from '@ionic/core/components'; + +interface ChildProps { + dismissChange: (checked: boolean) => void; + dismiss: () => void; +} + +function Child({ dismissChange, dismiss }: ChildProps) { + const checkboxChanged = (event: CheckboxCustomEvent) => { + const checked = event.detail.checked; + dismissChange(checked); + }; + + return ( + <> + + + Modal + + dismiss()}>Close + + + + + + + + Override Dismiss +
+ + Toggle the checkbox to allow immediately dismissing the modal without a prompt. + + + + + + + ); +} +export default Child; +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md b/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md new file mode 100644 index 00000000000..5657089983f --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/react/main_tsx.md @@ -0,0 +1,97 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +import Child from './Child'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + const [canDismissOverride, setCanDismissOverride] = useState(false); + + const [presentingElement, setPresentingElement] = useState(null); + const [present] = useIonActionSheet(); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + function onWillPresent() { + // Resets the override when the modal is presented + setCanDismissOverride(false); + } + + async function canDismiss() { + if (canDismissOverride) { + // Checks for the override flag to return early if we can dismiss the overlay immediately + return true; + } + return new Promise((resolve, reject) => { + present({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + onWillDismiss: (event) => { + if (event.detail.role === 'confirm') { + resolve(true); + } else { + reject(); + } + }, + }); + }); + } + + return ( + + + + App + + + + + Open + + + { + setCanDismissOverride(checked); + }} + /> + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md b/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md new file mode 100644 index 00000000000..ffbb483864e --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/vue/child_vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md b/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md new file mode 100644 index 00000000000..831c89cb435 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/child-state/vue/example_vue.md @@ -0,0 +1,85 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md new file mode 100644 index 00000000000..fa9ea513674 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/angular/example_component_html.md @@ -0,0 +1,27 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + + +
+``` diff --git a/static/usage/v9/modal/can-dismiss/function/angular/example_component_ts.md b/static/usage/v9/modal/can-dismiss/function/angular/example_component_ts.md new file mode 100644 index 00000000000..697fe075f26 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/angular/example_component_ts.md @@ -0,0 +1,51 @@ +```ts +import { Component } from '@angular/core'; +import { + ActionSheetController, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + presentingElement!: HTMLElement | null; + + constructor(private actionSheetCtrl: ActionSheetController) {} + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } + + canDismiss = async () => { + const actionSheet = await this.actionSheetCtrl.create({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + }); + + actionSheet.present(); + + const { role } = await actionSheet.onWillDismiss(); + + return role === 'confirm'; + }; +} +``` diff --git a/static/usage/v9/modal/can-dismiss/function/demo.html b/static/usage/v9/modal/can-dismiss/function/demo.html new file mode 100644 index 00000000000..b8f5e67ff17 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/demo.html @@ -0,0 +1,74 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ + + + + diff --git a/static/usage/v9/modal/can-dismiss/function/index.md b/static/usage/v9/modal/can-dismiss/function/index.md new file mode 100644 index 00000000000..557182e6382 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/can-dismiss/function/javascript.md b/static/usage/v9/modal/can-dismiss/function/javascript.md new file mode 100644 index 00000000000..e48c06bacb5 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/javascript.md @@ -0,0 +1,59 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

You will be prompted when closing this modal.

+ + + +
+ + +``` diff --git a/static/usage/v9/modal/can-dismiss/function/react.md b/static/usage/v9/modal/can-dismiss/function/react.md new file mode 100644 index 00000000000..bed9be270d4 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/react.md @@ -0,0 +1,85 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + useIonActionSheet, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + const [present] = useIonActionSheet(); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + function canDismiss() { + return new Promise((resolve, reject) => { + present({ + header: 'Are you sure?', + buttons: [ + { + text: 'Yes', + role: 'confirm', + }, + { + text: 'No', + role: 'cancel', + }, + ], + onWillDismiss: (event) => { + if (event.detail.role === 'confirm') { + resolve(true); + } else { + reject(); + } + }, + }); + }); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

You will be prompted when closing this modal.

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/can-dismiss/function/vue.md b/static/usage/v9/modal/can-dismiss/function/vue.md new file mode 100644 index 00000000000..72eb927e498 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/function/vue.md @@ -0,0 +1,74 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md new file mode 100644 index 00000000000..de1d6d041ea --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + +
+``` diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md new file mode 100644 index 00000000000..59f1d5d8e50 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + async canDismiss(data?: undefined, role?: string) { + return role !== 'gesture'; + } +} +``` diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/demo.html b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/demo.html new file mode 100644 index 00000000000..2fc3602abde --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/demo.html @@ -0,0 +1,55 @@ + + + + + + Modal | Can Dismiss + + + + + + + + +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not + dismiss it. +

+ + + +
+ + + + + diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md new file mode 100644 index 00000000000..b620e3e72b9 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/javascript.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/javascript.md new file mode 100644 index 00000000000..e50e279364c --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/javascript.md @@ -0,0 +1,39 @@ +```html +
+ + + App + + + + Open + + + + + Modal + + Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss it. +

+ + + +
+ + +``` diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/react.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/react.md new file mode 100644 index 00000000000..c63bd0d1503 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/react.md @@ -0,0 +1,56 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + async function canDismiss(data?: any, role?: string) { + return role !== 'gesture'; + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + +

+ To close this modal, please use the "Close" button provided. Note that swiping the modal will not dismiss + it. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md new file mode 100644 index 00000000000..afd25081c11 --- /dev/null +++ b/static/usage/v9/modal/can-dismiss/prevent-swipe-to-close/vue.md @@ -0,0 +1,47 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/card/basic/angular/example_component_html.md b/static/usage/v9/modal/card/basic/angular/example_component_html.md new file mode 100644 index 00000000000..8c00ae7f41c --- /dev/null +++ b/static/usage/v9/modal/card/basic/angular/example_component_html.md @@ -0,0 +1,65 @@ +```html +
+ + + App + + + + Open Card Modal + + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + +
+``` diff --git a/static/usage/v9/modal/card/basic/angular/example_component_ts.md b/static/usage/v9/modal/card/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a150b71db0c --- /dev/null +++ b/static/usage/v9/modal/card/basic/angular/example_component_ts.md @@ -0,0 +1,43 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + // Typically referenced to your ion-router-outlet + presentingElement!: HTMLElement | null; + + ngOnInit() { + this.presentingElement = document.querySelector('.ion-page'); + } +} +``` diff --git a/static/usage/v9/modal/card/basic/demo.html b/static/usage/v9/modal/card/basic/demo.html new file mode 100644 index 00000000000..06ca3cf1c08 --- /dev/null +++ b/static/usage/v9/modal/card/basic/demo.html @@ -0,0 +1,88 @@ + + + + + + Modal | Card + + + + + + + + +
+ + + App + + + + Open Card Modal + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + +
+ + + + + diff --git a/static/usage/v9/modal/card/basic/index.md b/static/usage/v9/modal/card/basic/index.md new file mode 100644 index 00000000000..1169a635019 --- /dev/null +++ b/static/usage/v9/modal/card/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/card/basic/javascript.md b/static/usage/v9/modal/card/basic/javascript.md new file mode 100644 index 00000000000..fd5da0ef061 --- /dev/null +++ b/static/usage/v9/modal/card/basic/javascript.md @@ -0,0 +1,73 @@ +```html +
+ + + App + + + + Open Card Modal + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + +
+ + +``` diff --git a/static/usage/v9/modal/card/basic/react.md b/static/usage/v9/modal/card/basic/react.md new file mode 100644 index 00000000000..ea8db6170a1 --- /dev/null +++ b/static/usage/v9/modal/card/basic/react.md @@ -0,0 +1,99 @@ +```tsx +import React, { useState, useRef, useEffect } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const page = useRef(null); + + const [presentingElement, setPresentingElement] = useState(null); + + useEffect(() => { + setPresentingElement(page.current); + }, []); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open + + + + + Modal + + dismiss()}>Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/card/basic/vue.md b/static/usage/v9/modal/card/basic/vue.md new file mode 100644 index 00000000000..254d0081cab --- /dev/null +++ b/static/usage/v9/modal/card/basic/vue.md @@ -0,0 +1,95 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/controller/angular/example_component_html.md b/static/usage/v9/modal/controller/angular/example_component_html.md new file mode 100644 index 00000000000..99359fe23ab --- /dev/null +++ b/static/usage/v9/modal/controller/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + Controller Modal + + + + Open +

{{ message() }}

+ +``` diff --git a/static/usage/v9/modal/controller/angular/example_component_ts.md b/static/usage/v9/modal/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..45bde663ac9 --- /dev/null +++ b/static/usage/v9/modal/controller/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component, signal } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar, ModalController } from '@ionic/angular'; + +import { ModalExampleComponent } from './modal-example.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [FormsModule, IonButton, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent { + readonly message = signal('This modal example uses the modalController to present and dismiss modals.'); + + constructor(private modalCtrl: ModalController) {} + + async openModal() { + const modal = await this.modalCtrl.create({ + component: ModalExampleComponent, + }); + modal.present(); + + const { data, role } = await modal.onWillDismiss(); + + if (role === 'confirm') { + this.message.set(`Hello, ${data}!`); + } + } +} +``` diff --git a/static/usage/v9/modal/controller/angular/modal-example_component_html.md b/static/usage/v9/modal/controller/angular/modal-example_component_html.md new file mode 100644 index 00000000000..2053452af35 --- /dev/null +++ b/static/usage/v9/modal/controller/angular/modal-example_component_html.md @@ -0,0 +1,18 @@ +```html + + + + Cancel + + Welcome + + Confirm + + + + + + + + +``` diff --git a/static/usage/v9/modal/controller/angular/modal-example_component_ts.md b/static/usage/v9/modal/controller/angular/modal-example_component_ts.md new file mode 100644 index 00000000000..fd6d05b3196 --- /dev/null +++ b/static/usage/v9/modal/controller/angular/modal-example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { FormsModule } from '@angular/forms'; + +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonInput, + IonItem, + IonTitle, + IonToolbar, + ModalController, +} from '@ionic/angular'; + +@Component({ + selector: 'app-modal-example', + templateUrl: 'modal-example.component.html', + imports: [FormsModule, IonButton, IonButtons, IonContent, IonHeader, IonInput, IonItem, IonTitle, IonToolbar], +}) +export class ModalExampleComponent { + name!: string; + + constructor(private modalCtrl: ModalController) {} + + cancel() { + return this.modalCtrl.dismiss(null, 'cancel'); + } + + confirm() { + return this.modalCtrl.dismiss(this.name, 'confirm'); + } +} +``` diff --git a/static/usage/v9/modal/controller/demo.html b/static/usage/v9/modal/controller/demo.html new file mode 100644 index 00000000000..05806f85021 --- /dev/null +++ b/static/usage/v9/modal/controller/demo.html @@ -0,0 +1,75 @@ + + + + + + Modal | Controller + + + + + + + + + + + + Controller Modal + + + + Open +

This modal example uses the modalController to present and dismiss modals.

+ + + + + + diff --git a/static/usage/v9/modal/controller/index.md b/static/usage/v9/modal/controller/index.md new file mode 100644 index 00000000000..4722546d611 --- /dev/null +++ b/static/usage/v9/modal/controller/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; + +import vue_example from './vue/example_vue.md'; +import vue_modal from './vue/modal_vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_modal_example_component_ts from './angular/modal-example_component_ts.md'; +import angular_modal_example_component_html from './angular/modal-example_component_html.md'; + + diff --git a/static/usage/v9/modal/controller/javascript.md b/static/usage/v9/modal/controller/javascript.md new file mode 100644 index 00000000000..ca5bb55011c --- /dev/null +++ b/static/usage/v9/modal/controller/javascript.md @@ -0,0 +1,56 @@ +```html + + + Controller Modal + + + + Open +

This modal example uses the modalController to present and dismiss modals.

+ + + +``` diff --git a/static/usage/v9/modal/controller/react.md b/static/usage/v9/modal/controller/react.md new file mode 100644 index 00000000000..5f1d0033c95 --- /dev/null +++ b/static/usage/v9/modal/controller/react.md @@ -0,0 +1,79 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { + IonButtons, + IonButton, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonInput, + useIonModal, +} from '@ionic/react'; +import { OverlayEventDetail } from '@ionic/core/components'; + +const ModalExample = ({ dismiss }: { dismiss: (data?: string | null | undefined | number, role?: string) => void }) => { + const inputRef = useRef(null); + return ( + + + + + dismiss(null, 'cancel')}> + Cancel + + + Welcome + + dismiss(inputRef.current?.value, 'confirm')} strong={true}> + Confirm + + + + + + + + + + + ); +}; + +function Example() { + const [present, dismiss] = useIonModal(ModalExample, { + dismiss: (data?: string | number | null, role?: string) => dismiss(data, role), + }); + const [message, setMessage] = useState('This modal example uses the modalController to present and dismiss modals.'); + + function openModal() { + present({ + onWillDismiss: (event: CustomEvent) => { + if (event.detail.role === 'confirm') { + setMessage(`Hello, ${event.detail.data}!`); + } + }, + }); + } + + return ( + + + + Controller Modal + + + + openModal()}> + Open + +

{message}

+ + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/controller/vue/example_vue.md b/static/usage/v9/modal/controller/vue/example_vue.md new file mode 100644 index 00000000000..d3ecfde1623 --- /dev/null +++ b/static/usage/v9/modal/controller/vue/example_vue.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/controller/vue/modal_vue.md b/static/usage/v9/modal/controller/vue/modal_vue.md new file mode 100644 index 00000000000..c5e09e6cb1a --- /dev/null +++ b/static/usage/v9/modal/controller/vue/modal_vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md b/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md new file mode 100644 index 00000000000..d8f43b4b55d --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + App + + + + Open Custom Dialog + + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + +``` diff --git a/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md b/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md new file mode 100644 index 00000000000..864d5717f5e --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle }); + } +} +``` diff --git a/static/usage/v9/modal/custom-dialogs/angular/global_css.md b/static/usage/v9/modal/custom-dialogs/angular/global_css.md new file mode 100644 index 00000000000..3edb76f1e97 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/angular/global_css.md @@ -0,0 +1,28 @@ +```css +ion-modal#example-modal { + --width: fit-content; + --min-width: 250px; + --height: fit-content; + --border-radius: 6px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} + +ion-modal#example-modal h1 { + margin: 20px 20px 10px 20px; +} + +ion-modal#example-modal ion-icon { + margin-right: 6px; + + width: 48px; + height: 48px; + + padding: 4px 0; + + color: #aaaaaa; +} + +ion-modal#example-modal .wrapper { + margin-bottom: 10px; +} +``` diff --git a/static/usage/v9/modal/custom-dialogs/demo.html b/static/usage/v9/modal/custom-dialogs/demo.html new file mode 100644 index 00000000000..84e140e29c1 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/demo.html @@ -0,0 +1,79 @@ + + + + + + Modal | Custom Dialog + + + + + + + + + + + + App + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + + + + diff --git a/static/usage/v9/modal/custom-dialogs/index.md b/static/usage/v9/modal/custom-dialogs/index.md new file mode 100644 index 00000000000..19904e210fc --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_global_css from './angular/global_css.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/custom-dialogs/javascript/index_html.md b/static/usage/v9/modal/custom-dialogs/javascript/index_html.md new file mode 100644 index 00000000000..b465debd41b --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/javascript/index_html.md @@ -0,0 +1,67 @@ +```html + + + + + App + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + +``` diff --git a/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md b/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md new file mode 100644 index 00000000000..fdb89866373 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "person-circle" key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle }); + */ +addIcons({ personCircle }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/modal/custom-dialogs/react/main_css.md b/static/usage/v9/modal/custom-dialogs/react/main_css.md new file mode 100644 index 00000000000..3edb76f1e97 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/react/main_css.md @@ -0,0 +1,28 @@ +```css +ion-modal#example-modal { + --width: fit-content; + --min-width: 250px; + --height: fit-content; + --border-radius: 6px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} + +ion-modal#example-modal h1 { + margin: 20px 20px 10px 20px; +} + +ion-modal#example-modal ion-icon { + margin-right: 6px; + + width: 48px; + height: 48px; + + padding: 4px 0; + + color: #aaaaaa; +} + +ion-modal#example-modal .wrapper { + margin-bottom: 10px; +} +``` diff --git a/static/usage/v9/modal/custom-dialogs/react/main_tsx.md b/static/usage/v9/modal/custom-dialogs/react/main_tsx.md new file mode 100644 index 00000000000..e6120a8fcc7 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonIcon, +} from '@ionic/react'; +import { personCircle } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open Custom Dialog + + +
+

Dialog header

+ + + + + Item 1 + + + + Item 2 + + + + Item 3 + + +
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/custom-dialogs/vue.md b/static/usage/v9/modal/custom-dialogs/vue.md new file mode 100644 index 00000000000..590b4ac7661 --- /dev/null +++ b/static/usage/v9/modal/custom-dialogs/vue.md @@ -0,0 +1,82 @@ +```html + + + + +``` diff --git a/static/usage/v9/modal/drag-move-event/angular/example_component_html.md b/static/usage/v9/modal/drag-move-event/angular/example_component_html.md new file mode 100644 index 00000000000..6ba672f6040 --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/angular/example_component_html.md @@ -0,0 +1,27 @@ +```html + + + App + + + + Open Sheet Modal + + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + +``` diff --git a/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md b/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md new file mode 100644 index 00000000000..615dcd0c0fd --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/angular/example_component_ts.md @@ -0,0 +1,74 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import type { ModalDragEventDetail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + @ViewChild('header', { read: ElementRef }) + header!: ElementRef; + // Assign the current snap breakpoint to the initial breakpoint so + // that we can track changes during the drag + currentSnap = 0.25; + + onDragMove(event: CustomEvent) { + // `progress` is a value from 1 (top) to 0 (bottom) + // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends + const { progress, snapBreakpoint } = event.detail; + + if (this.currentSnap !== snapBreakpoint) { + this.currentSnap = snapBreakpoint as number; + + console.log('Current snap breakpoint:', snapBreakpoint); + } + + const headerEl = this.header.nativeElement; + /** + * Inverse relationship: + * 1.0 progress = 0 opacity + * 0 progress = 1.0 opacity + */ + const currentOpacity = 1 - progress; + + headerEl.style.opacity = currentOpacity.toString(); + } + + onDragEnd(event: CustomEvent) { + // `progress` is a value from 1 (top) to 0 (bottom) + // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends + const { progress, snapBreakpoint } = event.detail; + const headerEl = this.header.nativeElement; + + /** + * If the modal is snapping to the closed state (0), reset the + * styles. + */ + if (snapBreakpoint === 0) { + headerEl.style.removeProperty('opacity'); + headerEl.style.removeProperty('transition'); + return; + } + + // Smooth transition to the final resting opacity + headerEl.style.transition = 'opacity 0.4s ease'; + // The final opacity matches the inverse of the resting progress + headerEl.style.opacity = (1 - progress).toString(); + } + + /** + * If the user dismisses the modal (e.g. tapping the backdrop), + * reset the styles. + */ + onWillDismiss() { + const headerEl = this.header.nativeElement; + + // Reset styles when the modal is dismissed + headerEl.style.removeProperty('opacity'); + headerEl.style.removeProperty('transition'); + } +} +``` diff --git a/static/usage/v9/modal/drag-move-event/demo.html b/static/usage/v9/modal/drag-move-event/demo.html new file mode 100644 index 00000000000..f3f66678787 --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/demo.html @@ -0,0 +1,93 @@ + + + + + + Modal + + + + + + + + + + + App + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + + + + diff --git a/static/usage/v9/modal/drag-move-event/index.md b/static/usage/v9/modal/drag-move-event/index.md new file mode 100644 index 00000000000..b8327dec798 --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/index.md @@ -0,0 +1,29 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/drag-move-event/javascript.md b/static/usage/v9/modal/drag-move-event/javascript.md new file mode 100644 index 00000000000..64d64b70a1f --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/javascript.md @@ -0,0 +1,77 @@ +```html + + + App + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + +``` diff --git a/static/usage/v9/modal/drag-move-event/react.md b/static/usage/v9/modal/drag-move-event/react.md new file mode 100644 index 00000000000..83d85246e8f --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/react.md @@ -0,0 +1,99 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react'; +import type { ModalDragEventDetail } from '@ionic/react'; + +function Example() { + const header = useRef(null); + // Assign the current snap breakpoint to the initial breakpoint so + // that we can track changes during the drag + const currentSnap = useRef(0.25); + + const onDragMove = (event: CustomEvent) => { + // `progress` is a value from 1 (top) to 0 (bottom) + // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends + const { progress, snapBreakpoint } = event.detail; + const headerEl = header.current!; + + if (currentSnap.current !== snapBreakpoint) { + currentSnap.current = snapBreakpoint as number; + + console.log('Current snap breakpoint:', snapBreakpoint); + } + + /** + * Inverse relationship: + * 1.0 progress = 0 opacity + * 0 progress = 1.0 opacity + */ + const currentOpacity = 1 - progress; + + headerEl.style.opacity = currentOpacity.toString(); + }; + + const onDragEnd = (event: CustomEvent) => { + // `progress` is a value from 1 (top) to 0 (bottom) + // `snapBreakpoint` tells us which snap point the modal will animate to after the drag ends + const { progress, snapBreakpoint } = event.detail; + const headerEl = header.current!; + + /** + * If the modal is snapping to the closed state (0), reset the + * styles. + */ + if (snapBreakpoint === 0) { + headerEl.style.removeProperty('opacity'); + headerEl.style.removeProperty('transition'); + return; + } + + // Smooth transition to the final resting opacity + headerEl.style.transition = 'opacity 0.4s ease'; + // The final opacity matches the inverse of the resting progress + headerEl.style.opacity = (1 - progress).toString(); + }; + + /** + * If the user dismisses the modal (e.g. tapping the backdrop), + * reset the styles. + */ + const onWillDismiss = () => { + const headerEl = header.current!; + + // Reset styles when the modal is dismissed + headerEl.style.removeProperty('opacity'); + headerEl.style.removeProperty('transition'); + }; + + return ( + + + + App + + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/drag-move-event/vue.md b/static/usage/v9/modal/drag-move-event/vue.md new file mode 100644 index 00000000000..c95b3329259 --- /dev/null +++ b/static/usage/v9/modal/drag-move-event/vue.md @@ -0,0 +1,94 @@ +```vue + + + +``` diff --git a/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md b/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md new file mode 100644 index 00000000000..dca7cbd4b07 --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/angular/example_component_html.md @@ -0,0 +1,26 @@ +```html + + + App + + + + Open Sheet Modal + + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + +``` diff --git a/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md b/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md new file mode 100644 index 00000000000..c10714cc1e4 --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component, ElementRef, ViewChild } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import type { ModalDragEventDetail } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + @ViewChild('header', { read: ElementRef }) + header!: ElementRef; + + onDragStart() { + console.log('Drag started'); + + const headerEl = this.header.nativeElement; + + headerEl.style.opacity = '0'; + } + + onDragEnd(event: CustomEvent) { + console.log('Drag ended'); + + const headerEl = this.header.nativeElement; + + headerEl.style.opacity = '1'; + } +} +``` diff --git a/static/usage/v9/modal/drag-start-end-events/demo.html b/static/usage/v9/modal/drag-start-end-events/demo.html new file mode 100644 index 00000000000..da98b7dbe7b --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/demo.html @@ -0,0 +1,52 @@ + + + + + + Modal + + + + + + + + + + + App + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + + + + diff --git a/static/usage/v9/modal/drag-start-end-events/index.md b/static/usage/v9/modal/drag-start-end-events/index.md new file mode 100644 index 00000000000..bc5d9c97e4e --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/index.md @@ -0,0 +1,29 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/drag-start-end-events/javascript.md b/static/usage/v9/modal/drag-start-end-events/javascript.md new file mode 100644 index 00000000000..5e36cff2e8e --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/javascript.md @@ -0,0 +1,37 @@ +```html + + + App + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + +``` diff --git a/static/usage/v9/modal/drag-start-end-events/react.md b/static/usage/v9/modal/drag-start-end-events/react.md new file mode 100644 index 00000000000..00b2a34fcab --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/react.md @@ -0,0 +1,55 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react'; +import type { ModalDragEventDetail } from '@ionic/react'; + +function Example() { + const header = useRef(null); + + const onDragStart = () => { + console.log('Drag started'); + + const headerEl = header.current!; + + headerEl.style.opacity = '0'; + }; + + const onDragEnd = (event: CustomEvent) => { + console.log('Drag ended'); + + const headerEl = header.current!; + + headerEl.style.opacity = '1'; + }; + + return ( + + + + App + + + + + Open Sheet Modal + + + +
+ Drag the handle to adjust the header's visibility. +
+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/drag-start-end-events/vue.md b/static/usage/v9/modal/drag-start-end-events/vue.md new file mode 100644 index 00000000000..a8f8b06acaf --- /dev/null +++ b/static/usage/v9/modal/drag-start-end-events/vue.md @@ -0,0 +1,51 @@ +```vue + + + +``` diff --git a/static/usage/v9/modal/inline/basic/angular/example_component_html.md b/static/usage/v9/modal/inline/basic/angular/example_component_html.md new file mode 100644 index 00000000000..2097cde4503 --- /dev/null +++ b/static/usage/v9/modal/inline/basic/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Inline Modal + + + + Open +

{{ message }}

+ + + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + +``` diff --git a/static/usage/v9/modal/inline/basic/angular/example_component_ts.md b/static/usage/v9/modal/inline/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..37f867fbb00 --- /dev/null +++ b/static/usage/v9/modal/inline/basic/angular/example_component_ts.md @@ -0,0 +1,54 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonInput, + IonItem, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; +import { OverlayEventDetail } from '@ionic/core/components'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + FormsModule, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonInput, + IonItem, + IonModal, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + @ViewChild(IonModal) modal!: IonModal; + + message = 'This modal example uses triggers to automatically open a modal when the button is clicked.'; + name!: string; + + cancel() { + this.modal.dismiss(null, 'cancel'); + } + + confirm() { + this.modal.dismiss(this.name, 'confirm'); + } + + onWillDismiss(event: CustomEvent) { + if (event.detail.role === 'confirm') { + this.message = `Hello, ${event.detail.data}!`; + } + } +} +``` diff --git a/static/usage/v9/modal/inline/basic/demo.html b/static/usage/v9/modal/inline/basic/demo.html new file mode 100644 index 00000000000..41cf89f5bac --- /dev/null +++ b/static/usage/v9/modal/inline/basic/demo.html @@ -0,0 +1,69 @@ + + + + + + Modal | Inline + + + + + + + + + + + Inline Modal + + + + Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

+ + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + + + + + diff --git a/static/usage/v9/modal/inline/basic/index.md b/static/usage/v9/modal/inline/basic/index.md new file mode 100644 index 00000000000..0d5361e1390 --- /dev/null +++ b/static/usage/v9/modal/inline/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/inline/basic/javascript.md b/static/usage/v9/modal/inline/basic/javascript.md new file mode 100644 index 00000000000..754e94ca639 --- /dev/null +++ b/static/usage/v9/modal/inline/basic/javascript.md @@ -0,0 +1,49 @@ +```html + + + Inline Modal + + + + Open +

This modal example uses triggers to automatically open a modal when the button is clicked.

+ + + + + Cancel + + Welcome + + Confirm + + + + + + + + + + + + +``` diff --git a/static/usage/v9/modal/inline/basic/react.md b/static/usage/v9/modal/inline/basic/react.md new file mode 100644 index 00000000000..0ca73d66844 --- /dev/null +++ b/static/usage/v9/modal/inline/basic/react.md @@ -0,0 +1,79 @@ +```tsx +import React, { useState, useRef } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonItem, + IonInput, +} from '@ionic/react'; +import { OverlayEventDetail } from '@ionic/core/components'; + +function Example() { + const modal = useRef(null); + const input = useRef(null); + + const [message, setMessage] = useState( + 'This modal example uses triggers to automatically open a modal when the button is clicked.' + ); + + function confirm() { + modal.current?.dismiss(input.current?.value, 'confirm'); + } + + function onWillDismiss(event: CustomEvent) { + if (event.detail.role === 'confirm') { + setMessage(`Hello, ${event.detail.data}!`); + } + } + + return ( + + + + Inline Modal + + + + + Open + +

{message}

+ onWillDismiss(event)}> + + + + modal.current?.dismiss()}>Cancel + + Welcome + + confirm()}> + Confirm + + + + + + + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/inline/basic/vue.md b/static/usage/v9/modal/inline/basic/vue.md new file mode 100644 index 00000000000..1d4b8891deb --- /dev/null +++ b/static/usage/v9/modal/inline/basic/vue.md @@ -0,0 +1,71 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/inline/is-open/angular/example_component_html.md b/static/usage/v9/modal/inline/is-open/angular/example_component_html.md new file mode 100644 index 00000000000..b3be96215c3 --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + Inline Modal + + + + Open + + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque, + dicta. +

+ + + + +``` diff --git a/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md b/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md new file mode 100644 index 00000000000..e305dc40856 --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent { + isModalOpen = false; + + setOpen(isOpen: boolean) { + this.isModalOpen = isOpen; + } +} +``` diff --git a/static/usage/v9/modal/inline/is-open/demo.html b/static/usage/v9/modal/inline/is-open/demo.html new file mode 100644 index 00000000000..6407b93fa0e --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/demo.html @@ -0,0 +1,46 @@ + + + + + + Modal | Inline + + + + + + + + + + + Inline Modal + + + + Open + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. + Eaque, dicta. +

+ + + + + + + + diff --git a/static/usage/v9/modal/inline/is-open/index.md b/static/usage/v9/modal/inline/is-open/index.md new file mode 100644 index 00000000000..07e7dde43e0 --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/inline/is-open/javascript.md b/static/usage/v9/modal/inline/is-open/javascript.md new file mode 100644 index 00000000000..1893f105d79 --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/javascript.md @@ -0,0 +1,31 @@ +```html + + + Inline Modal + + + + Open + + + + Modal + + Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque, + dicta. +

+ + + + + +``` diff --git a/static/usage/v9/modal/inline/is-open/react.md b/static/usage/v9/modal/inline/is-open/react.md new file mode 100644 index 00000000000..7b337e8f4cc --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/react.md @@ -0,0 +1,42 @@ +```tsx +import React, { useState } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + + Inline Modal + + + + setIsOpen(true)}> + Open + + + + + Modal + + setIsOpen(false)}>Close + + + + +

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos + reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. + Eaque, dicta. +

+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/inline/is-open/vue.md b/static/usage/v9/modal/inline/is-open/vue.md new file mode 100644 index 00000000000..c7109a5b3f8 --- /dev/null +++ b/static/usage/v9/modal/inline/is-open/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/performance/mount/angular/example_component_html.md b/static/usage/v9/modal/performance/mount/angular/example_component_html.md new file mode 100644 index 00000000000..4b8bb7bc9d2 --- /dev/null +++ b/static/usage/v9/modal/performance/mount/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Example + + + + Open Modal + + + + + + Cancel + + Modal + + + This content was mounted as soon as the modal was created. + + + +``` diff --git a/static/usage/v9/modal/performance/mount/angular/example_component_ts.md b/static/usage/v9/modal/performance/mount/angular/example_component_ts.md new file mode 100644 index 00000000000..b5f850ffdde --- /dev/null +++ b/static/usage/v9/modal/performance/mount/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/performance/mount/demo.html b/static/usage/v9/modal/performance/mount/demo.html new file mode 100644 index 00000000000..53a8965dbfd --- /dev/null +++ b/static/usage/v9/modal/performance/mount/demo.html @@ -0,0 +1,47 @@ + + + + + + Modal | Performance + + + + + + + + + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + + + + diff --git a/static/usage/v9/modal/performance/mount/index.md b/static/usage/v9/modal/performance/mount/index.md new file mode 100644 index 00000000000..836ac9e50f4 --- /dev/null +++ b/static/usage/v9/modal/performance/mount/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/performance/mount/javascript.md b/static/usage/v9/modal/performance/mount/javascript.md new file mode 100644 index 00000000000..a7dd685dad4 --- /dev/null +++ b/static/usage/v9/modal/performance/mount/javascript.md @@ -0,0 +1,32 @@ +```html + + + Example + + + + Open Modal + + + + + Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + +``` diff --git a/static/usage/v9/modal/performance/mount/react.md b/static/usage/v9/modal/performance/mount/react.md new file mode 100644 index 00000000000..bb6a9c32360 --- /dev/null +++ b/static/usage/v9/modal/performance/mount/react.md @@ -0,0 +1,36 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButtons, IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + return ( + + + + Example + + + + + Open Modal + + + + + + modal.current?.dismiss()}>Close + + Modal + + + This content was mounted as soon as the modal was created. + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/performance/mount/vue.md b/static/usage/v9/modal/performance/mount/vue.md new file mode 100644 index 00000000000..1bec009881e --- /dev/null +++ b/static/usage/v9/modal/performance/mount/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/sheet/auto-height/angular/example_component_css.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v9/modal/sheet/auto-height/angular/example_component_html.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_html.md new file mode 100644 index 00000000000..3280a3f9e85 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + App + + + + Open Sheet Modal + + + +
Block of Content
+ + + +``` diff --git a/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md b/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md new file mode 100644 index 00000000000..deb6dd854d8 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/sheet/auto-height/demo.html b/static/usage/v9/modal/sheet/auto-height/demo.html new file mode 100644 index 00000000000..3b48d58123d --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/demo.html @@ -0,0 +1,49 @@ + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + + + + diff --git a/static/usage/v9/modal/sheet/auto-height/index.md b/static/usage/v9/modal/sheet/auto-height/index.md new file mode 100644 index 00000000000..5c651b9486e --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/sheet/auto-height/javascript.md b/static/usage/v9/modal/sheet/auto-height/javascript.md new file mode 100644 index 00000000000..fc82a43da02 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/javascript.md @@ -0,0 +1,35 @@ +```html + + + + + App + + + + Open Sheet Modal + + +
Block of Content
+ + + + +``` diff --git a/static/usage/v9/modal/sheet/auto-height/react/main_css.md b/static/usage/v9/modal/sheet/auto-height/react/main_css.md new file mode 100644 index 00000000000..88d0e5c0594 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/react/main_css.md @@ -0,0 +1,13 @@ +```css +.block { + width: 100%; + height: 300px; + display: flex; + align-items: center; + justify-content: center; +} + +ion-modal { + --height: auto; +} +``` diff --git a/static/usage/v9/modal/sheet/auto-height/react/main_tsx.md b/static/usage/v9/modal/sheet/auto-height/react/main_tsx.md new file mode 100644 index 00000000000..532f3e095c7 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/react/main_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React, { useRef } from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage } from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + +
Block of Content
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/sheet/auto-height/vue.md b/static/usage/v9/modal/sheet/auto-height/vue.md new file mode 100644 index 00000000000..a34d713c512 --- /dev/null +++ b/static/usage/v9/modal/sheet/auto-height/vue.md @@ -0,0 +1,34 @@ +```html + + + + + +``` diff --git a/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md b/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md new file mode 100644 index 00000000000..8730cae2d21 --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +.counter__section { + display: flex; + align-items: center; + justify-content: space-between; +} +``` diff --git a/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md b/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md new file mode 100644 index 00000000000..d3b92ec0e13 --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/angular/example_component_html.md @@ -0,0 +1,72 @@ +```html +
+ + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

{{count }}

+ + +
+ + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + +
+``` diff --git a/static/usage/v9/modal/sheet/background-content/angular/example_component_ts.md b/static/usage/v9/modal/sheet/background-content/angular/example_component_ts.md new file mode 100644 index 00000000000..82c87cc617a --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/angular/example_component_ts.md @@ -0,0 +1,46 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonSearchbar, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + count = 0; + + increment() { + this.count++; + } + + decrement() { + this.count--; + } +} +``` diff --git a/static/usage/v9/modal/sheet/background-content/demo.html b/static/usage/v9/modal/sheet/background-content/demo.html new file mode 100644 index 00000000000..298fdf37955 --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/demo.html @@ -0,0 +1,103 @@ + + + + + + Modal | Sheet + + + + + + + + + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

0

+ + +
+ + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v9/modal/sheet/background-content/index.md b/static/usage/v9/modal/sheet/background-content/index.md new file mode 100644 index 00000000000..df34831f99b --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/index.md @@ -0,0 +1,28 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/modal/sheet/background-content/javascript.md b/static/usage/v9/modal/sheet/background-content/javascript.md new file mode 100644 index 00000000000..f2807192e60 --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/javascript.md @@ -0,0 +1,89 @@ +```html + + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+ +
+ - +

0

+ + +
+ + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v9/modal/sheet/background-content/react.md b/static/usage/v9/modal/sheet/background-content/react.md new file mode 100644 index 00000000000..85fb9bbd83c --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/react.md @@ -0,0 +1,99 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonSearchbar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + const [count, setCount] = useState(0); + + return ( + + + + App + + + +

You can interact with the +/- buttons until the sheet is fully expanded.

+
+ setCount(count - 1)}>- +

{count}

+ setCount(count + 1)}>+ +
+ + + modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"> + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/sheet/background-content/vue.md b/static/usage/v9/modal/sheet/background-content/vue.md new file mode 100644 index 00000000000..89ddab7ad40 --- /dev/null +++ b/static/usage/v9/modal/sheet/background-content/vue.md @@ -0,0 +1,97 @@ +```html + + + + + +``` diff --git a/static/usage/v9/modal/sheet/basic/angular/example_component_html.md b/static/usage/v9/modal/sheet/basic/angular/example_component_html.md new file mode 100644 index 00000000000..5a8fff67ab1 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/angular/example_component_html.md @@ -0,0 +1,56 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md b/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..3eef3b942d4 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonSearchbar, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/sheet/basic/demo.html b/static/usage/v9/modal/sheet/basic/demo.html new file mode 100644 index 00000000000..4999820d9ee --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/demo.html @@ -0,0 +1,80 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v9/modal/sheet/basic/index.md b/static/usage/v9/modal/sheet/basic/index.md new file mode 100644 index 00000000000..fe9f6a1a963 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/sheet/basic/javascript.md b/static/usage/v9/modal/sheet/basic/javascript.md new file mode 100644 index 00000000000..9e6a7665689 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/javascript.md @@ -0,0 +1,65 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v9/modal/sheet/basic/react.md b/static/usage/v9/modal/sheet/basic/react.md new file mode 100644 index 00000000000..781cb467e49 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/react.md @@ -0,0 +1,81 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, + IonSearchbar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + return ( + + + + App + + + + + Open Sheet Modal + + + + modal.current?.setCurrentBreakpoint(0.75)} placeholder="Search"> + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/sheet/basic/vue.md b/static/usage/v9/modal/sheet/basic/vue.md new file mode 100644 index 00000000000..31878f427e1 --- /dev/null +++ b/static/usage/v9/modal/sheet/basic/vue.md @@ -0,0 +1,72 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md new file mode 100644 index 00000000000..166b499f1c7 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_html.md @@ -0,0 +1,141 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Jack Smith + + +

Jack Smith

+

Product Designer

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Claire Smith + + +

Claire Smith

+

Graphic Designer

+ + + + + Portrait of Kim Smith + + +

Kim Smith

+

Software Engineer

+ + + + + Portrait of Alex Smith + + +

Alex Smith

+

Software Engineer

+ + + + + Portrait of Eric Smith + + +

Eric Smith

+

Product Manager

+ + + + + Portrait of Grace Smith + + +

Grace Smith

+

Product Manager

+ + + + + Portrait of Henry Smith + + +

Henry Smith

+

Product Owner

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + Portrait of Oliver Smith + + +

Oliver Smith

+

COO

+ + + + + Portrait of Emma Smith + + +

Emma Smith

+

CTO

+ + + + + + + +``` diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md new file mode 100644 index 00000000000..a75d69f6f8d --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonAvatar, IonButton, IonContent, IonHeader, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/demo.html b/static/usage/v9/modal/sheet/expand-to-scroll/demo.html new file mode 100644 index 00000000000..b8ba7f12aa8 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/demo.html @@ -0,0 +1,155 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Jack Smith + + +

Jack Smith

+

Product Designer

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Claire Smith + + +

Claire Smith

+

Graphic Designer

+ + + + + Portrait of Kim Smith + + +

Kim Smith

+

Software Engineer

+ + + + + Portrait of Alex Smith + + +

Alex Smith

+

Software Engineer

+ + + + + Portrait of Eric Smith + + +

Eric Smith

+

Product Manager

+ + + + + Portrait of Grace Smith + + +

Grace Smith

+

Product Manager

+ + + + + Portrait of Henry Smith + + +

Henry Smith

+

Product Owner

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + Portrait of Oliver Smith + + +

Oliver Smith

+

COO

+ + + + + Portrait of Emma Smith + + +

Emma Smith

+

CTO

+ + + + + + + + + + + diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/index.md b/static/usage/v9/modal/sheet/expand-to-scroll/index.md new file mode 100644 index 00000000000..3c78e4ecad1 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/javascript.md b/static/usage/v9/modal/sheet/expand-to-scroll/javascript.md new file mode 100644 index 00000000000..15ff9988412 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/javascript.md @@ -0,0 +1,140 @@ +```html + + + App + + + + Open Sheet Modal + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Jack Smith + + +

Jack Smith

+

Product Designer

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Claire Smith + + +

Claire Smith

+

Graphic Designer

+ + + + + Portrait of Kim Smith + + +

Kim Smith

+

Software Engineer

+ + + + + Portrait of Alex Smith + + +

Alex Smith

+

Software Engineer

+ + + + + Portrait of Eric Smith + + +

Eric Smith

+

Product Manager

+ + + + + Portrait of Grace Smith + + +

Grace Smith

+

Product Manager

+ + + + + Portrait of Henry Smith + + +

Henry Smith

+

Product Owner

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + Portrait of Oliver Smith + + +

Oliver Smith

+

COO

+ + + + + Portrait of Emma Smith + + +

Emma Smith

+

CTO

+ + + + + + + + +``` diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/react.md b/static/usage/v9/modal/sheet/expand-to-scroll/react.md new file mode 100644 index 00000000000..4b8bced61c9 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/react.md @@ -0,0 +1,163 @@ +```tsx +import React from 'react'; +import { + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, +} from '@ionic/react'; + +function Example() { + return ( + + + + App + + + + + Open Sheet Modal + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Jack Smith + + +

Jack Smith

+

Product Designer

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Claire Smith + + +

Claire Smith

+

Graphic Designer

+ + + + + Portrait of Kim Smith + + +

Kim Smith

+

Software Engineer

+ + + + + Portrait of Alex Smith + + +

Alex Smith

+

Software Engineer

+ + + + + Portrait of Eric Smith + + +

Eric Smith

+

Product Manager

+ + + + + Portrait of Grace Smith + + +

Grace Smith

+

Product Manager

+ + + + + Portrait of Henry Smith + + +

Henry Smith

+

Product Owner

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + Portrait of Oliver Smith + + +

Oliver Smith

+

COO

+ + + + + Portrait of Emma Smith + + +

Emma Smith

+

CTO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/sheet/expand-to-scroll/vue.md b/static/usage/v9/modal/sheet/expand-to-scroll/vue.md new file mode 100644 index 00000000000..2dcaa7aa6d8 --- /dev/null +++ b/static/usage/v9/modal/sheet/expand-to-scroll/vue.md @@ -0,0 +1,156 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md new file mode 100644 index 00000000000..d6f30b1ca8f --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + App + + + + Open Sheet Modal + + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + +``` diff --git a/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md new file mode 100644 index 00000000000..23510a4d6fb --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonLabel, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/sheet/handle-behavior/demo.html b/static/usage/v9/modal/sheet/handle-behavior/demo.html new file mode 100644 index 00000000000..351f54bebf1 --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/demo.html @@ -0,0 +1,39 @@ + + + + + + Modal | Sheet + + + + + + + + + + + App + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + + + + diff --git a/static/usage/v9/modal/sheet/handle-behavior/index.md b/static/usage/v9/modal/sheet/handle-behavior/index.md new file mode 100644 index 00000000000..af57ba0560f --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/sheet/handle-behavior/javascript.md b/static/usage/v9/modal/sheet/handle-behavior/javascript.md new file mode 100644 index 00000000000..8215dd69636 --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/javascript.md @@ -0,0 +1,24 @@ +```html + + + App + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + +``` diff --git a/static/usage/v9/modal/sheet/handle-behavior/react.md b/static/usage/v9/modal/sheet/handle-behavior/react.md new file mode 100644 index 00000000000..bb415ae6bb2 --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonModal, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonLabel } from '@ionic/react'; + +function Example() { + return ( + + + + App + + + + + Open Sheet Modal + + + +
+ Click the handle above to advance to the next breakpoint. +
+ + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/sheet/handle-behavior/vue.md b/static/usage/v9/modal/sheet/handle-behavior/vue.md new file mode 100644 index 00000000000..d129fe176cd --- /dev/null +++ b/static/usage/v9/modal/sheet/handle-behavior/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/styling/animations/angular/example_component_html.md b/static/usage/v9/modal/styling/animations/angular/example_component_html.md new file mode 100644 index 00000000000..7e3784676a7 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/angular/example_component_html.md @@ -0,0 +1,63 @@ +```html + + + App + + + + Open Modal + + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v9/modal/styling/animations/angular/example_component_ts.md b/static/usage/v9/modal/styling/animations/angular/example_component_ts.md new file mode 100644 index 00000000000..b5f7d92d0e1 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/angular/example_component_ts.md @@ -0,0 +1,67 @@ +```ts +import { Component } from '@angular/core'; +import { + AnimationController, + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor(private animationCtrl: AnimationController) {} + + enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = this.animationCtrl + .create() + .addElement(root!.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = this.animationCtrl + .create() + .addElement(root!.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return this.animationCtrl + .create() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + leaveAnimation = (baseEl: HTMLElement) => { + return this.enterAnimation(baseEl).direction('reverse'); + }; +} +``` diff --git a/static/usage/v9/modal/styling/animations/demo.html b/static/usage/v9/modal/styling/animations/demo.html new file mode 100644 index 00000000000..f3d9ad18c0f --- /dev/null +++ b/static/usage/v9/modal/styling/animations/demo.html @@ -0,0 +1,114 @@ + + + + + + Modal | Animations + + + + + + + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v9/modal/styling/animations/index.md b/static/usage/v9/modal/styling/animations/index.md new file mode 100644 index 00000000000..a772737fdc5 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import vue from './vue.md'; +import react from './react.md'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/styling/animations/javascript/index_html.md b/static/usage/v9/modal/styling/animations/javascript/index_html.md new file mode 100644 index 00000000000..c7be0027ddf --- /dev/null +++ b/static/usage/v9/modal/styling/animations/javascript/index_html.md @@ -0,0 +1,95 @@ +```html + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + +``` diff --git a/static/usage/v9/modal/styling/animations/javascript/index_ts.md b/static/usage/v9/modal/styling/animations/javascript/index_ts.md new file mode 100644 index 00000000000..550bb177c77 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/javascript/index_ts.md @@ -0,0 +1,39 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { createAnimation } from '@ionic/core'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +defineCustomElements(); + +(window as any).createAnimation = createAnimation; +``` diff --git a/static/usage/v9/modal/styling/animations/react.md b/static/usage/v9/modal/styling/animations/react.md new file mode 100644 index 00000000000..c0d872e30c3 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/react.md @@ -0,0 +1,122 @@ +```tsx +import React, { useRef } from 'react'; +import { + createAnimation, + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, +} from '@ionic/react'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + const enterAnimation = (baseEl: HTMLElement) => { + const root = baseEl.shadowRoot; + + const backdropAnimation = createAnimation() + .addElement(root?.querySelector('ion-backdrop')!) + .fromTo('opacity', '0.01', 'var(--backdrop-opacity)'); + + const wrapperAnimation = createAnimation() + .addElement(root?.querySelector('.modal-wrapper')!) + .keyframes([ + { offset: 0, opacity: '0', transform: 'scale(0)' }, + { offset: 1, opacity: '0.99', transform: 'scale(1)' }, + ]); + + return createAnimation() + .addElement(baseEl) + .easing('ease-out') + .duration(500) + .addAnimation([backdropAnimation, wrapperAnimation]); + }; + + const leaveAnimation = (baseEl: HTMLElement) => { + return enterAnimation(baseEl).direction('reverse'); + }; + + return ( + + + + App + + + + + Open Modal + + + + + Modal + + dismiss()}>Close + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/styling/animations/vue.md b/static/usage/v9/modal/styling/animations/vue.md new file mode 100644 index 00000000000..3928fe74219 --- /dev/null +++ b/static/usage/v9/modal/styling/animations/vue.md @@ -0,0 +1,108 @@ +```html + + + +``` diff --git a/static/usage/v9/modal/styling/theming/angular/example_component_html.md b/static/usage/v9/modal/styling/theming/angular/example_component_html.md new file mode 100644 index 00000000000..ba0d12d2e5a --- /dev/null +++ b/static/usage/v9/modal/styling/theming/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + App + + + + Open Modal + + + + + + Modal + + Close + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + +``` diff --git a/static/usage/v9/modal/styling/theming/angular/example_component_ts.md b/static/usage/v9/modal/styling/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..d54a03379a0 --- /dev/null +++ b/static/usage/v9/modal/styling/theming/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonAvatar, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/styling/theming/angular/global_css.md b/static/usage/v9/modal/styling/theming/angular/global_css.md new file mode 100644 index 00000000000..00b7c80f86d --- /dev/null +++ b/static/usage/v9/modal/styling/theming/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-modal { + --height: 50%; + --border-radius: 16px; + --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +ion-modal::part(backdrop) { + background: rgba(209, 213, 219); + opacity: 1; +} + +ion-modal ion-toolbar { + --background: rgb(14 116 144); + --color: white; +} +``` diff --git a/static/usage/v9/modal/styling/theming/demo.html b/static/usage/v9/modal/styling/theming/demo.html new file mode 100644 index 00000000000..2177a2b783a --- /dev/null +++ b/static/usage/v9/modal/styling/theming/demo.html @@ -0,0 +1,99 @@ + + + + + + Modal | Theming + + + + + + + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + + + + diff --git a/static/usage/v9/modal/styling/theming/index.md b/static/usage/v9/modal/styling/theming/index.md new file mode 100644 index 00000000000..a92a9f8e7e3 --- /dev/null +++ b/static/usage/v9/modal/styling/theming/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/modal/styling/theming/javascript.md b/static/usage/v9/modal/styling/theming/javascript.md new file mode 100644 index 00000000000..4bfe3155d0b --- /dev/null +++ b/static/usage/v9/modal/styling/theming/javascript.md @@ -0,0 +1,87 @@ +```html + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + + +``` diff --git a/static/usage/v9/modal/styling/theming/react/main_css.md b/static/usage/v9/modal/styling/theming/react/main_css.md new file mode 100644 index 00000000000..c1d585b8f72 --- /dev/null +++ b/static/usage/v9/modal/styling/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-modal#example-modal { + --height: 50%; + --border-radius: 16px; + --box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); +} + +ion-modal#example-modal::part(backdrop) { + background: rgba(209, 213, 219); + opacity: 1; +} + +ion-modal#example-modal ion-toolbar { + --background: rgb(14 116 144); + --color: white; +} +``` diff --git a/static/usage/v9/modal/styling/theming/react/main_tsx.md b/static/usage/v9/modal/styling/theming/react/main_tsx.md new file mode 100644 index 00000000000..b1d894b2a22 --- /dev/null +++ b/static/usage/v9/modal/styling/theming/react/main_tsx.md @@ -0,0 +1,94 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButtons, + IonButton, + IonModal, + IonHeader, + IonContent, + IonToolbar, + IonTitle, + IonPage, + IonList, + IonItem, + IonLabel, + IonAvatar, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open Modal + + + + + Modal + + dismiss()}> + Close + + + + + + + Portrait of Connor Smith + + +

Connor Smith

+

Sales Rep

+ + + + + Portrait of Daniel Smith + + +

Daniel Smith

+

Product Designer

+ + + + + Portrait of Greg Smith + + +

Greg Smith

+

Director of Operations

+ + + + + Portrait of Zoey Smith + + +

Zoey Smith

+

CEO

+ + + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/styling/theming/vue.md b/static/usage/v9/modal/styling/theming/vue.md new file mode 100644 index 00000000000..b571114f1b8 --- /dev/null +++ b/static/usage/v9/modal/styling/theming/vue.md @@ -0,0 +1,100 @@ +```html + + + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/angular/example_component_html.md b/static/usage/v9/nav/modal-navigation/angular/example_component_html.md new file mode 100644 index 00000000000..06d46334df5 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + Modal Navigation + + + + Open Modal + + + + + Modal + + Close + + + + + + + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md new file mode 100644 index 00000000000..583995bceac --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar } from '@ionic/angular'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonModal, IonNav, IonTitle, IonToolbar], +}) +export class ExampleComponent { + @ViewChild('nav') private nav!: IonNav; + + onWillPresent() { + this.nav.setRoot(PageOneComponent); + } +} +``` diff --git a/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md new file mode 100644 index 00000000000..549a9c19592 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/angular/page_one_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonNav } from '@ionic/angular'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + +

Page One

+ Go to Page Two + + `, + imports: [IonButton, IonContent], +}) +export class PageOneComponent { + constructor(private nav: IonNav) {} + + navigateToPageTwo() { + this.nav.push(PageTwoComponent); + } +} +``` diff --git a/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md new file mode 100644 index 00000000000..d141baa2c58 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/angular/page_three_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonNav } from '@ionic/angular'; + +@Component({ + selector: 'app-page-one', + template: ` + +

Page Three

+ Go Back + Go to Root + + `, + imports: [IonButton, IonContent], +}) +export class PageThreeComponent { + constructor(private nav: IonNav) {} + + navigateBack() { + this.nav.pop(); + } + + navigateToRoot() { + this.nav.popToRoot(); + } +} +``` diff --git a/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md b/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md new file mode 100644 index 00000000000..843f96c3160 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/angular/page_two_component_ts.md @@ -0,0 +1,26 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonNav } from '@ionic/angular'; + +import { PageThreeComponent } from './page-three.component'; + +@Component({ + selector: 'app-page-two', + template: ` + +

Page Two

+ Go to Page Three + + `, + imports: [IonButton, IonContent], +}) +export class PageTwoComponent { + component = PageThreeComponent; + + constructor(private nav: IonNav) {} + + navigateToPageThree() { + this.nav.push(PageThreeComponent); + } +} +``` diff --git a/static/usage/v9/nav/modal-navigation/demo.html b/static/usage/v9/nav/modal-navigation/demo.html new file mode 100644 index 00000000000..d85c343110c --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/demo.html @@ -0,0 +1,100 @@ + + + + + + + Nav | Modal Navigation + + + + + + + + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + + + diff --git a/static/usage/v9/nav/modal-navigation/index.md b/static/usage/v9/nav/modal-navigation/index.md new file mode 100644 index 00000000000..f273628af86 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/index.md @@ -0,0 +1,54 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; +import angular_page_three_component_ts from './angular/page_three_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; +import react_page_three_tsx from './react/page_three_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; +import vue_page_three from './vue/page_three_vue.md'; + + diff --git a/static/usage/v9/nav/modal-navigation/javascript.md b/static/usage/v9/nav/modal-navigation/javascript.md new file mode 100644 index 00000000000..5fd4e9ef13a --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/javascript.md @@ -0,0 +1,86 @@ +```html + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/react/main_tsx.md b/static/usage/v9/nav/modal-navigation/react/main_tsx.md new file mode 100644 index 00000000000..fc6901b3d6d --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/react/main_tsx.md @@ -0,0 +1,60 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonNav, + IonPage, + IonHeader, + IonToolbar, + IonTitle, + IonButton, + IonButtons, + IonContent, + IonModal, +} from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + const nav = useRef(null); + const modal = useRef(null); + + const didPresent = () => { + if (nav.current) { + nav.current.setRoot(PageOne, { nav: nav.current }); + } + }; + + const dismiss = () => { + if (modal.current) { + modal.current.dismiss(); + } + }; + + return ( + + + + Modal Navigation + + + + Open Modal + + + + Modal + + Close + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md new file mode 100644 index 00000000000..ce5c266e21b --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/react/page_one_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne({ nav }: { nav: HTMLIonNavElement }) { + const navigateToPageTwo = () => nav.push(PageTwo, { nav }); + return ( + +

Page One

+ Go to Page Two + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md new file mode 100644 index 00000000000..3613967edfd --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/react/page_three_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +function PageThree({ nav }: { nav: HTMLIonNavElement }) { + const navigateBack = () => nav.pop(); + const navigateToRoot = () => nav.popToRoot(); + + return ( + +

Page Three

+ Go Back + Go to Root + + ); +} + +export default PageThree; +``` diff --git a/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md b/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md new file mode 100644 index 00000000000..48562bd23cd --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/react/page_two_tsx.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent } from '@ionic/react'; + +import PageThree from './page-three'; + +function PageTwo({ nav }: { nav: HTMLIonNavElement }) { + const navigateToPageThree = () => nav.push(PageThree, { nav }); + + return ( + +

Page Two

+ Go to Page Three + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v9/nav/modal-navigation/vue/example_vue.md b/static/usage/v9/nav/modal-navigation/vue/example_vue.md new file mode 100644 index 00000000000..d0be7ab7647 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/vue/example_vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md new file mode 100644 index 00000000000..b2ed82f816e --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/vue/page_one_vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md new file mode 100644 index 00000000000..db50e12c87e --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/vue/page_three_vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md b/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md new file mode 100644 index 00000000000..b70b3bbe440 --- /dev/null +++ b/static/usage/v9/nav/modal-navigation/vue/page_two_vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/nav-link/angular/example_component_html.md b/static/usage/v9/nav/nav-link/angular/example_component_html.md new file mode 100644 index 00000000000..1534ea3a6ec --- /dev/null +++ b/static/usage/v9/nav/nav-link/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/nav/nav-link/angular/example_component_ts.md b/static/usage/v9/nav/nav-link/angular/example_component_ts.md new file mode 100644 index 00000000000..45ac532266a --- /dev/null +++ b/static/usage/v9/nav/nav-link/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonNav } from '@ionic/angular'; + +import { PageOneComponent } from './page-one.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNav], +}) +export class ExampleComponent { + component = PageOneComponent; +} +``` diff --git a/static/usage/v9/nav/nav-link/angular/page_one_component_ts.md b/static/usage/v9/nav/nav-link/angular/page_one_component_ts.md new file mode 100644 index 00000000000..827d8432f80 --- /dev/null +++ b/static/usage/v9/nav/nav-link/angular/page_one_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar } from '@ionic/angular'; + +import { PageTwoComponent } from './page-two.component'; + +@Component({ + selector: 'app-page-one', + template: ` + + + Page One + + + +

Page One

+ + Go to Page Two + + + `, + imports: [IonButton, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], +}) +export class PageOneComponent { + component = PageTwoComponent; +} +``` diff --git a/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md b/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md new file mode 100644 index 00000000000..839ba7d21e5 --- /dev/null +++ b/static/usage/v9/nav/nav-link/angular/page_three_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-page-one', + template: ` + + + + + + Page Three + + + +

Page Three

+ + `, + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class PageThreeComponent {} +``` diff --git a/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md b/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md new file mode 100644 index 00000000000..7a5dcb2ae6a --- /dev/null +++ b/static/usage/v9/nav/nav-link/angular/page_two_component_ts.md @@ -0,0 +1,41 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonNavLink, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { PageThreeComponent } from './page-three.component'; + +@Component({ + selector: 'app-page-two', + template: ` + + + + + + Page Two + + + +

Page Two

+
+ + Go to Page Three + +
+ + `, + imports: [IonBackButton, IonButton, IonButtons, IonContent, IonHeader, IonNavLink, IonTitle, IonToolbar], +}) +export class PageTwoComponent { + component = PageThreeComponent; +} +``` diff --git a/static/usage/v9/nav/nav-link/demo.html b/static/usage/v9/nav/nav-link/demo.html new file mode 100644 index 00000000000..426e1ba9832 --- /dev/null +++ b/static/usage/v9/nav/nav-link/demo.html @@ -0,0 +1,81 @@ + + + + + + + Nav | NavLink + + + + + + + + + + + + + + diff --git a/static/usage/v9/nav/nav-link/index.md b/static/usage/v9/nav/nav-link/index.md new file mode 100644 index 00000000000..84422cc2ed4 --- /dev/null +++ b/static/usage/v9/nav/nav-link/index.md @@ -0,0 +1,53 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_page_one_component_ts from './angular/page_one_component_ts.md'; +import angular_page_two_component_ts from './angular/page_two_component_ts.md'; +import angular_page_three_component_ts from './angular/page_three_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_page_one_tsx from './react/page_one_tsx.md'; +import react_page_two_tsx from './react/page_two_tsx.md'; +import react_page_three_tsx from './react/page_three_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_page_one from './vue/page_one_vue.md'; +import vue_page_two from './vue/page_two_vue.md'; +import vue_page_three from './vue/page_three_vue.md'; + + diff --git a/static/usage/v9/nav/nav-link/javascript.md b/static/usage/v9/nav/nav-link/javascript.md new file mode 100644 index 00000000000..faf19dc3ca7 --- /dev/null +++ b/static/usage/v9/nav/nav-link/javascript.md @@ -0,0 +1,67 @@ +```html + + + + + +``` diff --git a/static/usage/v9/nav/nav-link/react/main_tsx.md b/static/usage/v9/nav/nav-link/react/main_tsx.md new file mode 100644 index 00000000000..f6196a362e9 --- /dev/null +++ b/static/usage/v9/nav/nav-link/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonNav } from '@ionic/react'; + +import PageOne from './page-one'; + +function Example() { + return }>; +} +export default Example; +``` diff --git a/static/usage/v9/nav/nav-link/react/page_one_tsx.md b/static/usage/v9/nav/nav-link/react/page_one_tsx.md new file mode 100644 index 00000000000..303ad18547a --- /dev/null +++ b/static/usage/v9/nav/nav-link/react/page_one_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonNavLink, IonToolbar, IonTitle } from '@ionic/react'; + +import PageTwo from './page-two'; + +function PageOne() { + return ( + <> + + + Page One + + + +

Page One

+ }> + Go to Page Two + + + + ); +} + +export default PageOne; +``` diff --git a/static/usage/v9/nav/nav-link/react/page_three_tsx.md b/static/usage/v9/nav/nav-link/react/page_three_tsx.md new file mode 100644 index 00000000000..451d30db85d --- /dev/null +++ b/static/usage/v9/nav/nav-link/react/page_three_tsx.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonHeader, IonContent, IonToolbar, IonTitle } from '@ionic/react'; + +function PageThree() { + return ( + <> + + + + + + Page Three + + + +

Page Three

+ + + ); +} + +export default PageThree; +``` diff --git a/static/usage/v9/nav/nav-link/react/page_two_tsx.md b/static/usage/v9/nav/nav-link/react/page_two_tsx.md new file mode 100644 index 00000000000..fd3f8764873 --- /dev/null +++ b/static/usage/v9/nav/nav-link/react/page_two_tsx.md @@ -0,0 +1,38 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButtons, + IonButton, + IonHeader, + IonContent, + IonNavLink, + IonToolbar, + IonTitle, +} from '@ionic/react'; + +import PageThree from './page-three'; + +function PageTwo() { + return ( + <> + + + + + + Page Two + + + +

Page Two

+ }> + Go to Page Three + + + + ); +} + +export default PageTwo; +``` diff --git a/static/usage/v9/nav/nav-link/vue/example_vue.md b/static/usage/v9/nav/nav-link/vue/example_vue.md new file mode 100644 index 00000000000..0cff5d69a9b --- /dev/null +++ b/static/usage/v9/nav/nav-link/vue/example_vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/nav-link/vue/page_one_vue.md b/static/usage/v9/nav/nav-link/vue/page_one_vue.md new file mode 100644 index 00000000000..0226b65a597 --- /dev/null +++ b/static/usage/v9/nav/nav-link/vue/page_one_vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/nav-link/vue/page_three_vue.md b/static/usage/v9/nav/nav-link/vue/page_three_vue.md new file mode 100644 index 00000000000..215be80da5e --- /dev/null +++ b/static/usage/v9/nav/nav-link/vue/page_three_vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/nav/nav-link/vue/page_two_vue.md b/static/usage/v9/nav/nav-link/vue/page_two_vue.md new file mode 100644 index 00000000000..49170458c16 --- /dev/null +++ b/static/usage/v9/nav/nav-link/vue/page_two_vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v9/navigation/angular/app_component_html.md b/static/usage/v9/navigation/angular/app_component_html.md new file mode 100644 index 00000000000..3b819dc640d --- /dev/null +++ b/static/usage/v9/navigation/angular/app_component_html.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v9/navigation/angular/app_component_ts.md b/static/usage/v9/navigation/angular/app_component_ts.md new file mode 100644 index 00000000000..a6d389e72ed --- /dev/null +++ b/static/usage/v9/navigation/angular/app_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent {} +``` diff --git a/static/usage/v9/navigation/angular/app_routes_ts.md b/static/usage/v9/navigation/angular/app_routes_ts.md new file mode 100644 index 00000000000..79e8250c89d --- /dev/null +++ b/static/usage/v9/navigation/angular/app_routes_ts.md @@ -0,0 +1,35 @@ +```ts +import { Routes } from '@angular/router'; +import { ExampleComponent } from './example.component'; + +export const routes: Routes = [ + { + path: 'example', + component: ExampleComponent, + children: [ + { + path: 'dashboard', + loadComponent: () => import('./dashboard/dashboard-page.component').then((m) => m.DashboardPageComponent), + }, + { + path: 'dashboard/:id', + loadComponent: () => import('./item-detail/item-detail-page.component').then((m) => m.ItemDetailPageComponent), + }, + { + path: 'settings', + loadComponent: () => import('./settings/settings-page.component').then((m) => m.SettingsPageComponent), + }, + { + path: '', + redirectTo: '/example/dashboard', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/example/dashboard', + pathMatch: 'full', + }, +]; +``` diff --git a/static/usage/v9/navigation/angular/dashboard_page_component_html.md b/static/usage/v9/navigation/angular/dashboard_page_component_html.md new file mode 100644 index 00000000000..e20f2b19520 --- /dev/null +++ b/static/usage/v9/navigation/angular/dashboard_page_component_html.md @@ -0,0 +1,16 @@ +```html + + + Dashboard + + + + + @for (item of items; track item.id) { + + {{ item.name }} + + } + + +``` diff --git a/static/usage/v9/navigation/angular/dashboard_page_component_ts.md b/static/usage/v9/navigation/angular/dashboard_page_component_ts.md new file mode 100644 index 00000000000..9b48dc7012a --- /dev/null +++ b/static/usage/v9/navigation/angular/dashboard_page_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonRouterLink } from '@ionic/angular'; + +@Component({ + selector: 'app-dashboard-page', + templateUrl: 'dashboard-page.component.html', + imports: [IonContent, IonHeader, IonItem, IonLabel, IonList, IonTitle, IonToolbar, IonRouterLink, RouterLink], +}) +export class DashboardPageComponent { + items = [ + { id: '1', name: 'Item One' }, + { id: '2', name: 'Item Two' }, + { id: '3', name: 'Item Three' }, + ]; +} +``` diff --git a/static/usage/v9/navigation/angular/example_component_html.md b/static/usage/v9/navigation/angular/example_component_html.md new file mode 100644 index 00000000000..dd7a83446e9 --- /dev/null +++ b/static/usage/v9/navigation/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + + + + Dashboard + + + + Settings + + + +``` diff --git a/static/usage/v9/navigation/angular/example_component_ts.md b/static/usage/v9/navigation/angular/example_component_ts.md new file mode 100644 index 00000000000..103c9c24b25 --- /dev/null +++ b/static/usage/v9/navigation/angular/example_component_ts.md @@ -0,0 +1,17 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { gridOutline, settingsOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonIcon, IonLabel, IonTabBar, IonTabButton, IonTabs], +}) +export class ExampleComponent { + constructor() { + addIcons({ gridOutline, settingsOutline }); + } +} +``` diff --git a/static/usage/v9/navigation/angular/item_detail_page_component_html.md b/static/usage/v9/navigation/angular/item_detail_page_component_html.md new file mode 100644 index 00000000000..581d088a361 --- /dev/null +++ b/static/usage/v9/navigation/angular/item_detail_page_component_html.md @@ -0,0 +1,11 @@ +```html + + + + + + Item {{ id }} + + +You navigated to item {{ id }}. +``` diff --git a/static/usage/v9/navigation/angular/item_detail_page_component_ts.md b/static/usage/v9/navigation/angular/item_detail_page_component_ts.md new file mode 100644 index 00000000000..569c8bf2705 --- /dev/null +++ b/static/usage/v9/navigation/angular/item_detail_page_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-item-detail-page', + templateUrl: 'item-detail-page.component.html', + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class ItemDetailPageComponent implements OnInit { + id = ''; + + constructor(private route: ActivatedRoute) {} + + ngOnInit() { + this.id = this.route.snapshot.paramMap.get('id') ?? ''; + } +} +``` diff --git a/static/usage/v9/navigation/angular/settings_page_component_html.md b/static/usage/v9/navigation/angular/settings_page_component_html.md new file mode 100644 index 00000000000..bad2d5268d4 --- /dev/null +++ b/static/usage/v9/navigation/angular/settings_page_component_html.md @@ -0,0 +1,8 @@ +```html + + + Settings + + +Settings content +``` diff --git a/static/usage/v9/navigation/angular/settings_page_component_ts.md b/static/usage/v9/navigation/angular/settings_page_component_ts.md new file mode 100644 index 00000000000..12df19492cd --- /dev/null +++ b/static/usage/v9/navigation/angular/settings_page_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-settings-page', + templateUrl: 'settings-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class SettingsPageComponent {} +``` diff --git a/static/usage/v9/navigation/demo.html b/static/usage/v9/navigation/demo.html new file mode 100644 index 00000000000..9defa527e6e --- /dev/null +++ b/static/usage/v9/navigation/demo.html @@ -0,0 +1,95 @@ + + + + + + Navigation + + + + + + + + + + + +
+ + + Dashboard + + + + + + Item One + + + Item Two + + + Item Three + + + +
+ + + +
+ + + Settings + + + Settings content +
+ + + + + Dashboard + + + + Settings + + + + + + + + diff --git a/static/usage/v9/navigation/index.md b/static/usage/v9/navigation/index.md new file mode 100644 index 00000000000..1495e9daf1a --- /dev/null +++ b/static/usage/v9/navigation/index.md @@ -0,0 +1,55 @@ +import Playground from '@site/src/components/global/Playground'; + +import angular_app_routes_ts from './angular/app_routes_ts.md'; +import angular_app_component_html from './angular/app_component_html.md'; +import angular_app_component_ts from './angular/app_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_dashboard_page_component_html from './angular/dashboard_page_component_html.md'; +import angular_dashboard_page_component_ts from './angular/dashboard_page_component_ts.md'; +import angular_item_detail_page_component_html from './angular/item_detail_page_component_html.md'; +import angular_item_detail_page_component_ts from './angular/item_detail_page_component_ts.md'; +import angular_settings_page_component_html from './angular/settings_page_component_html.md'; +import angular_settings_page_component_ts from './angular/settings_page_component_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_dashboard_page_tsx from './react/dashboard_page_tsx.md'; +import react_item_detail_page_tsx from './react/item_detail_page_tsx.md'; +import react_settings_page_tsx from './react/settings_page_tsx.md'; + +export default function NavigationPlayground({ defaultFramework = 'angular' }) { + return ( + + ); +} diff --git a/static/usage/v9/navigation/react/dashboard_page_tsx.md b/static/usage/v9/navigation/react/dashboard_page_tsx.md new file mode 100644 index 00000000000..6f84af69248 --- /dev/null +++ b/static/usage/v9/navigation/react/dashboard_page_tsx.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const items = [ + { id: '1', name: 'Item One' }, + { id: '2', name: 'Item Two' }, + { id: '3', name: 'Item Three' }, +]; + +const DashboardPage: React.FC = () => ( + + + + Dashboard + + + + + {items.map((item) => ( + + {item.name} + + ))} + + + +); + +export default DashboardPage; +``` diff --git a/static/usage/v9/navigation/react/item_detail_page_tsx.md b/static/usage/v9/navigation/react/item_detail_page_tsx.md new file mode 100644 index 00000000000..7918ed60813 --- /dev/null +++ b/static/usage/v9/navigation/react/item_detail_page_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { useParams } from 'react-router-dom'; + +const ItemDetailPage: React.FC = () => { + const { id } = useParams<{ id: string }>(); + + return ( + + + + + + + Item {id} + + + You navigated to item {id}. + + ); +}; + +export default ItemDetailPage; +``` diff --git a/static/usage/v9/navigation/react/main_tsx.md b/static/usage/v9/navigation/react/main_tsx.md new file mode 100644 index 00000000000..143a2f02021 --- /dev/null +++ b/static/usage/v9/navigation/react/main_tsx.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonIcon, IonLabel, IonRouterOutlet, IonTabBar, IonTabButton, IonTabs } from '@ionic/react'; +import { IonReactRouter } from '@ionic/react-router'; +import { Route, Navigate } from 'react-router-dom'; +import { gridOutline, settingsOutline } from 'ionicons/icons'; +import DashboardPage from './pages/DashboardPage'; +import ItemDetailPage from './pages/ItemDetailPage'; +import SettingsPage from './pages/SettingsPage'; + +const Example: React.FC = () => ( + + + + } /> + } /> + } /> + } /> + + + + + Dashboard + + + + Settings + + + + +); + +export default Example; +``` diff --git a/static/usage/v9/navigation/react/settings_page_tsx.md b/static/usage/v9/navigation/react/settings_page_tsx.md new file mode 100644 index 00000000000..5bdcec02a51 --- /dev/null +++ b/static/usage/v9/navigation/react/settings_page_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const SettingsPage: React.FC = () => ( + + + + Settings + + + Settings content + +); + +export default SettingsPage; +``` diff --git a/static/usage/v9/note/basic/angular/example_component_html.md b/static/usage/v9/note/basic/angular/example_component_html.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v9/note/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v9/note/basic/angular/example_component_ts.md b/static/usage/v9/note/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..54f99813ece --- /dev/null +++ b/static/usage/v9/note/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/note/basic/demo.html b/static/usage/v9/note/basic/demo.html new file mode 100644 index 00000000000..7176e55bea8 --- /dev/null +++ b/static/usage/v9/note/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Note + + + + + + + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v9/note/basic/index.md b/static/usage/v9/note/basic/index.md new file mode 100644 index 00000000000..d19c2c31a55 --- /dev/null +++ b/static/usage/v9/note/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/note/basic/javascript.md b/static/usage/v9/note/basic/javascript.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v9/note/basic/javascript.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v9/note/basic/react.md b/static/usage/v9/note/basic/react.md new file mode 100644 index 00000000000..9f1cdb45225 --- /dev/null +++ b/static/usage/v9/note/basic/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/v9/note/basic/vue.md b/static/usage/v9/note/basic/vue.md new file mode 100644 index 00000000000..3790ce220a0 --- /dev/null +++ b/static/usage/v9/note/basic/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/note/item/angular/example_component_html.md b/static/usage/v9/note/item/angular/example_component_html.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/v9/note/item/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/v9/note/item/angular/example_component_ts.md b/static/usage/v9/note/item/angular/example_component_ts.md new file mode 100644 index 00000000000..287c08efcea --- /dev/null +++ b/static/usage/v9/note/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonNote } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/note/item/demo.html b/static/usage/v9/note/item/demo.html new file mode 100644 index 00000000000..91f0932efc8 --- /dev/null +++ b/static/usage/v9/note/item/demo.html @@ -0,0 +1,36 @@ + + + + + + Note + + + + + + + + + + + +
+ + Label + Note (End) + + + + Note (Start) + Label + +
+ + + + diff --git a/static/usage/v9/note/item/index.md b/static/usage/v9/note/item/index.md new file mode 100644 index 00000000000..78e9c28339b --- /dev/null +++ b/static/usage/v9/note/item/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/note/item/javascript.md b/static/usage/v9/note/item/javascript.md new file mode 100644 index 00000000000..0d26cf33b27 --- /dev/null +++ b/static/usage/v9/note/item/javascript.md @@ -0,0 +1,11 @@ +```html + + Label + Note (End) + + + + Note (Start) + Label + +``` diff --git a/static/usage/v9/note/item/react.md b/static/usage/v9/note/item/react.md new file mode 100644 index 00000000000..422ba6eff85 --- /dev/null +++ b/static/usage/v9/note/item/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + + Label + Note (End) + + + + Note (Start) + Label + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/note/item/vue.md b/static/usage/v9/note/item/vue.md new file mode 100644 index 00000000000..698cb771b29 --- /dev/null +++ b/static/usage/v9/note/item/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/note/theming/colors/angular/example_component_html.md b/static/usage/v9/note/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/v9/note/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/v9/note/theming/colors/angular/example_component_ts.md b/static/usage/v9/note/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..54f99813ece --- /dev/null +++ b/static/usage/v9/note/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/note/theming/colors/demo.html b/static/usage/v9/note/theming/colors/demo.html new file mode 100644 index 00000000000..4f7a685575e --- /dev/null +++ b/static/usage/v9/note/theming/colors/demo.html @@ -0,0 +1,47 @@ + + + + + + Note + + + + + + + + + + + +
+
+ Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note +
+
+ + + + diff --git a/static/usage/v9/note/theming/colors/index.md b/static/usage/v9/note/theming/colors/index.md new file mode 100644 index 00000000000..78067588f91 --- /dev/null +++ b/static/usage/v9/note/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/note/theming/colors/javascript.md b/static/usage/v9/note/theming/colors/javascript.md new file mode 100644 index 00000000000..2740648d5ad --- /dev/null +++ b/static/usage/v9/note/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html +Default Note +Primary Note +Secondary Note +Tertiary Note +Success Note +Warning Note +Danger Note +Light Note +Medium Note +Dark Note +``` diff --git a/static/usage/v9/note/theming/colors/react.md b/static/usage/v9/note/theming/colors/react.md new file mode 100644 index 00000000000..0f17783c5c6 --- /dev/null +++ b/static/usage/v9/note/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +function Example() { + return ( + <> + Default Note + Primary Note + Secondary Note + Tertiary Note + Success Note + Warning Note + Danger Note + Light Note + Medium Note + Dark Note + + ); +} +export default Example; +``` diff --git a/static/usage/v9/note/theming/colors/vue.md b/static/usage/v9/note/theming/colors/vue.md new file mode 100644 index 00000000000..f330f2b4298 --- /dev/null +++ b/static/usage/v9/note/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_css.md b/static/usage/v9/note/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_html.md b/static/usage/v9/note/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..2c59ef63faa --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Default Note +``` diff --git a/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..54f99813ece --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonNote } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonNote], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/note/theming/css-properties/demo.html b/static/usage/v9/note/theming/css-properties/demo.html new file mode 100644 index 00000000000..f8144a332dd --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/demo.html @@ -0,0 +1,28 @@ + + + + + + Note + + + + + + + + + + + +
+ Default Note +
+ + + + diff --git a/static/usage/v9/note/theming/css-properties/index.md b/static/usage/v9/note/theming/css-properties/index.md new file mode 100644 index 00000000000..d6eb8a8a615 --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/note/theming/css-properties/javascript.md b/static/usage/v9/note/theming/css-properties/javascript.md new file mode 100644 index 00000000000..cc1bdeec421 --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/javascript.md @@ -0,0 +1,9 @@ +```html + + +Default Note +``` diff --git a/static/usage/v9/note/theming/css-properties/react/main_css.md b/static/usage/v9/note/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..5f39ab9c48f --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-note { + --color: #54dc98; +} +``` diff --git a/static/usage/v9/note/theming/css-properties/react/main_tsx.md b/static/usage/v9/note/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..798b6ab90d1 --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonNote } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Default Note + + ); +} +export default Example; +``` diff --git a/static/usage/v9/note/theming/css-properties/vue.md b/static/usage/v9/note/theming/css-properties/vue.md new file mode 100644 index 00000000000..5feb93da730 --- /dev/null +++ b/static/usage/v9/note/theming/css-properties/vue.md @@ -0,0 +1,15 @@ +```html + + + + + +``` diff --git a/static/usage/v9/picker/basic/angular/example_component_html.md b/static/usage/v9/picker/basic/angular/example_component_html.md new file mode 100644 index 00000000000..c3f180464f4 --- /dev/null +++ b/static/usage/v9/picker/basic/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + -- + Javascript + Typescript + Rust + C# + + +``` diff --git a/static/usage/v9/picker/basic/angular/example_component_ts.md b/static/usage/v9/picker/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..887370aa403 --- /dev/null +++ b/static/usage/v9/picker/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/picker/basic/demo.html b/static/usage/v9/picker/basic/demo.html new file mode 100644 index 00000000000..400d92577b3 --- /dev/null +++ b/static/usage/v9/picker/basic/demo.html @@ -0,0 +1,31 @@ + + + + + + Picker | Basic + + + + + + + + + +
+ + + -- + Javascript + Typescript + Rust + C# + + +
+ + + + + diff --git a/static/usage/v9/picker/basic/index.md b/static/usage/v9/picker/basic/index.md new file mode 100644 index 00000000000..5319f1d52a5 --- /dev/null +++ b/static/usage/v9/picker/basic/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import react from './react.md'; +import vue from './vue.md'; + + diff --git a/static/usage/v9/picker/basic/javascript.md b/static/usage/v9/picker/basic/javascript.md new file mode 100644 index 00000000000..c3f180464f4 --- /dev/null +++ b/static/usage/v9/picker/basic/javascript.md @@ -0,0 +1,11 @@ +```html + + + -- + Javascript + Typescript + Rust + C# + + +``` diff --git a/static/usage/v9/picker/basic/react.md b/static/usage/v9/picker/basic/react.md new file mode 100644 index 00000000000..b25fda24872 --- /dev/null +++ b/static/usage/v9/picker/basic/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react'; + +function Example() { + return ( + <> + + + + -- + + Javascript + Typescript + Rust + C# + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/picker/basic/vue.md b/static/usage/v9/picker/basic/vue.md new file mode 100644 index 00000000000..e1dceca490e --- /dev/null +++ b/static/usage/v9/picker/basic/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/picker/modal/angular/example_component_css.md b/static/usage/v9/picker/modal/angular/example_component_css.md new file mode 100644 index 00000000000..b3640befc58 --- /dev/null +++ b/static/usage/v9/picker/modal/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-modal { + --height: auto; + + align-items: end; +} + +ion-picker { + margin-bottom: var(--ion-safe-area-bottom); +} +``` diff --git a/static/usage/v9/picker/modal/angular/example_component_html.md b/static/usage/v9/picker/modal/angular/example_component_html.md new file mode 100644 index 00000000000..dd221429f52 --- /dev/null +++ b/static/usage/v9/picker/modal/angular/example_component_html.md @@ -0,0 +1,24 @@ +```html +Open modal + + + + + Cancel + + + Done + + + + + -- + Javascript + Typescript + Rust + C# + + + + +``` diff --git a/static/usage/v9/picker/modal/angular/example_component_ts.md b/static/usage/v9/picker/modal/angular/example_component_ts.md new file mode 100644 index 00000000000..3e3fd532dac --- /dev/null +++ b/static/usage/v9/picker/modal/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonButtons, + IonModal, + IonPicker, + IonPickerColumn, + IonPickerColumnOption, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: './example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonButton, IonButtons, IonModal, IonPicker, IonPickerColumn, IonPickerColumnOption, IonToolbar], +}) +export class ExampleComponent { + currentValue = 'javascript'; + + onIonChange(event: CustomEvent) { + this.currentValue = event.detail.value; + } + + onDidDismiss(event: CustomEvent) { + console.log('didDismiss', JSON.stringify(event.detail)); + } +} +``` diff --git a/static/usage/v9/picker/modal/demo.html b/static/usage/v9/picker/modal/demo.html new file mode 100644 index 00000000000..76e185f5186 --- /dev/null +++ b/static/usage/v9/picker/modal/demo.html @@ -0,0 +1,67 @@ + + + + + + Picker | Basic + + + + + + + + + + +
+ Open modal + + + + + Cancel + + + Done + + + + + -- + Javascript + Typescript + Rust + C# + + + +
+ + + + + diff --git a/static/usage/v9/picker/modal/index.md b/static/usage/v9/picker/modal/index.md new file mode 100644 index 00000000000..dcdadb4a858 --- /dev/null +++ b/static/usage/v9/picker/modal/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + + diff --git a/static/usage/v9/picker/modal/javascript.md b/static/usage/v9/picker/modal/javascript.md new file mode 100644 index 00000000000..3df98837095 --- /dev/null +++ b/static/usage/v9/picker/modal/javascript.md @@ -0,0 +1,49 @@ +```html + + +Open modal + + + + + Cancel + + + Done + + + + + -- + Javascript + Typescript + Rust + C# + + + + + +``` diff --git a/static/usage/v9/picker/modal/react/main_css.md b/static/usage/v9/picker/modal/react/main_css.md new file mode 100644 index 00000000000..b3640befc58 --- /dev/null +++ b/static/usage/v9/picker/modal/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-modal { + --height: auto; + + align-items: end; +} + +ion-picker { + margin-bottom: var(--ion-safe-area-bottom); +} +``` diff --git a/static/usage/v9/picker/modal/react/main_tsx.md b/static/usage/v9/picker/modal/react/main_tsx.md new file mode 100644 index 00000000000..dbf059f8650 --- /dev/null +++ b/static/usage/v9/picker/modal/react/main_tsx.md @@ -0,0 +1,53 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { + IonModal, + IonToolbar, + IonButtons, + IonButton, + IonPicker, + IonPickerColumn, + IonPickerColumnOption, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + const [value, setValue] = useState('javascript'); + + return ( + <> + Open modal + console.log('didDismiss', JSON.stringify(detail))} + > + + + modal.current!.dismiss(null, 'cancel')}>Cancel + + + modal.current!.dismiss(value, 'confirm')}>Done + + + + setValue(detail.value)}> + + -- + + Javascript + Typescript + Rust + C# + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/picker/modal/vue.md b/static/usage/v9/picker/modal/vue.md new file mode 100644 index 00000000000..b35a1ff04c0 --- /dev/null +++ b/static/usage/v9/picker/modal/vue.md @@ -0,0 +1,62 @@ +```html + + + + + +``` diff --git a/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md b/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md new file mode 100644 index 00000000000..2505b4d1a26 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + +
$
+ -- + 1 + 2 + 3 + 4 + 5 +
USD
+ + +``` diff --git a/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md b/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md new file mode 100644 index 00000000000..887370aa403 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/picker/prefix-suffix/demo.html b/static/usage/v9/picker/prefix-suffix/demo.html new file mode 100644 index 00000000000..1e1d6247242 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/demo.html @@ -0,0 +1,34 @@ + + + + + + Picker | Slot + + + + + + + + + +
+ + +
$
+ -- + 1 + 2 + 3 + 4 + 5 +
USD
+ + +
+ + + + + diff --git a/static/usage/v9/picker/prefix-suffix/index.md b/static/usage/v9/picker/prefix-suffix/index.md new file mode 100644 index 00000000000..2a05dcc2706 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import react from './react.md'; +import vue from './vue.md'; + + diff --git a/static/usage/v9/picker/prefix-suffix/javascript.md b/static/usage/v9/picker/prefix-suffix/javascript.md new file mode 100644 index 00000000000..39ddb70ea47 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/javascript.md @@ -0,0 +1,14 @@ +```html + + +
$
+ -- + 1 + 2 + 3 + 4 + 5 +
USD
+ + +``` diff --git a/static/usage/v9/picker/prefix-suffix/react.md b/static/usage/v9/picker/prefix-suffix/react.md new file mode 100644 index 00000000000..760aa97cddb --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react'; + +function Example() { + return ( + <> + + +
$
+ + -- + + 1 + 2 + 3 + 4 + 5 +
USD
+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/picker/prefix-suffix/vue.md b/static/usage/v9/picker/prefix-suffix/vue.md new file mode 100644 index 00000000000..b985108fed3 --- /dev/null +++ b/static/usage/v9/picker/prefix-suffix/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..1e59648e40e --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,36 @@ +```css +ion-picker { + --highlight-background: var(--ion-color-dark); + --highlight-border-radius: 50px; + + --fade-background-rgb: var(--ion-color-light-rgb); +} + +ion-picker-column-option { + text-transform: uppercase; + background-size: auto auto; + background-clip: border-box; + background-size: 200% auto; + color: #fff; + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: textclip 2s linear infinite; +} + +ion-picker-column-option[value='red'] { + background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%); +} +ion-picker-column-option[value='blue'] { + background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%); +} +ion-picker-column-option[value='green'] { + background-image: linear-gradient(-225deg, #11998e 0%, #38ef7d 48%, #40e0d0 100%); +} + +@keyframes textclip { + to { + background-position: 200% center; + } +} +``` diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..38347003e75 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + -- + Red + Blue + Green + + +``` diff --git a/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..887370aa403 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonPicker, IonPickerColumn, IonPickerColumnOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/picker/theming/css-properties/demo.html b/static/usage/v9/picker/theming/css-properties/demo.html new file mode 100644 index 00000000000..2fd7347c427 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/demo.html @@ -0,0 +1,67 @@ + + + + + + Picker | CSS Variables + + + + + + + + + + + +
+ + + -- + Red + Blue + Green + + +
+ + + + + diff --git a/static/usage/v9/picker/theming/css-properties/index.md b/static/usage/v9/picker/theming/css-properties/index.md new file mode 100644 index 00000000000..8cb98acab73 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + + diff --git a/static/usage/v9/picker/theming/css-properties/javascript.md b/static/usage/v9/picker/theming/css-properties/javascript.md new file mode 100644 index 00000000000..c7a6b118184 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + -- + Red + Blue + Green + + +``` diff --git a/static/usage/v9/picker/theming/css-properties/react/main_css.md b/static/usage/v9/picker/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..43a136e6b6f --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/react/main_css.md @@ -0,0 +1,37 @@ +```css +ion-picker { + --highlight-background: var(--ion-color-dark); + --highlight-border-radius: 50px; + + --fade-background-rgb: var(--ion-color-light-rgb); +} + +ion-picker-column-option { + text-transform: uppercase; + background-size: auto auto; + background-clip: border-box; + background-size: 200% auto; + color: #fff; + background-clip: text; + text-fill-color: transparent; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + animation: textclip 2s linear infinite; +} + +ion-picker-column-option[value='red'] { + background-image: linear-gradient(-225deg, #231557 0%, #44107a 29%, #ff1361 67%, #fff800 100%); +} +ion-picker-column-option[value='blue'] { + background-image: linear-gradient(-225deg, #2cd8d5 0%, #c5c1ff 56%, #ffbac3 100%); +} +ion-picker-column-option[value='green'] { + background-image: linear-gradient(-225deg, #11998e 0%, #38ef7d 48%, #40e0d0 100%); +} + +@keyframes textclip { + to { + background-position: 200% center; + } +} +``` diff --git a/static/usage/v9/picker/theming/css-properties/react/main_tsx.md b/static/usage/v9/picker/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..cf6b93e3851 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/react/main_tsx.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; + +import { IonPicker, IonPickerColumn, IonPickerColumnOption } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + -- + + Red + Blue + Green + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/picker/theming/css-properties/vue.md b/static/usage/v9/picker/theming/css-properties/vue.md new file mode 100644 index 00000000000..ceb0fa94470 --- /dev/null +++ b/static/usage/v9/picker/theming/css-properties/vue.md @@ -0,0 +1,53 @@ +```html + + + + +``` diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_css.md b/static/usage/v9/popover/customization/positioning/angular/example_component_css.md new file mode 100644 index 00000000000..56a63480d75 --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-popover { + --width: 80px; +} + +.container { + align-items: center; + display: flex; + flex-direction: column; + padding: 80px; +} +``` diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_html.md b/static/usage/v9/popover/customization/positioning/angular/example_component_html.md new file mode 100644 index 00000000000..d911b195f92 --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/angular/example_component_html.md @@ -0,0 +1,31 @@ +```html +
+ Side=Top, Alignment=Center + + + Hello World! + + + + Side=Bottom, Alignment=Start + + + Hello World! + + + + Side=Left, Alignment=Start + + + Hello World! + + + + Side=Right, Alignment=End + + + Hello World! + + +
+``` diff --git a/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md b/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md new file mode 100644 index 00000000000..1e16c2b30e9 --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/customization/positioning/demo.html b/static/usage/v9/popover/customization/positioning/demo.html new file mode 100644 index 00000000000..aca0602e8bf --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/demo.html @@ -0,0 +1,50 @@ + + + + + + Popover + + + + + + + + + + + +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ + + + diff --git a/static/usage/v9/popover/customization/positioning/index.md b/static/usage/v9/popover/customization/positioning/index.md new file mode 100644 index 00000000000..7711ae92e6e --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/customization/positioning/javascript.md b/static/usage/v9/popover/customization/positioning/javascript.md new file mode 100644 index 00000000000..28ef3451cac --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/javascript.md @@ -0,0 +1,36 @@ +```html +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ + +``` diff --git a/static/usage/v9/popover/customization/positioning/react/main_css.md b/static/usage/v9/popover/customization/positioning/react/main_css.md new file mode 100644 index 00000000000..56a63480d75 --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-popover { + --width: 80px; +} + +.container { + align-items: center; + display: flex; + flex-direction: column; + padding: 80px; +} +``` diff --git a/static/usage/v9/popover/customization/positioning/react/main_tsx.md b/static/usage/v9/popover/customization/positioning/react/main_tsx.md new file mode 100644 index 00000000000..54235b0f593 --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Side=Top, Alignment=Center + + Hello World! + + + Side=Bottom, Alignment=Start + + Hello World! + + + Side=Left, Alignment=Start + + Hello World! + + + Side=Right, Alignment=End + + Hello World! + +
+ ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/customization/positioning/vue.md b/static/usage/v9/popover/customization/positioning/vue.md new file mode 100644 index 00000000000..9627c5bd14f --- /dev/null +++ b/static/usage/v9/popover/customization/positioning/vue.md @@ -0,0 +1,42 @@ +```html + + + + + +``` diff --git a/static/usage/v9/popover/customization/sizing/angular/example_component_html.md b/static/usage/v9/popover/customization/sizing/angular/example_component_html.md new file mode 100644 index 00000000000..ca06883d451 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +Size=Auto + + + Hello! + + + +Size=Cover + + + Hello! + + +``` diff --git a/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md b/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md new file mode 100644 index 00000000000..1e16c2b30e9 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/customization/sizing/demo.html b/static/usage/v9/popover/customization/sizing/demo.html new file mode 100644 index 00000000000..4876e653120 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/demo.html @@ -0,0 +1,30 @@ + + + + + + Popover + + + + + + + + + +
+ Size=Auto + + Hello! + + + Size=Cover + + Hello! + +
+ + + + diff --git a/static/usage/v9/popover/customization/sizing/index.md b/static/usage/v9/popover/customization/sizing/index.md new file mode 100644 index 00000000000..ac4b94583b0 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/customization/sizing/javascript.md b/static/usage/v9/popover/customization/sizing/javascript.md new file mode 100644 index 00000000000..3b25241cd51 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/javascript.md @@ -0,0 +1,11 @@ +```html +Size=Auto + + Hello! + + +Size=Cover + + Hello! + +``` diff --git a/static/usage/v9/popover/customization/sizing/react.md b/static/usage/v9/popover/customization/sizing/react.md new file mode 100644 index 00000000000..35b60534df6 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Size=Auto + + Hello! + + + Size=Cover + + Hello! + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/customization/sizing/vue.md b/static/usage/v9/popover/customization/sizing/vue.md new file mode 100644 index 00000000000..14ca82fb3e9 --- /dev/null +++ b/static/usage/v9/popover/customization/sizing/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/customization/styling/angular/example_component_html.md b/static/usage/v9/popover/customization/styling/angular/example_component_html.md new file mode 100644 index 00000000000..03df30e973a --- /dev/null +++ b/static/usage/v9/popover/customization/styling/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html +Click Me + + + Hello Styled World! + + +``` diff --git a/static/usage/v9/popover/customization/styling/angular/example_component_ts.md b/static/usage/v9/popover/customization/styling/angular/example_component_ts.md new file mode 100644 index 00000000000..1e16c2b30e9 --- /dev/null +++ b/static/usage/v9/popover/customization/styling/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/customization/styling/angular/global_css.md b/static/usage/v9/popover/customization/styling/angular/global_css.md new file mode 100644 index 00000000000..434a31d24d9 --- /dev/null +++ b/static/usage/v9/popover/customization/styling/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-popover { + --background: rgba(40, 173, 218, 0.6); + --backdrop-opacity: 0.6; + --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6); + --color: white; + --width: 300px; +} + +ion-popover ion-content { + --background: rgba(40, 173, 218, 0.6); +} + +ion-popover::part(backdrop) { + background-color: rgb(6, 14, 106); +} +``` diff --git a/static/usage/v9/popover/customization/styling/demo.html b/static/usage/v9/popover/customization/styling/demo.html new file mode 100644 index 00000000000..c1555920896 --- /dev/null +++ b/static/usage/v9/popover/customization/styling/demo.html @@ -0,0 +1,43 @@ + + + + + + Popover + + + + + + + + + + + +
+ Click Me + + Hello Styled World! + +
+ + + + diff --git a/static/usage/v9/popover/customization/styling/index.md b/static/usage/v9/popover/customization/styling/index.md new file mode 100644 index 00000000000..43937cc8aa9 --- /dev/null +++ b/static/usage/v9/popover/customization/styling/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/popover/customization/styling/javascript.md b/static/usage/v9/popover/customization/styling/javascript.md new file mode 100644 index 00000000000..2666638cc1e --- /dev/null +++ b/static/usage/v9/popover/customization/styling/javascript.md @@ -0,0 +1,24 @@ +```html +Click Me + + Hello Styled World! + + + +``` diff --git a/static/usage/v9/popover/customization/styling/react/main_css.md b/static/usage/v9/popover/customization/styling/react/main_css.md new file mode 100644 index 00000000000..434a31d24d9 --- /dev/null +++ b/static/usage/v9/popover/customization/styling/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-popover { + --background: rgba(40, 173, 218, 0.6); + --backdrop-opacity: 0.6; + --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.6); + --color: white; + --width: 300px; +} + +ion-popover ion-content { + --background: rgba(40, 173, 218, 0.6); +} + +ion-popover::part(backdrop) { + background-color: rgb(6, 14, 106); +} +``` diff --git a/static/usage/v9/popover/customization/styling/react/main_tsx.md b/static/usage/v9/popover/customization/styling/react/main_tsx.md new file mode 100644 index 00000000000..1a905f8056d --- /dev/null +++ b/static/usage/v9/popover/customization/styling/react/main_tsx.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Click Me + + Hello Styled World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/customization/styling/vue.md b/static/usage/v9/popover/customization/styling/vue.md new file mode 100644 index 00000000000..7cbc7bb145d --- /dev/null +++ b/static/usage/v9/popover/customization/styling/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` diff --git a/static/usage/v9/popover/nested/angular/example_component_html.md b/static/usage/v9/popover/nested/angular/example_component_html.md new file mode 100644 index 00000000000..cdbe68f341f --- /dev/null +++ b/static/usage/v9/popover/nested/angular/example_component_html.md @@ -0,0 +1,24 @@ +```html +Open Menu + + + + + Option 1 + Option 2 + More options... + + + + + + Nested option + + + + + + + + +``` diff --git a/static/usage/v9/popover/nested/angular/example_component_ts.md b/static/usage/v9/popover/nested/angular/example_component_ts.md new file mode 100644 index 00000000000..ee591ce55e3 --- /dev/null +++ b/static/usage/v9/popover/nested/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonItem, IonList, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/nested/demo.html b/static/usage/v9/popover/nested/demo.html new file mode 100644 index 00000000000..84417d0d48a --- /dev/null +++ b/static/usage/v9/popover/nested/demo.html @@ -0,0 +1,39 @@ + + + + + + Popover + + + + + + + + + +
+ Open Menu + + + + Option 1 + Option 2 + More options... + + + + + Nested option + + + + + + +
+ + + + diff --git a/static/usage/v9/popover/nested/index.md b/static/usage/v9/popover/nested/index.md new file mode 100644 index 00000000000..289df4eb234 --- /dev/null +++ b/static/usage/v9/popover/nested/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/nested/javascript.md b/static/usage/v9/popover/nested/javascript.md new file mode 100644 index 00000000000..6f3848538f5 --- /dev/null +++ b/static/usage/v9/popover/nested/javascript.md @@ -0,0 +1,20 @@ +```html +Open Menu + + + + Option 1 + Option 2 + More options... + + + + + Nested option + + + + + + +``` diff --git a/static/usage/v9/popover/nested/react.md b/static/usage/v9/popover/nested/react.md new file mode 100644 index 00000000000..eb84d67effb --- /dev/null +++ b/static/usage/v9/popover/nested/react.md @@ -0,0 +1,37 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonItem, IonList, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Open Menu + + + + + Option 1 + + + Option 2 + + + More options... + + + + + + + Nested option + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/nested/vue.md b/static/usage/v9/popover/nested/vue.md new file mode 100644 index 00000000000..bdc5199a0e4 --- /dev/null +++ b/static/usage/v9/popover/nested/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/performance/mount/angular/example_component_html.md b/static/usage/v9/popover/performance/mount/angular/example_component_html.md new file mode 100644 index 00000000000..b8a696ab948 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html +Open Popover + + + This content was mounted as soon as the popover was created. + + +``` diff --git a/static/usage/v9/popover/performance/mount/angular/example_component_ts.md b/static/usage/v9/popover/performance/mount/angular/example_component_ts.md new file mode 100644 index 00000000000..1e16c2b30e9 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/performance/mount/demo.html b/static/usage/v9/popover/performance/mount/demo.html new file mode 100644 index 00000000000..3835634aed8 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/demo.html @@ -0,0 +1,25 @@ + + + + + + Popover + + + + + + + + + +
+ Open Popover + + This content was mounted as soon as the popover was created. + +
+ + + + diff --git a/static/usage/v9/popover/performance/mount/index.md b/static/usage/v9/popover/performance/mount/index.md new file mode 100644 index 00000000000..91410bee326 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/performance/mount/javascript.md b/static/usage/v9/popover/performance/mount/javascript.md new file mode 100644 index 00000000000..297c94344f1 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/javascript.md @@ -0,0 +1,6 @@ +```html +Open Popover + + This content was mounted as soon as the popover was created. + +``` diff --git a/static/usage/v9/popover/performance/mount/react.md b/static/usage/v9/popover/performance/mount/react.md new file mode 100644 index 00000000000..24e7230d966 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + + Open Popover + + This content was mounted as soon as the popover was created. + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/performance/mount/vue.md b/static/usage/v9/popover/performance/mount/vue.md new file mode 100644 index 00000000000..e62f5504e56 --- /dev/null +++ b/static/usage/v9/popover/performance/mount/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/presenting/controller/angular/example_component_html.md b/static/usage/v9/popover/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..679b36f5040 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Click Me +``` diff --git a/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md b/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..ed97e19cee7 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, PopoverController } from '@ionic/angular'; + +import { PopoverComponent } from './popover.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent { + constructor(public popoverController: PopoverController) {} + + async presentPopover(e: Event) { + const popover = await this.popoverController.create({ + component: PopoverComponent, + event: e, + }); + + await popover.present(); + + const { role } = await popover.onDidDismiss(); + console.log(`Popover dismissed with role: ${role}`); + } +} +``` diff --git a/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md b/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md new file mode 100644 index 00000000000..583a6dea593 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/angular/popover_component_html.md @@ -0,0 +1,3 @@ +```html +Hello World! +``` diff --git a/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md b/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md new file mode 100644 index 00000000000..49989aeb071 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/angular/popover_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent } from '@ionic/angular'; + +@Component({ + selector: 'app-popover', + templateUrl: 'popover.component.html', + imports: [IonContent], +}) +export class PopoverComponent {} +``` diff --git a/static/usage/v9/popover/presenting/controller/demo.html b/static/usage/v9/popover/presenting/controller/demo.html new file mode 100644 index 00000000000..c3c20b10171 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/demo.html @@ -0,0 +1,52 @@ + + + + + + Popover + + + + + + + + + +
+ Click Me +
+ + + + + + diff --git a/static/usage/v9/popover/presenting/controller/index.md b/static/usage/v9/popover/presenting/controller/index.md new file mode 100644 index 00000000000..53dc7133cec --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; + +import vue_example from './vue/example_vue.md'; +import vue_popover from './vue/popover_vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_popover_component_html from './angular/popover_component_html.md'; +import angular_popover_component_ts from './angular/popover_component_ts.md'; + + diff --git a/static/usage/v9/popover/presenting/controller/javascript.md b/static/usage/v9/popover/presenting/controller/javascript.md new file mode 100644 index 00000000000..d259855fbc5 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/javascript.md @@ -0,0 +1,33 @@ +```html +Click Me + + +``` diff --git a/static/usage/v9/popover/presenting/controller/react.md b/static/usage/v9/popover/presenting/controller/react.md new file mode 100644 index 00000000000..48043ab57ef --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, useIonPopover } from '@ionic/react'; + +const Popover = () => Hello World!; + +function Example() { + const [present] = useIonPopover(Popover); + + return ( + + present({ + event: e, + onDidDismiss: (e: CustomEvent) => console.log(`Popover dismissed with role: ${e.detail.role}`), + }) + } + > + Click Me + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/presenting/controller/vue/example_vue.md b/static/usage/v9/popover/presenting/controller/vue/example_vue.md new file mode 100644 index 00000000000..0bf2dacf698 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/vue/example_vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/presenting/controller/vue/popover_vue.md b/static/usage/v9/popover/presenting/controller/vue/popover_vue.md new file mode 100644 index 00000000000..e945ee01ce3 --- /dev/null +++ b/static/usage/v9/popover/presenting/controller/vue/popover_vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md new file mode 100644 index 00000000000..1d8369f31e2 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html +Click Me + + + Hello World! + + +``` diff --git a/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md new file mode 100644 index 00000000000..16ba3a0479c --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent { + @ViewChild('popover') popover!: HTMLIonPopoverElement; + + isOpen = false; + + presentPopover(e: Event) { + this.popover.event = e; + this.isOpen = true; + } +} +``` diff --git a/static/usage/v9/popover/presenting/inline-isopen/demo.html b/static/usage/v9/popover/presenting/inline-isopen/demo.html new file mode 100644 index 00000000000..cb71301248a --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/demo.html @@ -0,0 +1,37 @@ + + + + + + Popover + + + + + + + + + +
+ Click Me + + Hello World! + +
+ + + + + + diff --git a/static/usage/v9/popover/presenting/inline-isopen/index.md b/static/usage/v9/popover/presenting/inline-isopen/index.md new file mode 100644 index 00000000000..02f0895a674 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/presenting/inline-isopen/javascript.md b/static/usage/v9/popover/presenting/inline-isopen/javascript.md new file mode 100644 index 00000000000..1daafed1894 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/javascript.md @@ -0,0 +1,18 @@ +```html +Click Me + + Hello World! + + + +``` diff --git a/static/usage/v9/popover/presenting/inline-isopen/react.md b/static/usage/v9/popover/presenting/inline-isopen/react.md new file mode 100644 index 00000000000..1d0b68fd1f5 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/react.md @@ -0,0 +1,24 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; + +function Example() { + const popover = useRef(null); + const [popoverOpen, setPopoverOpen] = useState(false); + + const openPopover = (e: any) => { + popover.current!.event = e; + setPopoverOpen(true); + }; + + return ( + <> + Click Me + setPopoverOpen(false)}> + Hello World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/presenting/inline-isopen/vue.md b/static/usage/v9/popover/presenting/inline-isopen/vue.md new file mode 100644 index 00000000000..0cdf2619e7a --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-isopen/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md new file mode 100644 index 00000000000..de7f6d02a6f --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html +Left-Click Me + + + Hello World! + + + +Right-Click Me + + + Hello World! + + + +Hover Over Me + + + Hello World! + + +``` diff --git a/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md new file mode 100644 index 00000000000..1e16c2b30e9 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonPopover } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonPopover], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/popover/presenting/inline-trigger/demo.html b/static/usage/v9/popover/presenting/inline-trigger/demo.html new file mode 100644 index 00000000000..e46ef091d2b --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/demo.html @@ -0,0 +1,35 @@ + + + + + + Popover + + + + + + + + + +
+ Left-Click Me + + Hello World! + + + Right-Click Me + + Hello World! + + + Hover Over Me + + Hello World! + +
+ + + + diff --git a/static/usage/v9/popover/presenting/inline-trigger/index.md b/static/usage/v9/popover/presenting/inline-trigger/index.md new file mode 100644 index 00000000000..c01d54786b1 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/popover/presenting/inline-trigger/javascript.md b/static/usage/v9/popover/presenting/inline-trigger/javascript.md new file mode 100644 index 00000000000..7f4559391e2 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/javascript.md @@ -0,0 +1,16 @@ +```html +Left-Click Me + + Hello World! + + +Right-Click Me + + Hello World! + + +Hover Over Me + + Hello World! + +``` diff --git a/static/usage/v9/popover/presenting/inline-trigger/react.md b/static/usage/v9/popover/presenting/inline-trigger/react.md new file mode 100644 index 00000000000..93ba97cbd7c --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonPopover } from '@ionic/react'; +function Example() { + return ( + <> + Left-Click Me + + Hello World! + + + Right-Click Me + + Hello World! + + + Hover Over Me + + Hello World! + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/popover/presenting/inline-trigger/vue.md b/static/usage/v9/popover/presenting/inline-trigger/vue.md new file mode 100644 index 00000000000..0241fdd6904 --- /dev/null +++ b/static/usage/v9/popover/presenting/inline-trigger/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/buffer/angular/example_component_html.md b/static/usage/v9/progress-bar/buffer/angular/example_component_html.md new file mode 100644 index 00000000000..8ad364be69a --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/buffer/angular/example_component_ts.md b/static/usage/v9/progress-bar/buffer/angular/example_component_ts.md new file mode 100644 index 00000000000..418605543c6 --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component, signal } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent { + readonly buffer = signal(0.06); + readonly progress = signal(0); + + constructor() { + setInterval(() => { + this.buffer.update((value) => value + 0.06); + this.progress.update((value) => value + 0.06); + + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (this.progress() > 1) { + setTimeout(() => { + this.buffer.set(0.06); + this.progress.set(0); + }, 1000); + } + }, 1000); + } +} +``` diff --git a/static/usage/v9/progress-bar/buffer/demo.html b/static/usage/v9/progress-bar/buffer/demo.html new file mode 100644 index 00000000000..0d0ae7db1cb --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/demo.html @@ -0,0 +1,44 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/progress-bar/buffer/index.md b/static/usage/v9/progress-bar/buffer/index.md new file mode 100644 index 00000000000..64047a9400d --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/buffer/javascript.md b/static/usage/v9/progress-bar/buffer/javascript.md new file mode 100644 index 00000000000..0938fb5fca1 --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/javascript.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/buffer/react.md b/static/usage/v9/progress-bar/buffer/react.md new file mode 100644 index 00000000000..10f35e69538 --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/react.md @@ -0,0 +1,28 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + const [buffer, setBuffer] = useState(0.06); + const [progress, setProgress] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setBuffer((prevBuffer) => prevBuffer + 0.06); + setProgress((prevProgress) => prevProgress + 0.06); + }, 1000); + + return () => clearInterval(interval); + }, []); + + if (progress > 1) { + setTimeout(() => { + setBuffer(0.06); + setProgress(0); + }, 1000); + } + + return ; +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/buffer/vue.md b/static/usage/v9/progress-bar/buffer/vue.md new file mode 100644 index 00000000000..d2493f0d09e --- /dev/null +++ b/static/usage/v9/progress-bar/buffer/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/determinate/angular/example_component_html.md b/static/usage/v9/progress-bar/determinate/angular/example_component_html.md new file mode 100644 index 00000000000..d246f5403af --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/determinate/angular/example_component_ts.md b/static/usage/v9/progress-bar/determinate/angular/example_component_ts.md new file mode 100644 index 00000000000..0c1c9d1aac2 --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component, signal } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent { + readonly progress = signal(0); + + constructor() { + setInterval(() => { + this.progress.update((value) => value + 0.01); + + // Reset the progress bar when it reaches 100% + // to continuously show the demo + if (this.progress() > 1) { + setTimeout(() => { + this.progress.set(0); + }, 1000); + } + }, 50); + } +} +``` diff --git a/static/usage/v9/progress-bar/determinate/demo.html b/static/usage/v9/progress-bar/determinate/demo.html new file mode 100644 index 00000000000..a01fb81b19c --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/demo.html @@ -0,0 +1,39 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/progress-bar/determinate/index.md b/static/usage/v9/progress-bar/determinate/index.md new file mode 100644 index 00000000000..5b6b142664e --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/determinate/javascript.md b/static/usage/v9/progress-bar/determinate/javascript.md new file mode 100644 index 00000000000..6adb7e43590 --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/javascript.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/determinate/react.md b/static/usage/v9/progress-bar/determinate/react.md new file mode 100644 index 00000000000..474d4dd878e --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/react.md @@ -0,0 +1,25 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + const [progress, setProgress] = useState(0); + + useEffect(() => { + const interval = setInterval(() => { + setProgress((prevProgress) => prevProgress + 0.01); + }, 50); + + return () => clearInterval(interval); + }, []); + + if (progress > 1) { + setTimeout(() => { + setProgress(0); + }, 1000); + } + + return ; +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/determinate/vue.md b/static/usage/v9/progress-bar/determinate/vue.md new file mode 100644 index 00000000000..089f2911c87 --- /dev/null +++ b/static/usage/v9/progress-bar/determinate/vue.md @@ -0,0 +1,26 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md b/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md new file mode 100644 index 00000000000..f83f9173c39 --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/indeterminate/angular/example_component_ts.md b/static/usage/v9/progress-bar/indeterminate/angular/example_component_ts.md new file mode 100644 index 00000000000..ac17a5b21f4 --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/progress-bar/indeterminate/demo.html b/static/usage/v9/progress-bar/indeterminate/demo.html new file mode 100644 index 00000000000..dd53c6d929b --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/demo.html @@ -0,0 +1,22 @@ + + + + + + Progress Bar + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/progress-bar/indeterminate/index.md b/static/usage/v9/progress-bar/indeterminate/index.md new file mode 100644 index 00000000000..e164bd3710e --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/indeterminate/javascript.md b/static/usage/v9/progress-bar/indeterminate/javascript.md new file mode 100644 index 00000000000..f83f9173c39 --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/indeterminate/react.md b/static/usage/v9/progress-bar/indeterminate/react.md new file mode 100644 index 00000000000..b856e1f29f2 --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/indeterminate/vue.md b/static/usage/v9/progress-bar/indeterminate/vue.md new file mode 100644 index 00000000000..5ffb112d99b --- /dev/null +++ b/static/usage/v9/progress-bar/indeterminate/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..71bc3675422 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/progress-bar/theming/colors/angular/example_component_ts.md b/static/usage/v9/progress-bar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..ac17a5b21f4 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/progress-bar/theming/colors/demo.html b/static/usage/v9/progress-bar/theming/colors/demo.html new file mode 100644 index 00000000000..595d2ebcfe2 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v9/progress-bar/theming/colors/index.md b/static/usage/v9/progress-bar/theming/colors/index.md new file mode 100644 index 00000000000..cc315fa2a07 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/theming/colors/javascript.md b/static/usage/v9/progress-bar/theming/colors/javascript.md new file mode 100644 index 00000000000..71bc3675422 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/progress-bar/theming/colors/react.md b/static/usage/v9/progress-bar/theming/colors/react.md new file mode 100644 index 00000000000..d40b838e65b --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/theming/colors/vue.md b/static/usage/v9/progress-bar/theming/colors/vue.md new file mode 100644 index 00000000000..36e7e70827e --- /dev/null +++ b/static/usage/v9/progress-bar/theming/colors/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..7d5576bdeeb --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-progress-bar { + --background: #f3e895; + --progress-background: #09c567; +} +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..a374b2ee72c --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..ac17a5b21f4 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/demo.html b/static/usage/v9/progress-bar/theming/css-properties/demo.html new file mode 100644 index 00000000000..24ff2792f6d --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/demo.html @@ -0,0 +1,35 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/progress-bar/theming/css-properties/index.md b/static/usage/v9/progress-bar/theming/css-properties/index.md new file mode 100644 index 00000000000..544c8b4c739 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/theming/css-properties/javascript.md b/static/usage/v9/progress-bar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f57e0166013 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/javascript.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/react/main_css.md b/static/usage/v9/progress-bar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..7d5576bdeeb --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-progress-bar { + --background: #f3e895; + --progress-background: #09c567; +} +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/react/main_tsx.md b/static/usage/v9/progress-bar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..3e05757d942 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/theming/css-properties/vue.md b/static/usage/v9/progress-bar/theming/css-properties/vue.md new file mode 100644 index 00000000000..cfe7fccebbc --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-properties/vue.md @@ -0,0 +1,17 @@ +```html + + + + + +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..2ccf6f72dd8 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-progress-bar::part(track) { + background: #f3e895; +} + +ion-progress-bar::part(progress) { + background: #09c567; +} + +ion-progress-bar::part(stream) { + background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); +} +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..a374b2ee72c --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..ac17a5b21f4 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonProgressBar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonProgressBar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/demo.html b/static/usage/v9/progress-bar/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..17cbe574a21 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/demo.html @@ -0,0 +1,42 @@ + + + + + + Progress Bar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..7cfb27b0b7e --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/javascript.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..52b5be57e5a --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/javascript.md @@ -0,0 +1,18 @@ +```html + + + + +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..2ccf6f72dd8 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,13 @@ +```css +ion-progress-bar::part(track) { + background: #f3e895; +} + +ion-progress-bar::part(progress) { + background: #09c567; +} + +ion-progress-bar::part(stream) { + background-image: radial-gradient(ellipse at center, #e475f3 0%, #e475f3 30%, transparent 30%); +} +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..3e05757d942 --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonProgressBar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/progress-bar/theming/css-shadow-parts/vue.md b/static/usage/v9/progress-bar/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..c408ee136df --- /dev/null +++ b/static/usage/v9/progress-bar/theming/css-shadow-parts/vue.md @@ -0,0 +1,24 @@ +```html + + + + + +``` diff --git a/static/usage/v9/radio/alignment/angular/example_component_html.md b/static/usage/v9/radio/alignment/angular/example_component_html.md new file mode 100644 index 00000000000..51ebedc3c4c --- /dev/null +++ b/static/usage/v9/radio/alignment/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` diff --git a/static/usage/v9/radio/alignment/angular/example_component_ts.md b/static/usage/v9/radio/alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..f3044cd786b --- /dev/null +++ b/static/usage/v9/radio/alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/alignment/demo.html b/static/usage/v9/radio/alignment/demo.html new file mode 100644 index 00000000000..173204e3a54 --- /dev/null +++ b/static/usage/v9/radio/alignment/demo.html @@ -0,0 +1,34 @@ + + + + + + Radio + + + + + + + + + +
+ + + + Aligned to the Start + + + + + + Aligned to the Center + + + +
+ + + + diff --git a/static/usage/v9/radio/alignment/index.md b/static/usage/v9/radio/alignment/index.md new file mode 100644 index 00000000000..c68fc6aab4d --- /dev/null +++ b/static/usage/v9/radio/alignment/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/alignment/javascript.md b/static/usage/v9/radio/alignment/javascript.md new file mode 100644 index 00000000000..37f54368452 --- /dev/null +++ b/static/usage/v9/radio/alignment/javascript.md @@ -0,0 +1,15 @@ +```html + + + + Aligned to the Start + + + + + + Aligned to the Center + + + +``` diff --git a/static/usage/v9/radio/alignment/react.md b/static/usage/v9/radio/alignment/react.md new file mode 100644 index 00000000000..f7fcb232aea --- /dev/null +++ b/static/usage/v9/radio/alignment/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + + + + Aligned to the Start + + + + + + + + Aligned to the Center + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/alignment/vue.md b/static/usage/v9/radio/alignment/vue.md new file mode 100644 index 00000000000..1a8d117d68e --- /dev/null +++ b/static/usage/v9/radio/alignment/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/basic/angular/example_component_html.md b/static/usage/v9/radio/basic/angular/example_component_html.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v9/radio/basic/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +``` diff --git a/static/usage/v9/radio/basic/angular/example_component_ts.md b/static/usage/v9/radio/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/basic/demo.html b/static/usage/v9/radio/basic/demo.html new file mode 100644 index 00000000000..093b9202674 --- /dev/null +++ b/static/usage/v9/radio/basic/demo.html @@ -0,0 +1,33 @@ + + + + + + Radio + + + + + + + + + + + +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +
+ + + + diff --git a/static/usage/v9/radio/basic/index.md b/static/usage/v9/radio/basic/index.md new file mode 100644 index 00000000000..6b3a122d9bd --- /dev/null +++ b/static/usage/v9/radio/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/basic/javascript.md b/static/usage/v9/radio/basic/javascript.md new file mode 100644 index 00000000000..a8caa3c1973 --- /dev/null +++ b/static/usage/v9/radio/basic/javascript.md @@ -0,0 +1,8 @@ +```html + + Grapes
+ Strawberries
+ Pineapple
+ Cherries + +``` diff --git a/static/usage/v9/radio/basic/react.md b/static/usage/v9/radio/basic/react.md new file mode 100644 index 00000000000..7f8cf4e07f4 --- /dev/null +++ b/static/usage/v9/radio/basic/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + Grapes +
+ Strawberries +
+ Pineapple +
+ Cherries + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/basic/vue.md b/static/usage/v9/radio/basic/vue.md new file mode 100644 index 00000000000..b18ffdf9c6f --- /dev/null +++ b/static/usage/v9/radio/basic/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/empty-selection/angular/example_component_html.md b/static/usage/v9/radio/empty-selection/angular/example_component_html.md new file mode 100644 index 00000000000..61e5c0d4e4b --- /dev/null +++ b/static/usage/v9/radio/empty-selection/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+ +``` diff --git a/static/usage/v9/radio/empty-selection/angular/example_component_ts.md b/static/usage/v9/radio/empty-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/empty-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/empty-selection/demo.html b/static/usage/v9/radio/empty-selection/demo.html new file mode 100644 index 00000000000..ba31bd2f99f --- /dev/null +++ b/static/usage/v9/radio/empty-selection/demo.html @@ -0,0 +1,27 @@ + + + + + + Radio + + + + + + + + + +
+ + Dogs
+ Cats
+ Turtles
+ Fish
+ +
+ + + + diff --git a/static/usage/v9/radio/empty-selection/index.md b/static/usage/v9/radio/empty-selection/index.md new file mode 100644 index 00000000000..a20d218c8b8 --- /dev/null +++ b/static/usage/v9/radio/empty-selection/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/empty-selection/javascript.md b/static/usage/v9/radio/empty-selection/javascript.md new file mode 100644 index 00000000000..0a045fc9bb1 --- /dev/null +++ b/static/usage/v9/radio/empty-selection/javascript.md @@ -0,0 +1,8 @@ +```html + + Dogs
+ Cats
+ Turtles
+ Fish
+ +``` diff --git a/static/usage/v9/radio/empty-selection/react.md b/static/usage/v9/radio/empty-selection/react.md new file mode 100644 index 00000000000..999a230419b --- /dev/null +++ b/static/usage/v9/radio/empty-selection/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + Dogs +
+ Cats +
+ Turtles +
+ Fish +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/empty-selection/vue.md b/static/usage/v9/radio/empty-selection/vue.md new file mode 100644 index 00000000000..87294166e1d --- /dev/null +++ b/static/usage/v9/radio/empty-selection/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/helper-error/angular/example_component_html.md b/static/usage/v9/radio/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..87b06290e49 --- /dev/null +++ b/static/usage/v9/radio/helper-error/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+``` diff --git a/static/usage/v9/radio/helper-error/angular/example_component_ts.md b/static/usage/v9/radio/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..369e1bc3325 --- /dev/null +++ b/static/usage/v9/radio/helper-error/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { IonRadioGroup, IonRadio, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + imports: [IonRadioGroup, IonRadio, IonButton, ReactiveFormsModule], + templateUrl: './example.component.html', + styleUrl: './example.component.css', +}) +export class ExampleComponent { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + favFruit: ['', Validators.required], + }); + } + + onSubmit() { + // Mark the control as touched to trigger the error message. + // This is needed if the user submits the form without interacting + // with the toggle. + this.myForm.get('favFruit')!.markAsTouched(); + } +} +``` diff --git a/static/usage/v9/radio/helper-error/demo.html b/static/usage/v9/radio/helper-error/demo.html new file mode 100644 index 00000000000..15cdf69bd2f --- /dev/null +++ b/static/usage/v9/radio/helper-error/demo.html @@ -0,0 +1,62 @@ + + + + + + Input + + + + + + + + + +
+
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+
+ + + + diff --git a/static/usage/v9/radio/helper-error/index.md b/static/usage/v9/radio/helper-error/index.md new file mode 100644 index 00000000000..dbed711502e --- /dev/null +++ b/static/usage/v9/radio/helper-error/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/helper-error/javascript.md b/static/usage/v9/radio/helper-error/javascript.md new file mode 100644 index 00000000000..64507f303fb --- /dev/null +++ b/static/usage/v9/radio/helper-error/javascript.md @@ -0,0 +1,40 @@ +```html +
+ + Grapes
+ Strawberries
+ Pineapple
+ Cherries + + +
+ + Submit +
+ + +``` diff --git a/static/usage/v9/radio/helper-error/react.md b/static/usage/v9/radio/helper-error/react.md new file mode 100644 index 00000000000..07eabf323c3 --- /dev/null +++ b/static/usage/v9/radio/helper-error/react.md @@ -0,0 +1,58 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonRadioGroup, IonRadio, IonButton, RadioGroupCustomEvent } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const favFruitRef = useRef(null); + + const validateRadioGroup = (event: RadioGroupCustomEvent<{ value: string }>) => { + setIsTouched(true); + setIsValid(event.detail.value ? true : false); + }; + + const submit = (event: React.FormEvent) => { + event.preventDefault(); + + if (favFruitRef.current) { + validateRadioGroup({ detail: { value: favFruitRef.current.value } } as RadioGroupCustomEvent<{ + value: string; + }>); + } + }; + + return ( + <> +
+ validateRadioGroup(event)} + > + Grapes +
+ Strawberries +
+ Pineapple +
+ Cherries + + +
+ + + Submit + +
+ + ); +} + +export default Example; +``` diff --git a/static/usage/v9/radio/helper-error/vue.md b/static/usage/v9/radio/helper-error/vue.md new file mode 100644 index 00000000000..e899a7a5950 --- /dev/null +++ b/static/usage/v9/radio/helper-error/vue.md @@ -0,0 +1,40 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/justify/angular/example_component_html.md b/static/usage/v9/radio/justify/angular/example_component_html.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v9/radio/justify/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` diff --git a/static/usage/v9/radio/justify/angular/example_component_ts.md b/static/usage/v9/radio/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..f3044cd786b --- /dev/null +++ b/static/usage/v9/radio/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/justify/demo.html b/static/usage/v9/radio/justify/demo.html new file mode 100644 index 00000000000..75ca8653f85 --- /dev/null +++ b/static/usage/v9/radio/justify/demo.html @@ -0,0 +1,45 @@ + + + + + + Radio + + + + + + + + + + +
+ + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +
+ + + + diff --git a/static/usage/v9/radio/justify/index.md b/static/usage/v9/radio/justify/index.md new file mode 100644 index 00000000000..c2b2d96e7e1 --- /dev/null +++ b/static/usage/v9/radio/justify/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/justify/javascript.md b/static/usage/v9/radio/justify/javascript.md new file mode 100644 index 00000000000..8ca8e3c568b --- /dev/null +++ b/static/usage/v9/radio/justify/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Packed at the Start of Line + + + + + + Packed at the End of Line + + + + + + Space Between Label and Control + + + +``` diff --git a/static/usage/v9/radio/justify/react.md b/static/usage/v9/radio/justify/react.md new file mode 100644 index 00000000000..0cae0d9191a --- /dev/null +++ b/static/usage/v9/radio/justify/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + + + + + Packed at the Start of Line + + + + + + + + Packed at the End of Line + + + + + + + + Space Between Label and Control + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/justify/vue.md b/static/usage/v9/radio/justify/vue.md new file mode 100644 index 00000000000..e8dbeb82acd --- /dev/null +++ b/static/usage/v9/radio/justify/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/label-placement/angular/example_component_html.md b/static/usage/v9/radio/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..c62acb2938a --- /dev/null +++ b/static/usage/v9/radio/label-placement/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` diff --git a/static/usage/v9/radio/label-placement/angular/example_component_ts.md b/static/usage/v9/radio/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/label-placement/demo.html b/static/usage/v9/radio/label-placement/demo.html new file mode 100644 index 00000000000..9feca78040f --- /dev/null +++ b/static/usage/v9/radio/label-placement/demo.html @@ -0,0 +1,44 @@ + + + + + + Radio + + + + + + + + + +
+
+ + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +
+
+ + + + diff --git a/static/usage/v9/radio/label-placement/index.md b/static/usage/v9/radio/label-placement/index.md new file mode 100644 index 00000000000..202e390ae63 --- /dev/null +++ b/static/usage/v9/radio/label-placement/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/label-placement/javascript.md b/static/usage/v9/radio/label-placement/javascript.md new file mode 100644 index 00000000000..44a731a1fae --- /dev/null +++ b/static/usage/v9/radio/label-placement/javascript.md @@ -0,0 +1,23 @@ +```html + + Label at the Start + + +
+ + + Label at the End + + +
+ + + Fixed Width Label + + +
+ + + Stacked Label + +``` diff --git a/static/usage/v9/radio/label-placement/react.md b/static/usage/v9/radio/label-placement/react.md new file mode 100644 index 00000000000..42eb433075d --- /dev/null +++ b/static/usage/v9/radio/label-placement/react.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + <> + + + Label at the Start + + + +
+ + + + Label at the End + + + +
+ + + + Fixed Width Label + + + +
+ + + + Stacked Label + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/label-placement/vue.md b/static/usage/v9/radio/label-placement/vue.md new file mode 100644 index 00000000000..9fd1f5cda97 --- /dev/null +++ b/static/usage/v9/radio/label-placement/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_css.md b/static/usage/v9/radio/label-wrap/angular/example_component_css.md new file mode 100644 index 00000000000..ec109440a50 --- /dev/null +++ b/static/usage/v9/radio/label-wrap/angular/example_component_css.md @@ -0,0 +1,9 @@ +```css +ion-list { + width: 250px; +} + +ion-radio.wrapped::part(label) { + white-space: normal; +} +``` diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_html.md b/static/usage/v9/radio/label-wrap/angular/example_component_html.md new file mode 100644 index 00000000000..0837d088fab --- /dev/null +++ b/static/usage/v9/radio/label-wrap/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + + Truncated with ellipsis by default + + + Wrapping with text-wrap applied to label shadow part + + + +
Wrapping with ion-text-wrap class applied wrapper element
+ + + + +``` diff --git a/static/usage/v9/radio/label-wrap/angular/example_component_ts.md b/static/usage/v9/radio/label-wrap/angular/example_component_ts.md new file mode 100644 index 00000000000..f3044cd786b --- /dev/null +++ b/static/usage/v9/radio/label-wrap/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/label-wrap/demo.html b/static/usage/v9/radio/label-wrap/demo.html new file mode 100644 index 00000000000..2141ba26a94 --- /dev/null +++ b/static/usage/v9/radio/label-wrap/demo.html @@ -0,0 +1,48 @@ + + + + + + Radio + + + + + + + + + + + +
+ + + + Truncated with ellipsis by default + + + + Wrapping with text-wrap applied to label shadow part + + + + +
Wrapping with ion-text-wrap class applied wrapper element
+ + + + +
+ + + + diff --git a/static/usage/v9/radio/label-wrap/index.md b/static/usage/v9/radio/label-wrap/index.md new file mode 100644 index 00000000000..e5c0c3cb8bf --- /dev/null +++ b/static/usage/v9/radio/label-wrap/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/label-wrap/javascript.md b/static/usage/v9/radio/label-wrap/javascript.md new file mode 100644 index 00000000000..1bce1a8fd7a --- /dev/null +++ b/static/usage/v9/radio/label-wrap/javascript.md @@ -0,0 +1,27 @@ +```html + + + + Truncated with ellipsis by default + + + Wrapping with text-wrap applied to label shadow part + + + +
Wrapping with ion-text-wrap class applied wrapper element
+ + + + + + +``` diff --git a/static/usage/v9/radio/label-wrap/react/main_css.md b/static/usage/v9/radio/label-wrap/react/main_css.md new file mode 100644 index 00000000000..ec109440a50 --- /dev/null +++ b/static/usage/v9/radio/label-wrap/react/main_css.md @@ -0,0 +1,9 @@ +```css +ion-list { + width: 250px; +} + +ion-radio.wrapped::part(label) { + white-space: normal; +} +``` diff --git a/static/usage/v9/radio/label-wrap/react/main_tsx.md b/static/usage/v9/radio/label-wrap/react/main_tsx.md new file mode 100644 index 00000000000..25b4d4618dc --- /dev/null +++ b/static/usage/v9/radio/label-wrap/react/main_tsx.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + Truncated with ellipsis by default + + + + Wrapping with text-wrap applied to label shadow part + + + + +
Wrapping with ion-text-wrap class applied wrapper element
+ + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/label-wrap/vue.md b/static/usage/v9/radio/label-wrap/vue.md new file mode 100644 index 00000000000..70510f8787a --- /dev/null +++ b/static/usage/v9/radio/label-wrap/vue.md @@ -0,0 +1,33 @@ +```html + + + + + +``` diff --git a/static/usage/v9/radio/theming/colors/angular/example_component_html.md b/static/usage/v9/radio/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v9/radio/theming/colors/angular/example_component_html.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/radio/theming/colors/angular/example_component_ts.md b/static/usage/v9/radio/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/theming/colors/demo.html b/static/usage/v9/radio/theming/colors/demo.html new file mode 100644 index 00000000000..7a4604744bb --- /dev/null +++ b/static/usage/v9/radio/theming/colors/demo.html @@ -0,0 +1,48 @@ + + + + + + Radio + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/radio/theming/colors/index.md b/static/usage/v9/radio/theming/colors/index.md new file mode 100644 index 00000000000..0409697e730 --- /dev/null +++ b/static/usage/v9/radio/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/theming/colors/javascript.md b/static/usage/v9/radio/theming/colors/javascript.md new file mode 100644 index 00000000000..d3389196bfa --- /dev/null +++ b/static/usage/v9/radio/theming/colors/javascript.md @@ -0,0 +1,29 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/radio/theming/colors/react.md b/static/usage/v9/radio/theming/colors/react.md new file mode 100644 index 00000000000..cccf60c87da --- /dev/null +++ b/static/usage/v9/radio/theming/colors/react.md @@ -0,0 +1,39 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/theming/colors/vue.md b/static/usage/v9/radio/theming/colors/vue.md new file mode 100644 index 00000000000..0e30c02f2e5 --- /dev/null +++ b/static/usage/v9/radio/theming/colors/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..fa96171282e --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,21 @@ +```css +ion-radio { + --border-radius: 4px; + --inner-border-radius: 4px; + + --color: #ddd; + --color-checked: #6815ec; +} + +ion-radio.ios::part(container) { + width: 20px; + height: 20px; + + border: 2px solid #ddd; + border-radius: 4px; +} + +.radio-checked.ios::part(container) { + border-color: #6815ec; +} +``` diff --git a/static/usage/v9/radio/theming/css-properties/angular/example_component_html.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31e21f3f19b --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/theming/css-properties/demo.html b/static/usage/v9/radio/theming/css-properties/demo.html new file mode 100644 index 00000000000..349e869aa18 --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/demo.html @@ -0,0 +1,47 @@ + + + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/radio/theming/css-properties/index.md b/static/usage/v9/radio/theming/css-properties/index.md new file mode 100644 index 00000000000..fdf93d9b389 --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/theming/css-properties/javascript.md b/static/usage/v9/radio/theming/css-properties/javascript.md new file mode 100644 index 00000000000..d61629a5d9b --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/javascript.md @@ -0,0 +1,28 @@ +```html + + + + + + +``` diff --git a/static/usage/v9/radio/theming/css-properties/react/main_css.md b/static/usage/v9/radio/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..fa96171282e --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/react/main_css.md @@ -0,0 +1,21 @@ +```css +ion-radio { + --border-radius: 4px; + --inner-border-radius: 4px; + + --color: #ddd; + --color-checked: #6815ec; +} + +ion-radio.ios::part(container) { + width: 20px; + height: 20px; + + border: 2px solid #ddd; + border-radius: 4px; +} + +.radio-checked.ios::part(container) { + border-color: #6815ec; +} +``` diff --git a/static/usage/v9/radio/theming/css-properties/react/main_tsx.md b/static/usage/v9/radio/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..2a0c72670a3 --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/theming/css-properties/vue.md b/static/usage/v9/radio/theming/css-properties/vue.md new file mode 100644 index 00000000000..fa35772db41 --- /dev/null +++ b/static/usage/v9/radio/theming/css-properties/vue.md @@ -0,0 +1,34 @@ +```html + + + + + +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..ed13071b193 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,32 @@ +```css +ion-radio::part(container) { + width: 30px; + height: 30px; + + border-radius: 8px; + border: 2px solid #ddd; +} + +ion-radio::part(mark) { + background: none; + transition: none; + transform: none; + border-radius: 0; +} + +ion-radio.radio-checked::part(container) { + background: #6815ec; + border-color: transparent; +} + +ion-radio.radio-checked::part(mark) { + width: 6px; + height: 10px; + + border-width: 0px 2px 2px 0px; + border-style: solid; + border-color: #fff; + + transform: rotate(45deg); +} +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..31e21f3f19b --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..52b3dc6fef4 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRadio, IonRadioGroup } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRadio, IonRadioGroup], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/demo.html b/static/usage/v9/radio/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..a8412932acf --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/demo.html @@ -0,0 +1,58 @@ + + + + + + Radio + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/radio/theming/css-shadow-parts/index.md b/static/usage/v9/radio/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..423eb2250e5 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/theming/css-shadow-parts/javascript.md b/static/usage/v9/radio/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..537f1c58d7a --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/javascript.md @@ -0,0 +1,39 @@ +```html + + + + + + +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..ed13071b193 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,32 @@ +```css +ion-radio::part(container) { + width: 30px; + height: 30px; + + border-radius: 8px; + border: 2px solid #ddd; +} + +ion-radio::part(mark) { + background: none; + transition: none; + transform: none; + border-radius: 0; +} + +ion-radio.radio-checked::part(container) { + background: #6815ec; + border-color: transparent; +} + +ion-radio.radio-checked::part(mark) { + width: 6px; + height: 10px; + + border-width: 0px 2px 2px 0px; + border-style: solid; + border-color: #fff; + + transform: rotate(45deg); +} +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..2a0c72670a3 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonRadio, IonRadioGroup } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/theming/css-shadow-parts/vue.md b/static/usage/v9/radio/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..d6b83eef631 --- /dev/null +++ b/static/usage/v9/radio/theming/css-shadow-parts/vue.md @@ -0,0 +1,45 @@ +```html + + + + + +``` diff --git a/static/usage/v9/radio/using-comparewith/angular/example_component_html.md b/static/usage/v9/radio/using-comparewith/angular/example_component_html.md new file mode 100644 index 00000000000..e80e73021d7 --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + @for (food of foods; track food.id) { + + {{ food.name }} + + } + + +``` diff --git a/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md b/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md new file mode 100644 index 00000000000..4df9095059a --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/angular/example_component_ts.md @@ -0,0 +1,45 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular'; + +interface Food { + id: number; + name: string; + type: string; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonRadio, IonRadioGroup], +}) +export class ExampleComponent { + foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1: Food, o2: Food): boolean { + return o1.id === o2.id; + } + + handleChange(event: Event): void { + const target = event.target as HTMLInputElement; + console.log('Current value:', JSON.stringify(target.value)); + } +} +``` diff --git a/static/usage/v9/radio/using-comparewith/demo.html b/static/usage/v9/radio/using-comparewith/demo.html new file mode 100644 index 00000000000..5babdc3581d --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/demo.html @@ -0,0 +1,67 @@ + + + + + + Radio + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v9/radio/using-comparewith/index.md b/static/usage/v9/radio/using-comparewith/index.md new file mode 100644 index 00000000000..b37703d02dc --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/radio/using-comparewith/javascript.md b/static/usage/v9/radio/using-comparewith/javascript.md new file mode 100644 index 00000000000..8dd2130b3e8 --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/javascript.md @@ -0,0 +1,48 @@ +```html + + + + + +``` diff --git a/static/usage/v9/radio/using-comparewith/react.md b/static/usage/v9/radio/using-comparewith/react.md new file mode 100644 index 00000000000..bbecd62f841 --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/react.md @@ -0,0 +1,52 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + return o1.id === o2.id; +}; + +function Example() { + return ( + + console.log('Current value:', JSON.stringify(event.detail.value))} + > + {foods.map((food) => ( + + + {food.name} + + + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/radio/using-comparewith/vue.md b/static/usage/v9/radio/using-comparewith/vue.md new file mode 100644 index 00000000000..d698017d98d --- /dev/null +++ b/static/usage/v9/radio/using-comparewith/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v9/range/basic/angular/example_component_html.md b/static/usage/v9/range/basic/angular/example_component_html.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v9/range/basic/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/basic/angular/example_component_ts.md b/static/usage/v9/range/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/basic/demo.html b/static/usage/v9/range/basic/demo.html new file mode 100644 index 00000000000..6ea180f8cba --- /dev/null +++ b/static/usage/v9/range/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/range/basic/index.md b/static/usage/v9/range/basic/index.md new file mode 100644 index 00000000000..93ca192a852 --- /dev/null +++ b/static/usage/v9/range/basic/index.md @@ -0,0 +1,26 @@ +# TODO FW-4608 + +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/basic/javascript.md b/static/usage/v9/range/basic/javascript.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v9/range/basic/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/basic/react.md b/static/usage/v9/range/basic/react.md new file mode 100644 index 00000000000..ed85af943b5 --- /dev/null +++ b/static/usage/v9/range/basic/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/range/basic/vue.md b/static/usage/v9/range/basic/vue.md new file mode 100644 index 00000000000..9738be08d9f --- /dev/null +++ b/static/usage/v9/range/basic/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/range/dual-knobs/angular/example_component_html.md b/static/usage/v9/range/dual-knobs/angular/example_component_html.md new file mode 100644 index 00000000000..96eb2e59a0e --- /dev/null +++ b/static/usage/v9/range/dual-knobs/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/dual-knobs/angular/example_component_ts.md b/static/usage/v9/range/dual-knobs/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/dual-knobs/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/dual-knobs/demo.html b/static/usage/v9/range/dual-knobs/demo.html new file mode 100644 index 00000000000..f33e710c3a3 --- /dev/null +++ b/static/usage/v9/range/dual-knobs/demo.html @@ -0,0 +1,34 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v9/range/dual-knobs/index.md b/static/usage/v9/range/dual-knobs/index.md new file mode 100644 index 00000000000..fd076c02f77 --- /dev/null +++ b/static/usage/v9/range/dual-knobs/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/dual-knobs/javascript.md b/static/usage/v9/range/dual-knobs/javascript.md new file mode 100644 index 00000000000..3c182c98e5b --- /dev/null +++ b/static/usage/v9/range/dual-knobs/javascript.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/range/dual-knobs/react.md b/static/usage/v9/range/dual-knobs/react.md new file mode 100644 index 00000000000..cdc8fb17534 --- /dev/null +++ b/static/usage/v9/range/dual-knobs/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/dual-knobs/vue.md b/static/usage/v9/range/dual-knobs/vue.md new file mode 100644 index 00000000000..92193c19c83 --- /dev/null +++ b/static/usage/v9/range/dual-knobs/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/range/ion-change-event/angular/example_component_html.md b/static/usage/v9/range/ion-change-event/angular/example_component_html.md new file mode 100644 index 00000000000..bbcbd120285 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/ion-change-event/angular/example_component_ts.md b/static/usage/v9/range/ion-change-event/angular/example_component_ts.md new file mode 100644 index 00000000000..5278a9f09e5 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange, RangeCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent { + onIonChange(event: RangeCustomEvent) { + console.log('ionChange emitted value:', event.detail.value); + } +} +``` diff --git a/static/usage/v9/range/ion-change-event/demo.html b/static/usage/v9/range/ion-change-event/demo.html new file mode 100644 index 00000000000..05e8f25fd12 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/demo.html @@ -0,0 +1,37 @@ + + + + + + Range + + + + + + + + + + +
+
+ +
+
+ + + + + diff --git a/static/usage/v9/range/ion-change-event/index.md b/static/usage/v9/range/ion-change-event/index.md new file mode 100644 index 00000000000..25067bc63e9 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/ion-change-event/javascript.md b/static/usage/v9/range/ion-change-event/javascript.md new file mode 100644 index 00000000000..25507306a55 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/javascript.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/range/ion-change-event/react.md b/static/usage/v9/range/ion-change-event/react.md new file mode 100644 index 00000000000..d49b2adb596 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +function Example() { + return ( + console.log('ionChange emitted value: ' + detail.value)} + > + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/ion-change-event/vue.md b/static/usage/v9/range/ion-change-event/vue.md new file mode 100644 index 00000000000..d9f83a4c2b4 --- /dev/null +++ b/static/usage/v9/range/ion-change-event/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md new file mode 100644 index 00000000000..aa044d03b66 --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + +``` diff --git a/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md b/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md new file mode 100644 index 00000000000..a59cac3ba11 --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/angular/example_component_ts.md @@ -0,0 +1,20 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange, RangeCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent { + onIonKnobMoveStart(event: RangeCustomEvent) { + console.log('ionKnobMoveStart:', event.detail.value); + } + + onIonKnobMoveEnd(event: RangeCustomEvent) { + console.log('ionKnobMoveEnd:', event.detail.value); + } +} +``` diff --git a/static/usage/v9/range/ion-knob-move-event/demo.html b/static/usage/v9/range/ion-knob-move-event/demo.html new file mode 100644 index 00000000000..3613382516c --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/demo.html @@ -0,0 +1,41 @@ + + + + + + Range + + + + + + + + + + +
+
+ +
+
+ + + + + diff --git a/static/usage/v9/range/ion-knob-move-event/index.md b/static/usage/v9/range/ion-knob-move-event/index.md new file mode 100644 index 00000000000..7abe6e655c7 --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/ion-knob-move-event/javascript.md b/static/usage/v9/range/ion-knob-move-event/javascript.md new file mode 100644 index 00000000000..5f7389814ba --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/javascript.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v9/range/ion-knob-move-event/react.md b/static/usage/v9/range/ion-knob-move-event/react.md new file mode 100644 index 00000000000..7085cc5c3b7 --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +function Example() { + return ( + console.log('ionKnobMoveStart:', detail.value)} + onIonKnobMoveEnd={({ detail }) => console.log('ionKnobMoveEnd:', detail.value)} + > + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/ion-knob-move-event/vue.md b/static/usage/v9/range/ion-knob-move-event/vue.md new file mode 100644 index 00000000000..6c74d47b808 --- /dev/null +++ b/static/usage/v9/range/ion-knob-move-event/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/range/label-slot/angular/example_component_html.md b/static/usage/v9/range/label-slot/angular/example_component_html.md new file mode 100644 index 00000000000..a1942046521 --- /dev/null +++ b/static/usage/v9/range/label-slot/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + +
Label with custom HTML
+ +``` diff --git a/static/usage/v9/range/label-slot/angular/example_component_ts.md b/static/usage/v9/range/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..8832fea6720 --- /dev/null +++ b/static/usage/v9/range/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange, IonText } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/label-slot/demo.html b/static/usage/v9/range/label-slot/demo.html new file mode 100644 index 00000000000..c55cd3b0cc5 --- /dev/null +++ b/static/usage/v9/range/label-slot/demo.html @@ -0,0 +1,29 @@ + + + + + + Range + + + + + + + + + + +
+ +
Label with custom HTML
+ +
+ + + + diff --git a/static/usage/v9/range/label-slot/index.md b/static/usage/v9/range/label-slot/index.md new file mode 100644 index 00000000000..6983e5bc33d --- /dev/null +++ b/static/usage/v9/range/label-slot/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/label-slot/javascript.md b/static/usage/v9/range/label-slot/javascript.md new file mode 100644 index 00000000000..a1942046521 --- /dev/null +++ b/static/usage/v9/range/label-slot/javascript.md @@ -0,0 +1,5 @@ +```html + +
Label with custom HTML
+ +``` diff --git a/static/usage/v9/range/label-slot/react.md b/static/usage/v9/range/label-slot/react.md new file mode 100644 index 00000000000..8a3e4a8a07d --- /dev/null +++ b/static/usage/v9/range/label-slot/react.md @@ -0,0 +1,14 @@ +```tsx +import React from 'react'; +import { IonRange, IonText } from '@ionic/react'; +function Example() { + return ( + +
+ Label with custom HTML +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/label-slot/vue.md b/static/usage/v9/range/label-slot/vue.md new file mode 100644 index 00000000000..5d6d579ac74 --- /dev/null +++ b/static/usage/v9/range/label-slot/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/range/labels/angular/example_component_html.md b/static/usage/v9/range/labels/angular/example_component_html.md new file mode 100644 index 00000000000..24c92babb74 --- /dev/null +++ b/static/usage/v9/range/labels/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + +
+ + + +
+ + + +
+ + +``` diff --git a/static/usage/v9/range/labels/angular/example_component_ts.md b/static/usage/v9/range/labels/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/labels/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/labels/demo.html b/static/usage/v9/range/labels/demo.html new file mode 100644 index 00000000000..723b04abdfc --- /dev/null +++ b/static/usage/v9/range/labels/demo.html @@ -0,0 +1,41 @@ + + + + + + Range + + + + + + + + + + +
+
+ + +
+ + + +
+ + + +
+ + +
+
+ + + + diff --git a/static/usage/v9/range/labels/index.md b/static/usage/v9/range/labels/index.md new file mode 100644 index 00000000000..099a87f8c7e --- /dev/null +++ b/static/usage/v9/range/labels/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/labels/javascript.md b/static/usage/v9/range/labels/javascript.md new file mode 100644 index 00000000000..88bf7ff3464 --- /dev/null +++ b/static/usage/v9/range/labels/javascript.md @@ -0,0 +1,15 @@ +```html + + +
+ + + +
+ + + +
+ + +``` diff --git a/static/usage/v9/range/labels/react.md b/static/usage/v9/range/labels/react.md new file mode 100644 index 00000000000..50799aa3d3b --- /dev/null +++ b/static/usage/v9/range/labels/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ( + <> + + +
+ + + +
+ + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/labels/vue.md b/static/usage/v9/range/labels/vue.md new file mode 100644 index 00000000000..6083e60b2d6 --- /dev/null +++ b/static/usage/v9/range/labels/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/range/no-visible-label/angular/example_component_html.md b/static/usage/v9/range/no-visible-label/angular/example_component_html.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v9/range/no-visible-label/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/no-visible-label/angular/example_component_ts.md b/static/usage/v9/range/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/no-visible-label/demo.html b/static/usage/v9/range/no-visible-label/demo.html new file mode 100644 index 00000000000..6ea180f8cba --- /dev/null +++ b/static/usage/v9/range/no-visible-label/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/range/no-visible-label/index.md b/static/usage/v9/range/no-visible-label/index.md new file mode 100644 index 00000000000..b6edaea741e --- /dev/null +++ b/static/usage/v9/range/no-visible-label/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/no-visible-label/javascript.md b/static/usage/v9/range/no-visible-label/javascript.md new file mode 100644 index 00000000000..ea96f2e2dd3 --- /dev/null +++ b/static/usage/v9/range/no-visible-label/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/no-visible-label/react.md b/static/usage/v9/range/no-visible-label/react.md new file mode 100644 index 00000000000..ed85af943b5 --- /dev/null +++ b/static/usage/v9/range/no-visible-label/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/range/no-visible-label/vue.md b/static/usage/v9/range/no-visible-label/vue.md new file mode 100644 index 00000000000..9738be08d9f --- /dev/null +++ b/static/usage/v9/range/no-visible-label/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/range/pins/angular/example_component_html.md b/static/usage/v9/range/pins/angular/example_component_html.md new file mode 100644 index 00000000000..f27f095a636 --- /dev/null +++ b/static/usage/v9/range/pins/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/pins/angular/example_component_ts.md b/static/usage/v9/range/pins/angular/example_component_ts.md new file mode 100644 index 00000000000..517f6b0eb34 --- /dev/null +++ b/static/usage/v9/range/pins/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent { + pinFormatter(value: number) { + return `${value}%`; + } +} +``` diff --git a/static/usage/v9/range/pins/demo.html b/static/usage/v9/range/pins/demo.html new file mode 100644 index 00000000000..0900182fe62 --- /dev/null +++ b/static/usage/v9/range/pins/demo.html @@ -0,0 +1,33 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v9/range/pins/index.md b/static/usage/v9/range/pins/index.md new file mode 100644 index 00000000000..a928a820c53 --- /dev/null +++ b/static/usage/v9/range/pins/index.md @@ -0,0 +1,24 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/range/pins/javascript.md b/static/usage/v9/range/pins/javascript.md new file mode 100644 index 00000000000..494da8ff806 --- /dev/null +++ b/static/usage/v9/range/pins/javascript.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/range/pins/react.md b/static/usage/v9/range/pins/react.md new file mode 100644 index 00000000000..478d3cd20ed --- /dev/null +++ b/static/usage/v9/range/pins/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return `${value}%`}>; +} +export default Example; +``` diff --git a/static/usage/v9/range/pins/vue.md b/static/usage/v9/range/pins/vue.md new file mode 100644 index 00000000000..19d1146121a --- /dev/null +++ b/static/usage/v9/range/pins/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/range/slots/angular/example_component_html.md b/static/usage/v9/range/slots/angular/example_component_html.md new file mode 100644 index 00000000000..253663f6c6e --- /dev/null +++ b/static/usage/v9/range/slots/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/range/slots/angular/example_component_ts.md b/static/usage/v9/range/slots/angular/example_component_ts.md new file mode 100644 index 00000000000..01bd2dc2365 --- /dev/null +++ b/static/usage/v9/range/slots/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonRange } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { snowOutline, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonRange], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ snowOutline, sunnyOutline }); + } +} +``` diff --git a/static/usage/v9/range/slots/demo.html b/static/usage/v9/range/slots/demo.html new file mode 100644 index 00000000000..c1282a6af00 --- /dev/null +++ b/static/usage/v9/range/slots/demo.html @@ -0,0 +1,30 @@ + + + + + + Range + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/range/slots/index.md b/static/usage/v9/range/slots/index.md new file mode 100644 index 00000000000..10dabbc5b2c --- /dev/null +++ b/static/usage/v9/range/slots/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/slots/javascript/index_html.md b/static/usage/v9/range/slots/javascript/index_html.md new file mode 100644 index 00000000000..253663f6c6e --- /dev/null +++ b/static/usage/v9/range/slots/javascript/index_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/range/slots/javascript/index_ts.md b/static/usage/v9/range/slots/javascript/index_ts.md new file mode 100644 index 00000000000..8e885c82ebe --- /dev/null +++ b/static/usage/v9/range/slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { snowOutline, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'snow-outline': snowOutline, 'sunny-outline': sunnyOutline }); + */ +addIcons({ snowOutline, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/range/slots/react.md b/static/usage/v9/range/slots/react.md new file mode 100644 index 00000000000..36a5228d0a1 --- /dev/null +++ b/static/usage/v9/range/slots/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonRange, IonIcon } from '@ionic/react'; +import { snowOutline, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/range/slots/vue.md b/static/usage/v9/range/slots/vue.md new file mode 100644 index 00000000000..d54935dc574 --- /dev/null +++ b/static/usage/v9/range/slots/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/range/snapping-ticks/angular/example_component_html.md b/static/usage/v9/range/snapping-ticks/angular/example_component_html.md new file mode 100644 index 00000000000..d52f5e4b119 --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/snapping-ticks/angular/example_component_ts.md b/static/usage/v9/range/snapping-ticks/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/snapping-ticks/demo.html b/static/usage/v9/range/snapping-ticks/demo.html new file mode 100644 index 00000000000..4ccb446bf09 --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/demo.html @@ -0,0 +1,27 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/range/snapping-ticks/index.md b/static/usage/v9/range/snapping-ticks/index.md new file mode 100644 index 00000000000..42a47e2368c --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/snapping-ticks/javascript.md b/static/usage/v9/range/snapping-ticks/javascript.md new file mode 100644 index 00000000000..692bb3840a1 --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/javascript.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/snapping-ticks/react.md b/static/usage/v9/range/snapping-ticks/react.md new file mode 100644 index 00000000000..aeeb784cfe6 --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/react.md @@ -0,0 +1,8 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/range/snapping-ticks/vue.md b/static/usage/v9/range/snapping-ticks/vue.md new file mode 100644 index 00000000000..f90e014f14d --- /dev/null +++ b/static/usage/v9/range/snapping-ticks/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/range/theming/css-properties/angular/example_component_css.md b/static/usage/v9/range/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..bcc87bbf1b4 --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +ion-range { + --bar-background: #a2d2ff; + --bar-background-active: #bde0fe; + --bar-height: 8px; + --bar-border-radius: 8px; + --knob-background: #ffc8dd; + --knob-size: 40px; + --pin-background: #ffafcc; + --pin-color: #fff; +} +``` diff --git a/static/usage/v9/range/theming/css-properties/angular/example_component_html.md b/static/usage/v9/range/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..6c9011af30a --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/range/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/range/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/theming/css-properties/demo.html b/static/usage/v9/range/theming/css-properties/demo.html new file mode 100644 index 00000000000..ef65494795f --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/demo.html @@ -0,0 +1,36 @@ + + + + + + Range + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/range/theming/css-properties/index.md b/static/usage/v9/range/theming/css-properties/index.md new file mode 100644 index 00000000000..9c437655d21 --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/theming/css-properties/javascript.md b/static/usage/v9/range/theming/css-properties/javascript.md new file mode 100644 index 00000000000..790f13b53e2 --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/range/theming/css-properties/react/main_css.md b/static/usage/v9/range/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..bcc87bbf1b4 --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/react/main_css.md @@ -0,0 +1,12 @@ +```css +ion-range { + --bar-background: #a2d2ff; + --bar-background-active: #bde0fe; + --bar-height: 8px; + --bar-border-radius: 8px; + --knob-background: #ffc8dd; + --knob-size: 40px; + --pin-background: #ffafcc; + --pin-color: #fff; +} +``` diff --git a/static/usage/v9/range/theming/css-properties/react/main_tsx.md b/static/usage/v9/range/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..958999027ab --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/range/theming/css-properties/vue.md b/static/usage/v9/range/theming/css-properties/vue.md new file mode 100644 index 00000000000..496cdfca8cd --- /dev/null +++ b/static/usage/v9/range/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..2c6bf85e09e --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,114 @@ +```css +/* Shared styles for all ranges */ +ion-range { + --knob-size: 34px; +} + +ion-range::part(knob) { + background: #fff; + + box-sizing: border-box; +} + +/* Hide the Material Design indicator */ +ion-range::part(knob)::before { + display: none; +} + +ion-range::part(pin) { + color: #fff; + border-radius: 50%; +} + +ion-range::part(tick), +ion-range::part(tick-active) { + height: 8px; + top: 17px; +} + +/* Single Knob Range */ +#range-single::part(bar), +#range-single::part(tick) { + background: #bed4ff; +} + +#range-single::part(bar-active), +#range-single::part(tick-active) { + background: #40a2fd; +} + +#range-single::part(knob) { + border: 4px solid #40a2fd; +} + +#range-single::part(knob pressed) { + background: #bed4ff; +} + +#range-single::part(pin), +#range-single::part(pin)::before { + background: #40a2fd; +} + +/* Dual Knobs (A/B) Range */ +#range-a-b::part(bar-active) { + background: #1ea9ca; +} + +#range-a-b::part(knob-a) { + border: 4px solid #0f8fd6; +} + +#range-a-b::part(knob-a pressed) { + background: #cfeefe; +} + +#range-a-b::part(pin-a), +#range-a-b::part(pin-a)::before { + background: #0f8fd6; +} + +#range-a-b::part(knob-b) { + border: 4px solid #2dc2bd; +} + +#range-a-b::part(knob-b pressed) { + background: #d4f5f3; +} + +#range-a-b::part(pin-b), +#range-a-b::part(pin-b)::before { + background: #2dc2bd; +} + +/* Dual Knobs (Lower/Upper) Range */ +#range-lower-upper::part(bar-active) { + background: linear-gradient(to right, #0059ff 0%, #b77bff 100%); +} + +#range-lower-upper::part(knob-lower) { + border: 4px solid #0059ff; +} + +#range-lower-upper::part(knob-lower pressed) { + background: #bed4ff; +} + +#range-lower-upper::part(pin-lower), +#range-lower-upper::part(pin-lower)::before { + background: #0059ff; +} + +#range-lower-upper::part(knob-upper) { + border: 4px solid #b77bff; +} + +#range-lower-upper::part(knob-upper pressed) { + background: #f1e5ff; +} + +#range-lower-upper::part(pin-upper), +#range-lower-upper::part(pin-upper)::before { + background: #b77bff; +} +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..eaee00e99c6 --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,35 @@ +```html +

Single Knob

+ + +

Dual Knobs (A/B)

+ + +

Dual Knobs (Lower/Upper)

+ +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..a4870355d9a --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRange } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRange], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/demo.html b/static/usage/v9/range/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..f4d74237093 --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/demo.html @@ -0,0 +1,185 @@ + + + + + + Range + + + + + + + + + + +
+

Single Knob

+ + +

Dual Knobs (A/B)

+ + +

Dual Knobs (Lower/Upper)

+ +
+ + + + + + diff --git a/static/usage/v9/range/theming/css-shadow-parts/index.md b/static/usage/v9/range/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..9da9df59dd7 --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/range/theming/css-shadow-parts/javascript.md b/static/usage/v9/range/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..0730872932c --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/javascript.md @@ -0,0 +1,158 @@ +```html +

Single Knob

+ + +

Dual Knobs (A/B)

+ + +

Dual Knobs (Lower/Upper)

+ + + + + +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/range/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..2c6bf85e09e --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,114 @@ +```css +/* Shared styles for all ranges */ +ion-range { + --knob-size: 34px; +} + +ion-range::part(knob) { + background: #fff; + + box-sizing: border-box; +} + +/* Hide the Material Design indicator */ +ion-range::part(knob)::before { + display: none; +} + +ion-range::part(pin) { + color: #fff; + border-radius: 50%; +} + +ion-range::part(tick), +ion-range::part(tick-active) { + height: 8px; + top: 17px; +} + +/* Single Knob Range */ +#range-single::part(bar), +#range-single::part(tick) { + background: #bed4ff; +} + +#range-single::part(bar-active), +#range-single::part(tick-active) { + background: #40a2fd; +} + +#range-single::part(knob) { + border: 4px solid #40a2fd; +} + +#range-single::part(knob pressed) { + background: #bed4ff; +} + +#range-single::part(pin), +#range-single::part(pin)::before { + background: #40a2fd; +} + +/* Dual Knobs (A/B) Range */ +#range-a-b::part(bar-active) { + background: #1ea9ca; +} + +#range-a-b::part(knob-a) { + border: 4px solid #0f8fd6; +} + +#range-a-b::part(knob-a pressed) { + background: #cfeefe; +} + +#range-a-b::part(pin-a), +#range-a-b::part(pin-a)::before { + background: #0f8fd6; +} + +#range-a-b::part(knob-b) { + border: 4px solid #2dc2bd; +} + +#range-a-b::part(knob-b pressed) { + background: #d4f5f3; +} + +#range-a-b::part(pin-b), +#range-a-b::part(pin-b)::before { + background: #2dc2bd; +} + +/* Dual Knobs (Lower/Upper) Range */ +#range-lower-upper::part(bar-active) { + background: linear-gradient(to right, #0059ff 0%, #b77bff 100%); +} + +#range-lower-upper::part(knob-lower) { + border: 4px solid #0059ff; +} + +#range-lower-upper::part(knob-lower pressed) { + background: #bed4ff; +} + +#range-lower-upper::part(pin-lower), +#range-lower-upper::part(pin-lower)::before { + background: #0059ff; +} + +#range-lower-upper::part(knob-upper) { + border: 4px solid #b77bff; +} + +#range-lower-upper::part(knob-upper pressed) { + background: #f1e5ff; +} + +#range-lower-upper::part(pin-upper), +#range-lower-upper::part(pin-upper)::before { + background: #b77bff; +} +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/range/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..a48f62e3a09 --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,48 @@ +```tsx +import React from 'react'; +import { IonRange } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> +

Single Knob

+ + +

Dual Knobs (A/B)

+ + +

Dual Knobs (Lower/Upper)

+ + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/range/theming/css-shadow-parts/vue.md b/static/usage/v9/range/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..09528691310 --- /dev/null +++ b/static/usage/v9/range/theming/css-shadow-parts/vue.md @@ -0,0 +1,156 @@ +```html + + + + + +``` diff --git a/static/usage/v9/refresher/advanced/angular/example_component_css.md b/static/usage/v9/refresher/advanced/angular/example_component_css.md new file mode 100644 index 00000000000..102c69d71f9 --- /dev/null +++ b/static/usage/v9/refresher/advanced/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +ion-item { + --padding-start: 8px; +} + +ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; +} +``` diff --git a/static/usage/v9/refresher/advanced/angular/example_component_html.md b/static/usage/v9/refresher/advanced/angular/example_component_html.md new file mode 100644 index 00000000000..46c550b5f72 --- /dev/null +++ b/static/usage/v9/refresher/advanced/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + Pull to Refresh + + + + + + + + + + @for (item of items(); track item) { + + + +

{{ item.name }}

+

New message from {{ item.name }}

+ + + } + + +``` diff --git a/static/usage/v9/refresher/advanced/angular/example_component_ts.md b/static/usage/v9/refresher/advanced/angular/example_component_ts.md new file mode 100644 index 00000000000..98479a8e528 --- /dev/null +++ b/static/usage/v9/refresher/advanced/angular/example_component_ts.md @@ -0,0 +1,95 @@ +```ts +import { Component, signal } from '@angular/core'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { ellipse } from 'ionicons/icons'; + +interface Item { + name: string; + unread: boolean; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [ + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + public names = [ + 'Burt Bear', + 'Charlie Cheetah', + 'Donald Duck', + 'Eva Eagle', + 'Ellie Elephant', + 'Gino Giraffe', + 'Isabella Iguana', + 'Karl Kitten', + 'Lionel Lion', + 'Molly Mouse', + 'Paul Puppy', + 'Rachel Rabbit', + 'Ted Turtle', + ]; + readonly items = signal([]); + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ ellipse }); + } + + ngOnInit() { + this.addItems(5); + } + + chooseRandomName() { + return this.names[Math.floor(Math.random() * this.names.length)]; + } + + addItems(count: number, unread = false) { + const newItems: Item[] = []; + for (let i = 0; i < count; i++) { + newItems.unshift({ + name: this.chooseRandomName(), + unread: unread, + }); + } + this.items.update((items) => [...newItems, ...items]); + } + + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + this.addItems(3, true); + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/advanced/demo.html b/static/usage/v9/refresher/advanced/demo.html new file mode 100644 index 00000000000..43e2acd0868 --- /dev/null +++ b/static/usage/v9/refresher/advanced/demo.html @@ -0,0 +1,97 @@ + + + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + + + + + + + + diff --git a/static/usage/v9/refresher/advanced/index.md b/static/usage/v9/refresher/advanced/index.md new file mode 100644 index 00000000000..b5d7baabdc9 --- /dev/null +++ b/static/usage/v9/refresher/advanced/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/refresher/advanced/javascript/index_html.md b/static/usage/v9/refresher/advanced/javascript/index_html.md new file mode 100644 index 00000000000..9e0ba6f76ed --- /dev/null +++ b/static/usage/v9/refresher/advanced/javascript/index_html.md @@ -0,0 +1,82 @@ +```html + + + Pull to Refresh + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/refresher/advanced/javascript/index_ts.md b/static/usage/v9/refresher/advanced/javascript/index_ts.md new file mode 100644 index 00000000000..49796c8ebf1 --- /dev/null +++ b/static/usage/v9/refresher/advanced/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { ellipse } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to an "ellipse" key. + * Alternatively, developers can do: + * addIcons({ 'ellipse': ellipse }); + */ +addIcons({ ellipse }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/refresher/advanced/react/main_css.md b/static/usage/v9/refresher/advanced/react/main_css.md new file mode 100644 index 00000000000..102c69d71f9 --- /dev/null +++ b/static/usage/v9/refresher/advanced/react/main_css.md @@ -0,0 +1,11 @@ +```css +ion-item { + --padding-start: 8px; +} + +ion-icon { + font-size: 12px; + align-self: start; + margin: 15px 8px; +} +``` diff --git a/static/usage/v9/refresher/advanced/react/main_tsx.md b/static/usage/v9/refresher/advanced/react/main_tsx.md new file mode 100644 index 00000000000..2ddb57ac50a --- /dev/null +++ b/static/usage/v9/refresher/advanced/react/main_tsx.md @@ -0,0 +1,93 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/react'; +import { ellipse } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const names = [ + 'Burt Bear', + 'Charlie Cheetah', + 'Donald Duck', + 'Eva Eagle', + 'Ellie Elephant', + 'Gino Giraffe', + 'Isabella Iguana', + 'Karl Kitten', + 'Lionel Lion', + 'Molly Mouse', + 'Paul Puppy', + 'Rachel Rabbit', + 'Ted Turtle', + ]; + const [items, setItems] = useState<{ name: string; unread: boolean }[]>([]); + + let didInit = false; + + useEffect(() => { + if (!didInit) { + didInit = true; + addItems(5); + } + }, []); + + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + addItems(3, true); + event.detail.complete(); + }, 2000); + } + + function chooseRandomName() { + return names[Math.floor(Math.random() * names.length)]; + } + + function addItems(count: number, unread = false) { + for (let i = 0; i < count; i++) { + setItems((current) => [{ name: chooseRandomName(), unread }, ...current]); + } + } + + return ( + <> + + + Pull to Refresh + + + + + + + + + + {items.map((item) => ( + + + +

{item.name}

+

New message from {item.name}

+ + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/refresher/advanced/vue.md b/static/usage/v9/refresher/advanced/vue.md new file mode 100644 index 00000000000..9293f8df4e5 --- /dev/null +++ b/static/usage/v9/refresher/advanced/vue.md @@ -0,0 +1,91 @@ +```html + + + + + +``` diff --git a/static/usage/v9/refresher/basic/angular/example_component_html.md b/static/usage/v9/refresher/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f665c1c51a1 --- /dev/null +++ b/static/usage/v9/refresher/basic/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v9/refresher/basic/angular/example_component_ts.md b/static/usage/v9/refresher/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b531fcaa3 --- /dev/null +++ b/static/usage/v9/refresher/basic/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], +}) +export class ExampleComponent { + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/basic/demo.html b/static/usage/v9/refresher/basic/demo.html new file mode 100644 index 00000000000..1a5c27fedb7 --- /dev/null +++ b/static/usage/v9/refresher/basic/demo.html @@ -0,0 +1,41 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v9/refresher/basic/index.md b/static/usage/v9/refresher/basic/index.md new file mode 100644 index 00000000000..554cfc1dc26 --- /dev/null +++ b/static/usage/v9/refresher/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/refresher/basic/javascript.md b/static/usage/v9/refresher/basic/javascript.md new file mode 100644 index 00000000000..565e1247624 --- /dev/null +++ b/static/usage/v9/refresher/basic/javascript.md @@ -0,0 +1,26 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v9/refresher/basic/react.md b/static/usage/v9/refresher/basic/react.md new file mode 100644 index 00000000000..bcdd53422d8 --- /dev/null +++ b/static/usage/v9/refresher/basic/react.md @@ -0,0 +1,40 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/react'; + +function Example() { + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/refresher/basic/vue.md b/static/usage/v9/refresher/basic/vue.md new file mode 100644 index 00000000000..f6669585bfb --- /dev/null +++ b/static/usage/v9/refresher/basic/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v9/refresher/custom-content/angular/example_component_html.md b/static/usage/v9/refresher/custom-content/angular/example_component_html.md new file mode 100644 index 00000000000..5f0e0a5171f --- /dev/null +++ b/static/usage/v9/refresher/custom-content/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v9/refresher/custom-content/angular/example_component_ts.md b/static/usage/v9/refresher/custom-content/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b531fcaa3 --- /dev/null +++ b/static/usage/v9/refresher/custom-content/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], +}) +export class ExampleComponent { + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/custom-content/demo.html b/static/usage/v9/refresher/custom-content/demo.html new file mode 100644 index 00000000000..b1d6fca3437 --- /dev/null +++ b/static/usage/v9/refresher/custom-content/demo.html @@ -0,0 +1,47 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v9/refresher/custom-content/index.md b/static/usage/v9/refresher/custom-content/index.md new file mode 100644 index 00000000000..45b809a1f32 --- /dev/null +++ b/static/usage/v9/refresher/custom-content/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/refresher/custom-content/javascript.md b/static/usage/v9/refresher/custom-content/javascript.md new file mode 100644 index 00000000000..efcde3c9d6e --- /dev/null +++ b/static/usage/v9/refresher/custom-content/javascript.md @@ -0,0 +1,32 @@ +```html + + + Pull to Refresh + + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v9/refresher/custom-content/react.md b/static/usage/v9/refresher/custom-content/react.md new file mode 100644 index 00000000000..dabe3059aab --- /dev/null +++ b/static/usage/v9/refresher/custom-content/react.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/react'; +import { chevronDownCircleOutline } from 'ionicons/icons'; + +function Example() { + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/refresher/custom-content/vue.md b/static/usage/v9/refresher/custom-content/vue.md new file mode 100644 index 00000000000..badf54c02b8 --- /dev/null +++ b/static/usage/v9/refresher/custom-content/vue.md @@ -0,0 +1,43 @@ +```html + + + +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..fbfd63c926a --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,28 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ''; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..4c0e2cddc16 --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b531fcaa3 --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], +}) +export class ExampleComponent { + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/demo.html b/static/usage/v9/refresher/custom-scroll-target/demo.html new file mode 100644 index 00000000000..626d30aaf4b --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/demo.html @@ -0,0 +1,72 @@ + + + + + + Refresher + + + + + + + + + + + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + + diff --git a/static/usage/v9/refresher/custom-scroll-target/index.md b/static/usage/v9/refresher/custom-scroll-target/index.md new file mode 100644 index 00000000000..168b1407829 --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/refresher/custom-scroll-target/javascript.md b/static/usage/v9/refresher/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..8d0da2bcd6b --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/javascript.md @@ -0,0 +1,57 @@ +```html + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + + + +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/react/main_css.md b/static/usage/v9/refresher/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..fbfd63c926a --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/react/main_css.md @@ -0,0 +1,28 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + overflow-y: auto; +} + +.ion-content-scroll-host::before, +.ion-content-scroll-host::after { + position: absolute; + + width: 1px; + height: 1px; + + content: ''; +} + +.ion-content-scroll-host::before { + bottom: -1px; +} + +.ion-content-scroll-host::after { + top: -1px; +} +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md b/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..0bee7ff5cc3 --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +
+

Pull this content down to trigger the refresh.

+
+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/refresher/custom-scroll-target/vue.md b/static/usage/v9/refresher/custom-scroll-target/vue.md new file mode 100644 index 00000000000..b2567a741a1 --- /dev/null +++ b/static/usage/v9/refresher/custom-scroll-target/vue.md @@ -0,0 +1,67 @@ +```html + + + + + +``` diff --git a/static/usage/v9/refresher/pull-properties/angular/example_component_html.md b/static/usage/v9/refresher/pull-properties/angular/example_component_html.md new file mode 100644 index 00000000000..1e5948063b8 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ +``` diff --git a/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md b/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..b6b531fcaa3 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], +}) +export class ExampleComponent { + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/pull-properties/demo.html b/static/usage/v9/refresher/pull-properties/demo.html new file mode 100644 index 00000000000..941e844dac5 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/demo.html @@ -0,0 +1,41 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + + diff --git a/static/usage/v9/refresher/pull-properties/index.md b/static/usage/v9/refresher/pull-properties/index.md new file mode 100644 index 00000000000..1124fd774f1 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/refresher/pull-properties/javascript.md b/static/usage/v9/refresher/pull-properties/javascript.md new file mode 100644 index 00000000000..8bc8b286566 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/javascript.md @@ -0,0 +1,26 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + +``` diff --git a/static/usage/v9/refresher/pull-properties/react.md b/static/usage/v9/refresher/pull-properties/react.md new file mode 100644 index 00000000000..278e50aa34a --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/react.md @@ -0,0 +1,40 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonHeader, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, +} from '@ionic/react'; + +function Example() { + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.detail.complete(); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + ); +} +export default Example; +``` diff --git a/static/usage/v9/refresher/pull-properties/vue.md b/static/usage/v9/refresher/pull-properties/vue.md new file mode 100644 index 00000000000..335a0b0f651 --- /dev/null +++ b/static/usage/v9/refresher/pull-properties/vue.md @@ -0,0 +1,36 @@ +```html + + + +``` diff --git a/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md new file mode 100644 index 00000000000..3ee329401af --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + @for (item of items; track item; let i = $index) { + + + {{ item.label }} + + } + + +``` diff --git a/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md new file mode 100644 index 00000000000..1fba72b54b0 --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/angular/example_component_ts.md @@ -0,0 +1,72 @@ +```ts +import { Component } from '@angular/core'; +import { + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + RefresherCustomEvent, + RefresherPullEndCustomEvent, +} from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonRefresher, + IonRefresherContent, + IonTitle, + IonToolbar, + ], +}) +export class ExampleComponent { + items = [ + { label: 'Finalize Q1 budget proposal', checked: false, disabled: false }, + { label: 'Review design mockups', checked: true, disabled: false }, + { label: 'Sync with engineering on API docs', checked: true, disabled: false }, + { label: 'Approve PTO requests for March', checked: false, disabled: false }, + { label: 'Draft monthly newsletter', checked: false, disabled: false }, + ]; + + constructor() {} + + handlePullStart() { + console.log('Pull started'); + + // Disable the checkboxes when the pull starts + this.items.forEach((item) => { + item.disabled = true; + }); + } + + handlePullEnd(event: RefresherPullEndCustomEvent) { + console.log('Pull ended with reason: "' + event.detail.reason + '"'); + + // Enable the checkboxes when the pull ends + this.items.forEach((item) => { + item.disabled = false; + }); + } + + handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + console.log('Refresh completed'); + }, 2000); + } +} +``` diff --git a/static/usage/v9/refresher/pull-start-end-events/demo.html b/static/usage/v9/refresher/pull-start-end-events/demo.html new file mode 100644 index 00000000000..c65f95214a0 --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/demo.html @@ -0,0 +1,82 @@ + + + + + + Refresher + + + + + + + + + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + Finalize Q1 budget proposal + + + + Review design mockups + + + + Sync with engineering on API docs + + + + Approve PTO requests for March + + + + Draft monthly newsletter + + + + + + + + diff --git a/static/usage/v9/refresher/pull-start-end-events/index.md b/static/usage/v9/refresher/pull-start-end-events/index.md new file mode 100644 index 00000000000..65f7e2fde9e --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/refresher/pull-start-end-events/javascript.md b/static/usage/v9/refresher/pull-start-end-events/javascript.md new file mode 100644 index 00000000000..f52af7c6d15 --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/javascript.md @@ -0,0 +1,67 @@ +```html + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + + + Finalize Q1 budget proposal + + + + Review design mockups + + + + Sync with engineering on API docs + + + + Approve PTO requests for March + + + + Draft monthly newsletter + + + + + +``` diff --git a/static/usage/v9/refresher/pull-start-end-events/react.md b/static/usage/v9/refresher/pull-start-end-events/react.md new file mode 100644 index 00000000000..7278b39be6a --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/react.md @@ -0,0 +1,90 @@ +```tsx +import React, { useState } from 'react'; +import { + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonTitle, + IonToolbar, + IonRefresher, + IonRefresherContent, + RefresherCustomEvent, + RefresherPullEndCustomEvent, +} from '@ionic/react'; + +interface TodoItem { + label: string; + checked: boolean; + disabled: boolean; +} + +function Example() { + const [items, setItems] = useState([ + { label: 'Finalize Q1 budget proposal', checked: false, disabled: false }, + { label: 'Review design mockups', checked: true, disabled: false }, + { label: 'Sync with engineering on API docs', checked: true, disabled: false }, + { label: 'Approve PTO requests for March', checked: false, disabled: false }, + { label: 'Draft monthly newsletter', checked: false, disabled: false }, + ]); + + function handlePullStart() { + console.log('Pull started'); + + // Disable the checkboxes when the pull starts + setItems((prev) => prev.map((item) => ({ ...item, disabled: true }))); + } + + function handlePullEnd(event: RefresherPullEndCustomEvent) { + console.log('Pull ended with reason: "' + event.detail.reason + '"'); + + // Enable the checkboxes when the pull ends + setItems((prev) => prev.map((item) => ({ ...item, disabled: false }))); + } + + function handleRefresh(event: RefresherCustomEvent) { + setTimeout(() => { + // Any calls to load data go here + event.target.complete(); + console.log('Refresh completed'); + }, 2000); + } + + return ( + <> + + + Pull to Refresh + + + + + + + + +

Pull this content down to trigger the refresh.

+ + + {items.map((item: TodoItem) => ( + + + {item.label} + + ))} + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/refresher/pull-start-end-events/vue.md b/static/usage/v9/refresher/pull-start-end-events/vue.md new file mode 100644 index 00000000000..51590f93722 --- /dev/null +++ b/static/usage/v9/refresher/pull-start-end-events/vue.md @@ -0,0 +1,82 @@ +```vue + + + +``` diff --git a/static/usage/v9/reorder/basic/angular/example_component_html.md b/static/usage/v9/reorder/basic/angular/example_component_html.md new file mode 100644 index 00000000000..8b1294bd101 --- /dev/null +++ b/static/usage/v9/reorder/basic/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +``` diff --git a/static/usage/v9/reorder/basic/angular/example_component_ts.md b/static/usage/v9/reorder/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..66f52425413 --- /dev/null +++ b/static/usage/v9/reorder/basic/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } +} +``` diff --git a/static/usage/v9/reorder/basic/demo.html b/static/usage/v9/reorder/basic/demo.html new file mode 100644 index 00000000000..3b2f1777444 --- /dev/null +++ b/static/usage/v9/reorder/basic/demo.html @@ -0,0 +1,71 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/basic/index.md b/static/usage/v9/reorder/basic/index.md new file mode 100644 index 00000000000..cd40d61806b --- /dev/null +++ b/static/usage/v9/reorder/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/reorder/basic/javascript.md b/static/usage/v9/reorder/basic/javascript.md new file mode 100644 index 00000000000..4b07e8ad210 --- /dev/null +++ b/static/usage/v9/reorder/basic/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v9/reorder/basic/react.md b/static/usage/v9/reorder/basic/react.md new file mode 100644 index 00000000000..397ebc395d7 --- /dev/null +++ b/static/usage/v9/reorder/basic/react.md @@ -0,0 +1,50 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; + +function Example() { + function handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/basic/vue.md b/static/usage/v9/reorder/basic/vue.md new file mode 100644 index 00000000000..3c02f91c370 --- /dev/null +++ b/static/usage/v9/reorder/basic/vue.md @@ -0,0 +1,48 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/custom-icon/angular/example_component_html.md b/static/usage/v9/reorder/custom-icon/angular/example_component_html.md new file mode 100644 index 00000000000..cc6692c862d --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/angular/example_component_html.md @@ -0,0 +1,42 @@ +```html + + + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..bbf0be5f1fa --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/angular/example_component_ts.md @@ -0,0 +1,43 @@ +```ts +import { Component } from '@angular/core'; +import { + IonIcon, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { pizza } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ pizza }); + } + + handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } +} +``` diff --git a/static/usage/v9/reorder/custom-icon/demo.html b/static/usage/v9/reorder/custom-icon/demo.html new file mode 100644 index 00000000000..0ecd4984d33 --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/demo.html @@ -0,0 +1,81 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/custom-icon/index.md b/static/usage/v9/reorder/custom-icon/index.md new file mode 100644 index 00000000000..ba3218b6b0a --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/reorder/custom-icon/javascript.md b/static/usage/v9/reorder/custom-icon/javascript.md new file mode 100644 index 00000000000..8535da7544a --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/javascript.md @@ -0,0 +1,56 @@ +```html + + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + +``` diff --git a/static/usage/v9/reorder/custom-icon/javascript/index_html.md b/static/usage/v9/reorder/custom-icon/javascript/index_html.md new file mode 100644 index 00000000000..8535da7544a --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/javascript/index_html.md @@ -0,0 +1,56 @@ +```html + + + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + + +``` diff --git a/static/usage/v9/reorder/custom-icon/javascript/index_ts.md b/static/usage/v9/reorder/custom-icon/javascript/index_ts.md new file mode 100644 index 00000000000..529ffffa809 --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { pizza } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "pizza" key. + * Alternatively, developers can do: + * addIcons({ 'pizza': pizza }); + */ +addIcons({ pizza }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/reorder/custom-icon/react.md b/static/usage/v9/reorder/custom-icon/react.md new file mode 100644 index 00000000000..f5fe620035b --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/react.md @@ -0,0 +1,61 @@ +```tsx +import React from 'react'; +import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; +import { pizza } from 'ionicons/icons'; + +function Example() { + function handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + + + Item 2 + + + + + + + Item 3 + + + + + + + Item 4 + + + + + + + Item 5 + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/custom-icon/vue.md b/static/usage/v9/reorder/custom-icon/vue.md new file mode 100644 index 00000000000..e4fbe1bdd2d --- /dev/null +++ b/static/usage/v9/reorder/custom-icon/vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md new file mode 100644 index 00000000000..73fc3967021 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_html.md @@ -0,0 +1,36 @@ +```html + +
+ + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md new file mode 100644 index 00000000000..bc129b320eb --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/angular/example_component_ts.md @@ -0,0 +1,31 @@ +```ts +import { Component } from '@angular/core'; +import { + ReorderEndCustomEvent, + IonContent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['./example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } +} +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/demo.html b/static/usage/v9/reorder/custom-scroll-target/demo.html new file mode 100644 index 00000000000..149e8963f83 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/demo.html @@ -0,0 +1,84 @@ + + + + + + Reorder + + + + + + + + + + + +
+
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+
+ + + + + + diff --git a/static/usage/v9/reorder/custom-scroll-target/index.md b/static/usage/v9/reorder/custom-scroll-target/index.md new file mode 100644 index 00000000000..1d7af407e61 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/reorder/custom-scroll-target/javascript.md b/static/usage/v9/reorder/custom-scroll-target/javascript.md new file mode 100644 index 00000000000..337d0dbf616 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/javascript.md @@ -0,0 +1,62 @@ +```html + +
+ + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + + + + +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/react/main_css.md b/static/usage/v9/reorder/custom-scroll-target/react/main_css.md new file mode 100644 index 00000000000..4db169a0e16 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/react/main_css.md @@ -0,0 +1,11 @@ +```css +.ion-content-scroll-host { + position: absolute; + top: 0; + left: 0; + + height: 100%; + width: 100%; + overflow-y: auto; +} +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md b/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md new file mode 100644 index 00000000000..79ef62da9d7 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/react/main_tsx.md @@ -0,0 +1,64 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + function handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + return ( + +
+ + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/custom-scroll-target/vue.md b/static/usage/v9/reorder/custom-scroll-target/vue.md new file mode 100644 index 00000000000..c12bd5660c1 --- /dev/null +++ b/static/usage/v9/reorder/custom-scroll-target/vue.md @@ -0,0 +1,72 @@ +```html + + + + + +``` diff --git a/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md b/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md new file mode 100644 index 00000000000..02e2dc827ac --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + + + @for (item of items; track item; let i = $index) { + + {{ i + 1 }} + {{ item }} + + + } + + +``` diff --git a/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md b/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md new file mode 100644 index 00000000000..85c4e932f5e --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/angular/example_component_ts.md @@ -0,0 +1,79 @@ +```ts +import { Component } from '@angular/core'; +import { + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, + ReorderMoveCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + items = ['Buy groceries', 'Call the bank', 'Finish project report', 'Book flight tickets', 'Read a book']; + + handleReorderMove(event: ReorderMoveCustomEvent) { + const from = event.detail.from; + const to = event.detail.to; + + if (from !== to) { + console.log('Dragged from index', from, 'to', to); + } + + // Get all items and sort by their current id (item-1, item-2, ...) + const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => { + const aNum = parseInt(a.id.replace('item-', ''), 10); + const bNum = parseInt(b.id.replace('item-', ''), 10); + return aNum - bNum; + }); + + // Dragging down: shift up items between from+1 and to, set dragged to to+1 + if (from < to) { + for (let i = from; i <= to; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (itemNum) { + if (i === from) { + // Dragged item + itemNum.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift up + itemNum.textContent = String(i); + item.id = `item-${i}`; + } + } + } + // Dragging up: shift down items between to and from-1, set dragged to to+1 + } else if (from > to) { + for (let i = to; i <= from; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (itemNum) { + if (i === from) { + // Dragged item + itemNum.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift down + itemNum.textContent = String(i + 2); + item.id = `item-${i + 2}`; + } + } + } + } + } + + handleReorderEnd(event: ReorderEndCustomEvent) { + // Finish the reorder and update the items data + this.items = event.detail.complete(this.items); + } +} +``` diff --git a/static/usage/v9/reorder/reorder-move-event/demo.html b/static/usage/v9/reorder/reorder-move-event/demo.html new file mode 100644 index 00000000000..2b1c106344b --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/demo.html @@ -0,0 +1,116 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/reorder-move-event/index.md b/static/usage/v9/reorder/reorder-move-event/index.md new file mode 100644 index 00000000000..7ef67b4523e --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/index.md @@ -0,0 +1,26 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/reorder/reorder-move-event/javascript.md b/static/usage/v9/reorder/reorder-move-event/javascript.md new file mode 100644 index 00000000000..e559409668b --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/javascript.md @@ -0,0 +1,89 @@ +```html + + + + + + +``` diff --git a/static/usage/v9/reorder/reorder-move-event/react.md b/static/usage/v9/reorder/reorder-move-event/react.md new file mode 100644 index 00000000000..39a0680728d --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/react.md @@ -0,0 +1,92 @@ +```tsx +import React, { useState } from 'react'; +import { + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, + ReorderMoveCustomEvent, +} from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([ + 'Buy groceries', + 'Call the bank', + 'Finish project report', + 'Book flight tickets', + 'Read a book', + ]); + + function handleReorderMove(event: ReorderMoveCustomEvent) { + const from = event.detail.from; + const to = event.detail.to; + + if (from !== to) { + console.log('Dragged from index', from, 'to', to); + } + + // Get all items and sort by their current id (item-1, item-2, ...) + const itemElements = Array.from(document.querySelectorAll('ion-item')).sort((a, b) => { + const aNum = parseInt(a.id.replace('item-', ''), 10); + const bNum = parseInt(b.id.replace('item-', ''), 10); + return aNum - bNum; + }); + + // Dragging down: shift up items between from+1 and to, set dragged to to+1 + if (from < to) { + for (let i = from; i <= to; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (i === from) { + // Dragged item + itemNum!.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift up + itemNum!.textContent = String(i); + item.id = `item-${i}`; + } + } + // Dragging up: shift down items between to and from-1, set dragged to to+1 + } else if (from > to) { + for (let i = to; i <= from; i++) { + const item = itemElements[i]; + const itemNum = item.querySelector('b'); + if (i === from) { + // Dragged item + itemNum!.textContent = String(to + 1); + item.id = `item-${to + 1}`; + } else { + // Items shift down + itemNum!.textContent = String(i + 2); + item.id = `item-${i + 2}`; + } + } + } + } + + function handleReorderEnd(event: ReorderEndCustomEvent) { + // Finish the reorder and update the items data + setItems(event.detail.complete(items)); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item, index) => ( + + {index + 1} + {item} + + + ))} + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/reorder/reorder-move-event/vue.md b/static/usage/v9/reorder/reorder-move-event/vue.md new file mode 100644 index 00000000000..cd3518e5aac --- /dev/null +++ b/static/usage/v9/reorder/reorder-move-event/vue.md @@ -0,0 +1,81 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md new file mode 100644 index 00000000000..7b9be3a150c --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + + + @for (item of items; track item; let i = $index) { + + {{ item.label }} + + + + } + + +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md new file mode 100644 index 00000000000..3dff5b48ba9 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/angular/example_component_ts.md @@ -0,0 +1,62 @@ +```ts +import { Component, ViewChildren, QueryList, ElementRef } from '@angular/core'; +import { + ReorderEndCustomEvent, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + IonIcon, +} from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, IonIcon], +}) +export class ExampleComponent { + items = [ + { label: 'Buy groceries', icon: 'warning', color: 'warning' }, + { label: 'Call the bank', icon: 'warning', color: 'warning' }, + { label: 'Finish project report', icon: 'ellipse', color: 'light' }, + { label: 'Book flight tickets', icon: 'ellipse', color: 'light' }, + { label: 'Read a book', icon: 'caret-down', color: 'secondary' }, + ]; + + @ViewChildren('icon', { read: ElementRef }) icons!: QueryList>; + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDown, ellipse, warning }); + } + + handleReorderStart() { + console.log('Reorder started'); + + // Hide the icons when the reorder starts + this.icons.forEach((icon) => { + icon.nativeElement.style.opacity = '0'; + }); + } + + handleReorderEnd(event: ReorderEndCustomEvent) { + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Show the icons again + this.icons.forEach((icon) => { + icon.nativeElement.style.opacity = '1'; + }); + + // Finish the reorder and update the items data + this.items = event.detail.complete(this.items); + } +} +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/demo.html b/static/usage/v9/reorder/reorder-start-end-events/demo.html new file mode 100644 index 00000000000..a9bcf896da6 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/demo.html @@ -0,0 +1,82 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + Buy groceries + + + + + Call the bank + + + + + Finish project report + + + + + Book flight tickets + + + + + Read a book + + + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/reorder-start-end-events/index.md b/static/usage/v9/reorder/reorder-start-end-events/index.md new file mode 100644 index 00000000000..194ab4606c1 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/index.md @@ -0,0 +1,33 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/reorder/reorder-start-end-events/javascript/index_html.md b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_html.md new file mode 100644 index 00000000000..a98397de9e1 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_html.md @@ -0,0 +1,57 @@ +```html + + + + + Buy groceries + + + + + Call the bank + + + + + Finish project report + + + + + Book flight tickets + + + + + Read a book + + + + + + + +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md new file mode 100644 index 00000000000..c9e03106886 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons get mapped + * to "caret-down", "ellipse", "warning" keys. + * Alternatively, developers can do: + * addIcons({ 'caret-down': caretDown, + * "ellipse": ellipse, "warning": warning }); + */ +addIcons({ caretDown, ellipse, warning }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/react.md b/static/usage/v9/reorder/reorder-start-end-events/react.md new file mode 100644 index 00000000000..c70462d5b32 --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/react.md @@ -0,0 +1,67 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; +import { caretDown, ellipse, warning } from 'ionicons/icons'; + +interface TodoItem { + label: string; + icon: string; + color: string; +} + +function Example() { + const [items, setItems] = useState([ + { label: 'Buy groceries', icon: warning, color: 'warning' }, + { label: 'Call the bank', icon: warning, color: 'warning' }, + { label: 'Finish project report', icon: ellipse, color: 'light' }, + { label: 'Book flight tickets', icon: ellipse, color: 'light' }, + { label: 'Read a book', icon: caretDown, color: 'secondary' }, + ]); + const iconsRef = useRef<(HTMLIonIconElement | null)[]>([]); + + function handleReorderStart() { + console.log('Reorder started'); + + // Hide the icons when the reorder starts + iconsRef.current.forEach((icon) => { + if (icon) icon.style.opacity = '0'; + }); + } + + function handleReorderEnd(event: ReorderEndCustomEvent) { + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Show the icons again + iconsRef.current.forEach((icon) => { + if (icon) icon.style.opacity = '1'; + }); + + // Finish the reorder and update the items data + setItems(event.detail.complete(items)); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item: TodoItem, i: number) => ( + + {item.label} + { + iconsRef.current[i] = el; + }} + /> + + + ))} + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/reorder/reorder-start-end-events/vue.md b/static/usage/v9/reorder/reorder-start-end-events/vue.md new file mode 100644 index 00000000000..0648e09bddc --- /dev/null +++ b/static/usage/v9/reorder/reorder-start-end-events/vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md b/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md new file mode 100644 index 00000000000..dbfe175895b --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html + + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder +``` diff --git a/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md b/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md new file mode 100644 index 00000000000..0f11877cfe7 --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/angular/example_component_ts.md @@ -0,0 +1,37 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + public isDisabled = true; + + handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + toggleReorder() { + this.isDisabled = !this.isDisabled; + } +} +``` diff --git a/static/usage/v9/reorder/toggling-disabled/demo.html b/static/usage/v9/reorder/toggling-disabled/demo.html new file mode 100644 index 00000000000..8aa545d2886 --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/demo.html @@ -0,0 +1,82 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder +
+ + + + + + diff --git a/static/usage/v9/reorder/toggling-disabled/index.md b/static/usage/v9/reorder/toggling-disabled/index.md new file mode 100644 index 00000000000..ba771dd15eb --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/index.md @@ -0,0 +1,26 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/reorder/toggling-disabled/javascript.md b/static/usage/v9/reorder/toggling-disabled/javascript.md new file mode 100644 index 00000000000..43d3fae03c8 --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/javascript.md @@ -0,0 +1,52 @@ +```html + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + + Toggle Reorder + + +``` diff --git a/static/usage/v9/reorder/toggling-disabled/react.md b/static/usage/v9/reorder/toggling-disabled/react.md new file mode 100644 index 00000000000..6b5aecaed2a --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/react.md @@ -0,0 +1,68 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonItem, + IonLabel, + IonList, + IonReorder, + IonReorderGroup, + ReorderEndCustomEvent, +} from '@ionic/react'; + +function Example() { + const [isDisabled, setIsDisabled] = useState(true); + + function handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + function toggleReorder() { + setIsDisabled((current) => !current); + } + + return ( + <> + + + + Item 1 + + + + + Item 2 + + + + + Item 3 + + + + + Item 4 + + + + + Item 5 + + + + + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + Toggle Reorder + + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/toggling-disabled/vue.md b/static/usage/v9/reorder/toggling-disabled/vue.md new file mode 100644 index 00000000000..f12e67a2e06 --- /dev/null +++ b/static/usage/v9/reorder/toggling-disabled/vue.md @@ -0,0 +1,65 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/updating-data/angular/example_component_html.md b/static/usage/v9/reorder/updating-data/angular/example_component_html.md new file mode 100644 index 00000000000..6326a17c949 --- /dev/null +++ b/static/usage/v9/reorder/updating-data/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + + + + @for (item of items; track item) { + + Item {{ item }} + + + } + + +``` diff --git a/static/usage/v9/reorder/updating-data/angular/example_component_ts.md b/static/usage/v9/reorder/updating-data/angular/example_component_ts.md new file mode 100644 index 00000000000..4d1c351d0b8 --- /dev/null +++ b/static/usage/v9/reorder/updating-data/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + items = [1, 2, 3, 4, 5]; + + handleReorderEnd(event: ReorderEndCustomEvent) { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', this.items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + this.items = event.detail.complete(this.items); + + // After complete is called the items will be in the new order + console.log('After complete', this.items); + } +} +``` diff --git a/static/usage/v9/reorder/updating-data/demo.html b/static/usage/v9/reorder/updating-data/demo.html new file mode 100644 index 00000000000..ed7390761de --- /dev/null +++ b/static/usage/v9/reorder/updating-data/demo.html @@ -0,0 +1,74 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/updating-data/index.md b/static/usage/v9/reorder/updating-data/index.md new file mode 100644 index 00000000000..f62741cedc4 --- /dev/null +++ b/static/usage/v9/reorder/updating-data/index.md @@ -0,0 +1,26 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/reorder/updating-data/javascript.md b/static/usage/v9/reorder/updating-data/javascript.md new file mode 100644 index 00000000000..28ef0989eea --- /dev/null +++ b/static/usage/v9/reorder/updating-data/javascript.md @@ -0,0 +1,49 @@ +```html + + + + + + +``` diff --git a/static/usage/v9/reorder/updating-data/react.md b/static/usage/v9/reorder/updating-data/react.md new file mode 100644 index 00000000000..36b9049e56a --- /dev/null +++ b/static/usage/v9/reorder/updating-data/react.md @@ -0,0 +1,37 @@ +```tsx +import React, { useState } from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; + +function Example() { + const [items, setItems] = useState([1, 2, 3, 4, 5]); + + function handleReorderEnd(event: ReorderEndCustomEvent) { + // Before complete is called with the items they will remain in the + // order before the drag + console.log('Before complete', items); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. Update the items variable to the + // new order of items + setItems(event.detail.complete(items)); + + // After complete is called the items will be in the new order + console.log('After complete', items); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + {items.map((item) => ( + + Item {item} + + + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/updating-data/vue.md b/static/usage/v9/reorder/updating-data/vue.md new file mode 100644 index 00000000000..9e7e336485c --- /dev/null +++ b/static/usage/v9/reorder/updating-data/vue.md @@ -0,0 +1,34 @@ +```html + + + +``` diff --git a/static/usage/v9/reorder/wrapper/angular/example_component_html.md b/static/usage/v9/reorder/wrapper/angular/example_component_html.md new file mode 100644 index 00000000000..5abb818e8b3 --- /dev/null +++ b/static/usage/v9/reorder/wrapper/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + +``` diff --git a/static/usage/v9/reorder/wrapper/angular/example_component_ts.md b/static/usage/v9/reorder/wrapper/angular/example_component_ts.md new file mode 100644 index 00000000000..66f52425413 --- /dev/null +++ b/static/usage/v9/reorder/wrapper/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup], +}) +export class ExampleComponent { + handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } +} +``` diff --git a/static/usage/v9/reorder/wrapper/demo.html b/static/usage/v9/reorder/wrapper/demo.html new file mode 100644 index 00000000000..afa510ec24f --- /dev/null +++ b/static/usage/v9/reorder/wrapper/demo.html @@ -0,0 +1,76 @@ + + + + + + Reorder + + + + + + + + + + + +
+ + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + +
+ + + + + + diff --git a/static/usage/v9/reorder/wrapper/index.md b/static/usage/v9/reorder/wrapper/index.md new file mode 100644 index 00000000000..64e55cfd4f5 --- /dev/null +++ b/static/usage/v9/reorder/wrapper/index.md @@ -0,0 +1,26 @@ +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_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; + + diff --git a/static/usage/v9/reorder/wrapper/javascript.md b/static/usage/v9/reorder/wrapper/javascript.md new file mode 100644 index 00000000000..3cd52cb1e8c --- /dev/null +++ b/static/usage/v9/reorder/wrapper/javascript.md @@ -0,0 +1,51 @@ +```html + + + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + + + +``` diff --git a/static/usage/v9/reorder/wrapper/react.md b/static/usage/v9/reorder/wrapper/react.md new file mode 100644 index 00000000000..50210964586 --- /dev/null +++ b/static/usage/v9/reorder/wrapper/react.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react'; + +function Example() { + function handleReorderEnd(event: ReorderEndCustomEvent) { + // The `from` and `to` properties contain the index of the item + // when the drag started and ended, respectively + console.log('Dragged from index', event.detail.from, 'to', event.detail.to); + + // Finish the reorder and position the item in the DOM based on + // where the gesture ended. This method can also be called directly + // by the reorder group. + event.detail.complete(); + } + + return ( + + {/* The reorder gesture is disabled by default, enable it to drag and drop items */} + + + + Item 1 + + + + + + Item 2 + + + + + + Item 3 + + + + + + Item 4 + + + + + + Item 5 + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/reorder/wrapper/vue.md b/static/usage/v9/reorder/wrapper/vue.md new file mode 100644 index 00000000000..953fd0157dd --- /dev/null +++ b/static/usage/v9/reorder/wrapper/vue.md @@ -0,0 +1,53 @@ +```html + + + +``` diff --git a/static/usage/v9/ripple-effect/basic/angular/example_component_css.md b/static/usage/v9/ripple-effect/basic/angular/example_component_css.md new file mode 100644 index 00000000000..792bc105ff8 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/angular/example_component_css.md @@ -0,0 +1,43 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 300px; + width: 300px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + position: relative; + overflow: hidden; + + border: 1px solid #ddd; +} + +.rectangle { + width: 300px; + height: 150px; +} + +.rounded-rectangle { + width: 185px; + height: 65px; + border-radius: 8px; +} + +.circle { + width: 90px; + height: 90px; + border-radius: 50%; +} +``` diff --git a/static/usage/v9/ripple-effect/basic/angular/example_component_html.md b/static/usage/v9/ripple-effect/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f46a434abac --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+``` diff --git a/static/usage/v9/ripple-effect/basic/angular/example_component_ts.md b/static/usage/v9/ripple-effect/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..646393ba9e1 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRippleEffect } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRippleEffect], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/ripple-effect/basic/demo.html b/static/usage/v9/ripple-effect/basic/demo.html new file mode 100644 index 00000000000..4f7c43d45b7 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/demo.html @@ -0,0 +1,80 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+
+ + + + diff --git a/static/usage/v9/ripple-effect/basic/index.md b/static/usage/v9/ripple-effect/basic/index.md new file mode 100644 index 00000000000..0db9f95c528 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/ripple-effect/basic/javascript.md b/static/usage/v9/ripple-effect/basic/javascript.md new file mode 100644 index 00000000000..14b645af763 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/javascript.md @@ -0,0 +1,61 @@ +```html +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+ + +``` diff --git a/static/usage/v9/ripple-effect/basic/react/main_css.md b/static/usage/v9/ripple-effect/basic/react/main_css.md new file mode 100644 index 00000000000..792bc105ff8 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/react/main_css.md @@ -0,0 +1,43 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 300px; + width: 300px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + position: relative; + overflow: hidden; + + border: 1px solid #ddd; +} + +.rectangle { + width: 300px; + height: 150px; +} + +.rounded-rectangle { + width: 185px; + height: 65px; + border-radius: 8px; +} + +.circle { + width: 90px; + height: 90px; + border-radius: 50%; +} +``` diff --git a/static/usage/v9/ripple-effect/basic/react/main_tsx.md b/static/usage/v9/ripple-effect/basic/react/main_tsx.md new file mode 100644 index 00000000000..18bfb66c6d8 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/react/main_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ +
+ +
+ +
+ +
+ +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v9/ripple-effect/basic/vue.md b/static/usage/v9/ripple-effect/basic/vue.md new file mode 100644 index 00000000000..d0041370f15 --- /dev/null +++ b/static/usage/v9/ripple-effect/basic/vue.md @@ -0,0 +1,67 @@ +```html + + + + + +``` diff --git a/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md b/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md new file mode 100644 index 00000000000..521a109d099 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/angular/example_component_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; + + width: 100%; + height: 50px; + border-radius: 8px; +} + +.custom-parent { + color: #de1e7e; +} + +.custom-ripple { + color: #501ace; +} +``` diff --git a/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md b/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md new file mode 100644 index 00000000000..0fa38298eb5 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+``` diff --git a/static/usage/v9/ripple-effect/customizing/angular/example_component_ts.md b/static/usage/v9/ripple-effect/customizing/angular/example_component_ts.md new file mode 100644 index 00000000000..646393ba9e1 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRippleEffect } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRippleEffect], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/ripple-effect/customizing/demo.html b/static/usage/v9/ripple-effect/customizing/demo.html new file mode 100644 index 00000000000..021e0edd2d6 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/demo.html @@ -0,0 +1,79 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+
+ + + + diff --git a/static/usage/v9/ripple-effect/customizing/index.md b/static/usage/v9/ripple-effect/customizing/index.md new file mode 100644 index 00000000000..9dc9d289703 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/ripple-effect/customizing/javascript.md b/static/usage/v9/ripple-effect/customizing/javascript.md new file mode 100644 index 00000000000..89f56b0d968 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/javascript.md @@ -0,0 +1,60 @@ +```html +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+ + +``` diff --git a/static/usage/v9/ripple-effect/customizing/react/main_css.md b/static/usage/v9/ripple-effect/customizing/react/main_css.md new file mode 100644 index 00000000000..521a109d099 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/react/main_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; + + width: 100%; + height: 50px; + border-radius: 8px; +} + +.custom-parent { + color: #de1e7e; +} + +.custom-ripple { + color: #501ace; +} +``` diff --git a/static/usage/v9/ripple-effect/customizing/react/main_tsx.md b/static/usage/v9/ripple-effect/customizing/react/main_tsx.md new file mode 100644 index 00000000000..76f36a67843 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ Custom Parent Color + +
+ +
+ Custom Ripple Color + +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v9/ripple-effect/customizing/vue.md b/static/usage/v9/ripple-effect/customizing/vue.md new file mode 100644 index 00000000000..2a59e3b6945 --- /dev/null +++ b/static/usage/v9/ripple-effect/customizing/vue.md @@ -0,0 +1,66 @@ +```html + + + + + +``` diff --git a/static/usage/v9/ripple-effect/type/angular/example_component_css.md b/static/usage/v9/ripple-effect/type/angular/example_component_css.md new file mode 100644 index 00000000000..e76413cf0ff --- /dev/null +++ b/static/usage/v9/ripple-effect/type/angular/example_component_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; +} + +.rounded-rectangle { + width: 250px; + height: 75px; + border-radius: 8px; +} + +.circle { + width: 120px; + height: 120px; + border-radius: 50%; +} +``` diff --git a/static/usage/v9/ripple-effect/type/angular/example_component_html.md b/static/usage/v9/ripple-effect/type/angular/example_component_html.md new file mode 100644 index 00000000000..0e764c2e79a --- /dev/null +++ b/static/usage/v9/ripple-effect/type/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+``` diff --git a/static/usage/v9/ripple-effect/type/angular/example_component_ts.md b/static/usage/v9/ripple-effect/type/angular/example_component_ts.md new file mode 100644 index 00000000000..646393ba9e1 --- /dev/null +++ b/static/usage/v9/ripple-effect/type/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonRippleEffect } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonRippleEffect], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/ripple-effect/type/demo.html b/static/usage/v9/ripple-effect/type/demo.html new file mode 100644 index 00000000000..44d78bcc8ae --- /dev/null +++ b/static/usage/v9/ripple-effect/type/demo.html @@ -0,0 +1,79 @@ + + + + + + Ripple Effect + + + + + + + + + + + +
+
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+
+ + + + diff --git a/static/usage/v9/ripple-effect/type/index.md b/static/usage/v9/ripple-effect/type/index.md new file mode 100644 index 00000000000..33c09796822 --- /dev/null +++ b/static/usage/v9/ripple-effect/type/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/ripple-effect/type/javascript.md b/static/usage/v9/ripple-effect/type/javascript.md new file mode 100644 index 00000000000..331612579e2 --- /dev/null +++ b/static/usage/v9/ripple-effect/type/javascript.md @@ -0,0 +1,60 @@ +```html +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+ + +``` diff --git a/static/usage/v9/ripple-effect/type/react/main_css.md b/static/usage/v9/ripple-effect/type/react/main_css.md new file mode 100644 index 00000000000..e76413cf0ff --- /dev/null +++ b/static/usage/v9/ripple-effect/type/react/main_css.md @@ -0,0 +1,44 @@ +```css +.wrapper { + display: flex; + flex-wrap: wrap; + + align-items: center; + justify-content: space-between; + text-align: center; + + height: 170px; + width: 400px; + + margin: 0 auto; +} + +b { + width: 100%; +} + +.ripple-parent { + display: flex; + align-items: center; + justify-content: center; + + position: relative; + overflow: hidden; + + border: 1px solid #ddd; + + user-select: none; +} + +.rounded-rectangle { + width: 250px; + height: 75px; + border-radius: 8px; +} + +.circle { + width: 120px; + height: 120px; + border-radius: 50%; +} +``` diff --git a/static/usage/v9/ripple-effect/type/react/main_tsx.md b/static/usage/v9/ripple-effect/type/react/main_tsx.md new file mode 100644 index 00000000000..ce7a1c6364c --- /dev/null +++ b/static/usage/v9/ripple-effect/type/react/main_tsx.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonRippleEffect } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( +
+ Click on a shape to see the ripple + +
+ Bounded + +
+ +
+ Unbounded + +
+
+ ); +} +export default Example; +``` diff --git a/static/usage/v9/ripple-effect/type/vue.md b/static/usage/v9/ripple-effect/type/vue.md new file mode 100644 index 00000000000..cbf2ce50376 --- /dev/null +++ b/static/usage/v9/ripple-effect/type/vue.md @@ -0,0 +1,66 @@ +```html + + + + + +``` diff --git a/static/usage/v9/router/basic/demo.html b/static/usage/v9/router/basic/demo.html new file mode 100644 index 00000000000..8edf1c1e482 --- /dev/null +++ b/static/usage/v9/router/basic/demo.html @@ -0,0 +1,62 @@ + + + + + + Router + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/router/basic/index.md b/static/usage/v9/router/basic/index.md new file mode 100644 index 00000000000..35dab1281e3 --- /dev/null +++ b/static/usage/v9/router/basic/index.md @@ -0,0 +1,11 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + + diff --git a/static/usage/v9/router/basic/javascript.md b/static/usage/v9/router/basic/javascript.md new file mode 100644 index 00000000000..5de50702768 --- /dev/null +++ b/static/usage/v9/router/basic/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + + + + +``` diff --git a/static/usage/v9/router/nav-within-page/demo.html b/static/usage/v9/router/nav-within-page/demo.html new file mode 100644 index 00000000000..487ee4376d6 --- /dev/null +++ b/static/usage/v9/router/nav-within-page/demo.html @@ -0,0 +1,92 @@ + + + + + + Router | ion-nav within a Routed Page + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/router/nav-within-page/index.md b/static/usage/v9/router/nav-within-page/index.md new file mode 100644 index 00000000000..3230e6ae931 --- /dev/null +++ b/static/usage/v9/router/nav-within-page/index.md @@ -0,0 +1,11 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + + diff --git a/static/usage/v9/router/nav-within-page/javascript.md b/static/usage/v9/router/nav-within-page/javascript.md new file mode 100644 index 00000000000..55b37205740 --- /dev/null +++ b/static/usage/v9/router/nav-within-page/javascript.md @@ -0,0 +1,77 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/searchbar/basic/angular/example_component_html.md b/static/usage/v9/searchbar/basic/angular/example_component_html.md new file mode 100644 index 00000000000..610e6556428 --- /dev/null +++ b/static/usage/v9/searchbar/basic/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/searchbar/basic/angular/example_component_ts.md b/static/usage/v9/searchbar/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..8a7140bf274 --- /dev/null +++ b/static/usage/v9/searchbar/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/searchbar/basic/demo.html b/static/usage/v9/searchbar/basic/demo.html new file mode 100644 index 00000000000..31bc6073b6e --- /dev/null +++ b/static/usage/v9/searchbar/basic/demo.html @@ -0,0 +1,32 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v9/searchbar/basic/index.md b/static/usage/v9/searchbar/basic/index.md new file mode 100644 index 00000000000..6fe9334e404 --- /dev/null +++ b/static/usage/v9/searchbar/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/basic/javascript.md b/static/usage/v9/searchbar/basic/javascript.md new file mode 100644 index 00000000000..610e6556428 --- /dev/null +++ b/static/usage/v9/searchbar/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/searchbar/basic/react.md b/static/usage/v9/searchbar/basic/react.md new file mode 100644 index 00000000000..b0a3d625855 --- /dev/null +++ b/static/usage/v9/searchbar/basic/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/basic/vue.md b/static/usage/v9/searchbar/basic/vue.md new file mode 100644 index 00000000000..b8c545e2f4d --- /dev/null +++ b/static/usage/v9/searchbar/basic/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md b/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md new file mode 100644 index 00000000000..1843708f78b --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v9/searchbar/cancel-button/angular/example_component_ts.md b/static/usage/v9/searchbar/cancel-button/angular/example_component_ts.md new file mode 100644 index 00000000000..fc3d686c8d7 --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trash }); + } +} +``` diff --git a/static/usage/v9/searchbar/cancel-button/demo.html b/static/usage/v9/searchbar/cancel-button/demo.html new file mode 100644 index 00000000000..9d82b08b4e4 --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/demo.html @@ -0,0 +1,36 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/searchbar/cancel-button/index.md b/static/usage/v9/searchbar/cancel-button/index.md new file mode 100644 index 00000000000..f855867e4a9 --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/cancel-button/javascript.md b/static/usage/v9/searchbar/cancel-button/javascript.md new file mode 100644 index 00000000000..1843708f78b --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/javascript.md @@ -0,0 +1,11 @@ +```html + + + + +``` diff --git a/static/usage/v9/searchbar/cancel-button/react.md b/static/usage/v9/searchbar/cancel-button/react.md new file mode 100644 index 00000000000..39f4be10fe5 --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { trash } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/cancel-button/vue.md b/static/usage/v9/searchbar/cancel-button/vue.md new file mode 100644 index 00000000000..e1a9df6d108 --- /dev/null +++ b/static/usage/v9/searchbar/cancel-button/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/clear-button/angular/example_component_html.md b/static/usage/v9/searchbar/clear-button/angular/example_component_html.md new file mode 100644 index 00000000000..fa10e4b90d9 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/searchbar/clear-button/angular/example_component_ts.md b/static/usage/v9/searchbar/clear-button/angular/example_component_ts.md new file mode 100644 index 00000000000..27d9f79ea53 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { trashBin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ trashBin }); + } +} +``` diff --git a/static/usage/v9/searchbar/clear-button/demo.html b/static/usage/v9/searchbar/clear-button/demo.html new file mode 100644 index 00000000000..db394f21954 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/demo.html @@ -0,0 +1,31 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/searchbar/clear-button/index.md b/static/usage/v9/searchbar/clear-button/index.md new file mode 100644 index 00000000000..3182ba5d4a8 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/clear-button/javascript.md b/static/usage/v9/searchbar/clear-button/javascript.md new file mode 100644 index 00000000000..fa10e4b90d9 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/javascript.md @@ -0,0 +1,6 @@ +```html + + + + +``` diff --git a/static/usage/v9/searchbar/clear-button/react.md b/static/usage/v9/searchbar/clear-button/react.md new file mode 100644 index 00000000000..9f21f1a1d84 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/react.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { trashBin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/clear-button/vue.md b/static/usage/v9/searchbar/clear-button/vue.md new file mode 100644 index 00000000000..fbe6cd1f7a3 --- /dev/null +++ b/static/usage/v9/searchbar/clear-button/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/debounce/angular/example_component_html.md b/static/usage/v9/searchbar/debounce/angular/example_component_html.md new file mode 100644 index 00000000000..f0ee9b81eb7 --- /dev/null +++ b/static/usage/v9/searchbar/debounce/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + @for (result of results; track result) { + + {{ result }} + + } + +``` diff --git a/static/usage/v9/searchbar/debounce/angular/example_component_ts.md b/static/usage/v9/searchbar/debounce/angular/example_component_ts.md new file mode 100644 index 00000000000..d5daed1d5e6 --- /dev/null +++ b/static/usage/v9/searchbar/debounce/angular/example_component_ts.md @@ -0,0 +1,32 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonSearchbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonSearchbar], +}) +export class ExampleComponent { + public data = [ + 'Amsterdam', + 'Buenos Aires', + 'Cairo', + 'Geneva', + 'Hong Kong', + 'Istanbul', + 'London', + 'Madrid', + 'New York', + 'Panama City', + ]; + public results = [...this.data]; + + handleInput(event: Event) { + const target = event.target as HTMLIonSearchbarElement; + const query = target.value?.toLowerCase() || ''; + this.results = this.data.filter((d) => d.toLowerCase().includes(query)); + } +} +``` diff --git a/static/usage/v9/searchbar/debounce/demo.html b/static/usage/v9/searchbar/debounce/demo.html new file mode 100644 index 00000000000..72005241fdf --- /dev/null +++ b/static/usage/v9/searchbar/debounce/demo.html @@ -0,0 +1,73 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + +
+ + + + + + diff --git a/static/usage/v9/searchbar/debounce/index.md b/static/usage/v9/searchbar/debounce/index.md new file mode 100644 index 00000000000..a7c9ccec9ec --- /dev/null +++ b/static/usage/v9/searchbar/debounce/index.md @@ -0,0 +1,26 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/debounce/javascript.md b/static/usage/v9/searchbar/debounce/javascript.md new file mode 100644 index 00000000000..9d7e54ef92d --- /dev/null +++ b/static/usage/v9/searchbar/debounce/javascript.md @@ -0,0 +1,48 @@ +```html + + + + +``` diff --git a/static/usage/v9/searchbar/debounce/react.md b/static/usage/v9/searchbar/debounce/react.md new file mode 100644 index 00000000000..216dd64d726 --- /dev/null +++ b/static/usage/v9/searchbar/debounce/react.md @@ -0,0 +1,41 @@ +```tsx +import React, { useState } from 'react'; +import { IonItem, IonList, IonSearchbar } from '@ionic/react'; + +function Example() { + const data = [ + 'Amsterdam', + 'Buenos Aires', + 'Cairo', + 'Geneva', + 'Hong Kong', + 'Istanbul', + 'London', + 'Madrid', + 'New York', + 'Panama City', + ]; + let [results, setResults] = useState([...data]); + + const handleInput = (event: Event) => { + let query = ''; + const target = event.target as HTMLIonSearchbarElement; + if (target) query = target.value!.toLowerCase(); + + setResults(data.filter((d) => d.toLowerCase().indexOf(query) > -1)); + }; + + return ( + <> + handleInput(event)}> + + + {results.map((result) => ( + {result} + ))} + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/debounce/vue.md b/static/usage/v9/searchbar/debounce/vue.md new file mode 100644 index 00000000000..466df02af5b --- /dev/null +++ b/static/usage/v9/searchbar/debounce/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/search-icon/angular/example_component_html.md b/static/usage/v9/searchbar/search-icon/angular/example_component_html.md new file mode 100644 index 00000000000..2a66008d0cc --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v9/searchbar/search-icon/angular/example_component_ts.md b/static/usage/v9/searchbar/search-icon/angular/example_component_ts.md new file mode 100644 index 00000000000..761afa92a3f --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { searchCircle } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ searchCircle }); + } +} +``` diff --git a/static/usage/v9/searchbar/search-icon/demo.html b/static/usage/v9/searchbar/search-icon/demo.html new file mode 100644 index 00000000000..351598906cd --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/demo.html @@ -0,0 +1,29 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/searchbar/search-icon/index.md b/static/usage/v9/searchbar/search-icon/index.md new file mode 100644 index 00000000000..d9f69a3b0b3 --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/search-icon/javascript.md b/static/usage/v9/searchbar/search-icon/javascript.md new file mode 100644 index 00000000000..2a66008d0cc --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/javascript.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v9/searchbar/search-icon/react.md b/static/usage/v9/searchbar/search-icon/react.md new file mode 100644 index 00000000000..4bb596d1e00 --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; +import { searchCircle } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/search-icon/vue.md b/static/usage/v9/searchbar/search-icon/vue.md new file mode 100644 index 00000000000..0219c879bfe --- /dev/null +++ b/static/usage/v9/searchbar/search-icon/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md b/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..b0f0f2e533f --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/searchbar/theming/colors/angular/example_component_ts.md b/static/usage/v9/searchbar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..8a7140bf274 --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/searchbar/theming/colors/demo.html b/static/usage/v9/searchbar/theming/colors/demo.html new file mode 100644 index 00000000000..41d65627a75 --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/demo.html @@ -0,0 +1,37 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/searchbar/theming/colors/index.md b/static/usage/v9/searchbar/theming/colors/index.md new file mode 100644 index 00000000000..cb99ed090d2 --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/theming/colors/javascript.md b/static/usage/v9/searchbar/theming/colors/javascript.md new file mode 100644 index 00000000000..b0f0f2e533f --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/searchbar/theming/colors/react.md b/static/usage/v9/searchbar/theming/colors/react.md new file mode 100644 index 00000000000..d1c29b9cd28 --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/theming/colors/vue.md b/static/usage/v9/searchbar/theming/colors/vue.md new file mode 100644 index 00000000000..d817d9185b2 --- /dev/null +++ b/static/usage/v9/searchbar/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..22aa0428b89 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,20 @@ +```css +/* Scoped components require higher specificity to customize */ +ion-searchbar.custom { + --background: #19422d; + --color: #fff; + --placeholder-color: #fff; + --icon-color: #fff; + --clear-button-color: #fff; + + --border-radius: 4px; +} + +ion-searchbar.ios.custom { + --cancel-button-color: #19422d; +} + +ion-searchbar.md.custom { + --cancel-button-color: #fff; +} +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..080217dcc41 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..8a7140bf274 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSearchbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSearchbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/demo.html b/static/usage/v9/searchbar/theming/css-properties/demo.html new file mode 100644 index 00000000000..f0872db25ef --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/demo.html @@ -0,0 +1,46 @@ + + + + + + Searchbar + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/searchbar/theming/css-properties/index.md b/static/usage/v9/searchbar/theming/css-properties/index.md new file mode 100644 index 00000000000..539b28a89d9 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/searchbar/theming/css-properties/javascript.md b/static/usage/v9/searchbar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..7ea20182e77 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/javascript.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/react/main_css.md b/static/usage/v9/searchbar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..22aa0428b89 --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/react/main_css.md @@ -0,0 +1,20 @@ +```css +/* Scoped components require higher specificity to customize */ +ion-searchbar.custom { + --background: #19422d; + --color: #fff; + --placeholder-color: #fff; + --icon-color: #fff; + --clear-button-color: #fff; + + --border-radius: 4px; +} + +ion-searchbar.ios.custom { + --cancel-button-color: #19422d; +} + +ion-searchbar.md.custom { + --cancel-button-color: #fff; +} +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/react/main_tsx.md b/static/usage/v9/searchbar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..62d396e75aa --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,11 @@ +```tsx +import React from 'react'; +import { IonSearchbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/searchbar/theming/css-properties/vue.md b/static/usage/v9/searchbar/theming/css-properties/vue.md new file mode 100644 index 00000000000..2ae095e63fd --- /dev/null +++ b/static/usage/v9/searchbar/theming/css-properties/vue.md @@ -0,0 +1,30 @@ +```html + + + + + +``` diff --git a/static/usage/v9/segment-button/basic/angular/example_component_html.md b/static/usage/v9/segment-button/basic/angular/example_component_html.md new file mode 100644 index 00000000000..6f3fc0bb9ab --- /dev/null +++ b/static/usage/v9/segment-button/basic/angular/example_component_html.md @@ -0,0 +1,25 @@ +```html + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +``` diff --git a/static/usage/v9/segment-button/basic/angular/example_component_ts.md b/static/usage/v9/segment-button/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment-button/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment-button/basic/demo.html b/static/usage/v9/segment-button/basic/demo.html new file mode 100644 index 00000000000..5082662f11f --- /dev/null +++ b/static/usage/v9/segment-button/basic/demo.html @@ -0,0 +1,54 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +
+ + + + diff --git a/static/usage/v9/segment-button/basic/index.md b/static/usage/v9/segment-button/basic/index.md new file mode 100644 index 00000000000..62a0067f4b9 --- /dev/null +++ b/static/usage/v9/segment-button/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment-button/basic/javascript.md b/static/usage/v9/segment-button/basic/javascript.md new file mode 100644 index 00000000000..d001e59d7fc --- /dev/null +++ b/static/usage/v9/segment-button/basic/javascript.md @@ -0,0 +1,25 @@ +```html + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + +``` diff --git a/static/usage/v9/segment-button/basic/react.md b/static/usage/v9/segment-button/basic/react.md new file mode 100644 index 00000000000..241242412bf --- /dev/null +++ b/static/usage/v9/segment-button/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + Button + + + + + + Disabled + + + Segment + + + Button + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment-button/basic/vue.md b/static/usage/v9/segment-button/basic/vue.md new file mode 100644 index 00000000000..42db166daca --- /dev/null +++ b/static/usage/v9/segment-button/basic/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v9/segment-button/layout/angular/example_component_html.md b/static/usage/v9/segment-button/layout/angular/example_component_html.md new file mode 100644 index 00000000000..3f634915d9b --- /dev/null +++ b/static/usage/v9/segment-button/layout/angular/example_component_html.md @@ -0,0 +1,73 @@ +```html + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +``` diff --git a/static/usage/v9/segment-button/layout/angular/example_component_ts.md b/static/usage/v9/segment-button/layout/angular/example_component_ts.md new file mode 100644 index 00000000000..b652f9d826d --- /dev/null +++ b/static/usage/v9/segment-button/layout/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { call, heart, pin } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ call, heart, pin }); + } +} +``` diff --git a/static/usage/v9/segment-button/layout/demo.html b/static/usage/v9/segment-button/layout/demo.html new file mode 100644 index 00000000000..3466803b89f --- /dev/null +++ b/static/usage/v9/segment-button/layout/demo.html @@ -0,0 +1,102 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +
+ + + + diff --git a/static/usage/v9/segment-button/layout/index.md b/static/usage/v9/segment-button/layout/index.md new file mode 100644 index 00000000000..19023bf02a2 --- /dev/null +++ b/static/usage/v9/segment-button/layout/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment-button/layout/javascript/index_html.md b/static/usage/v9/segment-button/layout/javascript/index_html.md new file mode 100644 index 00000000000..3f634915d9b --- /dev/null +++ b/static/usage/v9/segment-button/layout/javascript/index_html.md @@ -0,0 +1,73 @@ +```html + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + +``` diff --git a/static/usage/v9/segment-button/layout/javascript/index_ts.md b/static/usage/v9/segment-button/layout/javascript/index_ts.md new file mode 100644 index 00000000000..d7694855f73 --- /dev/null +++ b/static/usage/v9/segment-button/layout/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { call, heart, pin } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'call': call, 'heart': heart, 'pin': pin }); + */ +addIcons({ call, heart, pin }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/segment-button/layout/react.md b/static/usage/v9/segment-button/layout/react.md new file mode 100644 index 00000000000..9b6c44ac073 --- /dev/null +++ b/static/usage/v9/segment-button/layout/react.md @@ -0,0 +1,84 @@ +```tsx +import React from 'react'; +import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; +import { call, heart, pin } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + + + + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + + + Call + + + + Heart + + + + Pin + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment-button/layout/vue.md b/static/usage/v9/segment-button/layout/vue.md new file mode 100644 index 00000000000..3243cda2f5c --- /dev/null +++ b/static/usage/v9/segment-button/layout/vue.md @@ -0,0 +1,80 @@ +```html + + + +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..a4e8f04f2b0 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,19 @@ +```css +ion-segment-button { + --indicator-color: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md { + --color: #000; + --color-checked: #08a391; + --indicator-height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios { + --color: #08a391; + --color-checked: #fff; + --border-radius: 20px; +} +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4ab86c2cdda --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/demo.html b/static/usage/v9/segment-button/theming/css-properties/demo.html new file mode 100644 index 00000000000..51ff1da044d --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/demo.html @@ -0,0 +1,57 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v9/segment-button/theming/css-properties/index.md b/static/usage/v9/segment-button/theming/css-properties/index.md new file mode 100644 index 00000000000..6c70c70c3f1 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment-button/theming/css-properties/javascript.md b/static/usage/v9/segment-button/theming/css-properties/javascript.md new file mode 100644 index 00000000000..f8ebaae2f19 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/javascript.md @@ -0,0 +1,33 @@ +```html + + + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/react/main_css.md b/static/usage/v9/segment-button/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..a4e8f04f2b0 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/react/main_css.md @@ -0,0 +1,19 @@ +```css +ion-segment-button { + --indicator-color: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md { + --color: #000; + --color-checked: #08a391; + --indicator-height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios { + --color: #08a391; + --color-checked: #fff; + --border-radius: 20px; +} +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md b/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..2459d01206b --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/react/main_tsx.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Custom + + + Segment + + + Buttons + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment-button/theming/css-properties/vue.md b/static/usage/v9/segment-button/theming/css-properties/vue.md new file mode 100644 index 00000000000..36ca9019acd --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-properties/vue.md @@ -0,0 +1,39 @@ +```html + + + + + +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..fde253b69f9 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,31 @@ +```css +ion-segment-button::part(indicator-background) { + background: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md::part(native) { + color: #000; +} + +.segment-button-checked.md::part(native) { + color: #08a391; +} + +ion-segment-button.md::part(indicator-background) { + height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios::part(native) { + color: #08a391; +} + +.segment-button-checked.ios::part(native) { + color: #fff; +} + +ion-segment-button.ios::part(indicator-background) { + border-radius: 20px; +} +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..4ab86c2cdda --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html b/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..0d255ee0167 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/demo.html @@ -0,0 +1,69 @@ + + + + + + Segment Button + + + + + + + + + + + +
+ + + Custom + + + Segment + + + Buttons + + +
+ + + + diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/index.md b/static/usage/v9/segment-button/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..f973f9cdc0e --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/javascript.md b/static/usage/v9/segment-button/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..102ba6ccd19 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/javascript.md @@ -0,0 +1,45 @@ +```html + + + + + Custom + + + Segment + + + Buttons + + +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..fde253b69f9 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,31 @@ +```css +ion-segment-button::part(indicator-background) { + background: #08a391; +} + +/* Material Design styles */ +ion-segment-button.md::part(native) { + color: #000; +} + +.segment-button-checked.md::part(native) { + color: #08a391; +} + +ion-segment-button.md::part(indicator-background) { + height: 4px; +} + +/* iOS styles */ +ion-segment-button.ios::part(native) { + color: #08a391; +} + +.segment-button-checked.ios::part(native) { + color: #fff; +} + +ion-segment-button.ios::part(indicator-background) { + border-radius: 20px; +} +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..2459d01206b --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + Custom + + + Segment + + + Buttons + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md b/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..bb7b6a013a2 --- /dev/null +++ b/static/usage/v9/segment-button/theming/css-shadow-parts/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v9/segment/basic/angular/example_component_html.md b/static/usage/v9/segment/basic/angular/example_component_html.md new file mode 100644 index 00000000000..c497151f125 --- /dev/null +++ b/static/usage/v9/segment/basic/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html + + + Default + + + Segment + + + + + + Disabled + + + Segment + + +``` diff --git a/static/usage/v9/segment/basic/angular/example_component_ts.md b/static/usage/v9/segment/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment/basic/demo.html b/static/usage/v9/segment/basic/demo.html new file mode 100644 index 00000000000..6173a699e8a --- /dev/null +++ b/static/usage/v9/segment/basic/demo.html @@ -0,0 +1,48 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + Default + + + Segment + + + + + + Disabled + + + Segment + + +
+ + + + diff --git a/static/usage/v9/segment/basic/index.md b/static/usage/v9/segment/basic/index.md new file mode 100644 index 00000000000..a2957667e8d --- /dev/null +++ b/static/usage/v9/segment/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment/basic/javascript.md b/static/usage/v9/segment/basic/javascript.md new file mode 100644 index 00000000000..91d67d8dca7 --- /dev/null +++ b/static/usage/v9/segment/basic/javascript.md @@ -0,0 +1,19 @@ +```html + + + Default + + + Segment + + + + + + Disabled + + + Segment + + +``` diff --git a/static/usage/v9/segment/basic/react.md b/static/usage/v9/segment/basic/react.md new file mode 100644 index 00000000000..bb5c402112f --- /dev/null +++ b/static/usage/v9/segment/basic/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + + + + Disabled + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment/basic/vue.md b/static/usage/v9/segment/basic/vue.md new file mode 100644 index 00000000000..b341022a007 --- /dev/null +++ b/static/usage/v9/segment/basic/vue.md @@ -0,0 +1,25 @@ +```html + + + +``` diff --git a/static/usage/v9/segment/scrollable/angular/example_component_html.md b/static/usage/v9/segment/scrollable/angular/example_component_html.md new file mode 100644 index 00000000000..bbcc03848ec --- /dev/null +++ b/static/usage/v9/segment/scrollable/angular/example_component_html.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/segment/scrollable/angular/example_component_ts.md b/static/usage/v9/segment/scrollable/angular/example_component_ts.md new file mode 100644 index 00000000000..5ef41a5d6f2 --- /dev/null +++ b/static/usage/v9/segment/scrollable/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonSegment, IonSegmentButton], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash }); + } +} +``` diff --git a/static/usage/v9/segment/scrollable/demo.html b/static/usage/v9/segment/scrollable/demo.html new file mode 100644 index 00000000000..2e47883b646 --- /dev/null +++ b/static/usage/v9/segment/scrollable/demo.html @@ -0,0 +1,64 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/segment/scrollable/index.md b/static/usage/v9/segment/scrollable/index.md new file mode 100644 index 00000000000..fe969ef9e9d --- /dev/null +++ b/static/usage/v9/segment/scrollable/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment/scrollable/javascript/index_html.md b/static/usage/v9/segment/scrollable/javascript/index_html.md new file mode 100644 index 00000000000..dfc630d1d46 --- /dev/null +++ b/static/usage/v9/segment/scrollable/javascript/index_html.md @@ -0,0 +1,34 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/segment/scrollable/javascript/index_ts.md b/static/usage/v9/segment/scrollable/javascript/index_ts.md new file mode 100644 index 00000000000..52fcf877e98 --- /dev/null +++ b/static/usage/v9/segment/scrollable/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { barbell, basket, call, globe, heart, home, person, pin, star, trash } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'barbell': barbell, 'basket': basket, 'call': call, 'globe': globe, + * 'heart': heart, 'home': home, 'person': person, 'pin': pin, 'star': star, 'trash': trash }); + */ +addIcons({ barbell, basket, call, globe, heart, home, person, pin, star, trash }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/segment/scrollable/react.md b/static/usage/v9/segment/scrollable/react.md new file mode 100644 index 00000000000..61d304989bb --- /dev/null +++ b/static/usage/v9/segment/scrollable/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonIcon, IonSegment, IonSegmentButton } from '@ionic/react'; +import { home, heart, pin, star, call, globe, basket, barbell, trash, person } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment/scrollable/vue.md b/static/usage/v9/segment/scrollable/vue.md new file mode 100644 index 00000000000..92114db927e --- /dev/null +++ b/static/usage/v9/segment/scrollable/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v9/segment/swipeable/angular/example_component_css.md b/static/usage/v9/segment/swipeable/angular/example_component_css.md new file mode 100644 index 00000000000..dd13ba75999 --- /dev/null +++ b/static/usage/v9/segment/swipeable/angular/example_component_css.md @@ -0,0 +1,20 @@ +```css +ion-segment-view { + height: 150px; +} + +ion-segment-content { + display: flex; + align-items: center; + justify-content: center; +} +ion-segment-content:nth-of-type(1) { + background: lightpink; +} +ion-segment-content:nth-of-type(2) { + background: lightblue; +} +ion-segment-content:nth-of-type(3) { + background: lightgreen; +} +``` diff --git a/static/usage/v9/segment/swipeable/angular/example_component_html.md b/static/usage/v9/segment/swipeable/angular/example_component_html.md new file mode 100644 index 00000000000..0d372f239c5 --- /dev/null +++ b/static/usage/v9/segment/swipeable/angular/example_component_html.md @@ -0,0 +1,18 @@ +```html + + + First + + + Second + + + Third + + + + First + Second + Third + +``` diff --git a/static/usage/v9/segment/swipeable/angular/example_component_ts.md b/static/usage/v9/segment/swipeable/angular/example_component_ts.md new file mode 100644 index 00000000000..bf20b5afee4 --- /dev/null +++ b/static/usage/v9/segment/swipeable/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment/swipeable/demo.html b/static/usage/v9/segment/swipeable/demo.html new file mode 100644 index 00000000000..1e4fde4d117 --- /dev/null +++ b/static/usage/v9/segment/swipeable/demo.html @@ -0,0 +1,56 @@ + + + + + + Segment - Swipeable + + + + + + + + + + + + + + First + + + Second + + + Third + + + + First + Second + Third + + + + + diff --git a/static/usage/v9/segment/swipeable/index.md b/static/usage/v9/segment/swipeable/index.md new file mode 100644 index 00000000000..c4ebb83e29c --- /dev/null +++ b/static/usage/v9/segment/swipeable/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment/swipeable/javascript.md b/static/usage/v9/segment/swipeable/javascript.md new file mode 100644 index 00000000000..01308f07a94 --- /dev/null +++ b/static/usage/v9/segment/swipeable/javascript.md @@ -0,0 +1,39 @@ +```html + + + First + + + Second + + + Third + + + + First + Second + Third + + + +``` diff --git a/static/usage/v9/segment/swipeable/react/main_css.md b/static/usage/v9/segment/swipeable/react/main_css.md new file mode 100644 index 00000000000..dd13ba75999 --- /dev/null +++ b/static/usage/v9/segment/swipeable/react/main_css.md @@ -0,0 +1,20 @@ +```css +ion-segment-view { + height: 150px; +} + +ion-segment-content { + display: flex; + align-items: center; + justify-content: center; +} +ion-segment-content:nth-of-type(1) { + background: lightpink; +} +ion-segment-content:nth-of-type(2) { + background: lightblue; +} +ion-segment-content:nth-of-type(3) { + background: lightgreen; +} +``` diff --git a/static/usage/v9/segment/swipeable/react/main_tsx.md b/static/usage/v9/segment/swipeable/react/main_tsx.md new file mode 100644 index 00000000000..e571d9c793e --- /dev/null +++ b/static/usage/v9/segment/swipeable/react/main_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + First + + + Second + + + Third + + + + First + Second + Third + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment/swipeable/vue.md b/static/usage/v9/segment/swipeable/vue.md new file mode 100644 index 00000000000..850d5d7f011 --- /dev/null +++ b/static/usage/v9/segment/swipeable/vue.md @@ -0,0 +1,45 @@ +```html + + + + + +``` diff --git a/static/usage/v9/segment/theming/colors/angular/example_component_html.md b/static/usage/v9/segment/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..4787acc7ba3 --- /dev/null +++ b/static/usage/v9/segment/theming/colors/angular/example_component_html.md @@ -0,0 +1,82 @@ +```html + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +``` diff --git a/static/usage/v9/segment/theming/colors/angular/example_component_ts.md b/static/usage/v9/segment/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment/theming/colors/demo.html b/static/usage/v9/segment/theming/colors/demo.html new file mode 100644 index 00000000000..8d0d6e5ce5c --- /dev/null +++ b/static/usage/v9/segment/theming/colors/demo.html @@ -0,0 +1,111 @@ + + + + + + Segment + + + + + + + + + + + +
+ + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +
+ + + + diff --git a/static/usage/v9/segment/theming/colors/index.md b/static/usage/v9/segment/theming/colors/index.md new file mode 100644 index 00000000000..2cef5054bcf --- /dev/null +++ b/static/usage/v9/segment/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment/theming/colors/javascript.md b/static/usage/v9/segment/theming/colors/javascript.md new file mode 100644 index 00000000000..4787acc7ba3 --- /dev/null +++ b/static/usage/v9/segment/theming/colors/javascript.md @@ -0,0 +1,82 @@ +```html + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + +``` diff --git a/static/usage/v9/segment/theming/colors/react.md b/static/usage/v9/segment/theming/colors/react.md new file mode 100644 index 00000000000..81c799bbbec --- /dev/null +++ b/static/usage/v9/segment/theming/colors/react.md @@ -0,0 +1,92 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Default + + + Segment + + + + + Primary + + + Segment + + + + + Secondary + + + Segment + + + + + Tertiary + + + Segment + + + + + Success + + + Segment + + + + + Warning + + + Segment + + + + + Danger + + + Segment + + + + + Light + + + Segment + + + + + Medium + + + Segment + + + + + Dark + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment/theming/colors/vue.md b/static/usage/v9/segment/theming/colors/vue.md new file mode 100644 index 00000000000..9c4822fdb2c --- /dev/null +++ b/static/usage/v9/segment/theming/colors/vue.md @@ -0,0 +1,88 @@ +```html + + + +``` diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..8ecca25270d --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-segment { + --background: #54dc98; +} +``` diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..01aac10305d --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Custom + + + Segment + + +``` diff --git a/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..bdeb9b73031 --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonLabel, IonSegment, IonSegmentButton], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/segment/theming/css-properties/demo.html b/static/usage/v9/segment/theming/css-properties/demo.html new file mode 100644 index 00000000000..52905adb687 --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/demo.html @@ -0,0 +1,40 @@ + + + + + + Note + + + + + + + + + + + +
+ + + Custom + + + Segment + + +
+ + + + diff --git a/static/usage/v9/segment/theming/css-properties/index.md b/static/usage/v9/segment/theming/css-properties/index.md new file mode 100644 index 00000000000..aa4867250ad --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/segment/theming/css-properties/javascript.md b/static/usage/v9/segment/theming/css-properties/javascript.md new file mode 100644 index 00000000000..b5ae092adeb --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + Custom + + + Segment + + +``` diff --git a/static/usage/v9/segment/theming/css-properties/react/main_css.md b/static/usage/v9/segment/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..8ecca25270d --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-segment { + --background: #54dc98; +} +``` diff --git a/static/usage/v9/segment/theming/css-properties/react/main_tsx.md b/static/usage/v9/segment/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..a7e9dc7e0f5 --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/react/main_tsx.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Custom + + + Segment + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/segment/theming/css-properties/vue.md b/static/usage/v9/segment/theming/css-properties/vue.md new file mode 100644 index 00000000000..161a8b89420 --- /dev/null +++ b/static/usage/v9/segment/theming/css-properties/vue.md @@ -0,0 +1,22 @@ +```html + + + + + +``` diff --git a/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md b/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md new file mode 100644 index 00000000000..e65d1ace014 --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md b/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/basic/multiple-selection/demo.html b/static/usage/v9/select/basic/multiple-selection/demo.html new file mode 100644 index 00000000000..b95ba95efae --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Multiple Selection + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/basic/multiple-selection/index.md b/static/usage/v9/select/basic/multiple-selection/index.md new file mode 100644 index 00000000000..9850001f2af --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/basic/multiple-selection/javascript.md b/static/usage/v9/select/basic/multiple-selection/javascript.md new file mode 100644 index 00000000000..0150a273be4 --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/basic/multiple-selection/react.md b/static/usage/v9/select/basic/multiple-selection/react.md new file mode 100644 index 00000000000..4533409e292 --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/basic/multiple-selection/vue.md b/static/usage/v9/select/basic/multiple-selection/vue.md new file mode 100644 index 00000000000..08ea8e968c4 --- /dev/null +++ b/static/usage/v9/select/basic/multiple-selection/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md new file mode 100644 index 00000000000..eb02be61202 --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md new file mode 100644 index 00000000000..e0602c543a3 --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + handleChange(event: CustomEvent) { + console.log('ionChange fired with value: ' + event.detail.value); + } + + handleCancel() { + console.log('ionCancel fired'); + } + + handleDismiss() { + console.log('ionDismiss fired'); + } +} +``` diff --git a/static/usage/v9/select/basic/responding-to-interaction/demo.html b/static/usage/v9/select/basic/responding-to-interaction/demo.html new file mode 100644 index 00000000000..ca555896f32 --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/demo.html @@ -0,0 +1,46 @@ + + + + + + Select - Responding to Interaction + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + + + diff --git a/static/usage/v9/select/basic/responding-to-interaction/index.md b/static/usage/v9/select/basic/responding-to-interaction/index.md new file mode 100644 index 00000000000..393bf2a563f --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/basic/responding-to-interaction/javascript.md b/static/usage/v9/select/basic/responding-to-interaction/javascript.md new file mode 100644 index 00000000000..aad9323759a --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/javascript.md @@ -0,0 +1,27 @@ +```html + + + + Apples + Oranges + Bananas + + + + + +``` diff --git a/static/usage/v9/select/basic/responding-to-interaction/react.md b/static/usage/v9/select/basic/responding-to-interaction/react.md new file mode 100644 index 00000000000..f730bf4c69a --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + console.log(`ionChange fired with value: ${e.detail.value}`)} + onIonCancel={() => console.log('ionCancel fired')} + onIonDismiss={() => console.log('ionDismiss fired')} + > + Apples + Oranges + Bananas + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/select/basic/responding-to-interaction/vue.md b/static/usage/v9/select/basic/responding-to-interaction/vue.md new file mode 100644 index 00000000000..bfc4e339b43 --- /dev/null +++ b/static/usage/v9/select/basic/responding-to-interaction/vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v9/select/basic/single-selection/angular/example_component_html.md b/static/usage/v9/select/basic/single-selection/angular/example_component_html.md new file mode 100644 index 00000000000..9c587d71a67 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md b/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/basic/single-selection/demo.html b/static/usage/v9/select/basic/single-selection/demo.html new file mode 100644 index 00000000000..1b3cfede270 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Single Selection + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/basic/single-selection/index.md b/static/usage/v9/select/basic/single-selection/index.md new file mode 100644 index 00000000000..1f7e4ec0d19 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/basic/single-selection/javascript.md b/static/usage/v9/select/basic/single-selection/javascript.md new file mode 100644 index 00000000000..9c587d71a67 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/basic/single-selection/react.md b/static/usage/v9/select/basic/single-selection/react.md new file mode 100644 index 00000000000..d30a1dbe40b --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/basic/single-selection/vue.md b/static/usage/v9/select/basic/single-selection/vue.md new file mode 100644 index 00000000000..551fbffeb48 --- /dev/null +++ b/static/usage/v9/select/basic/single-selection/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/customization/button-text/angular/example_component_html.md b/static/usage/v9/select/customization/button-text/angular/example_component_html.md new file mode 100644 index 00000000000..3d1ab2ab3a1 --- /dev/null +++ b/static/usage/v9/select/customization/button-text/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/button-text/angular/example_component_ts.md b/static/usage/v9/select/customization/button-text/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/customization/button-text/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/customization/button-text/demo.html b/static/usage/v9/select/customization/button-text/demo.html new file mode 100644 index 00000000000..89ce1e8355a --- /dev/null +++ b/static/usage/v9/select/customization/button-text/demo.html @@ -0,0 +1,47 @@ + + + + + + Select - Button Text + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/customization/button-text/index.md b/static/usage/v9/select/customization/button-text/index.md new file mode 100644 index 00000000000..15c42a5f538 --- /dev/null +++ b/static/usage/v9/select/customization/button-text/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/customization/button-text/javascript.md b/static/usage/v9/select/customization/button-text/javascript.md new file mode 100644 index 00000000000..721ddea5107 --- /dev/null +++ b/static/usage/v9/select/customization/button-text/javascript.md @@ -0,0 +1,23 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/button-text/react.md b/static/usage/v9/select/customization/button-text/react.md new file mode 100644 index 00000000000..94bf337191c --- /dev/null +++ b/static/usage/v9/select/customization/button-text/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/customization/button-text/vue.md b/static/usage/v9/select/customization/button-text/vue.md new file mode 100644 index 00000000000..2a7b1109a11 --- /dev/null +++ b/static/usage/v9/select/customization/button-text/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md new file mode 100644 index 00000000000..429435daa6a --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md new file mode 100644 index 00000000000..03ec018576e --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, remove } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, remove }); + } +} +``` diff --git a/static/usage/v9/select/customization/custom-toggle-icons/demo.html b/static/usage/v9/select/customization/custom-toggle-icons/demo.html new file mode 100644 index 00000000000..18ea9a45b47 --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/demo.html @@ -0,0 +1,36 @@ + + + + + + Select - Custom Toggle Icons + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/customization/custom-toggle-icons/index.md b/static/usage/v9/select/customization/custom-toggle-icons/index.md new file mode 100644 index 00000000000..9df69e2e508 --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/customization/custom-toggle-icons/javascript.md b/static/usage/v9/select/customization/custom-toggle-icons/javascript.md new file mode 100644 index 00000000000..fe874eaac26 --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/javascript.md @@ -0,0 +1,17 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/custom-toggle-icons/react.md b/static/usage/v9/select/customization/custom-toggle-icons/react.md new file mode 100644 index 00000000000..c7358752605 --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/react.md @@ -0,0 +1,26 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { add, remove } from 'ionicons/icons'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/customization/custom-toggle-icons/vue.md b/static/usage/v9/select/customization/custom-toggle-icons/vue.md new file mode 100644 index 00000000000..6f0793d5496 --- /dev/null +++ b/static/usage/v9/select/customization/custom-toggle-icons/vue.md @@ -0,0 +1,24 @@ +```html + + + +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_css.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_html.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_html.md new file mode 100644 index 00000000000..5f40703296c --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_html.md @@ -0,0 +1,30 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md new file mode 100644 index 00000000000..5bb366e4ae0 --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { caretDownSharp } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ caretDownSharp }); + } +} +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/demo.html b/static/usage/v9/select/customization/icon-flip-behavior/demo.html new file mode 100644 index 00000000000..2e883c680dc --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/demo.html @@ -0,0 +1,63 @@ + + + + + + Select - Icon Flip Behavior + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/customization/icon-flip-behavior/index.md b/static/usage/v9/select/customization/icon-flip-behavior/index.md new file mode 100644 index 00000000000..2d5fa1f0b91 --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/customization/icon-flip-behavior/javascript.md b/static/usage/v9/select/customization/icon-flip-behavior/javascript.md new file mode 100644 index 00000000000..de35559165f --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/javascript.md @@ -0,0 +1,44 @@ +```html + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + + +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/react/main_css.md b/static/usage/v9/select/customization/icon-flip-behavior/react/main_css.md new file mode 100644 index 00000000000..b031a2d4851 --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/react/main_css.md @@ -0,0 +1,13 @@ +```css +ion-select.always-flip::part(icon) { + transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); +} + +ion-select.always-flip.select-expanded::part(icon) { + transform: rotate(180deg); +} + +ion-select.never-flip::part(icon) { + transform: none; +} +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/react/main_tsx.md b/static/usage/v9/select/customization/icon-flip-behavior/react/main_tsx.md new file mode 100644 index 00000000000..e7b146efcee --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/react/main_tsx.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { caretDownSharp } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/customization/icon-flip-behavior/vue.md b/static/usage/v9/select/customization/icon-flip-behavior/vue.md new file mode 100644 index 00000000000..3234c0351f7 --- /dev/null +++ b/static/usage/v9/select/customization/icon-flip-behavior/vue.md @@ -0,0 +1,51 @@ +```html + + + + + +``` diff --git a/static/usage/v9/select/customization/interface-options/angular/example_component_html.md b/static/usage/v9/select/customization/interface-options/angular/example_component_html.md new file mode 100644 index 00000000000..34316637911 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/angular/example_component_html.md @@ -0,0 +1,40 @@ +```html + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + + + Reese's + Snickers + Twix + + + +``` diff --git a/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md b/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md new file mode 100644 index 00000000000..8bd3d734248 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/angular/example_component_ts.md @@ -0,0 +1,36 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + customAlertOptions = { + header: 'Pizza Toppings', + subHeader: 'Select your favorite topping', + message: 'Choose only one', + translucent: true, + }; + + customPopoverOptions = { + header: 'Hair Color', + subHeader: 'Select your hair color', + message: 'Only select your dominant hair color', + }; + + customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; + + customModalOptions = { + header: 'Favorite Candy', + breakpoints: [0, 0.5], + initialBreakpoint: 0.5, + }; +} +``` diff --git a/static/usage/v9/select/customization/interface-options/demo.html b/static/usage/v9/select/customization/interface-options/demo.html new file mode 100644 index 00000000000..b09f8780556 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/demo.html @@ -0,0 +1,99 @@ + + + + + + Select - Interface Options + + + + + + + + + + + +
+ + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + + + Reese's + Snickers + Twix + + + +
+ + + + + + diff --git a/static/usage/v9/select/customization/interface-options/index.md b/static/usage/v9/select/customization/interface-options/index.md new file mode 100644 index 00000000000..29617fbb1cc --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/customization/interface-options/javascript.md b/static/usage/v9/select/customization/interface-options/javascript.md new file mode 100644 index 00000000000..4160f534206 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/javascript.md @@ -0,0 +1,69 @@ +```html + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + + + Reese's + Snickers + Twix + + + + + +``` diff --git a/static/usage/v9/select/customization/interface-options/react.md b/static/usage/v9/select/customization/interface-options/react.md new file mode 100644 index 00000000000..3252b3a5681 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/react.md @@ -0,0 +1,71 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + const customAlertOptions = { + header: 'Pizza Toppings', + subHeader: 'Select your favorite topping', + message: 'Choose only one', + translucent: true, + }; + + const customPopoverOptions = { + header: 'Hair Color', + subHeader: 'Select your hair color', + message: 'Only select your dominant hair color', + }; + + const customActionSheetOptions = { + header: 'Colors', + subHeader: 'Select your favorite color', + }; + + const customModalOptions = { + header: 'Favorite Candy', + breakpoints: [0, 0.5], + initialBreakpoint: 0.5, + }; + + return ( + + + + Bacon + Onions + Pepperoni + + + + + + Brown + Blonde + Red + + + + + + Red + Green + Blue + + + + + + Reese's + Snickers + Twix + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/customization/interface-options/vue.md b/static/usage/v9/select/customization/interface-options/vue.md new file mode 100644 index 00000000000..ef8558e3f02 --- /dev/null +++ b/static/usage/v9/select/customization/interface-options/vue.md @@ -0,0 +1,75 @@ +```html + + + +``` diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_css.md b/static/usage/v9/select/customization/styling-select/angular/example_component_css.md new file mode 100644 index 00000000000..4ca173bed8f --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/angular/example_component_css.md @@ -0,0 +1,27 @@ +```css +ion-select { + --placeholder-color: #971e49; + --placeholder-opacity: 1; + width: 100%; + justify-content: center; +} + +ion-select::part(placeholder), +ion-select::part(text) { + flex: 0 0 auto; +} + +ion-select::part(placeholder)::first-letter { + font-size: 24px; + font-weight: 500; +} + +ion-select::part(text) { + color: #545ca7; +} + +ion-select::part(icon) { + color: #971e49; + opacity: 1; +} +``` diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_html.md b/static/usage/v9/select/customization/styling-select/angular/example_component_html.md new file mode 100644 index 00000000000..c2f19e70065 --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + Apples + Oranges + Bananas + +``` diff --git a/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md b/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md new file mode 100644 index 00000000000..d526f852997 --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/customization/styling-select/demo.html b/static/usage/v9/select/customization/styling-select/demo.html new file mode 100644 index 00000000000..3e5e660c6bb --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/demo.html @@ -0,0 +1,58 @@ + + + + + + Select - Styling the Select + + + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/customization/styling-select/index.md b/static/usage/v9/select/customization/styling-select/index.md new file mode 100644 index 00000000000..2eb8572ab2c --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/customization/styling-select/javascript.md b/static/usage/v9/select/customization/styling-select/javascript.md new file mode 100644 index 00000000000..169ad61aa88 --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/javascript.md @@ -0,0 +1,35 @@ +```html + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/customization/styling-select/react/main_css.md b/static/usage/v9/select/customization/styling-select/react/main_css.md new file mode 100644 index 00000000000..4ca173bed8f --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/react/main_css.md @@ -0,0 +1,27 @@ +```css +ion-select { + --placeholder-color: #971e49; + --placeholder-opacity: 1; + width: 100%; + justify-content: center; +} + +ion-select::part(placeholder), +ion-select::part(text) { + flex: 0 0 auto; +} + +ion-select::part(placeholder)::first-letter { + font-size: 24px; + font-weight: 500; +} + +ion-select::part(text) { + color: #545ca7; +} + +ion-select::part(icon) { + color: #971e49; + opacity: 1; +} +``` diff --git a/static/usage/v9/select/customization/styling-select/react/main_tsx.md b/static/usage/v9/select/customization/styling-select/react/main_tsx.md new file mode 100644 index 00000000000..00e0e7a8027 --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonSelect, IonSelectOption } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Apples + Oranges + Bananas + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/customization/styling-select/vue.md b/static/usage/v9/select/customization/styling-select/vue.md new file mode 100644 index 00000000000..88d8160375b --- /dev/null +++ b/static/usage/v9/select/customization/styling-select/vue.md @@ -0,0 +1,41 @@ +```html + + + + + +``` diff --git a/static/usage/v9/select/fill/angular/example_component_html.md b/static/usage/v9/select/fill/angular/example_component_html.md new file mode 100644 index 00000000000..fcfe25bfe2c --- /dev/null +++ b/static/usage/v9/select/fill/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + +``` diff --git a/static/usage/v9/select/fill/angular/example_component_ts.md b/static/usage/v9/select/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..d526f852997 --- /dev/null +++ b/static/usage/v9/select/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/fill/demo.html b/static/usage/v9/select/fill/demo.html new file mode 100644 index 00000000000..611f95cbf62 --- /dev/null +++ b/static/usage/v9/select/fill/demo.html @@ -0,0 +1,42 @@ + + + + + + Input + + + + + + + + + + + +
+ + Apple + Banana + Orange + + + + Apple + Banana + Orange + +
+ + + + diff --git a/static/usage/v9/select/fill/index.md b/static/usage/v9/select/fill/index.md new file mode 100644 index 00000000000..2ff332cee6f --- /dev/null +++ b/static/usage/v9/select/fill/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/fill/javascript.md b/static/usage/v9/select/fill/javascript.md new file mode 100644 index 00000000000..fcfe25bfe2c --- /dev/null +++ b/static/usage/v9/select/fill/javascript.md @@ -0,0 +1,15 @@ +```html + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + +``` diff --git a/static/usage/v9/select/fill/react.md b/static/usage/v9/select/fill/react.md new file mode 100644 index 00000000000..e6813654ee2 --- /dev/null +++ b/static/usage/v9/select/fill/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + <> + + Apple + Banana + Orange + + +
+ + + Apple + Banana + Orange + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/fill/vue.md b/static/usage/v9/select/fill/vue.md new file mode 100644 index 00000000000..68fa92c3e25 --- /dev/null +++ b/static/usage/v9/select/fill/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/select/helper-error/angular/example_component_html.md b/static/usage/v9/select/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..0e65b13e6fe --- /dev/null +++ b/static/usage/v9/select/helper-error/angular/example_component_html.md @@ -0,0 +1,19 @@ +```html +
+ + Apple + Banana + Orange + + +
+ + Submit +
+``` diff --git a/static/usage/v9/select/helper-error/angular/example_component_ts.md b/static/usage/v9/select/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..59948b78540 --- /dev/null +++ b/static/usage/v9/select/helper-error/angular/example_component_ts.md @@ -0,0 +1,28 @@ +```ts +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { IonSelect, IonSelectOption, IonButton } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + imports: [IonSelect, IonSelectOption, IonButton, ReactiveFormsModule], + templateUrl: './example.component.html', + styleUrl: './example.component.css', +}) +export class ExampleComponent { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + favFruit: ['', Validators.required], + }); + } + + onSubmit() { + // Mark the control as touched to trigger the error message. + // This is needed if the user submits the form without interacting + // with the select. + this.myForm.get('favFruit')!.markAsTouched(); + } +} +``` diff --git a/static/usage/v9/select/helper-error/demo.html b/static/usage/v9/select/helper-error/demo.html new file mode 100644 index 00000000000..b9b893275fc --- /dev/null +++ b/static/usage/v9/select/helper-error/demo.html @@ -0,0 +1,68 @@ + + + + + + Input + + + + + + + +
+
+ + Apple + Banana + Orange + + +
+ + Submit +
+
+ + + + diff --git a/static/usage/v9/select/helper-error/index.md b/static/usage/v9/select/helper-error/index.md new file mode 100644 index 00000000000..1215d5b4871 --- /dev/null +++ b/static/usage/v9/select/helper-error/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/helper-error/javascript.md b/static/usage/v9/select/helper-error/javascript.md new file mode 100644 index 00000000000..41e595a05cf --- /dev/null +++ b/static/usage/v9/select/helper-error/javascript.md @@ -0,0 +1,53 @@ +```html +
+ + Apple + Banana + Orange + + +
+ + Submit +
+ + +``` diff --git a/static/usage/v9/select/helper-error/react.md b/static/usage/v9/select/helper-error/react.md new file mode 100644 index 00000000000..b8c4cd16904 --- /dev/null +++ b/static/usage/v9/select/helper-error/react.md @@ -0,0 +1,72 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonSelect, IonSelectOption, IonButton, SelectCustomEvent } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const favFruitRef = useRef(null); + + const validateSelect = (event: SelectCustomEvent<{ value: string }>) => { + setIsValid(event.detail.value ? true : false); + }; + + const markTouched = () => { + setIsTouched(true); + }; + + const onIonBlur = () => { + markTouched(); + + if (favFruitRef.current) { + validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{ + value: string; + }>); + } + }; + + const submit = (event: React.FormEvent) => { + event.preventDefault(); + + markTouched(); + + if (favFruitRef.current) { + validateSelect({ detail: { value: favFruitRef.current.value } } as SelectCustomEvent<{ + value: string; + }>); + } + }; + + return ( + <> +
+ validateSelect(event)} + onIonBlur={onIonBlur} + > + Apple + Banana + Orange + + +
+ + + Submit + +
+ + ); +} + +export default Example; +``` diff --git a/static/usage/v9/select/helper-error/vue.md b/static/usage/v9/select/helper-error/vue.md new file mode 100644 index 00000000000..eb2a24e1afd --- /dev/null +++ b/static/usage/v9/select/helper-error/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md new file mode 100644 index 00000000000..f8d864e3a7c --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/interfaces/action-sheet/demo.html b/static/usage/v9/select/interfaces/action-sheet/demo.html new file mode 100644 index 00000000000..21c7d002a2d --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Action Sheet + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/interfaces/action-sheet/index.md b/static/usage/v9/select/interfaces/action-sheet/index.md new file mode 100644 index 00000000000..ed647b54776 --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/interfaces/action-sheet/javascript.md b/static/usage/v9/select/interfaces/action-sheet/javascript.md new file mode 100644 index 00000000000..f8d864e3a7c --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/action-sheet/react.md b/static/usage/v9/select/interfaces/action-sheet/react.md new file mode 100644 index 00000000000..b285c79f0b3 --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/interfaces/action-sheet/vue.md b/static/usage/v9/select/interfaces/action-sheet/vue.md new file mode 100644 index 00000000000..102714dd2be --- /dev/null +++ b/static/usage/v9/select/interfaces/action-sheet/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/interfaces/modal/angular/example_component_html.md b/static/usage/v9/select/interfaces/modal/angular/example_component_html.md new file mode 100644 index 00000000000..ac93580e0c3 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md b/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/interfaces/modal/demo.html b/static/usage/v9/select/interfaces/modal/demo.html new file mode 100644 index 00000000000..5d81ee10860 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Modal + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/interfaces/modal/index.md b/static/usage/v9/select/interfaces/modal/index.md new file mode 100644 index 00000000000..0ff91d2a547 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/interfaces/modal/javascript.md b/static/usage/v9/select/interfaces/modal/javascript.md new file mode 100644 index 00000000000..ac93580e0c3 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/modal/react.md b/static/usage/v9/select/interfaces/modal/react.md new file mode 100644 index 00000000000..42251a782d6 --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/interfaces/modal/vue.md b/static/usage/v9/select/interfaces/modal/vue.md new file mode 100644 index 00000000000..6b9d6fc3cbb --- /dev/null +++ b/static/usage/v9/select/interfaces/modal/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/interfaces/popover/angular/example_component_html.md b/static/usage/v9/select/interfaces/popover/angular/example_component_html.md new file mode 100644 index 00000000000..fe01597afa5 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md b/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/interfaces/popover/demo.html b/static/usage/v9/select/interfaces/popover/demo.html new file mode 100644 index 00000000000..768298d7637 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/demo.html @@ -0,0 +1,30 @@ + + + + + + Select - Popover + + + + + + + + + +
+ + + + Apples + Oranges + Bananas + + + +
+ + + + diff --git a/static/usage/v9/select/interfaces/popover/index.md b/static/usage/v9/select/interfaces/popover/index.md new file mode 100644 index 00000000000..e4f91cffac1 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/interfaces/popover/javascript.md b/static/usage/v9/select/interfaces/popover/javascript.md new file mode 100644 index 00000000000..fe01597afa5 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apples + Oranges + Bananas + + + +``` diff --git a/static/usage/v9/select/interfaces/popover/react.md b/static/usage/v9/select/interfaces/popover/react.md new file mode 100644 index 00000000000..2afe98eef3c --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonList, IonItem, IonSelect, IonSelectOption } from '@ionic/react'; +function Example() { + return ( + + + + Apples + Oranges + Bananas + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/interfaces/popover/vue.md b/static/usage/v9/select/interfaces/popover/vue.md new file mode 100644 index 00000000000..e51289b4e26 --- /dev/null +++ b/static/usage/v9/select/interfaces/popover/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/justify/angular/example_component_html.md b/static/usage/v9/select/justify/angular/example_component_html.md new file mode 100644 index 00000000000..a3951bb1a59 --- /dev/null +++ b/static/usage/v9/select/justify/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + +``` diff --git a/static/usage/v9/select/justify/angular/example_component_ts.md b/static/usage/v9/select/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..cc0e99d8d78 --- /dev/null +++ b/static/usage/v9/select/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/justify/demo.html b/static/usage/v9/select/justify/demo.html new file mode 100644 index 00000000000..d175225c686 --- /dev/null +++ b/static/usage/v9/select/justify/demo.html @@ -0,0 +1,49 @@ + + + + + + select + + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v9/select/justify/index.md b/static/usage/v9/select/justify/index.md new file mode 100644 index 00000000000..e9485fa8640 --- /dev/null +++ b/static/usage/v9/select/justify/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/justify/javascript.md b/static/usage/v9/select/justify/javascript.md new file mode 100644 index 00000000000..a3951bb1a59 --- /dev/null +++ b/static/usage/v9/select/justify/javascript.md @@ -0,0 +1,23 @@ +```html + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + +``` diff --git a/static/usage/v9/select/justify/react.md b/static/usage/v9/select/justify/react.md new file mode 100644 index 00000000000..3c9b16c3129 --- /dev/null +++ b/static/usage/v9/select/justify/react.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/justify/vue.md b/static/usage/v9/select/justify/vue.md new file mode 100644 index 00000000000..f6be5ad8681 --- /dev/null +++ b/static/usage/v9/select/justify/vue.md @@ -0,0 +1,31 @@ +```html + + + +``` diff --git a/static/usage/v9/select/label-placement/angular/example_component_html.md b/static/usage/v9/select/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..063c257914d --- /dev/null +++ b/static/usage/v9/select/label-placement/angular/example_component_html.md @@ -0,0 +1,35 @@ +```html + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/label-placement/angular/example_component_ts.md b/static/usage/v9/select/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/label-placement/demo.html b/static/usage/v9/select/label-placement/demo.html new file mode 100644 index 00000000000..c407e2310d7 --- /dev/null +++ b/static/usage/v9/select/label-placement/demo.html @@ -0,0 +1,60 @@ + + + + + + select + + + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v9/select/label-placement/index.md b/static/usage/v9/select/label-placement/index.md new file mode 100644 index 00000000000..8cc5db318f6 --- /dev/null +++ b/static/usage/v9/select/label-placement/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/label-placement/javascript.md b/static/usage/v9/select/label-placement/javascript.md new file mode 100644 index 00000000000..063c257914d --- /dev/null +++ b/static/usage/v9/select/label-placement/javascript.md @@ -0,0 +1,35 @@ +```html + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/label-placement/react.md b/static/usage/v9/select/label-placement/react.md new file mode 100644 index 00000000000..3850747793d --- /dev/null +++ b/static/usage/v9/select/label-placement/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/label-placement/vue.md b/static/usage/v9/select/label-placement/vue.md new file mode 100644 index 00000000000..ba1256888c4 --- /dev/null +++ b/static/usage/v9/select/label-placement/vue.md @@ -0,0 +1,41 @@ +```html + + + +``` diff --git a/static/usage/v9/select/label-slot/angular/example_component_html.md b/static/usage/v9/select/label-slot/angular/example_component_html.md new file mode 100644 index 00000000000..93790d050e2 --- /dev/null +++ b/static/usage/v9/select/label-slot/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/label-slot/angular/example_component_ts.md b/static/usage/v9/select/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..ed7368e5da6 --- /dev/null +++ b/static/usage/v9/select/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption, IonText], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/label-slot/demo.html b/static/usage/v9/select/label-slot/demo.html new file mode 100644 index 00000000000..076d932ec3a --- /dev/null +++ b/static/usage/v9/select/label-slot/demo.html @@ -0,0 +1,31 @@ + + + + + + select + + + + + + + + + +
+ + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v9/select/label-slot/index.md b/static/usage/v9/select/label-slot/index.md new file mode 100644 index 00000000000..e561ae542ab --- /dev/null +++ b/static/usage/v9/select/label-slot/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/label-slot/javascript.md b/static/usage/v9/select/label-slot/javascript.md new file mode 100644 index 00000000000..93790d050e2 --- /dev/null +++ b/static/usage/v9/select/label-slot/javascript.md @@ -0,0 +1,12 @@ +```html + + + +
Favorite Fruit (Required)
+ Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/label-slot/react.md b/static/usage/v9/select/label-slot/react.md new file mode 100644 index 00000000000..a903897a65b --- /dev/null +++ b/static/usage/v9/select/label-slot/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Favorite Fruit (Required) +
+ Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/label-slot/vue.md b/static/usage/v9/select/label-slot/vue.md new file mode 100644 index 00000000000..872d609abe7 --- /dev/null +++ b/static/usage/v9/select/label-slot/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/select/no-visible-label/angular/example_component_html.md b/static/usage/v9/select/no-visible-label/angular/example_component_html.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/no-visible-label/angular/example_component_ts.md b/static/usage/v9/select/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..14297fc18d4 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/select/no-visible-label/demo.html b/static/usage/v9/select/no-visible-label/demo.html new file mode 100644 index 00000000000..bbaaf4956a6 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/demo.html @@ -0,0 +1,30 @@ + + + + + + select + + + + + + + + + +
+ + + + Apple + Banana + Orange + + + +
+ + + + diff --git a/static/usage/v9/select/no-visible-label/index.md b/static/usage/v9/select/no-visible-label/index.md new file mode 100644 index 00000000000..f628c0cb7f9 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/no-visible-label/javascript.md b/static/usage/v9/select/no-visible-label/javascript.md new file mode 100644 index 00000000000..1c14ab03008 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/javascript.md @@ -0,0 +1,11 @@ +```html + + + + Apple + Banana + Orange + + + +``` diff --git a/static/usage/v9/select/no-visible-label/react.md b/static/usage/v9/select/no-visible-label/react.md new file mode 100644 index 00000000000..8695381a487 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption, IonText } from '@ionic/react'; + +function Example() { + return ( + + + + Apple + Banana + Orange + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/no-visible-label/vue.md b/static/usage/v9/select/no-visible-label/vue.md new file mode 100644 index 00000000000..dbb3a256f08 --- /dev/null +++ b/static/usage/v9/select/no-visible-label/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md new file mode 100644 index 00000000000..361cfbad1b8 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + + + @for (food of foods; track food) { + {{ food.name }} + } + + + +``` diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md new file mode 100644 index 00000000000..929ad9395b7 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/angular/example_component_ts.md @@ -0,0 +1,53 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +interface Food { + id: number; + name: string; + type: string; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1: Food | null, o2: Food | Food[] | null): boolean { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((o) => o.id === o1.id); + } + + return o1.id === o2.id; + } + + handleChange(event: Event) { + const target = event.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); + } +} +``` diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/demo.html b/static/usage/v9/select/objects-as-values/multiple-selection/demo.html new file mode 100644 index 00000000000..64ffeaa327d --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/demo.html @@ -0,0 +1,72 @@ + + + + + + Select - Object Values and Multiple Selection + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/index.md b/static/usage/v9/select/objects-as-values/multiple-selection/index.md new file mode 100644 index 00000000000..3ece9e0a7a3 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/javascript.md b/static/usage/v9/select/objects-as-values/multiple-selection/javascript.md new file mode 100644 index 00000000000..fef901c8e28 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/javascript.md @@ -0,0 +1,53 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/react.md b/static/usage/v9/select/objects-as-values/multiple-selection/react.md new file mode 100644 index 00000000000..3fc8c0d54f9 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/react.md @@ -0,0 +1,63 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + if (!o1 || !o2) { + return o1 === o2; + } + + if (Array.isArray(o2)) { + return o2.some((o) => o.id === o1.id); + } + + return o1.id === o2.id; +}; + +function Example() { + return ( + + + console.log('Current value:', JSON.stringify(event.detail.value))} + multiple={true} + > + {foods.map((food) => ( + + {food.name} + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/objects-as-values/multiple-selection/vue.md b/static/usage/v9/select/objects-as-values/multiple-selection/vue.md new file mode 100644 index 00000000000..35a2c3b69ee --- /dev/null +++ b/static/usage/v9/select/objects-as-values/multiple-selection/vue.md @@ -0,0 +1,55 @@ +```html + + + +``` diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md new file mode 100644 index 00000000000..808a9743cc2 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + + @for (food of foods; track food) { + {{ food.name }} + } + + + +``` diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md new file mode 100644 index 00000000000..1deee0fc6ed --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/angular/example_component_ts.md @@ -0,0 +1,45 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +interface Food { + id: number; + name: string; + type: string; +} + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, + ]; + + compareWith(o1: Food | null, o2: Food | null): boolean { + return o1 && o2 ? o1.id === o2.id : o1 === o2; + } + + handleChange(event: Event) { + const target = event.target as HTMLIonSelectElement; + console.log('Current value:', JSON.stringify(target.value)); + } +} +``` diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/demo.html b/static/usage/v9/select/objects-as-values/using-comparewith/demo.html new file mode 100644 index 00000000000..54218949ed9 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/demo.html @@ -0,0 +1,64 @@ + + + + + + Select - Using compareWith + + + + + + + + + +
+ + + + + +
+ + + + + + diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/index.md b/static/usage/v9/select/objects-as-values/using-comparewith/index.md new file mode 100644 index 00000000000..e5870bfc059 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/javascript.md b/static/usage/v9/select/objects-as-values/using-comparewith/javascript.md new file mode 100644 index 00000000000..4c4a831c91f --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/javascript.md @@ -0,0 +1,46 @@ +```html + + + + + + + +``` diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/react.md b/static/usage/v9/select/objects-as-values/using-comparewith/react.md new file mode 100644 index 00000000000..ba3a3b7f556 --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/react.md @@ -0,0 +1,54 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; + +interface Food { + id: number; + name: string; + type: string; +} + +const foods: Food[] = [ + { + id: 1, + name: 'Apples', + type: 'fruit', + }, + { + id: 2, + name: 'Carrots', + type: 'vegetable', + }, + { + id: 3, + name: 'Cupcakes', + type: 'dessert', + }, +]; + +const compareWith = (o1: Food, o2: Food) => { + return o1 && o2 ? o1.id === o2.id : o1 === o2; +}; + +function Example() { + return ( + + + console.log('Current value:', JSON.stringify(event.detail.value))} + > + {foods.map((food) => ( + + {food.name} + + ))} + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/objects-as-values/using-comparewith/vue.md b/static/usage/v9/select/objects-as-values/using-comparewith/vue.md new file mode 100644 index 00000000000..a88d6cb7b5e --- /dev/null +++ b/static/usage/v9/select/objects-as-values/using-comparewith/vue.md @@ -0,0 +1,46 @@ +```html + + + +``` diff --git a/static/usage/v9/select/rich-content-options/angular/example_component_html.md b/static/usage/v9/select/rich-content-options/angular/example_component_html.md new file mode 100644 index 00000000000..f8431fb7164 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + @for (selectInterface of selectInterfaces; track selectInterface) { + + + + + Flight + 2h 15m · Nonstop + $279 + + + + Bus + 6h 40m · 1 transfer + $39 + + + + Rental Car + 5h 10m · Flexible route + $92 + + + + Train + 4h 55m · Direct + $64 + + + + } + +``` diff --git a/static/usage/v9/select/rich-content-options/angular/example_component_ts.md b/static/usage/v9/select/rich-content-options/angular/example_component_ts.md new file mode 100644 index 00000000000..a85d2012c74 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/angular/example_component_ts.md @@ -0,0 +1,30 @@ +```ts +import { Component } from '@angular/core'; +import { IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; +import { addIcons } from 'ionicons'; +import { airplane, bus, car, train } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + imports: [IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + readonly selectInterfaces = ['alert', 'action-sheet', 'modal', 'popover']; + + /* The interfaceOptions property is for demonstration purposes only. */ + /* It is not required for the rich options to work. */ + readonly interfaceOptions = { header: 'Travel mode' }; + + constructor() { + addIcons({ airplane, bus, car, train }); + } + + formatInterfaceLabel(selectInterface: string): string { + return selectInterface + .split('-') + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); + } +} +``` diff --git a/static/usage/v9/select/rich-content-options/angular/global_css.md b/static/usage/v9/select/rich-content-options/angular/global_css.md new file mode 100644 index 00000000000..4210c475efa --- /dev/null +++ b/static/usage/v9/select/rich-content-options/angular/global_css.md @@ -0,0 +1,49 @@ +```css +/* -----------------------------------------------------*/ +/* These styles are for demonstration purposes only. */ +/* They are not required for the rich options to work. */ +/* -----------------------------------------------------*/ + +/** +* All Interfaces +* ------------------------------------------------ +* Override the flex styles so that the title and +* subtitle stack vertically. +*/ +.select-option-content div.alert-radio-label-text, +.select-option-content span.action-sheet-button-label-text, +.select-option-content div.select-option-label-text { + flex-direction: column; + align-items: start; + gap: 5px; +} + +/* Action Sheet Interface */ +ion-action-sheet .select-option-description { + text-align: start; +} + +/* Alert Interface */ +ion-alert.select-alert { + --min-width: 350px; +} + +/* Modal, Popover Interfaces */ +ion-popover.select-popover ion-list ion-radio.in-item::part(label), +ion-modal.select-modal ion-list ion-radio.in-item::part(label) { + margin-top: 10px; + margin-bottom: 10px; +} + +/* Custom Select Option Title */ +.select-option-content .option-title { + font-size: 1rem; + font-weight: 600; +} + +/* Custom Select Option Subtitle */ +.select-option-content .option-subtitle { + font-size: 0.8125rem; + font-weight: 500; +} +``` diff --git a/static/usage/v9/select/rich-content-options/angular/main_ts.md b/static/usage/v9/select/rich-content-options/angular/main_ts.md new file mode 100644 index 00000000000..8849e212e82 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/angular/main_ts.md @@ -0,0 +1,22 @@ +```ts +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter, withPreloading, PreloadAllModules } from '@angular/router'; +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ + /** + * `innerHTMLTemplatesEnabled` must be enabled for rich-content + * select options to render correctly. + */ + innerHTMLTemplatesEnabled: true, + }), + provideRouter(routes, withPreloading(PreloadAllModules)), + ], +}); +``` diff --git a/static/usage/v9/select/rich-content-options/demo.html b/static/usage/v9/select/rich-content-options/demo.html new file mode 100644 index 00000000000..9bc45a69c20 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/demo.html @@ -0,0 +1,148 @@ + + + + + + Select - Rich Content Option + + + + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v9/select/rich-content-options/index.md b/static/usage/v9/select/rich-content-options/index.md new file mode 100644 index 00000000000..a2a88596f02 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/index.md @@ -0,0 +1,51 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue_main_ts from './vue/main_ts.md'; +import vue_example_vue from './vue/example_vue.md'; + +import angular_main_ts from './angular/main_ts.md'; +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/select/rich-content-options/javascript/index_html.md b/static/usage/v9/select/rich-content-options/javascript/index_html.md new file mode 100644 index 00000000000..1852581b495 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/javascript/index_html.md @@ -0,0 +1,126 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/select/rich-content-options/javascript/index_ts.md b/static/usage/v9/select/rich-content-options/javascript/index_ts.md new file mode 100644 index 00000000000..01ce02c278a --- /dev/null +++ b/static/usage/v9/select/rich-content-options/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { airplane, bus, car, train } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'airplane': airplane, 'bus': bus, 'car': car, 'train', train }); + */ +addIcons({ airplane, bus, car, train }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/select/rich-content-options/react/app_tsx.md b/static/usage/v9/select/rich-content-options/react/app_tsx.md new file mode 100644 index 00000000000..1b6a1f30942 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/react/app_tsx.md @@ -0,0 +1,54 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp, IonContent } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +/** + * `innerHTMLTemplatesEnabled` must be enabled for rich-content + * select options to render correctly. + */ +setupIonicReact({ + innerHTMLTemplatesEnabled: true, +}); + +export default function App() { + return ( + + + + + + ); +} +``` diff --git a/static/usage/v9/select/rich-content-options/react/main_css.md b/static/usage/v9/select/rich-content-options/react/main_css.md new file mode 100644 index 00000000000..4210c475efa --- /dev/null +++ b/static/usage/v9/select/rich-content-options/react/main_css.md @@ -0,0 +1,49 @@ +```css +/* -----------------------------------------------------*/ +/* These styles are for demonstration purposes only. */ +/* They are not required for the rich options to work. */ +/* -----------------------------------------------------*/ + +/** +* All Interfaces +* ------------------------------------------------ +* Override the flex styles so that the title and +* subtitle stack vertically. +*/ +.select-option-content div.alert-radio-label-text, +.select-option-content span.action-sheet-button-label-text, +.select-option-content div.select-option-label-text { + flex-direction: column; + align-items: start; + gap: 5px; +} + +/* Action Sheet Interface */ +ion-action-sheet .select-option-description { + text-align: start; +} + +/* Alert Interface */ +ion-alert.select-alert { + --min-width: 350px; +} + +/* Modal, Popover Interfaces */ +ion-popover.select-popover ion-list ion-radio.in-item::part(label), +ion-modal.select-modal ion-list ion-radio.in-item::part(label) { + margin-top: 10px; + margin-bottom: 10px; +} + +/* Custom Select Option Title */ +.select-option-content .option-title { + font-size: 1rem; + font-weight: 600; +} + +/* Custom Select Option Subtitle */ +.select-option-content .option-subtitle { + font-size: 0.8125rem; + font-weight: 500; +} +``` diff --git a/static/usage/v9/select/rich-content-options/react/main_tsx.md b/static/usage/v9/select/rich-content-options/react/main_tsx.md new file mode 100644 index 00000000000..1497ab84dac --- /dev/null +++ b/static/usage/v9/select/rich-content-options/react/main_tsx.md @@ -0,0 +1,71 @@ +```tsx +import React from 'react'; +import { SelectInterface } from '@ionic/core'; +import { IonBadge, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { airplane, bus, car, train } from 'ionicons/icons'; + +import './main.css'; + +const selectInterfaces: SelectInterface[] = ['alert', 'action-sheet', 'modal', 'popover']; + +/* The interfaceOptions property is for demonstration purposes only. */ +/* It is not required for the rich options to work. */ +const interfaceOptions = { header: 'Travel mode' }; + +const formatInterfaceLabel = (selectInterface: string) => + selectInterface + .split('-') + .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) + .join(' '); + +function Example() { + return ( + + {selectInterfaces.map((selectInterface) => ( + + + + + + + + + + + + + ))} + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/rich-content-options/vue/example_vue.md b/static/usage/v9/select/rich-content-options/vue/example_vue.md new file mode 100644 index 00000000000..626aa4e4d00 --- /dev/null +++ b/static/usage/v9/select/rich-content-options/vue/example_vue.md @@ -0,0 +1,106 @@ +```vue + + + + + +``` diff --git a/static/usage/v9/select/rich-content-options/vue/main_ts.md b/static/usage/v9/select/rich-content-options/vue/main_ts.md new file mode 100644 index 00000000000..5c0704d315d --- /dev/null +++ b/static/usage/v9/select/rich-content-options/vue/main_ts.md @@ -0,0 +1,46 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * `innerHTMLTemplatesEnabled` must be enabled for rich-content + * select options to render correctly. + */ +createApp(App) + .use(IonicVue, { + innerHTMLTemplatesEnabled: true, + }) + .mount('#app'); +``` diff --git a/static/usage/v9/select/start-end-slots/angular/example_component_html.md b/static/usage/v9/select/start-end-slots/angular/example_component_html.md new file mode 100644 index 00000000000..e42b896605c --- /dev/null +++ b/static/usage/v9/select/start-end-slots/angular/example_component_html.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v9/select/start-end-slots/angular/example_component_ts.md b/static/usage/v9/select/start-end-slots/angular/example_component_ts.md new file mode 100644 index 00000000000..4bcba3f6d5d --- /dev/null +++ b/static/usage/v9/select/start-end-slots/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ eye, leaf }); + } +} +``` diff --git a/static/usage/v9/select/start-end-slots/demo.html b/static/usage/v9/select/start-end-slots/demo.html new file mode 100644 index 00000000000..3661bde204b --- /dev/null +++ b/static/usage/v9/select/start-end-slots/demo.html @@ -0,0 +1,40 @@ + + + + + + Select + + + + + + + + + + + +
+ + + + + Apple + Banana + Orange + + + + + + +
+ + + + diff --git a/static/usage/v9/select/start-end-slots/index.md b/static/usage/v9/select/start-end-slots/index.md new file mode 100644 index 00000000000..118f8e25e13 --- /dev/null +++ b/static/usage/v9/select/start-end-slots/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/select/start-end-slots/javascript/index_html.md b/static/usage/v9/select/start-end-slots/javascript/index_html.md new file mode 100644 index 00000000000..78d136d6a6a --- /dev/null +++ b/static/usage/v9/select/start-end-slots/javascript/index_html.md @@ -0,0 +1,15 @@ +```html + + + + + Apple + Banana + Orange + + + + + + +``` diff --git a/static/usage/v9/select/start-end-slots/javascript/index_ts.md b/static/usage/v9/select/start-end-slots/javascript/index_ts.md new file mode 100644 index 00000000000..3b788666e48 --- /dev/null +++ b/static/usage/v9/select/start-end-slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { eye, leaf } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'eye': eye, 'leaf': leaf }); + */ +addIcons({ eye, leaf }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/select/start-end-slots/react.md b/static/usage/v9/select/start-end-slots/react.md new file mode 100644 index 00000000000..98bbf6208d7 --- /dev/null +++ b/static/usage/v9/select/start-end-slots/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonList, IonSelect, IonSelectOption } from '@ionic/react'; +import { eye, leaf } from 'ionicons/icons'; + +function Example() { + return ( + + + + + Apple + Banana + Orange + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/start-end-slots/vue.md b/static/usage/v9/select/start-end-slots/vue.md new file mode 100644 index 00000000000..8905cec221a --- /dev/null +++ b/static/usage/v9/select/start-end-slots/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v9/select/typeahead/angular/angular_types_ts.md b/static/usage/v9/select/typeahead/angular/angular_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v9/select/typeahead/angular/angular_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v9/select/typeahead/angular/example_component_html.md b/static/usage/v9/select/typeahead/angular/example_component_html.md new file mode 100644 index 00000000000..5d4c94d6c44 --- /dev/null +++ b/static/usage/v9/select/typeahead/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + Favorite Fruits +
{{ selectedFruitsText }}
+ + + + + + + + + +``` diff --git a/static/usage/v9/select/typeahead/angular/example_component_ts.md b/static/usage/v9/select/typeahead/angular/example_component_ts.md new file mode 100644 index 00000000000..dae298b07e1 --- /dev/null +++ b/static/usage/v9/select/typeahead/angular/example_component_ts.md @@ -0,0 +1,71 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/angular'; +import { Item } from './types'; + +import { TypeaheadComponent } from './typeahead.component'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonItem, IonLabel, IonList, IonModal, TypeaheadComponent], +}) +export class ExampleComponent { + @ViewChild('modal', { static: true }) modal!: IonModal; + + selectedFruitsText = '0 Items'; + selectedFruits: string[] = []; + + fruits: Item[] = [ + { text: 'Apple', value: 'apple' }, + { text: 'Apricot', value: 'apricot' }, + { text: 'Banana', value: 'banana' }, + { text: 'Blackberry', value: 'blackberry' }, + { text: 'Blueberry', value: 'blueberry' }, + { text: 'Cherry', value: 'cherry' }, + { text: 'Cranberry', value: 'cranberry' }, + { text: 'Grape', value: 'grape' }, + { text: 'Grapefruit', value: 'grapefruit' }, + { text: 'Guava', value: 'guava' }, + { text: 'Jackfruit', value: 'jackfruit' }, + { text: 'Lime', value: 'lime' }, + { text: 'Mango', value: 'mango' }, + { text: 'Nectarine', value: 'nectarine' }, + { text: 'Orange', value: 'orange' }, + { text: 'Papaya', value: 'papaya' }, + { text: 'Passionfruit', value: 'passionfruit' }, + { text: 'Peach', value: 'peach' }, + { text: 'Pear', value: 'pear' }, + { text: 'Plantain', value: 'plantain' }, + { text: 'Plum', value: 'plum' }, + { text: 'Pineapple', value: 'pineapple' }, + { text: 'Pomegranate', value: 'pomegranate' }, + { text: 'Raspberry', value: 'raspberry' }, + { text: 'Strawberry', value: 'strawberry' }, + ]; + + /** + * Formats the display text based on the selected fruits. + * @param data - Array of selected fruit values + * @returns A formatted string for display + */ + private formatData(data: string[]): string { + if (data.length === 1) { + const fruit = this.fruits.find((fruit) => fruit.value === data[0]); + return fruit ? fruit.text : ''; + } + return `${data.length} items`; + } + + /** + * Handles fruit selection changes and updates the selected fruits and text. + * @param fruits - Array of selected fruit values + */ + fruitSelectionChanged(fruits: string[]) { + this.selectedFruits = fruits; + this.selectedFruitsText = this.formatData(this.selectedFruits); + this.modal.dismiss(); + } +} +``` diff --git a/static/usage/v9/select/typeahead/angular/typeahead_component_html.md b/static/usage/v9/select/typeahead/angular/typeahead_component_html.md new file mode 100644 index 00000000000..ed147c64254 --- /dev/null +++ b/static/usage/v9/select/typeahead/angular/typeahead_component_html.md @@ -0,0 +1,28 @@ +```html + + + + Cancel + + {{ title }} + + Done + + + + + + + + + + @for (item of filteredItems; track item.value) { + + {{ item.text }} + + } + + +``` diff --git a/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md b/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md new file mode 100644 index 00000000000..ada61dc9b30 --- /dev/null +++ b/static/usage/v9/select/typeahead/angular/typeahead_component_ts.md @@ -0,0 +1,103 @@ +```ts +import { Component, Input, Output, EventEmitter } from '@angular/core'; +import type { OnInit } from '@angular/core'; + +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { Item } from './types'; + +@Component({ + selector: 'app-typeahead', + templateUrl: 'typeahead.component.html', + imports: [ + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonSearchbar, + IonTitle, + IonToolbar, + ], +}) +export class TypeaheadComponent implements OnInit { + @Input() items: Item[] = []; + @Input() selectedItems: string[] = []; + @Input() title = 'Select Items'; + + @Output() selectionCancel = new EventEmitter(); + @Output() selectionChange = new EventEmitter(); + + filteredItems: Item[] = []; + workingSelectedValues: string[] = []; + + ngOnInit() { + this.filteredItems = [...this.items]; + this.workingSelectedValues = [...this.selectedItems]; + } + + cancelChanges() { + this.selectionCancel.emit(); + } + + confirmChanges() { + this.selectionChange.emit(this.workingSelectedValues); + } + + searchbarInput(event: Event) { + const inputElement = event.target as HTMLInputElement; + this.filterList(inputElement.value); + } + + /** + * Update the rendered view with + * the provided search query. If no + * query is provided, all data + * will be rendered. + */ + filterList(searchQuery: string | undefined) { + /** + * If no search query is defined, + * return all options. + */ + if (searchQuery === undefined || searchQuery.trim() === '') { + this.filteredItems = [...this.items]; + } else { + /** + * Otherwise, normalize the search + * query and check to see which items + * contain the search query as a substring. + */ + const normalizedQuery = searchQuery.toLowerCase(); + this.filteredItems = this.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)); + } + } + + isChecked(value: string): boolean { + return this.workingSelectedValues.includes(value); + } + + checkboxChange(event: CustomEvent<{ checked: boolean; value: string }>) { + const { checked, value } = event.detail; + + if (checked) { + this.workingSelectedValues = [...this.workingSelectedValues, value]; + } else { + this.workingSelectedValues = this.workingSelectedValues.filter((item) => item !== value); + } + } +} +``` diff --git a/static/usage/v9/select/typeahead/demo.html b/static/usage/v9/select/typeahead/demo.html new file mode 100644 index 00000000000..ff5915ddb9f --- /dev/null +++ b/static/usage/v9/select/typeahead/demo.html @@ -0,0 +1,220 @@ + + + + + + Select + + + + + + + + + +
+ + + Favorite Fruits +
0 Items
+ + +
+ + + + + + + Cancel + + Favorite Fruits + + Done + + + + + + + + + + + + + + + diff --git a/static/usage/v9/select/typeahead/index.md b/static/usage/v9/select/typeahead/index.md new file mode 100644 index 00000000000..4d2ed63c4fa --- /dev/null +++ b/static/usage/v9/select/typeahead/index.md @@ -0,0 +1,50 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_types_ts from './react/react_types_ts.md'; +import typeahead_component_tsx from './react/typeahead_component_tsx.md'; + +import vue_example from './vue/example_vue.md'; +import vue_types_ts from './vue/vue_types_ts.md'; +import vue_typeahead_component from './vue/typeahead_component_vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_typeahead_component_ts from './angular/typeahead_component_ts.md'; +import angular_typeahead_component_html from './angular/typeahead_component_html.md'; +import angular_types_ts from './angular/angular_types_ts.md'; + + diff --git a/static/usage/v9/select/typeahead/javascript.md b/static/usage/v9/select/typeahead/javascript.md new file mode 100644 index 00000000000..2f2737a1d92 --- /dev/null +++ b/static/usage/v9/select/typeahead/javascript.md @@ -0,0 +1,205 @@ +```html + +
+ + + Favorite Fruits +
0 Items
+ + +
+ + + + + + + Cancel + + Favorite Fruits + + Done + + + + + + + + + + + + +``` diff --git a/static/usage/v9/select/typeahead/react/main_tsx.md b/static/usage/v9/select/typeahead/react/main_tsx.md new file mode 100644 index 00000000000..391259a7ecf --- /dev/null +++ b/static/usage/v9/select/typeahead/react/main_tsx.md @@ -0,0 +1,83 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonContent, IonItem, IonLabel, IonList, IonModal } from '@ionic/react'; +import AppTypeahead from './AppTypeahead'; + +import type { Item } from './types'; + +const fruits: Item[] = [ + { text: 'Apple', value: 'apple' }, + { text: 'Apricot', value: 'apricot' }, + { text: 'Banana', value: 'banana' }, + { text: 'Blackberry', value: 'blackberry' }, + { text: 'Blueberry', value: 'blueberry' }, + { text: 'Cherry', value: 'cherry' }, + { text: 'Cranberry', value: 'cranberry' }, + { text: 'Grape', value: 'grape' }, + { text: 'Grapefruit', value: 'grapefruit' }, + { text: 'Guava', value: 'guava' }, + { text: 'Jackfruit', value: 'jackfruit' }, + { text: 'Lime', value: 'lime' }, + { text: 'Mango', value: 'mango' }, + { text: 'Nectarine', value: 'nectarine' }, + { text: 'Orange', value: 'orange' }, + { text: 'Papaya', value: 'papaya' }, + { text: 'Passionfruit', value: 'passionfruit' }, + { text: 'Peach', value: 'peach' }, + { text: 'Pear', value: 'pear' }, + { text: 'Plantain', value: 'plantain' }, + { text: 'Plum', value: 'plum' }, + { text: 'Pineapple', value: 'pineapple' }, + { text: 'Pomegranate', value: 'pomegranate' }, + { text: 'Raspberry', value: 'raspberry' }, + { text: 'Strawberry', value: 'strawberry' }, +]; + +function Example() { + const [selectedFruitsText, setSelectedFruitsText] = useState('0 Items'); + const [selectedFruits, setSelectedFruits] = useState([]); + + const modal = useRef(null); + + const formatData = (data: string[]) => { + if (data.length === 1) { + const fruit = fruits.find((fruit) => fruit.value === data[0])!; + return fruit.text; + } + + return `${data.length} items`; + }; + + const fruitSelectionChanged = (fruits: string[]) => { + setSelectedFruits(fruits); + setSelectedFruitsText(formatData(fruits)); + modal.current?.dismiss(); + }; + + return ( + <> + + + + Favorite Fruits +
+ {selectedFruitsText} +
+ + + + + + modal.current?.dismiss()} + onSelectionChange={fruitSelectionChanged} + /> + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/select/typeahead/react/react_types_ts.md b/static/usage/v9/select/typeahead/react/react_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v9/select/typeahead/react/react_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md b/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md new file mode 100644 index 00000000000..7aee53fae3f --- /dev/null +++ b/static/usage/v9/select/typeahead/react/typeahead_component_tsx.md @@ -0,0 +1,122 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonButtons, + IonCheckbox, + IonContent, + IonHeader, + IonItem, + IonList, + IonTitle, + IonSearchbar, + IonToolbar, +} from '@ionic/react'; +import type { CheckboxCustomEvent } from '@ionic/react'; +import type { Item } from './types'; + +interface TypeaheadProps { + items: Item[]; + selectedItems: string[]; + title?: string; + onSelectionCancel?: () => void; + onSelectionChange?: (items: string[]) => void; +} + +function AppTypeahead(props: TypeaheadProps) { + const [filteredItems, setFilteredItems] = useState([...props.items]); + const [workingSelectedValues, setWorkingSelectedValues] = useState([...props.selectedItems]); + + const isChecked = (value: string) => { + return workingSelectedValues.find((item) => item === value) !== undefined; + }; + + const cancelChanges = () => { + const { onSelectionCancel } = props; + if (onSelectionCancel !== undefined) { + onSelectionCancel(); + } + }; + + const confirmChanges = () => { + const { onSelectionChange } = props; + if (onSelectionChange !== undefined) { + onSelectionChange(workingSelectedValues); + } + }; + + const searchbarInput = (event: any) => { + filterList(event.target.value); + }; + + /** + * Update the rendered view with + * the provided search query. If no + * query is provided, all data + * will be rendered. + */ + const filterList = (searchQuery: string | null | undefined) => { + /** + * If no search query is defined, + * return all options. + */ + if (searchQuery === undefined || searchQuery === null) { + setFilteredItems([...props.items]); + } else { + /** + * Otherwise, normalize the search + * query and check to see which items + * contain the search query as a substring. + */ + const normalizedQuery = searchQuery.toLowerCase(); + setFilteredItems( + props.items.filter((item) => { + return item.text.toLowerCase().includes(normalizedQuery); + }) + ); + } + }; + + const checkboxChange = (event: CheckboxCustomEvent) => { + const { checked, value } = event.detail; + + if (checked) { + setWorkingSelectedValues([...workingSelectedValues, value]); + } else { + setWorkingSelectedValues(workingSelectedValues.filter((item) => item !== value)); + } + }; + + return ( + <> + + + + Cancel + + {props.title} + + Done + + + + + + + + + + {filteredItems.map((item) => ( + + + {item.text} + + + ))} + + + + ); +} +export default AppTypeahead; +``` diff --git a/static/usage/v9/select/typeahead/vue/example_vue.md b/static/usage/v9/select/typeahead/vue/example_vue.md new file mode 100644 index 00000000000..bf15d147b79 --- /dev/null +++ b/static/usage/v9/select/typeahead/vue/example_vue.md @@ -0,0 +1,76 @@ +```html + + + +``` diff --git a/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md b/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md new file mode 100644 index 00000000000..1d145e47fb5 --- /dev/null +++ b/static/usage/v9/select/typeahead/vue/typeahead_component_vue.md @@ -0,0 +1,115 @@ +```html + + + +``` diff --git a/static/usage/v9/select/typeahead/vue/vue_types_ts.md b/static/usage/v9/select/typeahead/vue/vue_types_ts.md new file mode 100644 index 00000000000..42d4583e026 --- /dev/null +++ b/static/usage/v9/select/typeahead/vue/vue_types_ts.md @@ -0,0 +1,6 @@ +```ts +export interface Item { + text: string; + value: string; +} +``` diff --git a/static/usage/v9/skeleton-text/basic/angular/example_component_html.md b/static/usage/v9/skeleton-text/basic/angular/example_component_html.md new file mode 100644 index 00000000000..de7aaafd2f3 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/angular/example_component_html.md @@ -0,0 +1,41 @@ +```html +@if (loaded) { + + Albums + + + + + +

Abbey Road

+

The Beatles

+

1969

+ + + +} @else { + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +} + +Toggle +``` diff --git a/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md b/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..fc9695838c8 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/angular/example_component_ts.md @@ -0,0 +1,35 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { musicalNotes } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], +}) +export class ExampleComponent { + public loaded = false; + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ musicalNotes }); + } +} +``` diff --git a/static/usage/v9/skeleton-text/basic/demo.html b/static/usage/v9/skeleton-text/basic/demo.html new file mode 100644 index 00000000000..1a29180e73f --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/demo.html @@ -0,0 +1,89 @@ + + + + + + Accordion + + + + + + + + + + + +
+
+ Toggle +
+ + + + + + diff --git a/static/usage/v9/skeleton-text/basic/index.md b/static/usage/v9/skeleton-text/basic/index.md new file mode 100644 index 00000000000..9c1dfdb57c9 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/skeleton-text/basic/javascript/index_html.md b/static/usage/v9/skeleton-text/basic/javascript/index_html.md new file mode 100644 index 00000000000..da71f295063 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/javascript/index_html.md @@ -0,0 +1,60 @@ +```html +
+Toggle + + +``` diff --git a/static/usage/v9/skeleton-text/basic/javascript/index_ts.md b/static/usage/v9/skeleton-text/basic/javascript/index_ts.md new file mode 100644 index 00000000000..71e4281cb46 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { musicalNotes } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "musical-notes" key. + * Alternatively, developers can do: + * addIcons({ 'musical-notes': musicalNotes }); + */ +addIcons({ musicalNotes }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/skeleton-text/basic/react.md b/static/usage/v9/skeleton-text/basic/react.md new file mode 100644 index 00000000000..a247849a478 --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/react.md @@ -0,0 +1,61 @@ +```tsx +import React, { useState } from 'react'; +import { + IonButton, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonSkeletonText, + IonThumbnail, +} from '@ionic/react'; +import { musicalNotes } from 'ionicons/icons'; +function Example() { + const [loaded, setLoaded] = useState(false); + return ( + <> + {loaded && ( + + Albums + + + + + +

Abbey Road

+

The Beatles

+

1969

+ + + + )} + {!loaded && ( + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + + )} + setLoaded(!loaded)}>Toggle + + ); +} +export default Example; +``` diff --git a/static/usage/v9/skeleton-text/basic/vue.md b/static/usage/v9/skeleton-text/basic/vue.md new file mode 100644 index 00000000000..17b4eb4985f --- /dev/null +++ b/static/usage/v9/skeleton-text/basic/vue.md @@ -0,0 +1,59 @@ +```html + + + +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..c59d8603262 --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,7 @@ +```css +ion-skeleton-text { + --border-radius: 9999px; + --background: rgba(188, 0, 255, 0.065); + --background-rgb: 188, 0, 255; +} +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4044c112b0c --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,23 @@ +```html + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..fde523457ca --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/demo.html b/static/usage/v9/skeleton-text/theming/css-properties/demo.html new file mode 100644 index 00000000000..c7b8c229dae --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/demo.html @@ -0,0 +1,58 @@ + + + + + + Accordion + + + + + + + + + + + +
+ + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +
+ + + + diff --git a/static/usage/v9/skeleton-text/theming/css-properties/index.md b/static/usage/v9/skeleton-text/theming/css-properties/index.md new file mode 100644 index 00000000000..f616ab8f1f8 --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/skeleton-text/theming/css-properties/javascript.md b/static/usage/v9/skeleton-text/theming/css-properties/javascript.md new file mode 100644 index 00000000000..90d27d3f31e --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/javascript.md @@ -0,0 +1,31 @@ +```html + + + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md b/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..c59d8603262 --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/react/main_css.md @@ -0,0 +1,7 @@ +```css +ion-skeleton-text { + --border-radius: 9999px; + --background: rgba(188, 0, 255, 0.065); + --background-rgb: 188, 0, 255; +} +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md b/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..d66ea73ff7f --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/react/main_tsx.md @@ -0,0 +1,33 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonList, IonListHeader, IonSkeletonText, IonThumbnail } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + + + + + +

+ +

+

+ +

+

+ +

+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/skeleton-text/theming/css-properties/vue.md b/static/usage/v9/skeleton-text/theming/css-properties/vue.md new file mode 100644 index 00000000000..58395e04bf9 --- /dev/null +++ b/static/usage/v9/skeleton-text/theming/css-properties/vue.md @@ -0,0 +1,37 @@ +```html + + + + + +``` diff --git a/static/usage/v9/spinner/basic/angular/example_component_html.md b/static/usage/v9/spinner/basic/angular/example_component_html.md new file mode 100644 index 00000000000..72997980940 --- /dev/null +++ b/static/usage/v9/spinner/basic/angular/example_component_html.md @@ -0,0 +1,51 @@ +```html + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +``` diff --git a/static/usage/v9/spinner/basic/angular/example_component_ts.md b/static/usage/v9/spinner/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7fffdae985b --- /dev/null +++ b/static/usage/v9/spinner/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonSpinner } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/spinner/basic/demo.html b/static/usage/v9/spinner/basic/demo.html new file mode 100644 index 00000000000..b93f88ab8cf --- /dev/null +++ b/static/usage/v9/spinner/basic/demo.html @@ -0,0 +1,77 @@ + + + + + + Spinner + + + + + + + + + + + +
+ + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +
+ + + + diff --git a/static/usage/v9/spinner/basic/index.md b/static/usage/v9/spinner/basic/index.md new file mode 100644 index 00000000000..f005e3a820a --- /dev/null +++ b/static/usage/v9/spinner/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/spinner/basic/javascript.md b/static/usage/v9/spinner/basic/javascript.md new file mode 100644 index 00000000000..72997980940 --- /dev/null +++ b/static/usage/v9/spinner/basic/javascript.md @@ -0,0 +1,51 @@ +```html + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + +``` diff --git a/static/usage/v9/spinner/basic/react.md b/static/usage/v9/spinner/basic/react.md new file mode 100644 index 00000000000..c6219c28b42 --- /dev/null +++ b/static/usage/v9/spinner/basic/react.md @@ -0,0 +1,61 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonSpinner } from '@ionic/react'; + +function Example() { + return ( + <> + + Default + + + + + Dots + + + + + Lines + + + + + Lines Small + + + + + Lines Sharp + + + + + Lines Sharp Small + + + + + Bubbles + + + + + Circles + + + + + Circular + + + + + Crescent + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/spinner/basic/vue.md b/static/usage/v9/spinner/basic/vue.md new file mode 100644 index 00000000000..e12bd51515a --- /dev/null +++ b/static/usage/v9/spinner/basic/vue.md @@ -0,0 +1,57 @@ +```html + + + +``` diff --git a/static/usage/v9/spinner/theming/colors/angular/example_component_html.md b/static/usage/v9/spinner/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..089ea023e92 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/spinner/theming/colors/angular/example_component_ts.md b/static/usage/v9/spinner/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..4a941e77f77 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/spinner/theming/colors/demo.html b/static/usage/v9/spinner/theming/colors/demo.html new file mode 100644 index 00000000000..0a1beca6bf8 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/demo.html @@ -0,0 +1,31 @@ + + + + + + Spinner + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/spinner/theming/colors/index.md b/static/usage/v9/spinner/theming/colors/index.md new file mode 100644 index 00000000000..5061ddb9845 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/spinner/theming/colors/javascript.md b/static/usage/v9/spinner/theming/colors/javascript.md new file mode 100644 index 00000000000..089ea023e92 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/javascript.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/spinner/theming/colors/react.md b/static/usage/v9/spinner/theming/colors/react.md new file mode 100644 index 00000000000..aca320e2720 --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/spinner/theming/colors/vue.md b/static/usage/v9/spinner/theming/colors/vue.md new file mode 100644 index 00000000000..017f999ce8c --- /dev/null +++ b/static/usage/v9/spinner/theming/colors/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md b/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..e77a7d79e6a --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,5 @@ +```css +ion-spinner { + --color: #54dc98; +} +``` diff --git a/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md b/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..4b3b8d665b4 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/spinner/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/spinner/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..4a941e77f77 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/spinner/theming/css-properties/demo.html b/static/usage/v9/spinner/theming/css-properties/demo.html new file mode 100644 index 00000000000..48993da0299 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/demo.html @@ -0,0 +1,28 @@ + + + + + + Spinner + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/spinner/theming/css-properties/index.md b/static/usage/v9/spinner/theming/css-properties/index.md new file mode 100644 index 00000000000..c6a39a53bc8 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/spinner/theming/css-properties/javascript.md b/static/usage/v9/spinner/theming/css-properties/javascript.md new file mode 100644 index 00000000000..e2077bc508e --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/javascript.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/spinner/theming/css-properties/react.md b/static/usage/v9/spinner/theming/css-properties/react.md new file mode 100644 index 00000000000..117d82c8541 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/spinner/theming/css-properties/react/main_css.md b/static/usage/v9/spinner/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..e77a7d79e6a --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/react/main_css.md @@ -0,0 +1,5 @@ +```css +ion-spinner { + --color: #54dc98; +} +``` diff --git a/static/usage/v9/spinner/theming/css-properties/react/main_tsx.md b/static/usage/v9/spinner/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..f990cb1e738 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/spinner/theming/css-properties/vue.md b/static/usage/v9/spinner/theming/css-properties/vue.md new file mode 100644 index 00000000000..4d1f195be67 --- /dev/null +++ b/static/usage/v9/spinner/theming/css-properties/vue.md @@ -0,0 +1,15 @@ +```html + + + + + +``` diff --git a/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md b/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md b/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md new file mode 100644 index 00000000000..4b3b8d665b4 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html + +``` diff --git a/static/usage/v9/spinner/theming/resizing/angular/example_component_ts.md b/static/usage/v9/spinner/theming/resizing/angular/example_component_ts.md new file mode 100644 index 00000000000..4a941e77f77 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonSpinner } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonSpinner], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/spinner/theming/resizing/demo.html b/static/usage/v9/spinner/theming/resizing/demo.html new file mode 100644 index 00000000000..314a5ed2248 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/demo.html @@ -0,0 +1,29 @@ + + + + + + Spinner + + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/spinner/theming/resizing/index.md b/static/usage/v9/spinner/theming/resizing/index.md new file mode 100644 index 00000000000..f6e4e80ab55 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/spinner/theming/resizing/javascript.md b/static/usage/v9/spinner/theming/resizing/javascript.md new file mode 100644 index 00000000000..9c875eb4951 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/javascript.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/spinner/theming/resizing/react.md b/static/usage/v9/spinner/theming/resizing/react.md new file mode 100644 index 00000000000..117d82c8541 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +function Example() { + return ; +} +export default Example; +``` diff --git a/static/usage/v9/spinner/theming/resizing/react/main_css.md b/static/usage/v9/spinner/theming/resizing/react/main_css.md new file mode 100644 index 00000000000..845d1a9af47 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-spinner { + width: 100px; + height: 100px; +} +``` diff --git a/static/usage/v9/spinner/theming/resizing/react/main_tsx.md b/static/usage/v9/spinner/theming/resizing/react/main_tsx.md new file mode 100644 index 00000000000..f990cb1e738 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonSpinner } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/spinner/theming/resizing/vue.md b/static/usage/v9/spinner/theming/resizing/vue.md new file mode 100644 index 00000000000..563a7ea38e9 --- /dev/null +++ b/static/usage/v9/spinner/theming/resizing/vue.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v9/split-pane/basic/angular/example_component_html.md b/static/usage/v9/split-pane/basic/angular/example_component_html.md new file mode 100644 index 00000000000..c642d54bc50 --- /dev/null +++ b/static/usage/v9/split-pane/basic/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v9/split-pane/basic/angular/example_component_ts.md b/static/usage/v9/split-pane/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..84c41501166 --- /dev/null +++ b/static/usage/v9/split-pane/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/split-pane/basic/demo.html b/static/usage/v9/split-pane/basic/demo.html new file mode 100644 index 00000000000..78ff2beed37 --- /dev/null +++ b/static/usage/v9/split-pane/basic/demo.html @@ -0,0 +1,36 @@ + + + + + + Spinner + + + + + + + + + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v9/split-pane/basic/index.md b/static/usage/v9/split-pane/basic/index.md new file mode 100644 index 00000000000..4416c17578b --- /dev/null +++ b/static/usage/v9/split-pane/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/split-pane/basic/javascript.md b/static/usage/v9/split-pane/basic/javascript.md new file mode 100644 index 00000000000..7d7cb736c98 --- /dev/null +++ b/static/usage/v9/split-pane/basic/javascript.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v9/split-pane/basic/react.md b/static/usage/v9/split-pane/basic/react.md new file mode 100644 index 00000000000..f754f18b3a6 --- /dev/null +++ b/static/usage/v9/split-pane/basic/react.md @@ -0,0 +1,29 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + + + Menu + + + Menu Content + + +
+ + + Main View + + + Main View Content +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/split-pane/basic/vue.md b/static/usage/v9/split-pane/basic/vue.md new file mode 100644 index 00000000000..eab2924fd6b --- /dev/null +++ b/static/usage/v9/split-pane/basic/vue.md @@ -0,0 +1,27 @@ +```html + + + +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..701bc942f7b --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-split-pane { + --side-width: 350px; + --side-max-width: 350px; + + --border: 1px dashed #b3baff; +} +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..029f5d3ee56 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..84c41501166 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/demo.html b/static/usage/v9/split-pane/theming/css-properties/demo.html new file mode 100644 index 00000000000..d4dd6e05ff4 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/demo.html @@ -0,0 +1,44 @@ + + + + + + Spinner + + + + + + + + + + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + + + diff --git a/static/usage/v9/split-pane/theming/css-properties/index.md b/static/usage/v9/split-pane/theming/css-properties/index.md new file mode 100644 index 00000000000..213d1efdd7a --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/split-pane/theming/css-properties/javascript.md b/static/usage/v9/split-pane/theming/css-properties/javascript.md new file mode 100644 index 00000000000..37bd7b9e7f1 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/javascript.md @@ -0,0 +1,30 @@ +```html + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + + +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/react/main_css.md b/static/usage/v9/split-pane/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..701bc942f7b --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-split-pane { + --side-width: 350px; + --side-max-width: 350px; + + --border: 1px dashed #b3baff; +} +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md b/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..1d4ad6a2e19 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/react/main_tsx.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonMenu, IonSplitPane, IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + + + + Menu + + + Menu Content is 350px wide and has a blue dashed border + + +
+ + + Main View + + + Main View Content +
+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/split-pane/theming/css-properties/vue.md b/static/usage/v9/split-pane/theming/css-properties/vue.md new file mode 100644 index 00000000000..ffdbb6343e1 --- /dev/null +++ b/static/usage/v9/split-pane/theming/css-properties/vue.md @@ -0,0 +1,36 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/basic/angular/example_component_css.md b/static/usage/v9/tabs/basic/angular/example_component_css.md new file mode 100644 index 00000000000..b177722f8cc --- /dev/null +++ b/static/usage/v9/tabs/basic/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +/* This style is for demonstration purposes only. */ +/* It's not required for the tabs to function. */ +.example-content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +``` diff --git a/static/usage/v9/tabs/basic/angular/example_component_html.md b/static/usage/v9/tabs/basic/angular/example_component_html.md new file mode 100644 index 00000000000..703dde43d65 --- /dev/null +++ b/static/usage/v9/tabs/basic/angular/example_component_html.md @@ -0,0 +1,71 @@ +```html + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + +``` diff --git a/static/usage/v9/tabs/basic/angular/example_component_ts.md b/static/usage/v9/tabs/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b1f3b7fa444 --- /dev/null +++ b/static/usage/v9/tabs/basic/angular/example_component_ts.md @@ -0,0 +1,34 @@ +```ts +import { Component } from '@angular/core'; +import { + IonContent, + IonHeader, + IonIcon, + IonTab, + IonTabBar, + IonTabButton, + IonTabs, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ library, playCircle, radio, search }); + } +} +``` diff --git a/static/usage/v9/tabs/basic/demo.html b/static/usage/v9/tabs/basic/demo.html new file mode 100644 index 00000000000..7025c4f8222 --- /dev/null +++ b/static/usage/v9/tabs/basic/demo.html @@ -0,0 +1,94 @@ + + + + + + Tabs + + + + + + + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + diff --git a/static/usage/v9/tabs/basic/index.md b/static/usage/v9/tabs/basic/index.md new file mode 100644 index 00000000000..edbc5dbb5c8 --- /dev/null +++ b/static/usage/v9/tabs/basic/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/tabs/basic/javascript/index_html.md b/static/usage/v9/tabs/basic/javascript/index_html.md new file mode 100644 index 00000000000..9e6ef96fe26 --- /dev/null +++ b/static/usage/v9/tabs/basic/javascript/index_html.md @@ -0,0 +1,82 @@ +```html + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + +``` diff --git a/static/usage/v9/tabs/basic/javascript/index_ts.md b/static/usage/v9/tabs/basic/javascript/index_ts.md new file mode 100644 index 00000000000..2952676d830 --- /dev/null +++ b/static/usage/v9/tabs/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search }); + */ +addIcons({ library, playCircle, radio, search }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/tabs/basic/react/main_css.md b/static/usage/v9/tabs/basic/react/main_css.md new file mode 100644 index 00000000000..b177722f8cc --- /dev/null +++ b/static/usage/v9/tabs/basic/react/main_css.md @@ -0,0 +1,10 @@ +```css +/* This style is for demonstration purposes only. */ +/* It's not required for the tabs to function. */ +.example-content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +``` diff --git a/static/usage/v9/tabs/basic/react/main_tsx.md b/static/usage/v9/tabs/basic/react/main_tsx.md new file mode 100644 index 00000000000..f97e29769bd --- /dev/null +++ b/static/usage/v9/tabs/basic/react/main_tsx.md @@ -0,0 +1,94 @@ +```tsx +import React from 'react'; +import { + IonContent, + IonIcon, + IonHeader, + IonTab, + IonTabs, + IonTabBar, + IonTabButton, + IonTitle, + IonToolbar, + IonPage, +} from '@ionic/react'; + +import { playCircle, radio, library, search } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + + + + + + Listen now + + + +
Listen now content
+ + + + + + + + Radio + + + +
Radio content
+ + + + + + + + Library + + + +
Library content
+ + + + + + + + Search + + + +
Search content
+ + + + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/tabs/basic/vue.md b/static/usage/v9/tabs/basic/vue.md new file mode 100644 index 00000000000..dc7e2358f46 --- /dev/null +++ b/static/usage/v9/tabs/basic/vue.md @@ -0,0 +1,100 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/router/angular/app_component_html.md b/static/usage/v9/tabs/router/angular/app_component_html.md new file mode 100644 index 00000000000..3b819dc640d --- /dev/null +++ b/static/usage/v9/tabs/router/angular/app_component_html.md @@ -0,0 +1,5 @@ +```html + + + +``` diff --git a/static/usage/v9/tabs/router/angular/app_component_ts.md b/static/usage/v9/tabs/router/angular/app_component_ts.md new file mode 100644 index 00000000000..2cdd21a9f62 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/app_component_ts.md @@ -0,0 +1,14 @@ +```ts +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.css'], + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` diff --git a/static/usage/v9/tabs/router/angular/app_routes_ts.md b/static/usage/v9/tabs/router/angular/app_routes_ts.md new file mode 100644 index 00000000000..fd959555b28 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/app_routes_ts.md @@ -0,0 +1,39 @@ +```ts +import { Routes } from '@angular/router'; +import { ExampleComponent } from './example.component'; + +export const routes: Routes = [ + { + path: 'example', + component: ExampleComponent, + children: [ + { + path: 'home', + loadComponent: () => import('./home/home-page.component').then((m) => m.HomePageComponent), + }, + { + path: 'library', + loadComponent: () => import('./library/library-page.component').then((m) => m.LibraryPageComponent), + }, + { + path: 'radio', + loadComponent: () => import('./radio/radio-page.component').then((m) => m.RadioPageComponent), + }, + { + path: 'search', + loadComponent: () => import('./search/search-page.component').then((m) => m.SearchPageComponent), + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/example/home', + pathMatch: 'full', + }, +]; +``` diff --git a/static/usage/v9/tabs/router/angular/example_component_html.md b/static/usage/v9/tabs/router/angular/example_component_html.md new file mode 100644 index 00000000000..67be68b564c --- /dev/null +++ b/static/usage/v9/tabs/router/angular/example_component_html.md @@ -0,0 +1,22 @@ +```html + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + +``` diff --git a/static/usage/v9/tabs/router/angular/example_component_ts.md b/static/usage/v9/tabs/router/angular/example_component_ts.md new file mode 100644 index 00000000000..57413fcfea3 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonTabBar, IonTabButton, IonTabs], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ library, playCircle, radio, search }); + } +} +``` diff --git a/static/usage/v9/tabs/router/angular/global_css.md b/static/usage/v9/tabs/router/angular/global_css.md new file mode 100644 index 00000000000..a782d2d7f90 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/global_css.md @@ -0,0 +1,8 @@ +```css +.example-content { + display: flex; + align-items: center; + justify-content: center; + height: 100%; +} +``` diff --git a/static/usage/v9/tabs/router/angular/home_page_component_html.md b/static/usage/v9/tabs/router/angular/home_page_component_html.md new file mode 100644 index 00000000000..7ef5bc47333 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/home_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Listen now + + + +
Listen now content
+ +``` diff --git a/static/usage/v9/tabs/router/angular/home_page_component_ts.md b/static/usage/v9/tabs/router/angular/home_page_component_ts.md new file mode 100644 index 00000000000..f4092fc5434 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/home_page_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-home-page', + templateUrl: './home-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class HomePageComponent {} +``` diff --git a/static/usage/v9/tabs/router/angular/library_page_component_html.md b/static/usage/v9/tabs/router/angular/library_page_component_html.md new file mode 100644 index 00000000000..a0df4a6d684 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/library_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Library + + + +
Library content
+ +``` diff --git a/static/usage/v9/tabs/router/angular/library_page_component_ts.md b/static/usage/v9/tabs/router/angular/library_page_component_ts.md new file mode 100644 index 00000000000..d6a2ab400d2 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/library_page_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-library-page', + templateUrl: './library-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class LibraryPageComponent {} +``` diff --git a/static/usage/v9/tabs/router/angular/radio_page_component_html.md b/static/usage/v9/tabs/router/angular/radio_page_component_html.md new file mode 100644 index 00000000000..e6affd4132f --- /dev/null +++ b/static/usage/v9/tabs/router/angular/radio_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Radio + + + +
Radio content
+ +``` diff --git a/static/usage/v9/tabs/router/angular/radio_page_component_ts.md b/static/usage/v9/tabs/router/angular/radio_page_component_ts.md new file mode 100644 index 00000000000..1938955bb9d --- /dev/null +++ b/static/usage/v9/tabs/router/angular/radio_page_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-radio-page', + templateUrl: './radio-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class RadioPageComponent {} +``` diff --git a/static/usage/v9/tabs/router/angular/search_page_component_html.md b/static/usage/v9/tabs/router/angular/search_page_component_html.md new file mode 100644 index 00000000000..91cb5c6f2db --- /dev/null +++ b/static/usage/v9/tabs/router/angular/search_page_component_html.md @@ -0,0 +1,10 @@ +```html + + + Search + + + +
Search content
+ +``` diff --git a/static/usage/v9/tabs/router/angular/search_page_component_ts.md b/static/usage/v9/tabs/router/angular/search_page_component_ts.md new file mode 100644 index 00000000000..f069e1384d4 --- /dev/null +++ b/static/usage/v9/tabs/router/angular/search_page_component_ts.md @@ -0,0 +1,11 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-search-page', + templateUrl: './search-page.component.html', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], +}) +export class SearchPageComponent {} +``` diff --git a/static/usage/v9/tabs/router/demo.html b/static/usage/v9/tabs/router/demo.html new file mode 100644 index 00000000000..db3aa7fbdd6 --- /dev/null +++ b/static/usage/v9/tabs/router/demo.html @@ -0,0 +1,114 @@ + + + + + + Tabs + + + + + + + + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + + diff --git a/static/usage/v9/tabs/router/index.md b/static/usage/v9/tabs/router/index.md new file mode 100644 index 00000000000..d3835f7833a --- /dev/null +++ b/static/usage/v9/tabs/router/index.md @@ -0,0 +1,94 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import angular_app_routes_ts from './angular/app_routes_ts.md'; +import angular_app_component_html from './angular/app_component_html.md'; +import angular_app_component_ts from './angular/app_component_ts.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + +import angular_home_page_component_ts from './angular/home_page_component_ts.md'; +import angular_home_page_component_html from './angular/home_page_component_html.md'; + +import angular_library_page_component_ts from './angular/library_page_component_ts.md'; +import angular_library_page_component_html from './angular/library_page_component_html.md'; + +import angular_radio_page_component_ts from './angular/radio_page_component_ts.md'; +import angular_radio_page_component_html from './angular/radio_page_component_html.md'; + +import angular_search_page_component_ts from './angular/search_page_component_ts.md'; +import angular_search_page_component_html from './angular/search_page_component_html.md'; + +import angular_global_css from './angular/global_css.md'; + +import vue_app_vue from './vue/app_vue.md'; +import vue_main_ts from './vue/main_ts.md'; +import vue_example_vue from './vue/example_vue.md'; +import vue_router_ts from './vue/router_ts.md'; +import vue_home_page_vue from './vue/home_page_vue.md'; +import vue_radio_page_vue from './vue/radio_page_vue.md'; +import vue_library_page_vue from './vue/library_page_vue.md'; +import vue_search_page_vue from './vue/search_page_vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_home_page_tsx from './react/home_page_tsx.md'; +import react_radio_page_tsx from './react/radio_page_tsx.md'; +import react_library_page_tsx from './react/library_page_tsx.md'; +import react_search_page_tsx from './react/search_page_tsx.md'; + + diff --git a/static/usage/v9/tabs/router/javascript/index_html.md b/static/usage/v9/tabs/router/javascript/index_html.md new file mode 100644 index 00000000000..ca1351100fd --- /dev/null +++ b/static/usage/v9/tabs/router/javascript/index_html.md @@ -0,0 +1,101 @@ +```html + + + + + +
+ + + Listen now + + + +
Listen now content
+ +
+ + + +
+ + + Radio + + + +
Radio content
+ +
+ + + +
+ + + Library + + + +
Library content
+ +
+ + + +
+ + + Search + + + +
Search content
+ +
+ + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + +``` diff --git a/static/usage/v9/tabs/router/javascript/index_ts.md b/static/usage/v9/tabs/router/javascript/index_ts.md new file mode 100644 index 00000000000..2952676d830 --- /dev/null +++ b/static/usage/v9/tabs/router/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search }); + */ +addIcons({ library, playCircle, radio, search }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/tabs/router/react/home_page_tsx.md b/static/usage/v9/tabs/router/react/home_page_tsx.md new file mode 100644 index 00000000000..f30578f2c86 --- /dev/null +++ b/static/usage/v9/tabs/router/react/home_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const HomePage = () => ( + + + + Listen now + + + +
+ Listen now content +
+ + +); + +export default HomePage; +``` diff --git a/static/usage/v9/tabs/router/react/library_page_tsx.md b/static/usage/v9/tabs/router/react/library_page_tsx.md new file mode 100644 index 00000000000..b2ee1528d04 --- /dev/null +++ b/static/usage/v9/tabs/router/react/library_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const LibraryPage = () => ( + + + + Library + + + +
+ Library content +
+ + +); + +export default LibraryPage; +``` diff --git a/static/usage/v9/tabs/router/react/main_tsx.md b/static/usage/v9/tabs/router/react/main_tsx.md new file mode 100644 index 00000000000..075a20027e6 --- /dev/null +++ b/static/usage/v9/tabs/router/react/main_tsx.md @@ -0,0 +1,53 @@ +```tsx +import React from 'react'; +import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, IonRouterOutlet } from '@ionic/react'; +import { IonReactRouter } from '@ionic/react-router'; + +import { Route, Navigate } from 'react-router-dom'; + +import { playCircle, radio, library, search } from 'ionicons/icons'; + +import HomePage from './pages/HomePage'; +import RadioPage from './pages/RadioPage'; +import LibraryPage from './pages/LibraryPage'; +import SearchPage from './pages/SearchPage'; + +function Example() { + return ( + + + + } /> + } /> + } /> + } /> + } /> + + + + + + Listen now + + + + + Radio + + + + + Library + + + + + Search + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/tabs/router/react/radio_page_tsx.md b/static/usage/v9/tabs/router/react/radio_page_tsx.md new file mode 100644 index 00000000000..83efaf77667 --- /dev/null +++ b/static/usage/v9/tabs/router/react/radio_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const RadioPage = () => ( + + + + Radio + + + +
+ Radio content +
+ + +); + +export default RadioPage; +``` diff --git a/static/usage/v9/tabs/router/react/search_page_tsx.md b/static/usage/v9/tabs/router/react/search_page_tsx.md new file mode 100644 index 00000000000..2fedbcf962a --- /dev/null +++ b/static/usage/v9/tabs/router/react/search_page_tsx.md @@ -0,0 +1,28 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; + +const SearchPage = () => ( + + + + Search + + + +
+ Search content +
+ + +); + +export default SearchPage; +``` diff --git a/static/usage/v9/tabs/router/vue/app_vue.md b/static/usage/v9/tabs/router/vue/app_vue.md new file mode 100644 index 00000000000..0b0450daca8 --- /dev/null +++ b/static/usage/v9/tabs/router/vue/app_vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/tabs/router/vue/example_vue.md b/static/usage/v9/tabs/router/vue/example_vue.md new file mode 100644 index 00000000000..a59a1d5784a --- /dev/null +++ b/static/usage/v9/tabs/router/vue/example_vue.md @@ -0,0 +1,35 @@ +```html + + + +``` diff --git a/static/usage/v9/tabs/router/vue/home_page_vue.md b/static/usage/v9/tabs/router/vue/home_page_vue.md new file mode 100644 index 00000000000..ce5c59ddcac --- /dev/null +++ b/static/usage/v9/tabs/router/vue/home_page_vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/router/vue/library_page_vue.md b/static/usage/v9/tabs/router/vue/library_page_vue.md new file mode 100644 index 00000000000..e25ad802ba5 --- /dev/null +++ b/static/usage/v9/tabs/router/vue/library_page_vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/router/vue/main_ts.md b/static/usage/v9/tabs/router/vue/main_ts.md new file mode 100644 index 00000000000..f03f4831313 --- /dev/null +++ b/static/usage/v9/tabs/router/vue/main_ts.md @@ -0,0 +1,43 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; +import router from './router'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +const app = createApp(App).use(IonicVue).use(router); + +router.isReady().then(() => { + app.mount('#app'); +}); +``` diff --git a/static/usage/v9/tabs/router/vue/radio_page_vue.md b/static/usage/v9/tabs/router/vue/radio_page_vue.md new file mode 100644 index 00000000000..6ee82832885 --- /dev/null +++ b/static/usage/v9/tabs/router/vue/radio_page_vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/router/vue/router_ts.md b/static/usage/v9/tabs/router/vue/router_ts.md new file mode 100644 index 00000000000..3279c38def4 --- /dev/null +++ b/static/usage/v9/tabs/router/vue/router_ts.md @@ -0,0 +1,46 @@ +```ts +import { createRouter, createWebHistory } from '@ionic/vue-router'; +import { RouteRecordRaw } from 'vue-router'; +import Example from './components/Example.vue'; + +const routes: Array = [ + { + path: '/', + redirect: '/home', + }, + { + path: '/', + component: Example, + children: [ + { + path: '', + redirect: '/home', + }, + { + path: 'home', + component: () => import('./views/HomePage.vue'), + }, + { + path: 'radio', + component: () => import('./views/RadioPage.vue'), + }, + { + path: 'library', + component: () => import('./views/LibraryPage.vue'), + }, + { + path: 'search', + component: () => import('./views/SearchPage.vue'), + }, + ], + }, +]; + +const router = createRouter({ + // Use: createWebHistory(process.env.BASE_URL) in your app + history: createWebHistory(), + routes, +}); + +export default router; +``` diff --git a/static/usage/v9/tabs/router/vue/search_page_vue.md b/static/usage/v9/tabs/router/vue/search_page_vue.md new file mode 100644 index 00000000000..6d2ee2d3d2b --- /dev/null +++ b/static/usage/v9/tabs/router/vue/search_page_vue.md @@ -0,0 +1,27 @@ +```html + + + + + +``` diff --git a/static/usage/v9/tabs/select-method/angular/example_component_css.md b/static/usage/v9/tabs/select-method/angular/example_component_css.md new file mode 100644 index 00000000000..ba3bdfca17c --- /dev/null +++ b/static/usage/v9/tabs/select-method/angular/example_component_css.md @@ -0,0 +1,12 @@ +```css +/* This style is for demonstration purposes only. */ +/* It's not required for the tabs to function. */ +.example-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 10px; +} +``` diff --git a/static/usage/v9/tabs/select-method/angular/example_component_html.md b/static/usage/v9/tabs/select-method/angular/example_component_html.md new file mode 100644 index 00000000000..2edb44c9dcd --- /dev/null +++ b/static/usage/v9/tabs/select-method/angular/example_component_html.md @@ -0,0 +1,74 @@ +```html + + +
+ + + Listen now + + + +
+ Listen now content + Go to Radio +
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + +``` diff --git a/static/usage/v9/tabs/select-method/angular/example_component_ts.md b/static/usage/v9/tabs/select-method/angular/example_component_ts.md new file mode 100644 index 00000000000..6368ee1d387 --- /dev/null +++ b/static/usage/v9/tabs/select-method/angular/example_component_ts.md @@ -0,0 +1,41 @@ +```ts +import { Component, ViewChild } from '@angular/core'; +import { + IonButton, + IonContent, + IonHeader, + IonIcon, + IonTab, + IonTabBar, + IonTabButton, + IonTabs, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonIcon, IonTab, IonTabBar, IonTabButton, IonTabs, IonTitle, IonToolbar], +}) +export class ExampleComponent { + @ViewChild('tabs') tabs!: IonTabs; + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ library, playCircle, radio, search }); + } + + selectRadio() { + this.tabs.select('radio'); + } +} +``` diff --git a/static/usage/v9/tabs/select-method/demo.html b/static/usage/v9/tabs/select-method/demo.html new file mode 100644 index 00000000000..0ba933d0ec7 --- /dev/null +++ b/static/usage/v9/tabs/select-method/demo.html @@ -0,0 +1,106 @@ + + + + + + Tabs + + + + + + + + + + + +
+ + + Listen now + + + +
+ Listen now content + Go to Radio +
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + + + diff --git a/static/usage/v9/tabs/select-method/index.md b/static/usage/v9/tabs/select-method/index.md new file mode 100644 index 00000000000..c72725df41c --- /dev/null +++ b/static/usage/v9/tabs/select-method/index.md @@ -0,0 +1,42 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_example_component_css from './angular/example_component_css.md'; + + diff --git a/static/usage/v9/tabs/select-method/javascript/index_html.md b/static/usage/v9/tabs/select-method/javascript/index_html.md new file mode 100644 index 00000000000..584f39c7536 --- /dev/null +++ b/static/usage/v9/tabs/select-method/javascript/index_html.md @@ -0,0 +1,94 @@ +```html + + +
+ + + Listen now + + + +
+ Listen now content + Go to Radio +
+ +
+ + +
+ + + Radio + + + +
Radio content
+ +
+ + +
+ + + Library + + + +
Library content
+ +
+ + +
+ + + Search + + + +
Search content
+ +
+ + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + + + + +``` diff --git a/static/usage/v9/tabs/select-method/javascript/index_ts.md b/static/usage/v9/tabs/select-method/javascript/index_ts.md new file mode 100644 index 00000000000..2952676d830 --- /dev/null +++ b/static/usage/v9/tabs/select-method/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { library, playCircle, radio, search } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'library': library, 'play-circle': playCircle, 'radio': radio, 'search': search }); + */ +addIcons({ library, playCircle, radio, search }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/tabs/select-method/react/main_css.md b/static/usage/v9/tabs/select-method/react/main_css.md new file mode 100644 index 00000000000..ba3bdfca17c --- /dev/null +++ b/static/usage/v9/tabs/select-method/react/main_css.md @@ -0,0 +1,12 @@ +```css +/* This style is for demonstration purposes only. */ +/* It's not required for the tabs to function. */ +.example-content { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 10px; +} +``` diff --git a/static/usage/v9/tabs/select-method/react/main_tsx.md b/static/usage/v9/tabs/select-method/react/main_tsx.md new file mode 100644 index 00000000000..02b6b7d41a3 --- /dev/null +++ b/static/usage/v9/tabs/select-method/react/main_tsx.md @@ -0,0 +1,103 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonContent, + IonIcon, + IonHeader, + IonTab, + IonTabs, + IonTabBar, + IonTabButton, + IonTitle, + IonToolbar, + IonPage, +} from '@ionic/react'; + +import { playCircle, radio, library, search } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const selectRadio = () => { + const tabs = document.querySelector('ion-tabs'); + tabs?.select('radio'); + }; + + return ( + + + + + + Listen now + + + +
+ Listen now content + Go to Radio +
+ + + + + + + + Radio + + + +
Radio content
+ + + + + + + + Library + + + +
Library content
+ + + + + + + + Search + + + +
Search content
+ + + + + + + + Listen Now + + + + Radio + + + + Library + + + + Search + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/tabs/select-method/vue.md b/static/usage/v9/tabs/select-method/vue.md new file mode 100644 index 00000000000..5db2a6eb2da --- /dev/null +++ b/static/usage/v9/tabs/select-method/vue.md @@ -0,0 +1,113 @@ +```html + + + + + +``` diff --git a/static/usage/v9/text/basic/angular/example_component_html.md b/static/usage/v9/text/basic/angular/example_component_html.md new file mode 100644 index 00000000000..e63da3cacf9 --- /dev/null +++ b/static/usage/v9/text/basic/angular/example_component_html.md @@ -0,0 +1,21 @@ +```html + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+``` diff --git a/static/usage/v9/text/basic/angular/example_component_ts.md b/static/usage/v9/text/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..7bf01889929 --- /dev/null +++ b/static/usage/v9/text/basic/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonIcon, IonText } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { warning } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonIcon, IonText], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ warning }); + } +} +``` diff --git a/static/usage/v9/text/basic/demo.html b/static/usage/v9/text/basic/demo.html new file mode 100644 index 00000000000..3ccf505c17e --- /dev/null +++ b/static/usage/v9/text/basic/demo.html @@ -0,0 +1,59 @@ + + + + + + Text + + + + + + + + + + + +
+ +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + + + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+
+ + + + diff --git a/static/usage/v9/text/basic/index.md b/static/usage/v9/text/basic/index.md new file mode 100644 index 00000000000..d6696b98479 --- /dev/null +++ b/static/usage/v9/text/basic/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/text/basic/javascript/index_html.md b/static/usage/v9/text/basic/javascript/index_html.md new file mode 100644 index 00000000000..e63da3cacf9 --- /dev/null +++ b/static/usage/v9/text/basic/javascript/index_html.md @@ -0,0 +1,21 @@ +```html + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets of Soho in the rain. He + was looking for a place called Lee Ho Fook's. Gonna get a + big dish of beef chow mein. +

+``` diff --git a/static/usage/v9/text/basic/javascript/index_ts.md b/static/usage/v9/text/basic/javascript/index_ts.md new file mode 100644 index 00000000000..6e234de55e4 --- /dev/null +++ b/static/usage/v9/text/basic/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { warning } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ this icon + * gets mapped to a "warning" key. + * Alternatively, developers can do: + * addIcons({ 'warning': warning }); + */ +addIcons({ warning }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/text/basic/react.md b/static/usage/v9/text/basic/react.md new file mode 100644 index 00000000000..da8882e3bf5 --- /dev/null +++ b/static/usage/v9/text/basic/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonText, IonIcon } from '@ionic/react'; +import { warning } from 'ionicons/icons'; + +function Example() { + return ( + <> + +

H1: The quick brown fox jumps over the lazy dog

+ + + +

H2: The quick brown fox jumps over the lazy dog

+ + + +

H3: The quick brown fox jumps over the lazy dog

+ + +

+ + + + I saw a werewolf with a Chinese menu in his hand. Walking through the + streets + of Soho in the rain. He + was + looking for a place called Lee Ho Fook's. Gonna get a big dish of beef chow mein. +

+ + ); +} +export default Example; +``` diff --git a/static/usage/v9/text/basic/vue.md b/static/usage/v9/text/basic/vue.md new file mode 100644 index 00000000000..f1ca97719fc --- /dev/null +++ b/static/usage/v9/text/basic/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/autogrow/angular/example_component_html.md b/static/usage/v9/textarea/autogrow/angular/example_component_html.md new file mode 100644 index 00000000000..03de94359b6 --- /dev/null +++ b/static/usage/v9/textarea/autogrow/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + + +``` diff --git a/static/usage/v9/textarea/autogrow/angular/example_component_ts.md b/static/usage/v9/textarea/autogrow/angular/example_component_ts.md new file mode 100644 index 00000000000..d6df94753a5 --- /dev/null +++ b/static/usage/v9/textarea/autogrow/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/autogrow/demo.html b/static/usage/v9/textarea/autogrow/demo.html new file mode 100644 index 00000000000..34282ea0028 --- /dev/null +++ b/static/usage/v9/textarea/autogrow/demo.html @@ -0,0 +1,41 @@ + + + + + + Textarea - Autogrow + + + + + + + + + + + +
+ + + + +
+ + + + diff --git a/static/usage/v9/textarea/autogrow/index.md b/static/usage/v9/textarea/autogrow/index.md new file mode 100644 index 00000000000..4a670df31b9 --- /dev/null +++ b/static/usage/v9/textarea/autogrow/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/autogrow/javascript.md b/static/usage/v9/textarea/autogrow/javascript.md new file mode 100644 index 00000000000..4c2e15028fd --- /dev/null +++ b/static/usage/v9/textarea/autogrow/javascript.md @@ -0,0 +1,10 @@ +```html + + + + +``` diff --git a/static/usage/v9/textarea/autogrow/react.md b/static/usage/v9/textarea/autogrow/react.md new file mode 100644 index 00000000000..28d11b28efc --- /dev/null +++ b/static/usage/v9/textarea/autogrow/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonItem, IonTextarea } from '@ionic/react'; +function Example() { + return ( + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/autogrow/vue.md b/static/usage/v9/textarea/autogrow/vue.md new file mode 100644 index 00000000000..086bbcfa85b --- /dev/null +++ b/static/usage/v9/textarea/autogrow/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/basic/angular/example_component_html.md b/static/usage/v9/textarea/basic/angular/example_component_html.md new file mode 100644 index 00000000000..af32fc35b03 --- /dev/null +++ b/static/usage/v9/textarea/basic/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/basic/angular/example_component_ts.md b/static/usage/v9/textarea/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..b799ed08451 --- /dev/null +++ b/static/usage/v9/textarea/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/basic/demo.html b/static/usage/v9/textarea/basic/demo.html new file mode 100644 index 00000000000..3ae7a1dc7a7 --- /dev/null +++ b/static/usage/v9/textarea/basic/demo.html @@ -0,0 +1,38 @@ + + + + + + Textarea - Basic Usage + + + + + + + + + + + +
+ + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/textarea/basic/index.md b/static/usage/v9/textarea/basic/index.md new file mode 100644 index 00000000000..4b5a3d06379 --- /dev/null +++ b/static/usage/v9/textarea/basic/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/basic/javascript.md b/static/usage/v9/textarea/basic/javascript.md new file mode 100644 index 00000000000..5f953f721cb --- /dev/null +++ b/static/usage/v9/textarea/basic/javascript.md @@ -0,0 +1,13 @@ +```html + + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/basic/react.md b/static/usage/v9/textarea/basic/react.md new file mode 100644 index 00000000000..5d47cf710dd --- /dev/null +++ b/static/usage/v9/textarea/basic/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonTextarea } from '@ionic/react'; +function Example() { + return ( + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/basic/vue.md b/static/usage/v9/textarea/basic/vue.md new file mode 100644 index 00000000000..6bc024c61b3 --- /dev/null +++ b/static/usage/v9/textarea/basic/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md b/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md new file mode 100644 index 00000000000..409362189a3 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v9/textarea/clear-on-edit/angular/example_component_ts.md b/static/usage/v9/textarea/clear-on-edit/angular/example_component_ts.md new file mode 100644 index 00000000000..fb94c006a63 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/clear-on-edit/demo.html b/static/usage/v9/textarea/clear-on-edit/demo.html new file mode 100644 index 00000000000..9e1adb02600 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/demo.html @@ -0,0 +1,29 @@ + + + + + + Textarea - Clear on Edit + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/textarea/clear-on-edit/index.md b/static/usage/v9/textarea/clear-on-edit/index.md new file mode 100644 index 00000000000..b175d3022b5 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/clear-on-edit/javascript.md b/static/usage/v9/textarea/clear-on-edit/javascript.md new file mode 100644 index 00000000000..1982d982013 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/javascript.md @@ -0,0 +1,6 @@ +```html + +``` diff --git a/static/usage/v9/textarea/clear-on-edit/react.md b/static/usage/v9/textarea/clear-on-edit/react.md new file mode 100644 index 00000000000..62b8b7dcf7b --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/react.md @@ -0,0 +1,13 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/clear-on-edit/vue.md b/static/usage/v9/textarea/clear-on-edit/vue.md new file mode 100644 index 00000000000..5ffea253874 --- /dev/null +++ b/static/usage/v9/textarea/clear-on-edit/vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/counter/angular/example_component_html.md b/static/usage/v9/textarea/counter/angular/example_component_html.md new file mode 100644 index 00000000000..436babf6fa4 --- /dev/null +++ b/static/usage/v9/textarea/counter/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/counter/angular/example_component_ts.md b/static/usage/v9/textarea/counter/angular/example_component_ts.md new file mode 100644 index 00000000000..bfa2d7c6fdd --- /dev/null +++ b/static/usage/v9/textarea/counter/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent { + customCounterFormatter(inputLength: number, maxLength: number) { + return `${maxLength - inputLength} characters remaining`; + } +} +``` diff --git a/static/usage/v9/textarea/counter/demo.html b/static/usage/v9/textarea/counter/demo.html new file mode 100644 index 00000000000..9906c72bd61 --- /dev/null +++ b/static/usage/v9/textarea/counter/demo.html @@ -0,0 +1,44 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + +
+ + + + + + diff --git a/static/usage/v9/textarea/counter/index.md b/static/usage/v9/textarea/counter/index.md new file mode 100644 index 00000000000..77c85060f7d --- /dev/null +++ b/static/usage/v9/textarea/counter/index.md @@ -0,0 +1,25 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; +import react from './react.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/counter/javascript.md b/static/usage/v9/textarea/counter/javascript.md new file mode 100644 index 00000000000..179965c25b7 --- /dev/null +++ b/static/usage/v9/textarea/counter/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + +``` diff --git a/static/usage/v9/textarea/counter/react.md b/static/usage/v9/textarea/counter/react.md new file mode 100644 index 00000000000..26ec835498e --- /dev/null +++ b/static/usage/v9/textarea/counter/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; + +function Example() { + return ( + <> + + + `${maxLength - inputLength} characters remaining`} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/counter/vue.md b/static/usage/v9/textarea/counter/vue.md new file mode 100644 index 00000000000..7c100f2cfe9 --- /dev/null +++ b/static/usage/v9/textarea/counter/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/fill/angular/example_component_html.md b/static/usage/v9/textarea/fill/angular/example_component_html.md new file mode 100644 index 00000000000..38bcfa1067d --- /dev/null +++ b/static/usage/v9/textarea/fill/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + +
+ + +``` diff --git a/static/usage/v9/textarea/fill/angular/example_component_ts.md b/static/usage/v9/textarea/fill/angular/example_component_ts.md new file mode 100644 index 00000000000..fb94c006a63 --- /dev/null +++ b/static/usage/v9/textarea/fill/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/fill/demo.html b/static/usage/v9/textarea/fill/demo.html new file mode 100644 index 00000000000..56632fd3bc5 --- /dev/null +++ b/static/usage/v9/textarea/fill/demo.html @@ -0,0 +1,44 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + +
+ + + + diff --git a/static/usage/v9/textarea/fill/index.md b/static/usage/v9/textarea/fill/index.md new file mode 100644 index 00000000000..e735671848f --- /dev/null +++ b/static/usage/v9/textarea/fill/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/fill/javascript.md b/static/usage/v9/textarea/fill/javascript.md new file mode 100644 index 00000000000..09102160aaa --- /dev/null +++ b/static/usage/v9/textarea/fill/javascript.md @@ -0,0 +1,12 @@ +```html + + +
+ + +``` diff --git a/static/usage/v9/textarea/fill/react.md b/static/usage/v9/textarea/fill/react.md new file mode 100644 index 00000000000..8ddf44ca19f --- /dev/null +++ b/static/usage/v9/textarea/fill/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; +function Example() { + return ( + <> + + +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/fill/vue.md b/static/usage/v9/textarea/fill/vue.md new file mode 100644 index 00000000000..d90748fe57c --- /dev/null +++ b/static/usage/v9/textarea/fill/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/helper-error/angular/example_component_html.md b/static/usage/v9/textarea/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..3095fd27ead --- /dev/null +++ b/static/usage/v9/textarea/helper-error/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + +``` diff --git a/static/usage/v9/textarea/helper-error/angular/example_component_ts.md b/static/usage/v9/textarea/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..fb94c006a63 --- /dev/null +++ b/static/usage/v9/textarea/helper-error/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/helper-error/demo.html b/static/usage/v9/textarea/helper-error/demo.html new file mode 100644 index 00000000000..8d25366c317 --- /dev/null +++ b/static/usage/v9/textarea/helper-error/demo.html @@ -0,0 +1,61 @@ + + + + + + Textarea + + + + + + + + + + +
+ +
+ + + + + + diff --git a/static/usage/v9/textarea/helper-error/index.md b/static/usage/v9/textarea/helper-error/index.md new file mode 100644 index 00000000000..98402138264 --- /dev/null +++ b/static/usage/v9/textarea/helper-error/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/helper-error/javascript.md b/static/usage/v9/textarea/helper-error/javascript.md new file mode 100644 index 00000000000..ae7b0346037 --- /dev/null +++ b/static/usage/v9/textarea/helper-error/javascript.md @@ -0,0 +1,37 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/helper-error/react.md b/static/usage/v9/textarea/helper-error/react.md new file mode 100644 index 00000000000..b3b2e05e63b --- /dev/null +++ b/static/usage/v9/textarea/helper-error/react.md @@ -0,0 +1,49 @@ +```tsx +import React, { useState } from 'react'; +import { clsx } from 'clsx'; + +import { IonTextarea } from '@ionic/react'; + +function Example() { + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + + const validateEmail = (email: string) => { + return email.match( + /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/ + ); + }; + + const validate = (event: Event) => { + const value = (event.target as HTMLTextAreaElement).value; + + setIsValid(undefined); + + if (value === '') return; + + validateEmail(value) !== null ? setIsValid(true) : setIsValid(false); + }; + + const markTouched = () => { + setIsTouched(true); + }; + + return ( + validate(event)} + onIonBlur={() => markTouched()} + > + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/helper-error/vue.md b/static/usage/v9/textarea/helper-error/vue.md new file mode 100644 index 00000000000..dd03797bdb5 --- /dev/null +++ b/static/usage/v9/textarea/helper-error/vue.md @@ -0,0 +1,42 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/label-placement/angular/example_component_html.md b/static/usage/v9/textarea/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..ef14c919fb8 --- /dev/null +++ b/static/usage/v9/textarea/label-placement/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/label-placement/angular/example_component_ts.md b/static/usage/v9/textarea/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..b799ed08451 --- /dev/null +++ b/static/usage/v9/textarea/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/label-placement/demo.html b/static/usage/v9/textarea/label-placement/demo.html new file mode 100644 index 00000000000..8202caf78b9 --- /dev/null +++ b/static/usage/v9/textarea/label-placement/demo.html @@ -0,0 +1,41 @@ + + + + + + Textarea + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/textarea/label-placement/index.md b/static/usage/v9/textarea/label-placement/index.md new file mode 100644 index 00000000000..e0da9ab0c8b --- /dev/null +++ b/static/usage/v9/textarea/label-placement/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/label-placement/javascript.md b/static/usage/v9/textarea/label-placement/javascript.md new file mode 100644 index 00000000000..ce524931d10 --- /dev/null +++ b/static/usage/v9/textarea/label-placement/javascript.md @@ -0,0 +1,16 @@ +```html + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/label-placement/react.md b/static/usage/v9/textarea/label-placement/react.md new file mode 100644 index 00000000000..cf2b06229cf --- /dev/null +++ b/static/usage/v9/textarea/label-placement/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/label-placement/vue.md b/static/usage/v9/textarea/label-placement/vue.md new file mode 100644 index 00000000000..ed0e760f16e --- /dev/null +++ b/static/usage/v9/textarea/label-placement/vue.md @@ -0,0 +1,22 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/label-slot/angular/example_component_html.md b/static/usage/v9/textarea/label-slot/angular/example_component_html.md new file mode 100644 index 00000000000..9c8e09ec88a --- /dev/null +++ b/static/usage/v9/textarea/label-slot/angular/example_component_html.md @@ -0,0 +1,9 @@ +```html + + + +
Comments (Required)
+ + + +``` diff --git a/static/usage/v9/textarea/label-slot/angular/example_component_ts.md b/static/usage/v9/textarea/label-slot/angular/example_component_ts.md new file mode 100644 index 00000000000..3d64bea6dce --- /dev/null +++ b/static/usage/v9/textarea/label-slot/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonText, IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonText, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/label-slot/demo.html b/static/usage/v9/textarea/label-slot/demo.html new file mode 100644 index 00000000000..aa0bcb144fd --- /dev/null +++ b/static/usage/v9/textarea/label-slot/demo.html @@ -0,0 +1,28 @@ + + + + + + textarea + + + + + + + + + +
+ + + +
Comments (Required)
+ + + +
+ + + + diff --git a/static/usage/v9/textarea/label-slot/index.md b/static/usage/v9/textarea/label-slot/index.md new file mode 100644 index 00000000000..02052862067 --- /dev/null +++ b/static/usage/v9/textarea/label-slot/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/label-slot/javascript.md b/static/usage/v9/textarea/label-slot/javascript.md new file mode 100644 index 00000000000..199978f9352 --- /dev/null +++ b/static/usage/v9/textarea/label-slot/javascript.md @@ -0,0 +1,9 @@ +```html + + + +
Comments (Required)
+ + + +``` diff --git a/static/usage/v9/textarea/label-slot/react.md b/static/usage/v9/textarea/label-slot/react.md new file mode 100644 index 00000000000..4c58fdf2a7b --- /dev/null +++ b/static/usage/v9/textarea/label-slot/react.md @@ -0,0 +1,19 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList, IonText } from '@ionic/react'; + +function Example() { + return ( + + + +
+ Comments (Required) +
+ + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/label-slot/vue.md b/static/usage/v9/textarea/label-slot/vue.md new file mode 100644 index 00000000000..cd3fa2d3f67 --- /dev/null +++ b/static/usage/v9/textarea/label-slot/vue.md @@ -0,0 +1,15 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md b/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md new file mode 100644 index 00000000000..2f4baaa7511 --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md b/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md new file mode 100644 index 00000000000..b799ed08451 --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/no-visible-label/demo.html b/static/usage/v9/textarea/no-visible-label/demo.html new file mode 100644 index 00000000000..f3e99ffb188 --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/demo.html @@ -0,0 +1,26 @@ + + + + + + textarea + + + + + + + + + +
+ + + + + +
+ + + + diff --git a/static/usage/v9/textarea/no-visible-label/index.md b/static/usage/v9/textarea/no-visible-label/index.md new file mode 100644 index 00000000000..c6d8d19949f --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/no-visible-label/javascript.md b/static/usage/v9/textarea/no-visible-label/javascript.md new file mode 100644 index 00000000000..2f4baaa7511 --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/javascript.md @@ -0,0 +1,7 @@ +```html + + + + + +``` diff --git a/static/usage/v9/textarea/no-visible-label/react.md b/static/usage/v9/textarea/no-visible-label/react.md new file mode 100644 index 00000000000..c024d0fee66 --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonTextarea, IonItem, IonList } from '@ionic/react'; + +function Example() { + return ( + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/no-visible-label/vue.md b/static/usage/v9/textarea/no-visible-label/vue.md new file mode 100644 index 00000000000..c889e88da2d --- /dev/null +++ b/static/usage/v9/textarea/no-visible-label/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md b/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md new file mode 100644 index 00000000000..ce0988fefec --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md b/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md new file mode 100644 index 00000000000..7b86bac3c8a --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { eye, lockClosed } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonIcon, IonItem, IonList, IonTextarea], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ eye, lockClosed }); + } +} +``` diff --git a/static/usage/v9/textarea/start-end-slots/demo.html b/static/usage/v9/textarea/start-end-slots/demo.html new file mode 100644 index 00000000000..960bf0fdae9 --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/demo.html @@ -0,0 +1,31 @@ + + + + + + Textarea + + + + + + + + + +
+ + + + + + + + + + +
+ + + + diff --git a/static/usage/v9/textarea/start-end-slots/index.md b/static/usage/v9/textarea/start-end-slots/index.md new file mode 100644 index 00000000000..16ada68ae9e --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/index.md @@ -0,0 +1,31 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/textarea/start-end-slots/javascript/index_html.md b/static/usage/v9/textarea/start-end-slots/javascript/index_html.md new file mode 100644 index 00000000000..a666863d413 --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/javascript/index_html.md @@ -0,0 +1,12 @@ +```html + + + + + + + + + + +``` diff --git a/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md b/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md new file mode 100644 index 00000000000..002e3ae87ac --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { eye, lockClosed } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'eye': eye, 'lock-closed': lockClosed }); + */ +addIcons({ eye, lockClosed }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/textarea/start-end-slots/react.md b/static/usage/v9/textarea/start-end-slots/react.md new file mode 100644 index 00000000000..a64852d4c67 --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonButton, IonIcon, IonItem, IonList, IonTextarea } from '@ionic/react'; +import { eye, lockClosed } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/start-end-slots/vue.md b/static/usage/v9/textarea/start-end-slots/vue.md new file mode 100644 index 00000000000..8864b474914 --- /dev/null +++ b/static/usage/v9/textarea/start-end-slots/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/theming/angular/example_component_css.md b/static/usage/v9/textarea/theming/angular/example_component_css.md new file mode 100644 index 00000000000..37a2f874cdc --- /dev/null +++ b/static/usage/v9/textarea/theming/angular/example_component_css.md @@ -0,0 +1,10 @@ +```css +ion-textarea.custom { + --background: #373737; + --color: #fff; + --padding-end: 10px; + --padding-start: 10px; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; +} +``` diff --git a/static/usage/v9/textarea/theming/angular/example_component_html.md b/static/usage/v9/textarea/theming/angular/example_component_html.md new file mode 100644 index 00000000000..d5237b2cc36 --- /dev/null +++ b/static/usage/v9/textarea/theming/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + +``` diff --git a/static/usage/v9/textarea/theming/angular/example_component_ts.md b/static/usage/v9/textarea/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..fb94c006a63 --- /dev/null +++ b/static/usage/v9/textarea/theming/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTextarea } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTextarea], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/textarea/theming/angular/global_css.md b/static/usage/v9/textarea/theming/angular/global_css.md new file mode 100644 index 00000000000..c9c9c107cc6 --- /dev/null +++ b/static/usage/v9/textarea/theming/angular/global_css.md @@ -0,0 +1,14 @@ +```css +/** + * Since we are styling elements inside of ion-textarea + * we need to move this CSS to a global stylesheet. Otherwise, + * Angular components with encapsulation enabled will add + * scoped style attributes to these selectors. + */ +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v9/textarea/theming/demo.html b/static/usage/v9/textarea/theming/demo.html new file mode 100644 index 00000000000..b9a60aef458 --- /dev/null +++ b/static/usage/v9/textarea/theming/demo.html @@ -0,0 +1,50 @@ + + + + + + Textarea - Theming + + + + + + + + + + +
+ +
+ + + + diff --git a/static/usage/v9/textarea/theming/index.md b/static/usage/v9/textarea/theming/index.md new file mode 100644 index 00000000000..5c06e4258bb --- /dev/null +++ b/static/usage/v9/textarea/theming/index.md @@ -0,0 +1,37 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/textarea/theming/javascript.md b/static/usage/v9/textarea/theming/javascript.md new file mode 100644 index 00000000000..7e2da7069e1 --- /dev/null +++ b/static/usage/v9/textarea/theming/javascript.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/textarea/theming/react/main_css.md b/static/usage/v9/textarea/theming/react/main_css.md new file mode 100644 index 00000000000..68e9b031149 --- /dev/null +++ b/static/usage/v9/textarea/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-textarea.custom { + --background: #373737; + --color: #fff; + --padding-end: 10px; + --padding-start: 10px; + --placeholder-color: #ddd; + --placeholder-opacity: 0.8; +} + +ion-textarea.custom.ios .textarea-bottom .helper-text, +ion-textarea.custom.ios .textarea-bottom .counter, +ion-textarea.custom.md .textarea-bottom .helper-text, +ion-textarea.custom.md .textarea-bottom .counter { + color: var(--ion-color-primary); +} +``` diff --git a/static/usage/v9/textarea/theming/react/main_tsx.md b/static/usage/v9/textarea/theming/react/main_tsx.md new file mode 100644 index 00000000000..f0ca368dff6 --- /dev/null +++ b/static/usage/v9/textarea/theming/react/main_tsx.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonTextarea } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + ); +} +export default Example; +``` diff --git a/static/usage/v9/textarea/theming/vue.md b/static/usage/v9/textarea/theming/vue.md new file mode 100644 index 00000000000..c2bbe7c9c48 --- /dev/null +++ b/static/usage/v9/textarea/theming/vue.md @@ -0,0 +1,34 @@ +```html + + + + + +``` diff --git a/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..418eddfc30f --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..9e62ea5b762 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/angular/example_component_ts.md @@ -0,0 +1,56 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v9/theming/always-dark-mode/angular/styles_css.md b/static/usage/v9/theming/always-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..8f15de61b63 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/angular/styles_css.md @@ -0,0 +1,39 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +@import '@ionic/angular/css/palettes/dark.always.css'; +/* @import '@ionic/angular/css/palettes/dark.class.css'; */ +/* @import '@ionic/angular/css/palettes/dark.system.css'; */ +``` diff --git a/static/usage/v9/theming/always-dark-mode/demo.html b/static/usage/v9/theming/always-dark-mode/demo.html new file mode 100644 index 00000000000..0d0dedcc68d --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/demo.html @@ -0,0 +1,82 @@ + + + + + + Theming + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + diff --git a/static/usage/v9/theming/always-dark-mode/index.md b/static/usage/v9/theming/always-dark-mode/index.md new file mode 100644 index 00000000000..5caaa113c48 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/index.md @@ -0,0 +1,54 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v9/theming/always-dark-mode/javascript/index_html.md b/static/usage/v9/theming/always-dark-mode/javascript/index_html.md new file mode 100644 index 00000000000..0b81aecb1a6 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..2fd7ff17d24 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +// import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/always-dark-mode/react/app_tsx.md b/static/usage/v9/theming/always-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..ed04b3337a5 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/react/app_tsx.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +// import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/always-dark-mode/react/main_tsx.md b/static/usage/v9/theming/always-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..f6a15cd12f7 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/react/main_tsx.md @@ -0,0 +1,76 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/always-dark-mode/theme/variables_css.md b/static/usage/v9/theming/always-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..dd68eb1b1ec --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/theme/variables_css.md @@ -0,0 +1,27 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets a different item border color for the default theme on ios and md */ +:root { + --ion-item-border-color: var(--ion-background-color-step-200); +} + +/* This sets a different background and item background for the default theme on ios */ +:root.ios { + --ion-background-color: var(--ion-background-color-step-50); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} + +/* This sets a different background and item background for the default theme on md */ +:root.md { + --ion-background-color: var(--ion-background-color-step-100); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #1c1c1d; +} +``` diff --git a/static/usage/v9/theming/always-dark-mode/vue/example_vue.md b/static/usage/v9/theming/always-dark-mode/vue/example_vue.md new file mode 100644 index 00000000000..46274fd9af6 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/vue/example_vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v9/theming/always-dark-mode/vue/main_ts.md b/static/usage/v9/theming/always-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..4b82b084cb7 --- /dev/null +++ b/static/usage/v9/theming/always-dark-mode/vue/main_ts.md @@ -0,0 +1,38 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +// import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..8eb041af7cf --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..9e62ea5b762 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,56 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md new file mode 100644 index 00000000000..616b3c7076c --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,37 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic High Contrast Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/palettes/high-contrast.always.css'; +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/demo.html b/static/usage/v9/theming/always-high-contrast-mode/demo.html new file mode 100644 index 00000000000..215dff44cb7 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/demo.html @@ -0,0 +1,61 @@ + + + + + + Theming + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + diff --git a/static/usage/v9/theming/always-high-contrast-mode/index.md b/static/usage/v9/theming/always-high-contrast-mode/index.md new file mode 100644 index 00000000000..07d57783829 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/index.md @@ -0,0 +1,48 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v9/theming/always-high-contrast-mode/javascript/index_html.md b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..3f6a8efa296 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md new file mode 100644 index 00000000000..8f41c94bf99 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,45 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic High Contrast Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/palettes/high-contrast.always.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md new file mode 100644 index 00000000000..d9fc3e677fd --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,41 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic High Contrast Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/palettes/high-contrast.always.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..ac9c82c6119 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,76 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..8e0e6616e96 --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md new file mode 100644 index 00000000000..5c521224bea --- /dev/null +++ b/static/usage/v9/theming/always-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,33 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic High Contrast Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/palettes/high-contrast.always.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..d338e3aaa53 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/angular/example_component_html.md @@ -0,0 +1,53 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..b1893ef296d --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/angular/example_component_ts.md @@ -0,0 +1,88 @@ +```ts +import { Component, OnInit, signal } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent implements OnInit { + // Backs the toggle's checked state. Using a signal keeps the toggle in sync + // when the value is updated from the matchMedia listener, even without Zone.js. + readonly paletteToggle = signal(false); + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + + ngOnInit() { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + // Initialize the dark palette based on the initial + // value of the prefers-color-scheme media query + this.initializeDarkPalette(prefersDark.matches); + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches)); + } + + // Check/uncheck the toggle and update the palette based on isDark + initializeDarkPalette(isDark: boolean) { + this.paletteToggle.set(isDark); + this.toggleDarkPalette(isDark); + } + + // Listen for the toggle check/uncheck to toggle the dark palette + toggleChange(event: CustomEvent) { + this.initializeDarkPalette(event.detail.checked); + } + + // Add or remove the "ion-palette-dark" class on the html element + toggleDarkPalette(shouldAdd: boolean) { + document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); + } +} +``` diff --git a/static/usage/v9/theming/class-dark-mode/angular/global_css.md b/static/usage/v9/theming/class-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/angular/global_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/class-dark-mode/angular/styles_css.md b/static/usage/v9/theming/class-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..bd4b9d3ba5b --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/angular/styles_css.md @@ -0,0 +1,39 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import '@ionic/angular/css/palettes/dark.always.css'; */ +@import '@ionic/angular/css/palettes/dark.class.css'; +/* @import '@ionic/angular/css/palettes/dark.system.css'; */ +``` diff --git a/static/usage/v9/theming/class-dark-mode/demo.html b/static/usage/v9/theming/class-dark-mode/demo.html new file mode 100644 index 00000000000..87e0d0b736c --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/demo.html @@ -0,0 +1,150 @@ + + + + + + Theming + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + + + diff --git a/static/usage/v9/theming/class-dark-mode/index.md b/static/usage/v9/theming/class-dark-mode/index.md new file mode 100644 index 00000000000..2cd2d309b40 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/index.md @@ -0,0 +1,58 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v9/theming/class-dark-mode/javascript/index_html.md b/static/usage/v9/theming/class-dark-mode/javascript/index_html.md new file mode 100644 index 00000000000..5e2e16e2dde --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/javascript/index_html.md @@ -0,0 +1,94 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + +``` diff --git a/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..84dabd234f7 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +import '@ionic/core/css/palettes/dark.class.css'; +// import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/class-dark-mode/react/app_tsx.md b/static/usage/v9/theming/class-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..895757a0253 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/react/app_tsx.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +import '@ionic/react/css/palettes/dark.class.css'; +// import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/class-dark-mode/react/main_css.md b/static/usage/v9/theming/class-dark-mode/react/main_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/react/main_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/class-dark-mode/react/main_tsx.md b/static/usage/v9/theming/class-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..fa342bd21b0 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/react/main_tsx.md @@ -0,0 +1,125 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import type { ToggleCustomEvent } from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const [paletteToggle, setPaletteToggle] = useState(false); + + // Listen for the toggle check/uncheck to toggle the dark palette + const toggleChange = (event: ToggleCustomEvent) => { + toggleDarkPalette(event.detail.checked); + }; + + // Add or remove the "ion-palette-dark" class on the html element + const toggleDarkPalette = (shouldAdd: boolean) => { + document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); + }; + + // Check/uncheck the toggle and update the palette based on isDark + const initializeDarkPalette = (isDark: boolean) => { + setPaletteToggle(isDark); + toggleDarkPalette(isDark); + }; + + useEffect(() => { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + + // Initialize the dark palette based on the initial + // value of the prefers-color-scheme media query + initializeDarkPalette(prefersDark.matches); + + const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeDarkPalette(mediaQuery.matches); + }; + + // Listen for changes to the prefers-color-scheme media query + prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); + }; + }, []); + + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + + + Dark Mode + + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/class-dark-mode/theme/variables_css.md b/static/usage/v9/theming/class-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..9ed7948adac --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/theme/variables_css.md @@ -0,0 +1,33 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets a different item border color for the default theme on ios and md */ +:root { + --ion-item-border-color: var(--ion-background-color-step-200); +} + +/* This sets a different background and item background for the default theme on ios */ +:root.ios { + --ion-background-color: var(--ion-background-color-step-50, #f2f2f6); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background for the default theme on md */ +:root.md { + --ion-background-color: var(--ion-background-color-step-100, #f9f9f9); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different item background when dark mode is enabled on ios and md */ +.ion-palette-dark.ios, +.ion-palette-dark.md { + --ion-item-background: #1c1c1d; +} +``` diff --git a/static/usage/v9/theming/class-dark-mode/vue/example_vue.md b/static/usage/v9/theming/class-dark-mode/vue/example_vue.md new file mode 100644 index 00000000000..87467758ea0 --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/vue/example_vue.md @@ -0,0 +1,112 @@ +```html + + + + + +``` diff --git a/static/usage/v9/theming/class-dark-mode/vue/main_ts.md b/static/usage/v9/theming/class-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..3077050a61f --- /dev/null +++ b/static/usage/v9/theming/class-dark-mode/vue/main_ts.md @@ -0,0 +1,38 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +import '@ionic/vue/css/palettes/dark.class.css'; +// import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..d06f11fb2fb --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,61 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..775c5ae70ae --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,110 @@ +```ts +import { Component, OnInit, signal } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent implements OnInit { + // Signals so the palette state set from the matchMedia listeners (which fire + // outside Angular) re-renders the toggles on its own, with no manual change detection. + readonly darkPaletteToggle = signal(false); + readonly highContrastPaletteToggle = signal(false); + + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } + + ngOnInit() { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + const prefersHighContrast = window.matchMedia('(prefers-contrast: more)'); + + // Initialize the dark and high contrast palettes based on the initial + // value of the media queries + this.initializeDarkPalette(prefersDark.matches); + this.initializeHighContrastPalette(prefersHighContrast.matches); + + // Listen for changes to the media queries + prefersDark.addEventListener('change', (mediaQuery) => this.initializeDarkPalette(mediaQuery.matches)); + prefersHighContrast.addEventListener('change', (mediaQuery) => + this.initializeHighContrastPalette(mediaQuery.matches) + ); + } + + // Check/uncheck the toggle and update the palette based on isDark + initializeDarkPalette(isDark: boolean) { + this.darkPaletteToggle.set(isDark); + this.toggleDarkPalette(isDark); + } + + // Check/uncheck the toggle and update the palette based on isHighContrast + initializeHighContrastPalette(isHighContrast: boolean) { + this.highContrastPaletteToggle.set(isHighContrast); + this.toggleHighContrastPalette(isHighContrast); + } + + // Listen for the toggle check/uncheck to toggle the dark palette + darkPaletteToggleChange(event: CustomEvent) { + this.initializeDarkPalette(event.detail.checked); + } + + // Listen for the toggle check/uncheck to toggle the high contrast palette + highContrastPaletteToggleChange(event: CustomEvent) { + this.initializeHighContrastPalette(event.detail.checked); + } + + // Add or remove the "ion-palette-dark" class on the html element + toggleDarkPalette(shouldAdd: boolean) { + document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); + } + + // Add or remove the "ion-palette-high-contrast" class on the html element + toggleHighContrastPalette(shouldAdd: boolean) { + document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd); + } +} +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md b/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/angular/global_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md new file mode 100644 index 00000000000..f3cf8196e1d --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,40 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/palettes/dark.class.css'; +@import '@ionic/angular/css/palettes/high-contrast.class.css'; +@import '@ionic/angular/css/palettes/high-contrast-dark.class.css'; +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/demo.html b/static/usage/v9/theming/class-high-contrast-mode/demo.html new file mode 100644 index 00000000000..89ba2a9589c --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/demo.html @@ -0,0 +1,145 @@ + + + + + + Theming + + + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + + + diff --git a/static/usage/v9/theming/class-high-contrast-mode/index.md b/static/usage/v9/theming/class-high-contrast-mode/index.md new file mode 100644 index 00000000000..e7c999fa737 --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/index.md @@ -0,0 +1,52 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v9/theming/class-high-contrast-mode/javascript/index_html.md b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..bd8d6fead9e --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,111 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + + Dark Mode + + + High Contrast Mode + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md new file mode 100644 index 00000000000..42ad5bdbd9a --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,48 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/high-contrast.class.css'; +import '@ionic/core/css/palettes/high-contrast-dark.class.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md new file mode 100644 index 00000000000..4509c0560a2 --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/high-contrast.class.css'; +import '@ionic/react/css/palettes/high-contrast-dark.class.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md b/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/react/main_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..c7852259727 --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,157 @@ +```tsx +import React, { useEffect, useState } from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import type { ToggleCustomEvent } from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + const [darkPaletteToggle, setDarkPaletteToggle] = useState(false); + const [highContrastPaletteToggle, setHighContrastPaletteToggle] = useState(false); + + // Listen for the toggle check/uncheck to toggle the palettes + const darkPaletteToggleChange = (event: ToggleCustomEvent) => { + toggleDarkPalette(event.detail.checked); + }; + + const highContrastPaletteToggleChange = (event: ToggleCustomEvent) => { + toggleHighContrastPalette(event.detail.checked); + }; + + // Add or remove the "ion-palette-dark" class on the html element + const toggleDarkPalette = (shouldAdd: boolean) => { + document.documentElement.classList.toggle('ion-palette-dark', shouldAdd); + }; + + // Add or remove the "ion-palette-high-contrast" class on the html element + const toggleHighContrastPalette = (shouldAdd: boolean) => { + document.documentElement.classList.toggle('ion-palette-high-contrast', shouldAdd); + }; + + // Check/uncheck the toggle and update the palette + const initializeDarkPalette = (isDark: boolean) => { + setDarkPaletteToggle(isDark); + toggleDarkPalette(isDark); + }; + + const initializeHighContrastPalette = (isHighContrast: boolean) => { + setHighContrastPaletteToggle(isHighContrast); + toggleHighContrastPalette(isHighContrast); + }; + + useEffect(() => { + // Use matchMedia to check the user preference + const prefersDark = window.matchMedia('(prefers-color-scheme: dark)'); + const prefersHighContrast = window.matchMedia('(prefers-contrast: more)'); + + // Initialize the dark palette based on the initial + // value of the media queries + initializeDarkPalette(prefersDark.matches); + initializeHighContrastPalette(prefersHighContrast.matches); + + const setDarkPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeDarkPalette(mediaQuery.matches); + }; + + const setHighContrastPaletteFromMediaQuery = (mediaQuery: MediaQueryListEvent) => { + initializeHighContrastPalette(mediaQuery.matches); + }; + + // Listen for changes to the media queries + prefersDark.addEventListener('change', setDarkPaletteFromMediaQuery); + prefersHighContrast.addEventListener('change', setHighContrastPaletteFromMediaQuery); + + return () => { + prefersDark.removeEventListener('change', setDarkPaletteFromMediaQuery); + prefersHighContrast.removeEventListener('change', setHighContrastPaletteFromMediaQuery); + }; + }, []); + + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + + + Dark Mode + + + + + High Contrast Mode + + + + + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..2aa03d30caf --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,136 @@ +```html + + + + + +``` diff --git a/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md new file mode 100644 index 00000000000..73afd976654 --- /dev/null +++ b/static/usage/v9/theming/class-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,36 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/high-contrast.class.css'; +import '@ionic/vue/css/palettes/high-contrast-dark.class.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md b/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md new file mode 100644 index 00000000000..418eddfc30f --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md b/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..9e62ea5b762 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/angular/example_component_ts.md @@ -0,0 +1,56 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v9/theming/system-dark-mode/angular/global_css.md b/static/usage/v9/theming/system-dark-mode/angular/global_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/angular/global_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/system-dark-mode/angular/styles_css.md b/static/usage/v9/theming/system-dark-mode/angular/styles_css.md new file mode 100644 index 00000000000..7216c77a9bf --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/angular/styles_css.md @@ -0,0 +1,39 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import '@ionic/angular/css/palettes/dark.always.css'; */ +/* @import '@ionic/angular/css/palettes/dark.class.css'; */ +@import '@ionic/angular/css/palettes/dark.system.css'; +``` diff --git a/static/usage/v9/theming/system-dark-mode/demo.html b/static/usage/v9/theming/system-dark-mode/demo.html new file mode 100644 index 00000000000..d5d601958bb --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/demo.html @@ -0,0 +1,95 @@ + + + + + + Theming + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + + + diff --git a/static/usage/v9/theming/system-dark-mode/index.md b/static/usage/v9/theming/system-dark-mode/index.md new file mode 100644 index 00000000000..4e326743783 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/index.md @@ -0,0 +1,58 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + +import variables_css from './theme/variables_css.md'; + + diff --git a/static/usage/v9/theming/system-dark-mode/javascript/index_html.md b/static/usage/v9/theming/system-dark-mode/javascript/index_html.md new file mode 100644 index 00000000000..914b8d547f7 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/javascript/index_html.md @@ -0,0 +1,52 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + +``` diff --git a/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md b/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md new file mode 100644 index 00000000000..9afb89215c3 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/system-dark-mode/react/app_tsx.md b/static/usage/v9/theming/system-dark-mode/react/app_tsx.md new file mode 100644 index 00000000000..09635b94656 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/react/app_tsx.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/react/css/palettes/dark.always.css'; +// import '@ionic/react/css/palettes/dark.class.css'; +import '@ionic/react/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/system-dark-mode/react/main_css.md b/static/usage/v9/theming/system-dark-mode/react/main_css.md new file mode 100644 index 00000000000..ac28ad28a5f --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/react/main_css.md @@ -0,0 +1,6 @@ +```css +/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */ +ion-item { + --transition: none; +} +``` diff --git a/static/usage/v9/theming/system-dark-mode/react/main_tsx.md b/static/usage/v9/theming/system-dark-mode/react/main_tsx.md new file mode 100644 index 00000000000..58d10fa6a6b --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/react/main_tsx.md @@ -0,0 +1,78 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +import './main.css'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/system-dark-mode/theme/variables_css.md b/static/usage/v9/theming/system-dark-mode/theme/variables_css.md new file mode 100644 index 00000000000..30ae365e2f5 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/theme/variables_css.md @@ -0,0 +1,35 @@ +```css +/* Ionic Variables and Theming + * --------------------------------------------------------------- + * Any overrides to theme variables should be placed in this file. + * For more information, please see: + * http://ionicframework.com/docs/theming/ + */ + +/* This sets a different item border color for the default theme on ios and md */ +:root { + --ion-item-border-color: var(--ion-background-color-step-200); +} + +/* This sets a different background and item background for the default theme on ios */ +:root.ios { + --ion-background-color: var(--ion-background-color-step-50, #f2f2f6); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different background and item background for the default theme on md */ +:root.md { + --ion-background-color: var(--ion-background-color-step-100, #f9f9f9); + --ion-toolbar-background: var(--ion-background-color); + --ion-item-background: #fff; +} + +/* This sets a different item background when dark mode is enabled on ios and md */ +@media (prefers-color-scheme: dark) { + :root.ios, + :root.md { + --ion-item-background: #1c1c1d; + } +} +``` diff --git a/static/usage/v9/theming/system-dark-mode/vue/example_vue.md b/static/usage/v9/theming/system-dark-mode/vue/example_vue.md new file mode 100644 index 00000000000..0ac295631b5 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/vue/example_vue.md @@ -0,0 +1,74 @@ +```html + + + + + +``` diff --git a/static/usage/v9/theming/system-dark-mode/vue/main_ts.md b/static/usage/v9/theming/system-dark-mode/vue/main_ts.md new file mode 100644 index 00000000000..1203416fbe6 --- /dev/null +++ b/static/usage/v9/theming/system-dark-mode/vue/main_ts.md @@ -0,0 +1,38 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/vue/css/palettes/dark.always.css'; +// import '@ionic/vue/css/palettes/dark.class.css'; +import '@ionic/vue/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md new file mode 100644 index 00000000000..8eb041af7cf --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md new file mode 100644 index 00000000000..9e62ea5b762 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/angular/example_component_ts.md @@ -0,0 +1,56 @@ +```ts +import { Component } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, + ], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + } +} +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md b/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md new file mode 100644 index 00000000000..33b94c8d260 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/angular/styles_css.md @@ -0,0 +1,40 @@ +```css +/* + * App Global CSS + * ---------------------------------------------------------------------------- + * Put style rules here that you want to apply globally. These styles are for + * the entire app and not just one component. Additionally, this file can be + * used as an entry point to import other CSS/Sass files to be included in the + * output CSS. + * For more information on global stylesheets, visit the documentation: + * https://ionicframework.com/docs/layout/global-stylesheets + */ + +/* Core CSS required for Ionic components to work properly */ +@import '@ionic/angular/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +@import '@ionic/angular/css/normalize.css'; +@import '@ionic/angular/css/structure.css'; +@import '@ionic/angular/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +@import '@ionic/angular/css/padding.css'; +@import '@ionic/angular/css/float-elements.css'; +@import '@ionic/angular/css/text-alignment.css'; +@import '@ionic/angular/css/text-transformation.css'; +@import '@ionic/angular/css/flex-utils.css'; +@import '@ionic/angular/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +@import '@ionic/angular/css/palettes/dark.system.css'; +@import '@ionic/angular/css/palettes/high-contrast.system.css'; +@import '@ionic/angular/css/palettes/high-contrast-dark.system.css'; +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/demo.html b/static/usage/v9/theming/system-high-contrast-mode/demo.html new file mode 100644 index 00000000000..e2d9b99b627 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/demo.html @@ -0,0 +1,69 @@ + + + + + + Theming + + + + + + + + + + + + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + + + + diff --git a/static/usage/v9/theming/system-high-contrast-mode/index.md b/static/usage/v9/theming/system-high-contrast-mode/index.md new file mode 100644 index 00000000000..40218c312a0 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/index.md @@ -0,0 +1,48 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react_app_tsx from './react/app_tsx.md'; +import react_main_tsx from './react/main_tsx.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_styles_css from './angular/styles_css.md'; + +import vue_example from './vue/example_vue.md'; +import vue_main_ts from './vue/main_ts.md'; + + diff --git a/static/usage/v9/theming/system-high-contrast-mode/javascript/index_html.md b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_html.md new file mode 100644 index 00000000000..3f6a8efa296 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_html.md @@ -0,0 +1,45 @@ +```html + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + True Tone + + + + + + Night Shift + 9:00 PM to 8:00 AM + + + +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md new file mode 100644 index 00000000000..c972f09c334 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/javascript/index_ts.md @@ -0,0 +1,48 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/core/css/palettes/dark.system.css'; +import '@ionic/core/css/palettes/high-contrast.system.css'; +import '@ionic/core/css/palettes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'person-circle': personCircle, 'person-circle-outline': personCircleOutline, + * 'sunny': sunny, 'sunny-outline': sunnyOutline }); + */ +addIcons({ personCircle, personCircleOutline, sunny, sunnyOutline }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md b/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md new file mode 100644 index 00000000000..c3bebd5e0f1 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/react/app_tsx.md @@ -0,0 +1,44 @@ +```tsx +import React from 'react'; +import { setupIonicReact, IonApp } from '@ionic/react'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/react/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/react/css/normalize.css'; +import '@ionic/react/css/structure.css'; +import '@ionic/react/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/react/css/padding.css'; +import '@ionic/react/css/float-elements.css'; +import '@ionic/react/css/text-alignment.css'; +import '@ionic/react/css/text-transformation.css'; +import '@ionic/react/css/flex-utils.css'; +import '@ionic/react/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/react/css/palettes/dark.system.css'; +import '@ionic/react/css/palettes/high-contrast.system.css'; +import '@ionic/react/css/palettes/high-contrast-dark.system.css'; + +import Example from './main'; + +setupIonicReact(); + +export default function App() { + return ( + + + + ); +} +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md b/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md new file mode 100644 index 00000000000..ac9c82c6119 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/react/main_tsx.md @@ -0,0 +1,76 @@ +```tsx +import React from 'react'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonList, + IonListHeader, + IonRange, + IonText, + IonTitle, + IonToggle, + IonToolbar, +} from '@ionic/react'; +import { personCircle, personCircleOutline, sunny, sunnyOutline } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + + + + Display + + + + + + + + + + Appearance + + Text Size + + Bold Text + + + + Brightness + + + + + + + + + + True Tone + + + + + + + Night Shift + + 9:00 PM to 8:00 AM + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md b/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md new file mode 100644 index 00000000000..8e0e6616e96 --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/vue/example_vue.md @@ -0,0 +1,67 @@ +```html + + + +``` diff --git a/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md b/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md new file mode 100644 index 00000000000..bd1dd2efe0d --- /dev/null +++ b/static/usage/v9/theming/system-high-contrast-mode/vue/main_ts.md @@ -0,0 +1,39 @@ +```ts +import { createApp } from 'vue'; +import { IonicVue } from '@ionic/vue'; + +import App from './App.vue'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/vue/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/vue/css/normalize.css'; +import '@ionic/vue/css/structure.css'; +import '@ionic/vue/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/vue/css/padding.css'; +import '@ionic/vue/css/float-elements.css'; +import '@ionic/vue/css/text-alignment.css'; +import '@ionic/vue/css/text-transformation.css'; +import '@ionic/vue/css/flex-utils.css'; +import '@ionic/vue/css/display.css'; + +/** + * Ionic Dark and High Contrast Palettes + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + * https://ionicframework.com/docs/theming/high-contrast-mode + */ + +import '@ionic/vue/css/palettes/dark.system.css'; +import '@ionic/vue/css/palettes/high-contrast.system.css'; +import '@ionic/vue/css/palettes/high-contrast-dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +createApp(App).use(IonicVue).mount('#app'); +``` diff --git a/static/usage/v9/thumbnail/basic/angular/example_component_html.md b/static/usage/v9/thumbnail/basic/angular/example_component_html.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v9/thumbnail/basic/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v9/thumbnail/basic/angular/example_component_ts.md b/static/usage/v9/thumbnail/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..a78aaa5094d --- /dev/null +++ b/static/usage/v9/thumbnail/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonThumbnail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/thumbnail/basic/demo.html b/static/usage/v9/thumbnail/basic/demo.html new file mode 100644 index 00000000000..2439ff95144 --- /dev/null +++ b/static/usage/v9/thumbnail/basic/demo.html @@ -0,0 +1,24 @@ + + + + + + Thumbnail + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v9/thumbnail/basic/index.md b/static/usage/v9/thumbnail/basic/index.md new file mode 100644 index 00000000000..8b52a5c7477 --- /dev/null +++ b/static/usage/v9/thumbnail/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/thumbnail/basic/javascript.md b/static/usage/v9/thumbnail/basic/javascript.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v9/thumbnail/basic/javascript.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v9/thumbnail/basic/react.md b/static/usage/v9/thumbnail/basic/react.md new file mode 100644 index 00000000000..3813690a7a4 --- /dev/null +++ b/static/usage/v9/thumbnail/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/thumbnail/basic/vue.md b/static/usage/v9/thumbnail/basic/vue.md new file mode 100644 index 00000000000..86f3517b6fc --- /dev/null +++ b/static/usage/v9/thumbnail/basic/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/thumbnail/item/angular/example_component_html.md b/static/usage/v9/thumbnail/item/angular/example_component_html.md new file mode 100644 index 00000000000..a83cb82e78c --- /dev/null +++ b/static/usage/v9/thumbnail/item/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/v9/thumbnail/item/angular/example_component_ts.md b/static/usage/v9/thumbnail/item/angular/example_component_ts.md new file mode 100644 index 00000000000..5a5a6be6a6e --- /dev/null +++ b/static/usage/v9/thumbnail/item/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonLabel, IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/thumbnail/item/demo.html b/static/usage/v9/thumbnail/item/demo.html new file mode 100644 index 00000000000..f12b63f1305 --- /dev/null +++ b/static/usage/v9/thumbnail/item/demo.html @@ -0,0 +1,27 @@ + + + + + + Thumbnail + + + + + + + + + +
+ + + Silhouette of mountains + + Item Thumbnail + +
+ + + + diff --git a/static/usage/v9/thumbnail/item/index.md b/static/usage/v9/thumbnail/item/index.md new file mode 100644 index 00000000000..04dd5474424 --- /dev/null +++ b/static/usage/v9/thumbnail/item/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/thumbnail/item/javascript.md b/static/usage/v9/thumbnail/item/javascript.md new file mode 100644 index 00000000000..a83cb82e78c --- /dev/null +++ b/static/usage/v9/thumbnail/item/javascript.md @@ -0,0 +1,8 @@ +```html + + + Silhouette of mountains + + Item Thumbnail + +``` diff --git a/static/usage/v9/thumbnail/item/react.md b/static/usage/v9/thumbnail/item/react.md new file mode 100644 index 00000000000..29630ebf819 --- /dev/null +++ b/static/usage/v9/thumbnail/item/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonItem, IonLabel, IonThumbnail } from '@ionic/react'; + +function Example() { + return ( + <> + + + Silhouette of mountains + + Item Thumbnail + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/thumbnail/item/vue.md b/static/usage/v9/thumbnail/item/vue.md new file mode 100644 index 00000000000..e58ea0c89ae --- /dev/null +++ b/static/usage/v9/thumbnail/item/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..74742dfe9f0 --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,6 @@ +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..119cfb8ee9c --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Silhouette of mountains + +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..a78aaa5094d --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonThumbnail } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonThumbnail], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/demo.html b/static/usage/v9/thumbnail/theming/css-properties/demo.html new file mode 100644 index 00000000000..98292371a3c --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/demo.html @@ -0,0 +1,31 @@ + + + + + + Thumbnail + + + + + + + + + + + +
+ + Silhouette of mountains + +
+ + + + diff --git a/static/usage/v9/thumbnail/theming/css-properties/index.md b/static/usage/v9/thumbnail/theming/css-properties/index.md new file mode 100644 index 00000000000..013f9aab199 --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/thumbnail/theming/css-properties/javascript.md b/static/usage/v9/thumbnail/theming/css-properties/javascript.md new file mode 100644 index 00000000000..6586de083c5 --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/javascript.md @@ -0,0 +1,12 @@ +```html + + + + Silhouette of mountains + +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md b/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..74742dfe9f0 --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/react/main_css.md @@ -0,0 +1,6 @@ +```css +ion-thumbnail { + --size: 140px; + --border-radius: 14px; +} +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md b/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..1d0f352383f --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/react/main_tsx.md @@ -0,0 +1,17 @@ +```tsx +import React from 'react'; +import { IonThumbnail } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + Silhouette of mountains + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/thumbnail/theming/css-properties/vue.md b/static/usage/v9/thumbnail/theming/css-properties/vue.md new file mode 100644 index 00000000000..7f462aa835b --- /dev/null +++ b/static/usage/v9/thumbnail/theming/css-properties/vue.md @@ -0,0 +1,18 @@ +```html + + + + + +``` diff --git a/static/usage/v9/title/basic/angular/example_component_html.md b/static/usage/v9/title/basic/angular/example_component_html.md new file mode 100644 index 00000000000..59a304dbeec --- /dev/null +++ b/static/usage/v9/title/basic/angular/example_component_html.md @@ -0,0 +1,7 @@ +```html + + + Title + + +``` diff --git a/static/usage/v9/title/basic/angular/example_component_ts.md b/static/usage/v9/title/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..db3bc9e4add --- /dev/null +++ b/static/usage/v9/title/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/title/basic/demo.html b/static/usage/v9/title/basic/demo.html new file mode 100644 index 00000000000..4aaf479ec67 --- /dev/null +++ b/static/usage/v9/title/basic/demo.html @@ -0,0 +1,22 @@ + + + + + + Title + + + + + + + + + + + Title + + + + + diff --git a/static/usage/v9/title/basic/index.md b/static/usage/v9/title/basic/index.md new file mode 100644 index 00000000000..c2f37ba6c6e --- /dev/null +++ b/static/usage/v9/title/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/title/basic/javascript.md b/static/usage/v9/title/basic/javascript.md new file mode 100644 index 00000000000..59a304dbeec --- /dev/null +++ b/static/usage/v9/title/basic/javascript.md @@ -0,0 +1,7 @@ +```html + + + Title + + +``` diff --git a/static/usage/v9/title/basic/react.md b/static/usage/v9/title/basic/react.md new file mode 100644 index 00000000000..efef42efdcc --- /dev/null +++ b/static/usage/v9/title/basic/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonHeader, IonToolbar, IonTitle } from '@ionic/react'; + +function Example() { + return ( + + + Title + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/title/basic/vue.md b/static/usage/v9/title/basic/vue.md new file mode 100644 index 00000000000..8dcdf94e9a4 --- /dev/null +++ b/static/usage/v9/title/basic/vue.md @@ -0,0 +1,13 @@ +```html + + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md new file mode 100644 index 00000000000..727d9ba1e3a --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_html.md @@ -0,0 +1,39 @@ +```html + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..cc420051e5c --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/title/collapsible-large-title/basic/demo.html b/static/usage/v9/title/collapsible-large-title/basic/demo.html new file mode 100644 index 00000000000..69ad58b121d --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/demo.html @@ -0,0 +1,54 @@ + + + + + + Title + + + + + + + + + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v9/title/collapsible-large-title/basic/index.md b/static/usage/v9/title/collapsible-large-title/basic/index.md new file mode 100644 index 00000000000..e14b1cc0f21 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/index.md @@ -0,0 +1,28 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/title/collapsible-large-title/basic/javascript.md b/static/usage/v9/title/collapsible-large-title/basic/javascript.md new file mode 100644 index 00000000000..77e7de55212 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/javascript.md @@ -0,0 +1,39 @@ +```html + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/basic/react.md b/static/usage/v9/title/collapsible-large-title/basic/react.md new file mode 100644 index 00000000000..cdcbdc557b6 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/react.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react'; + +function Example() { + return ( + <> + + + Title + + + + + + Title + + + +
Scroll the list to see the title collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/title/collapsible-large-title/basic/vue.md b/static/usage/v9/title/collapsible-large-title/basic/vue.md new file mode 100644 index 00000000000..eaed784e824 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/basic/vue.md @@ -0,0 +1,45 @@ +```html + + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..6f253b16cd4 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_html.md @@ -0,0 +1,45 @@ +```html + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..23df2f652ab --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/title/collapsible-large-title/buttons/demo.html b/static/usage/v9/title/collapsible-large-title/buttons/demo.html new file mode 100644 index 00000000000..b7056cc806c --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/demo.html @@ -0,0 +1,60 @@ + + + + + + Title + + + + + + + + + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v9/title/collapsible-large-title/buttons/index.md b/static/usage/v9/title/collapsible-large-title/buttons/index.md new file mode 100644 index 00000000000..bfe40f421e1 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/index.md @@ -0,0 +1,27 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/title/collapsible-large-title/buttons/javascript.md b/static/usage/v9/title/collapsible-large-title/buttons/javascript.md new file mode 100644 index 00000000000..feb1583e3b6 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/javascript.md @@ -0,0 +1,45 @@ +```html + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/collapsible-large-title/buttons/react.md b/static/usage/v9/title/collapsible-large-title/buttons/react.md new file mode 100644 index 00000000000..deca52428ce --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/react.md @@ -0,0 +1,55 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem, IonButtons, IonButton } from '@ionic/react'; + +function Example() { + return ( + <> + + + Title + + Button + + + + + + + Title + + Button + + + + +
Scroll the list to see the title & buttons collapse.
+ + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/title/collapsible-large-title/buttons/vue.md b/static/usage/v9/title/collapsible-large-title/buttons/vue.md new file mode 100644 index 00000000000..ee775370d61 --- /dev/null +++ b/static/usage/v9/title/collapsible-large-title/buttons/vue.md @@ -0,0 +1,51 @@ +```html + + + +``` diff --git a/static/usage/v9/title/theming/css-properties/angular/example_component_html.md b/static/usage/v9/title/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..31c40bb2ef7 --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..cc420051e5c --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonHeader, IonItem, IonList, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/title/theming/css-properties/angular/global_css.md b/static/usage/v9/title/theming/css-properties/angular/global_css.md new file mode 100644 index 00000000000..0da76c33423 --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/angular/global_css.md @@ -0,0 +1,14 @@ +```css +ion-title.title-large { + color: #c897d8; + font-size: 30px; +} + +ion-title { + --color: #000; +} + +ion-toolbar { + --background: #c897d8; +} +``` diff --git a/static/usage/v9/title/theming/css-properties/demo.html b/static/usage/v9/title/theming/css-properties/demo.html new file mode 100644 index 00000000000..8ac5b24b4dc --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/demo.html @@ -0,0 +1,67 @@ + + + + + + Title + + + + + + + + + + + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + + diff --git a/static/usage/v9/title/theming/css-properties/index.md b/static/usage/v9/title/theming/css-properties/index.md new file mode 100644 index 00000000000..f6a522ead1a --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/index.md @@ -0,0 +1,36 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/title/theming/css-properties/javascript.md b/static/usage/v9/title/theming/css-properties/javascript.md new file mode 100644 index 00000000000..443ca1bf39d --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/javascript.md @@ -0,0 +1,52 @@ +```html + + + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + +``` diff --git a/static/usage/v9/title/theming/css-properties/react/main_css.md b/static/usage/v9/title/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..0da76c33423 --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-title.title-large { + color: #c897d8; + font-size: 30px; +} + +ion-title { + --color: #000; +} + +ion-toolbar { + --background: #c897d8; +} +``` diff --git a/static/usage/v9/title/theming/css-properties/react/main_tsx.md b/static/usage/v9/title/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..5dc5b9d993b --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/react/main_tsx.md @@ -0,0 +1,49 @@ +```tsx +import React from 'react'; +import { IonContent, IonHeader, IonToolbar, IonTitle, IonList, IonItem } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + Title + + + + + + Title + + + + + Item 1 + Item 2 + Item 3 + Item 4 + Item 5 + Item 6 + Item 7 + Item 8 + Item 9 + Item 10 + Item 11 + Item 12 + Item 13 + Item 14 + Item 15 + Item 16 + Item 17 + Item 18 + Item 19 + Item 20 + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/title/theming/css-properties/vue.md b/static/usage/v9/title/theming/css-properties/vue.md new file mode 100644 index 00000000000..2fb3aee914c --- /dev/null +++ b/static/usage/v9/title/theming/css-properties/vue.md @@ -0,0 +1,57 @@ +```html + + + + +``` diff --git a/static/usage/v9/toast/buttons/angular/example_component_html.md b/static/usage/v9/toast/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..15ced1fb702 --- /dev/null +++ b/static/usage/v9/toast/buttons/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open Toast + +``` diff --git a/static/usage/v9/toast/buttons/angular/example_component_ts.md b/static/usage/v9/toast/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..07c92921a49 --- /dev/null +++ b/static/usage/v9/toast/buttons/angular/example_component_ts.md @@ -0,0 +1,34 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonToast } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonToast], +}) +export class ExampleComponent { + public toastButtons = [ + { + text: 'More Info', + role: 'info', + handler: () => { + console.log('More Info clicked'); + }, + }, + { + text: 'Dismiss', + role: 'cancel', + handler: () => { + console.log('Dismiss clicked'); + }, + }, + ]; + + setRoleMessage(event: CustomEvent) { + const { role } = event.detail; + console.log(`Dismissed with role: ${role}`); + } +} +``` diff --git a/static/usage/v9/toast/buttons/demo.html b/static/usage/v9/toast/buttons/demo.html new file mode 100644 index 00000000000..3c65a948735 --- /dev/null +++ b/static/usage/v9/toast/buttons/demo.html @@ -0,0 +1,54 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + + + diff --git a/static/usage/v9/toast/buttons/index.md b/static/usage/v9/toast/buttons/index.md new file mode 100644 index 00000000000..c10192c9d54 --- /dev/null +++ b/static/usage/v9/toast/buttons/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/buttons/javascript.md b/static/usage/v9/toast/buttons/javascript.md new file mode 100644 index 00000000000..dd425a862d6 --- /dev/null +++ b/static/usage/v9/toast/buttons/javascript.md @@ -0,0 +1,30 @@ +```html +Open Toast + + + +``` diff --git a/static/usage/v9/toast/buttons/react.md b/static/usage/v9/toast/buttons/react.md new file mode 100644 index 00000000000..14c7595a309 --- /dev/null +++ b/static/usage/v9/toast/buttons/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +function Example() { + return ( + <> + Open Toast + { + console.log('More Info clicked'); + }, + }, + { + text: 'Dismiss', + role: 'cancel', + handler: () => { + console.log('Dismiss clicked'); + }, + }, + ]} + onDidDismiss={(e: CustomEvent) => console.log(`Dismissed with role: ${e.detail.role}`)} + > + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/buttons/vue.md b/static/usage/v9/toast/buttons/vue.md new file mode 100644 index 00000000000..b5dd11510b5 --- /dev/null +++ b/static/usage/v9/toast/buttons/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/icon/angular/example_component_html.md b/static/usage/v9/toast/icon/angular/example_component_html.md new file mode 100644 index 00000000000..819a72c342f --- /dev/null +++ b/static/usage/v9/toast/icon/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Open Toast + +``` diff --git a/static/usage/v9/toast/icon/angular/example_component_ts.md b/static/usage/v9/toast/icon/angular/example_component_ts.md new file mode 100644 index 00000000000..76bf2f8e5c7 --- /dev/null +++ b/static/usage/v9/toast/icon/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonToast } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { globe } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonToast], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ globe }); + } +} +``` diff --git a/static/usage/v9/toast/icon/demo.html b/static/usage/v9/toast/icon/demo.html new file mode 100644 index 00000000000..315d7efe1b3 --- /dev/null +++ b/static/usage/v9/toast/icon/demo.html @@ -0,0 +1,28 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + diff --git a/static/usage/v9/toast/icon/index.md b/static/usage/v9/toast/icon/index.md new file mode 100644 index 00000000000..395275244ab --- /dev/null +++ b/static/usage/v9/toast/icon/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/icon/javascript.md b/static/usage/v9/toast/icon/javascript.md new file mode 100644 index 00000000000..1c694d9dde0 --- /dev/null +++ b/static/usage/v9/toast/icon/javascript.md @@ -0,0 +1,4 @@ +```html +Open Toast + +``` diff --git a/static/usage/v9/toast/icon/react.md b/static/usage/v9/toast/icon/react.md new file mode 100644 index 00000000000..baa893d452e --- /dev/null +++ b/static/usage/v9/toast/icon/react.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; +import { globe } from 'ionicons/icons'; + +function Example() { + return ( + <> + Open Toast + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/icon/vue.md b/static/usage/v9/toast/icon/vue.md new file mode 100644 index 00000000000..7e7273e0065 --- /dev/null +++ b/static/usage/v9/toast/icon/vue.md @@ -0,0 +1,11 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/inline/basic/angular/example_component_html.md b/static/usage/v9/toast/inline/basic/angular/example_component_html.md new file mode 100644 index 00000000000..5756e5c7891 --- /dev/null +++ b/static/usage/v9/toast/inline/basic/angular/example_component_html.md @@ -0,0 +1,12 @@ +```html + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + +``` diff --git a/static/usage/v9/toast/inline/basic/angular/example_component_ts.md b/static/usage/v9/toast/inline/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..5d46979d73c --- /dev/null +++ b/static/usage/v9/toast/inline/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toast/inline/basic/demo.html b/static/usage/v9/toast/inline/basic/demo.html new file mode 100644 index 00000000000..2b0d1a341e9 --- /dev/null +++ b/static/usage/v9/toast/inline/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Toast | Inline + + + + + + + + + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + + + + diff --git a/static/usage/v9/toast/inline/basic/index.md b/static/usage/v9/toast/inline/basic/index.md new file mode 100644 index 00000000000..61a4444acee --- /dev/null +++ b/static/usage/v9/toast/inline/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/inline/basic/javascript.md b/static/usage/v9/toast/inline/basic/javascript.md new file mode 100644 index 00000000000..27f1a967725 --- /dev/null +++ b/static/usage/v9/toast/inline/basic/javascript.md @@ -0,0 +1,12 @@ +```html + + + Inline Toast + + + + Open +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + +``` diff --git a/static/usage/v9/toast/inline/basic/react.md b/static/usage/v9/toast/inline/basic/react.md new file mode 100644 index 00000000000..0def9d5e178 --- /dev/null +++ b/static/usage/v9/toast/inline/basic/react.md @@ -0,0 +1,25 @@ +```tsx +import React from 'react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; + +function Example() { + return ( + + + + Inline Toast + + + + + Open + +

This toast example uses triggers to automatically open a toast when the button is clicked.

+ + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/toast/inline/basic/vue.md b/static/usage/v9/toast/inline/basic/vue.md new file mode 100644 index 00000000000..8b0024f1729 --- /dev/null +++ b/static/usage/v9/toast/inline/basic/vue.md @@ -0,0 +1,18 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/inline/is-open/angular/example_component_html.md b/static/usage/v9/toast/inline/is-open/angular/example_component_html.md new file mode 100644 index 00000000000..96014213ad0 --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/angular/example_component_html.md @@ -0,0 +1,16 @@ +```html + + + Inline Toast + + + + Open + + +``` diff --git a/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md b/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md new file mode 100644 index 00000000000..f962179b670 --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent { + isToastOpen = false; + + setOpen(isOpen: boolean) { + this.isToastOpen = isOpen; + } +} +``` diff --git a/static/usage/v9/toast/inline/is-open/demo.html b/static/usage/v9/toast/inline/is-open/demo.html new file mode 100644 index 00000000000..2b27059edd0 --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/demo.html @@ -0,0 +1,33 @@ + + + + + + Toast | Inline + + + + + + + + + + + Inline Toast + + + + Open + + + + + + + diff --git a/static/usage/v9/toast/inline/is-open/index.md b/static/usage/v9/toast/inline/is-open/index.md new file mode 100644 index 00000000000..86c4accac2f --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/inline/is-open/javascript.md b/static/usage/v9/toast/inline/is-open/javascript.md new file mode 100644 index 00000000000..eeb540d747a --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/javascript.md @@ -0,0 +1,18 @@ +```html + + + Inline Toast + + + + Open + + + + +``` diff --git a/static/usage/v9/toast/inline/is-open/react.md b/static/usage/v9/toast/inline/is-open/react.md new file mode 100644 index 00000000000..ed32e64ea70 --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/react.md @@ -0,0 +1,31 @@ +```tsx +import React, { useState } from 'react'; +import { IonButton, IonHeader, IonContent, IonToolbar, IonTitle, IonPage, IonToast } from '@ionic/react'; + +function Example() { + const [isOpen, setIsOpen] = useState(false); + + return ( + + + + Inline Toast + + + + setIsOpen(true)}> + Open + + setIsOpen(false)} + duration={5000} + > + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/toast/inline/is-open/vue.md b/static/usage/v9/toast/inline/is-open/vue.md new file mode 100644 index 00000000000..2f0f8ca0421 --- /dev/null +++ b/static/usage/v9/toast/inline/is-open/vue.md @@ -0,0 +1,28 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/layout/angular/example_component_html.md b/static/usage/v9/toast/layout/angular/example_component_html.md new file mode 100644 index 00000000000..2efa0572c4b --- /dev/null +++ b/static/usage/v9/toast/layout/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html +Open Baseline Layout Toast +Open Stacked Layout Toast + + +``` diff --git a/static/usage/v9/toast/layout/angular/example_component_ts.md b/static/usage/v9/toast/layout/angular/example_component_ts.md new file mode 100644 index 00000000000..afbf785936d --- /dev/null +++ b/static/usage/v9/toast/layout/angular/example_component_ts.md @@ -0,0 +1,18 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonToast } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonToast], +}) +export class ExampleComponent { + toastButtons = [ + { + text: 'Action With Long Text', + }, + ]; +} +``` diff --git a/static/usage/v9/toast/layout/demo.html b/static/usage/v9/toast/layout/demo.html new file mode 100644 index 00000000000..be94676fefd --- /dev/null +++ b/static/usage/v9/toast/layout/demo.html @@ -0,0 +1,49 @@ + + + + + + Toast + + + + + + + + + + + Toast + + + + Open Baseline Layout Toast + Open Stacked Layout Toast + + + + + + + + diff --git a/static/usage/v9/toast/layout/index.md b/static/usage/v9/toast/layout/index.md new file mode 100644 index 00000000000..630ad894829 --- /dev/null +++ b/static/usage/v9/toast/layout/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/layout/javascript.md b/static/usage/v9/toast/layout/javascript.md new file mode 100644 index 00000000000..6ae1998b02d --- /dev/null +++ b/static/usage/v9/toast/layout/javascript.md @@ -0,0 +1,27 @@ +```html +Open Baseline Layout Toast +Open Stacked Layout Toast + + + + +``` diff --git a/static/usage/v9/toast/layout/react.md b/static/usage/v9/toast/layout/react.md new file mode 100644 index 00000000000..51b71342b6b --- /dev/null +++ b/static/usage/v9/toast/layout/react.md @@ -0,0 +1,35 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +function Example() { + return ( + <> + Open Stacked Layout Toast + Open Baseline Layout Toast + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/layout/vue.md b/static/usage/v9/toast/layout/vue.md new file mode 100644 index 00000000000..cc430ec1d20 --- /dev/null +++ b/static/usage/v9/toast/layout/vue.md @@ -0,0 +1,29 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/position-anchor/angular/example_component_html.md b/static/usage/v9/toast/position-anchor/angular/example_component_html.md new file mode 100644 index 00000000000..f27b09cf057 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/angular/example_component_html.md @@ -0,0 +1,33 @@ +```html + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + +``` diff --git a/static/usage/v9/toast/position-anchor/angular/example_component_ts.md b/static/usage/v9/toast/position-anchor/angular/example_component_ts.md new file mode 100644 index 00000000000..de775406154 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toast/position-anchor/demo.html b/static/usage/v9/toast/position-anchor/demo.html new file mode 100644 index 00000000000..5ff69598002 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/demo.html @@ -0,0 +1,57 @@ + + + + + + Toast + + + + + + + + + + + + + Header + + + + +
+ Anchor to Header + Anchor to Footer + + + +
+ + + + + Footer + + + + + diff --git a/static/usage/v9/toast/position-anchor/index.md b/static/usage/v9/toast/position-anchor/index.md new file mode 100644 index 00000000000..4d652d7f761 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/position-anchor/javascript.md b/static/usage/v9/toast/position-anchor/javascript.md new file mode 100644 index 00000000000..0dc3e5b4a5a --- /dev/null +++ b/static/usage/v9/toast/position-anchor/javascript.md @@ -0,0 +1,33 @@ +```html + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + +``` diff --git a/static/usage/v9/toast/position-anchor/react.md b/static/usage/v9/toast/position-anchor/react.md new file mode 100644 index 00000000000..14149bff4d8 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/react.md @@ -0,0 +1,43 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonFooter, IonHeader, IonTitle, IonToast, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header + + + + + Anchor to Header + Anchor to Footer + + + + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/position-anchor/vue.md b/static/usage/v9/toast/position-anchor/vue.md new file mode 100644 index 00000000000..9d4c5020691 --- /dev/null +++ b/static/usage/v9/toast/position-anchor/vue.md @@ -0,0 +1,39 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/presenting/controller/angular/example_component_html.md b/static/usage/v9/toast/presenting/controller/angular/example_component_html.md new file mode 100644 index 00000000000..2ed1eea0254 --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html +Present Toast At the Top +Present Toast At the Middle +Present Toast At the Bottom +``` diff --git a/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md b/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md new file mode 100644 index 00000000000..5ea44ab25b1 --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, ToastController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton], +}) +export class ExampleComponent { + constructor(private toastController: ToastController) {} + + async presentToast(position: 'top' | 'middle' | 'bottom') { + const toast = await this.toastController.create({ + message: 'Hello World!', + duration: 1500, + position: position, + }); + + await toast.present(); + } +} +``` diff --git a/static/usage/v9/toast/presenting/controller/demo.html b/static/usage/v9/toast/presenting/controller/demo.html new file mode 100644 index 00000000000..a1acf67c4e5 --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/demo.html @@ -0,0 +1,52 @@ + + + + + + Toast + + + + + + + + + + + + + Toast + + + +
+ Present Toast At the Top + Present Toast At the Middle + Present Toast At the Bottom +
+ + + + + + + + diff --git a/static/usage/v9/toast/presenting/controller/index.md b/static/usage/v9/toast/presenting/controller/index.md new file mode 100644 index 00000000000..3346fece81e --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/presenting/controller/javascript.md b/static/usage/v9/toast/presenting/controller/javascript.md new file mode 100644 index 00000000000..52c089331fa --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/javascript.md @@ -0,0 +1,17 @@ +```html +Present Toast At the Top +Present Toast At the Middle +Present Toast At the Bottom + + +``` diff --git a/static/usage/v9/toast/presenting/controller/react.md b/static/usage/v9/toast/presenting/controller/react.md new file mode 100644 index 00000000000..b4e8d0913ca --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/react.md @@ -0,0 +1,31 @@ +```tsx +import React from 'react'; +import { IonButton, useIonToast } from '@ionic/react'; + +function Example() { + const [present] = useIonToast(); + + const presentToast = (position: 'top' | 'middle' | 'bottom') => { + present({ + message: 'Hello World!', + duration: 1500, + position: position, + }); + }; + + return ( + <> + presentToast('top')}> + Present Toast At the Top + + presentToast('middle')}> + Present Toast At the Middle + + presentToast('bottom')}> + Present Toast At the Bottom + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/presenting/controller/vue.md b/static/usage/v9/toast/presenting/controller/vue.md new file mode 100644 index 00000000000..e180abc18ea --- /dev/null +++ b/static/usage/v9/toast/presenting/controller/vue.md @@ -0,0 +1,21 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md b/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md new file mode 100644 index 00000000000..146007d0391 --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/angular/example_component_html.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md b/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md new file mode 100644 index 00000000000..143a25ef0cc --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toast/swipe-gesture/demo.html b/static/usage/v9/toast/swipe-gesture/demo.html new file mode 100644 index 00000000000..cdead06dd5c --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/demo.html @@ -0,0 +1,35 @@ + + + + + + Toast + + + + + + + + + +
+ Open Toast + +
+ + + + + Footer + + + + + diff --git a/static/usage/v9/toast/swipe-gesture/index.md b/static/usage/v9/toast/swipe-gesture/index.md new file mode 100644 index 00000000000..87f3cf8e5c1 --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toast/swipe-gesture/javascript.md b/static/usage/v9/toast/swipe-gesture/javascript.md new file mode 100644 index 00000000000..2b7f79e79d4 --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/javascript.md @@ -0,0 +1,17 @@ +```html + + Open Toast + + + + + Footer + + +``` diff --git a/static/usage/v9/toast/swipe-gesture/react.md b/static/usage/v9/toast/swipe-gesture/react.md new file mode 100644 index 00000000000..09bbd89e3fd --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/react.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonFooter, IonTitle, IonToast, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + Open Toast + + + + + Footer + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/swipe-gesture/vue.md b/static/usage/v9/toast/swipe-gesture/vue.md new file mode 100644 index 00000000000..8aaf3583a98 --- /dev/null +++ b/static/usage/v9/toast/swipe-gesture/vue.md @@ -0,0 +1,23 @@ +```html + + + +``` diff --git a/static/usage/v9/toast/theming/angular/example_component_html.md b/static/usage/v9/toast/theming/angular/example_component_html.md new file mode 100644 index 00000000000..b51350a3b63 --- /dev/null +++ b/static/usage/v9/toast/theming/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html +Open Toast + +``` diff --git a/static/usage/v9/toast/theming/angular/example_component_ts.md b/static/usage/v9/toast/theming/angular/example_component_ts.md new file mode 100644 index 00000000000..17fa6ef748b --- /dev/null +++ b/static/usage/v9/toast/theming/angular/example_component_ts.md @@ -0,0 +1,21 @@ +```ts +import { Component } from '@angular/core'; +import { IonButton, IonToast } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonToast], +}) +export class ExampleComponent { + public toastButtons = [ + { + text: 'Dismiss', + role: 'cancel', + }, + ]; + + constructor() {} +} +``` diff --git a/static/usage/v9/toast/theming/angular/global_css.md b/static/usage/v9/toast/theming/angular/global_css.md new file mode 100644 index 00000000000..70ef6f5cfd6 --- /dev/null +++ b/static/usage/v9/toast/theming/angular/global_css.md @@ -0,0 +1,17 @@ +```css +ion-toast.custom-toast { + --background: #f4f4fa; + --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2); + --color: #4b4a50; +} + +ion-toast.custom-toast::part(message) { + font-style: italic; +} + +ion-toast.custom-toast::part(button) { + border-left: 1px solid #d2d2d2; + color: #030207; + font-size: 15px; +} +``` diff --git a/static/usage/v9/toast/theming/demo.html b/static/usage/v9/toast/theming/demo.html new file mode 100644 index 00000000000..65f8547bed3 --- /dev/null +++ b/static/usage/v9/toast/theming/demo.html @@ -0,0 +1,61 @@ + + + + + + Toast + + + + + + + + + + + + + Toast + + + +
+ Open Toast + +
+ + + + + + diff --git a/static/usage/v9/toast/theming/index.md b/static/usage/v9/toast/theming/index.md new file mode 100644 index 00000000000..3a720384291 --- /dev/null +++ b/static/usage/v9/toast/theming/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; +import angular_global_css from './angular/global_css.md'; + + diff --git a/static/usage/v9/toast/theming/javascript.md b/static/usage/v9/toast/theming/javascript.md new file mode 100644 index 00000000000..9d0addc910e --- /dev/null +++ b/static/usage/v9/toast/theming/javascript.md @@ -0,0 +1,32 @@ +```html +Open Toast + + + + + +``` diff --git a/static/usage/v9/toast/theming/react/main_css.md b/static/usage/v9/toast/theming/react/main_css.md new file mode 100644 index 00000000000..70ef6f5cfd6 --- /dev/null +++ b/static/usage/v9/toast/theming/react/main_css.md @@ -0,0 +1,17 @@ +```css +ion-toast.custom-toast { + --background: #f4f4fa; + --box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.2); + --color: #4b4a50; +} + +ion-toast.custom-toast::part(message) { + font-style: italic; +} + +ion-toast.custom-toast::part(button) { + border-left: 1px solid #d2d2d2; + color: #030207; + font-size: 15px; +} +``` diff --git a/static/usage/v9/toast/theming/react/main_tsx.md b/static/usage/v9/toast/theming/react/main_tsx.md new file mode 100644 index 00000000000..b7127396da4 --- /dev/null +++ b/static/usage/v9/toast/theming/react/main_tsx.md @@ -0,0 +1,27 @@ +```tsx +import React from 'react'; +import { IonButton, IonToast } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + Open Toast + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toast/theming/vue.md b/static/usage/v9/toast/theming/vue.md new file mode 100644 index 00000000000..1a4295f211c --- /dev/null +++ b/static/usage/v9/toast/theming/vue.md @@ -0,0 +1,41 @@ +```html + + + + + +``` diff --git a/static/usage/v9/toggle/alignment/angular/example_component_html.md b/static/usage/v9/toggle/alignment/angular/example_component_html.md new file mode 100644 index 00000000000..2395fa81f6a --- /dev/null +++ b/static/usage/v9/toggle/alignment/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html +Aligned to the Start

+Aligned to the Center +``` diff --git a/static/usage/v9/toggle/alignment/angular/example_component_ts.md b/static/usage/v9/toggle/alignment/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/alignment/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/alignment/demo.html b/static/usage/v9/toggle/alignment/demo.html new file mode 100644 index 00000000000..2f6eec49277 --- /dev/null +++ b/static/usage/v9/toggle/alignment/demo.html @@ -0,0 +1,25 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Aligned to the Start

+ Aligned to the Center

+
+
+ + + + diff --git a/static/usage/v9/toggle/alignment/index.md b/static/usage/v9/toggle/alignment/index.md new file mode 100644 index 00000000000..a606221c4c2 --- /dev/null +++ b/static/usage/v9/toggle/alignment/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/alignment/javascript.md b/static/usage/v9/toggle/alignment/javascript.md new file mode 100644 index 00000000000..b40b7ba1014 --- /dev/null +++ b/static/usage/v9/toggle/alignment/javascript.md @@ -0,0 +1,4 @@ +```html +Aligned to the Start

+Aligned to the Center +``` diff --git a/static/usage/v9/toggle/alignment/react.md b/static/usage/v9/toggle/alignment/react.md new file mode 100644 index 00000000000..6af4a181100 --- /dev/null +++ b/static/usage/v9/toggle/alignment/react.md @@ -0,0 +1,20 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + Aligned to the Start + +
+
+ + Aligned to the Center + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/alignment/vue.md b/static/usage/v9/toggle/alignment/vue.md new file mode 100644 index 00000000000..6fc033875f6 --- /dev/null +++ b/static/usage/v9/toggle/alignment/vue.md @@ -0,0 +1,10 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/basic/angular/example_component_html.md b/static/usage/v9/toggle/basic/angular/example_component_html.md new file mode 100644 index 00000000000..f6f9fd2bb1d --- /dev/null +++ b/static/usage/v9/toggle/basic/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html +Default Toggle

+Checked Toggle

+Disabled Toggle

+Disabled Checked Toggle +``` diff --git a/static/usage/v9/toggle/basic/angular/example_component_ts.md b/static/usage/v9/toggle/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/basic/demo.html b/static/usage/v9/toggle/basic/demo.html new file mode 100644 index 00000000000..660a809a31c --- /dev/null +++ b/static/usage/v9/toggle/basic/demo.html @@ -0,0 +1,27 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Default Toggle

+ Checked Toggle

+ Disabled Toggle

+ Disabled Checked Toggle +
+
+ + + + diff --git a/static/usage/v9/toggle/basic/index.md b/static/usage/v9/toggle/basic/index.md new file mode 100644 index 00000000000..d1dc266c16f --- /dev/null +++ b/static/usage/v9/toggle/basic/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/basic/javascript.md b/static/usage/v9/toggle/basic/javascript.md new file mode 100644 index 00000000000..fc6565ee989 --- /dev/null +++ b/static/usage/v9/toggle/basic/javascript.md @@ -0,0 +1,6 @@ +```html +Default Toggle

+Checked Toggle

+Disabled Toggle

+Disabled Checked Toggle +``` diff --git a/static/usage/v9/toggle/basic/react.md b/static/usage/v9/toggle/basic/react.md new file mode 100644 index 00000000000..7783c45d747 --- /dev/null +++ b/static/usage/v9/toggle/basic/react.md @@ -0,0 +1,24 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + Default Toggle +
+
+ Checked Toggle +
+
+ Disabled Toggle +
+
+ + Disabled Checked Toggle + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/basic/vue.md b/static/usage/v9/toggle/basic/vue.md new file mode 100644 index 00000000000..47042597850 --- /dev/null +++ b/static/usage/v9/toggle/basic/vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/helper-error/angular/example_component_html.md b/static/usage/v9/toggle/helper-error/angular/example_component_html.md new file mode 100644 index 00000000000..d5d477aa14a --- /dev/null +++ b/static/usage/v9/toggle/helper-error/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html +
+ + Wi-Fi + +
+``` diff --git a/static/usage/v9/toggle/helper-error/angular/example_component_ts.md b/static/usage/v9/toggle/helper-error/angular/example_component_ts.md new file mode 100644 index 00000000000..d1e09d6812b --- /dev/null +++ b/static/usage/v9/toggle/helper-error/angular/example_component_ts.md @@ -0,0 +1,27 @@ +```ts +import { Component } from '@angular/core'; +import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + imports: [IonToggle, ReactiveFormsModule], + templateUrl: './example.component.html', + styleUrl: './example.component.css', +}) +export class ExampleComponent { + myForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.myForm = this.fb.group({ + wifi: [true, Validators.requiredTrue], + }); + } + + onChange() { + // Mark the control as touched to trigger the error message + // without requiring the toggle to be blurred first + this.myForm.get('wifi')!.markAsTouched(); + } +} +``` diff --git a/static/usage/v9/toggle/helper-error/demo.html b/static/usage/v9/toggle/helper-error/demo.html new file mode 100644 index 00000000000..7e7cf7b2034 --- /dev/null +++ b/static/usage/v9/toggle/helper-error/demo.html @@ -0,0 +1,48 @@ + + + + + + Input + + + + + + + + + +
+ + Wi-Fi + +
+ + + + diff --git a/static/usage/v9/toggle/helper-error/index.md b/static/usage/v9/toggle/helper-error/index.md new file mode 100644 index 00000000000..8c1cf5f4282 --- /dev/null +++ b/static/usage/v9/toggle/helper-error/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/helper-error/javascript.md b/static/usage/v9/toggle/helper-error/javascript.md new file mode 100644 index 00000000000..a4eb832ef06 --- /dev/null +++ b/static/usage/v9/toggle/helper-error/javascript.md @@ -0,0 +1,28 @@ +```html + + Wi-Fi + + + +``` diff --git a/static/usage/v9/toggle/helper-error/react.md b/static/usage/v9/toggle/helper-error/react.md new file mode 100644 index 00000000000..926a0bd0d2e --- /dev/null +++ b/static/usage/v9/toggle/helper-error/react.md @@ -0,0 +1,38 @@ +```tsx +import React, { useRef, useState } from 'react'; +import { IonToggle, ToggleCustomEvent } from '@ionic/react'; + +function Example() { + const wifiRef = useRef(null); + + const [isTouched, setIsTouched] = useState(false); + const [isValid, setIsValid] = useState(); + const [isChecked, setIsChecked] = useState(true); + + const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => { + setIsTouched(true); + setIsChecked(event.detail.checked); + setIsValid(event.detail.checked); + }; + + return ( + <> + validateToggle(event)} + > + Wi-Fi + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/toggle/helper-error/vue.md b/static/usage/v9/toggle/helper-error/vue.md new file mode 100644 index 00000000000..100a8f05d5b --- /dev/null +++ b/static/usage/v9/toggle/helper-error/vue.md @@ -0,0 +1,32 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/justify/angular/example_component_html.md b/static/usage/v9/toggle/justify/angular/example_component_html.md new file mode 100644 index 00000000000..0dbb0ebc9ad --- /dev/null +++ b/static/usage/v9/toggle/justify/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +``` diff --git a/static/usage/v9/toggle/justify/angular/example_component_ts.md b/static/usage/v9/toggle/justify/angular/example_component_ts.md new file mode 100644 index 00000000000..f1813a7004f --- /dev/null +++ b/static/usage/v9/toggle/justify/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/justify/demo.html b/static/usage/v9/toggle/justify/demo.html new file mode 100644 index 00000000000..844488ea58d --- /dev/null +++ b/static/usage/v9/toggle/justify/demo.html @@ -0,0 +1,38 @@ + + + + + + Toggle + + + + + + + + + + + +
+ + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +
+ + + + diff --git a/static/usage/v9/toggle/justify/index.md b/static/usage/v9/toggle/justify/index.md new file mode 100644 index 00000000000..b27f82706d3 --- /dev/null +++ b/static/usage/v9/toggle/justify/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/justify/javascript.md b/static/usage/v9/toggle/justify/javascript.md new file mode 100644 index 00000000000..0dbb0ebc9ad --- /dev/null +++ b/static/usage/v9/toggle/justify/javascript.md @@ -0,0 +1,13 @@ +```html + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + +``` diff --git a/static/usage/v9/toggle/justify/react.md b/static/usage/v9/toggle/justify/react.md new file mode 100644 index 00000000000..ffe66a13f8f --- /dev/null +++ b/static/usage/v9/toggle/justify/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonToggle } from '@ionic/react'; + +function Example() { + return ( + + + Packed at the Start of Line + + + Packed at the End of Line + + + Space Between Label and Control + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/justify/vue.md b/static/usage/v9/toggle/justify/vue.md new file mode 100644 index 00000000000..31973dbab52 --- /dev/null +++ b/static/usage/v9/toggle/justify/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/label-placement/angular/example_component_html.md b/static/usage/v9/toggle/label-placement/angular/example_component_html.md new file mode 100644 index 00000000000..390ea7bda37 --- /dev/null +++ b/static/usage/v9/toggle/label-placement/angular/example_component_html.md @@ -0,0 +1,6 @@ +```html +Label at the Start

+Label at the End

+Fixed Width Label

+Stacked Label +``` diff --git a/static/usage/v9/toggle/label-placement/angular/example_component_ts.md b/static/usage/v9/toggle/label-placement/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/label-placement/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/label-placement/demo.html b/static/usage/v9/toggle/label-placement/demo.html new file mode 100644 index 00000000000..805a7bacfd2 --- /dev/null +++ b/static/usage/v9/toggle/label-placement/demo.html @@ -0,0 +1,27 @@ + + + + + + Toggle + + + + + + + + + +
+
+ Label at the Start

+ Label at the End

+ Fixed Width Label

+ Stacked Label

+
+
+ + + + diff --git a/static/usage/v9/toggle/label-placement/index.md b/static/usage/v9/toggle/label-placement/index.md new file mode 100644 index 00000000000..517c753d847 --- /dev/null +++ b/static/usage/v9/toggle/label-placement/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/label-placement/javascript.md b/static/usage/v9/toggle/label-placement/javascript.md new file mode 100644 index 00000000000..ab259436848 --- /dev/null +++ b/static/usage/v9/toggle/label-placement/javascript.md @@ -0,0 +1,6 @@ +```html +Label at the Start

+Label at the End

+Fixed Width Label

+Stacked Label +``` diff --git a/static/usage/v9/toggle/label-placement/react.md b/static/usage/v9/toggle/label-placement/react.md new file mode 100644 index 00000000000..a6fe77d7a02 --- /dev/null +++ b/static/usage/v9/toggle/label-placement/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + Label at the Start +
+
+ Label at the End +
+
+ Fixed Width Label +
+
+ Stacked Label + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/label-placement/vue.md b/static/usage/v9/toggle/label-placement/vue.md new file mode 100644 index 00000000000..ab46fe9fc9f --- /dev/null +++ b/static/usage/v9/toggle/label-placement/vue.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/list/angular/example_component_html.md b/static/usage/v9/toggle/list/angular/example_component_html.md new file mode 100644 index 00000000000..5a731705335 --- /dev/null +++ b/static/usage/v9/toggle/list/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +``` diff --git a/static/usage/v9/toggle/list/angular/example_component_ts.md b/static/usage/v9/toggle/list/angular/example_component_ts.md new file mode 100644 index 00000000000..f1813a7004f --- /dev/null +++ b/static/usage/v9/toggle/list/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonItem, IonList, IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonItem, IonList, IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/list/demo.html b/static/usage/v9/toggle/list/demo.html new file mode 100644 index 00000000000..5dd70b2ff21 --- /dev/null +++ b/static/usage/v9/toggle/list/demo.html @@ -0,0 +1,32 @@ + + + + + + Toggle + + + + + + + + + +
+ + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +
+ + + + diff --git a/static/usage/v9/toggle/list/index.md b/static/usage/v9/toggle/list/index.md new file mode 100644 index 00000000000..31d785347b7 --- /dev/null +++ b/static/usage/v9/toggle/list/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/list/javascript.md b/static/usage/v9/toggle/list/javascript.md new file mode 100644 index 00000000000..5a731705335 --- /dev/null +++ b/static/usage/v9/toggle/list/javascript.md @@ -0,0 +1,13 @@ +```html + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + +``` diff --git a/static/usage/v9/toggle/list/react.md b/static/usage/v9/toggle/list/react.md new file mode 100644 index 00000000000..f32920305ee --- /dev/null +++ b/static/usage/v9/toggle/list/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonItem, IonList, IonToggle } from '@ionic/react'; + +function Example() { + return ( + + + Receive Push Notifications + + + Receive Emails + + + Receive Text Messages + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/list/vue.md b/static/usage/v9/toggle/list/vue.md new file mode 100644 index 00000000000..d93e0118f01 --- /dev/null +++ b/static/usage/v9/toggle/list/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/on-off/angular/example_component_html.md b/static/usage/v9/toggle/on-off/angular/example_component_html.md new file mode 100644 index 00000000000..2b2d75bcc3c --- /dev/null +++ b/static/usage/v9/toggle/on-off/angular/example_component_html.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v9/toggle/on-off/angular/example_component_ts.md b/static/usage/v9/toggle/on-off/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/on-off/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/on-off/demo.html b/static/usage/v9/toggle/on-off/demo.html new file mode 100644 index 00000000000..60cde1df7e9 --- /dev/null +++ b/static/usage/v9/toggle/on-off/demo.html @@ -0,0 +1,22 @@ + + + + + + Toggle + + + + + + + + + +
+ Enable Notifications +
+ + + + diff --git a/static/usage/v9/toggle/on-off/index.md b/static/usage/v9/toggle/on-off/index.md new file mode 100644 index 00000000000..0ddf576daa8 --- /dev/null +++ b/static/usage/v9/toggle/on-off/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/on-off/javascript.md b/static/usage/v9/toggle/on-off/javascript.md new file mode 100644 index 00000000000..398ae05dfb7 --- /dev/null +++ b/static/usage/v9/toggle/on-off/javascript.md @@ -0,0 +1,3 @@ +```html +Enable Notifications +``` diff --git a/static/usage/v9/toggle/on-off/react.md b/static/usage/v9/toggle/on-off/react.md new file mode 100644 index 00000000000..321e55187d5 --- /dev/null +++ b/static/usage/v9/toggle/on-off/react.md @@ -0,0 +1,9 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return Enable Notifications; +} +export default Example; +``` diff --git a/static/usage/v9/toggle/on-off/vue.md b/static/usage/v9/toggle/on-off/vue.md new file mode 100644 index 00000000000..5b5ba3aea20 --- /dev/null +++ b/static/usage/v9/toggle/on-off/vue.md @@ -0,0 +1,9 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/theming/colors/angular/example_component_html.md b/static/usage/v9/toggle/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..20e1b2f0d19 --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/angular/example_component_html.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/toggle/theming/colors/angular/example_component_ts.md b/static/usage/v9/toggle/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/theming/colors/demo.html b/static/usage/v9/toggle/theming/colors/demo.html new file mode 100644 index 00000000000..a9f59b5e6b1 --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/demo.html @@ -0,0 +1,30 @@ + + + + + + Toggle + + + + + + + + + +
+ + + + + + + + + +
+ + + + diff --git a/static/usage/v9/toggle/theming/colors/index.md b/static/usage/v9/toggle/theming/colors/index.md new file mode 100644 index 00000000000..76ecfdf76d5 --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/index.md @@ -0,0 +1,24 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/theming/colors/javascript.md b/static/usage/v9/toggle/theming/colors/javascript.md new file mode 100644 index 00000000000..a07c1af5771 --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/javascript.md @@ -0,0 +1,11 @@ +```html + + + + + + + + + +``` diff --git a/static/usage/v9/toggle/theming/colors/react.md b/static/usage/v9/toggle/theming/colors/react.md new file mode 100644 index 00000000000..74fad7619ea --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/react.md @@ -0,0 +1,21 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +function Example() { + return ( + <> + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/theming/colors/vue.md b/static/usage/v9/toggle/theming/colors/vue.md new file mode 100644 index 00000000000..f74d7390e14 --- /dev/null +++ b/static/usage/v9/toggle/theming/colors/vue.md @@ -0,0 +1,17 @@ +```html + + + +``` diff --git a/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md b/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..a8e62a4d3e9 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,27 @@ +```css +ion-toggle { + padding: 12px; + + --track-background: #ddd; + --track-background-checked: #ddd; + + --handle-background: #eb7769; + --handle-background-checked: #95c34e; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + --handle-border-radius: 4px; + --handle-box-shadow: none; +} + +ion-toggle::part(track) { + height: 10px; + width: 65px; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} +``` diff --git a/static/usage/v9/toggle/theming/css-properties/angular/example_component_html.md b/static/usage/v9/toggle/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..de598209eaa --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v9/toggle/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/toggle/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/theming/css-properties/demo.html b/static/usage/v9/toggle/theming/css-properties/demo.html new file mode 100644 index 00000000000..72db756b63b --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/demo.html @@ -0,0 +1,50 @@ + + + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/toggle/theming/css-properties/index.md b/static/usage/v9/toggle/theming/css-properties/index.md new file mode 100644 index 00000000000..8dbeb8ef31c --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/theming/css-properties/javascript.md b/static/usage/v9/toggle/theming/css-properties/javascript.md new file mode 100644 index 00000000000..3bc34c3949d --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/javascript.md @@ -0,0 +1,32 @@ +```html + + + + +``` diff --git a/static/usage/v9/toggle/theming/css-properties/react/main_css.md b/static/usage/v9/toggle/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..a8e62a4d3e9 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/react/main_css.md @@ -0,0 +1,27 @@ +```css +ion-toggle { + padding: 12px; + + --track-background: #ddd; + --track-background-checked: #ddd; + + --handle-background: #eb7769; + --handle-background-checked: #95c34e; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + --handle-border-radius: 4px; + --handle-box-shadow: none; +} + +ion-toggle::part(track) { + height: 10px; + width: 65px; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} +``` diff --git a/static/usage/v9/toggle/theming/css-properties/react/main_tsx.md b/static/usage/v9/toggle/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..aa988bb22d4 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/theming/css-properties/vue.md b/static/usage/v9/toggle/theming/css-properties/vue.md new file mode 100644 index 00000000000..5419779fb30 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-properties/vue.md @@ -0,0 +1,38 @@ +```html + + + + + +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md new file mode 100644 index 00000000000..0df6def7beb --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_css.md @@ -0,0 +1,34 @@ +```css +ion-toggle { + padding: 12px; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + contain: none; +} + +ion-toggle::part(track), +ion-toggle.toggle-checked::part(track) { + height: 10px; + width: 65px; + + background: #ddd; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} + +ion-toggle::part(handle) { + background: #eb7769; + + border-radius: 4px; + box-shadow: none; +} + +ion-toggle.toggle-checked::part(handle) { + background: #95c34e; +} +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md new file mode 100644 index 00000000000..de598209eaa --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_html.md @@ -0,0 +1,4 @@ +```html + + +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_ts.md b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_ts.md new file mode 100644 index 00000000000..cfaa88043cf --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonToggle } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonToggle], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/demo.html b/static/usage/v9/toggle/theming/css-shadow-parts/demo.html new file mode 100644 index 00000000000..fddcc35400f --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/demo.html @@ -0,0 +1,58 @@ + + + + + + Item + + + + + + + + + + + +
+ + +
+ + + + diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/index.md b/static/usage/v9/toggle/theming/css-shadow-parts/index.md new file mode 100644 index 00000000000..68f972d0338 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/index.md @@ -0,0 +1,34 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_css from './react/main_css.md'; +import react_main_tsx from './react/main_tsx.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/javascript.md b/static/usage/v9/toggle/theming/css-shadow-parts/javascript.md new file mode 100644 index 00000000000..6f7c7b435c6 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/javascript.md @@ -0,0 +1,39 @@ +```html + + + + +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/react/main_css.md b/static/usage/v9/toggle/theming/css-shadow-parts/react/main_css.md new file mode 100644 index 00000000000..0df6def7beb --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/react/main_css.md @@ -0,0 +1,34 @@ +```css +ion-toggle { + padding: 12px; + + --handle-width: 25px; + --handle-height: 27px; + --handle-max-height: auto; + --handle-spacing: 6px; + + contain: none; +} + +ion-toggle::part(track), +ion-toggle.toggle-checked::part(track) { + height: 10px; + width: 65px; + + background: #ddd; + + /* Required for iOS handle to overflow the height of the track */ + overflow: visible; +} + +ion-toggle::part(handle) { + background: #eb7769; + + border-radius: 4px; + box-shadow: none; +} + +ion-toggle.toggle-checked::part(handle) { + background: #95c34e; +} +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/react/main_tsx.md b/static/usage/v9/toggle/theming/css-shadow-parts/react/main_tsx.md new file mode 100644 index 00000000000..aa988bb22d4 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/react/main_tsx.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonToggle } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toggle/theming/css-shadow-parts/vue.md b/static/usage/v9/toggle/theming/css-shadow-parts/vue.md new file mode 100644 index 00000000000..0f0bd7d0728 --- /dev/null +++ b/static/usage/v9/toggle/theming/css-shadow-parts/vue.md @@ -0,0 +1,45 @@ +```html + + + + + +``` diff --git a/static/usage/v9/toolbar/basic/angular/example_component_html.md b/static/usage/v9/toolbar/basic/angular/example_component_html.md new file mode 100644 index 00000000000..40fbd442061 --- /dev/null +++ b/static/usage/v9/toolbar/basic/angular/example_component_html.md @@ -0,0 +1,13 @@ +```html + + + Header Toolbar + + + + + + Footer Toolbar + + +``` diff --git a/static/usage/v9/toolbar/basic/angular/example_component_ts.md b/static/usage/v9/toolbar/basic/angular/example_component_ts.md new file mode 100644 index 00000000000..981da434e36 --- /dev/null +++ b/static/usage/v9/toolbar/basic/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonFooter, IonHeader, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/basic/demo.html b/static/usage/v9/toolbar/basic/demo.html new file mode 100644 index 00000000000..344095d39e9 --- /dev/null +++ b/static/usage/v9/toolbar/basic/demo.html @@ -0,0 +1,28 @@ + + + + + + Toolbar + + + + + + + + + + + Header Toolbar + + + + + + Footer Toolbar + + + + + diff --git a/static/usage/v9/toolbar/basic/index.md b/static/usage/v9/toolbar/basic/index.md new file mode 100644 index 00000000000..e2c48320975 --- /dev/null +++ b/static/usage/v9/toolbar/basic/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/basic/javascript.md b/static/usage/v9/toolbar/basic/javascript.md new file mode 100644 index 00000000000..40fbd442061 --- /dev/null +++ b/static/usage/v9/toolbar/basic/javascript.md @@ -0,0 +1,13 @@ +```html + + + Header Toolbar + + + + + + Footer Toolbar + + +``` diff --git a/static/usage/v9/toolbar/basic/react.md b/static/usage/v9/toolbar/basic/react.md new file mode 100644 index 00000000000..42b46929d3f --- /dev/null +++ b/static/usage/v9/toolbar/basic/react.md @@ -0,0 +1,23 @@ +```tsx +import React from 'react'; +import { IonFooter, IonHeader, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + + Header Toolbar + + + + + + Footer Toolbar + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/basic/vue.md b/static/usage/v9/toolbar/basic/vue.md new file mode 100644 index 00000000000..130b4e692e8 --- /dev/null +++ b/static/usage/v9/toolbar/basic/vue.md @@ -0,0 +1,19 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/buttons/angular/example_component_html.md b/static/usage/v9/toolbar/buttons/angular/example_component_html.md new file mode 100644 index 00000000000..18a54554a1b --- /dev/null +++ b/static/usage/v9/toolbar/buttons/angular/example_component_html.md @@ -0,0 +1,84 @@ +```html + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v9/toolbar/buttons/angular/example_component_ts.md b/static/usage/v9/toolbar/buttons/angular/example_component_ts.md new file mode 100644 index 00000000000..08f95df3d3c --- /dev/null +++ b/static/usage/v9/toolbar/buttons/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + } +} +``` diff --git a/static/usage/v9/toolbar/buttons/demo.html b/static/usage/v9/toolbar/buttons/demo.html new file mode 100644 index 00000000000..eb78f943d2f --- /dev/null +++ b/static/usage/v9/toolbar/buttons/demo.html @@ -0,0 +1,110 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +
+ + + + diff --git a/static/usage/v9/toolbar/buttons/index.md b/static/usage/v9/toolbar/buttons/index.md new file mode 100644 index 00000000000..1d8b43ce001 --- /dev/null +++ b/static/usage/v9/toolbar/buttons/index.md @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.md'; + +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/buttons/javascript/index_html.md b/static/usage/v9/toolbar/buttons/javascript/index_html.md new file mode 100644 index 00000000000..18a54554a1b --- /dev/null +++ b/static/usage/v9/toolbar/buttons/javascript/index_html.md @@ -0,0 +1,84 @@ +```html + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + +``` diff --git a/static/usage/v9/toolbar/buttons/javascript/index_ts.md b/static/usage/v9/toolbar/buttons/javascript/index_ts.md new file mode 100644 index 00000000000..32e0670badf --- /dev/null +++ b/static/usage/v9/toolbar/buttons/javascript/index_ts.md @@ -0,0 +1,47 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'create': create, 'ellipsis-horizontal': ellipsisHorizontal, 'ellipsis-vertical': ellipsisVertical, + * 'help-circle': helpCircle, 'person-circle': personCircle, 'search': search, 'star': star }); + */ +addIcons({ create, ellipsisHorizontal, ellipsisVertical, helpCircle, personCircle, search, star }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/toolbar/buttons/react.md b/static/usage/v9/toolbar/buttons/react.md new file mode 100644 index 00000000000..a8ed785db82 --- /dev/null +++ b/static/usage/v9/toolbar/buttons/react.md @@ -0,0 +1,95 @@ +```tsx +import React from 'react'; +import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/react'; +import { create, ellipsisHorizontal, ellipsisVertical, helpCircle, search, personCircle, star } from 'ionicons/icons'; + +function Example() { + return ( + <> + + + Start + + Start / End Buttons + + End + + + + + + Secondary + + + Primary + + Primary / Secondary Buttons + + + + + + + + + + + + + + + + + Icon Buttons + + + + + + + Contact + + + + + Help + + + + Solid Buttons + + + + + + + Star + + + + + Edit + + + + Outline Buttons + + + + + + + Back Button + + + + + + + Menu Button + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/buttons/vue.md b/static/usage/v9/toolbar/buttons/vue.md new file mode 100644 index 00000000000..7a841ba2737 --- /dev/null +++ b/static/usage/v9/toolbar/buttons/vue.md @@ -0,0 +1,91 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md b/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md new file mode 100644 index 00000000000..0c80f0f5955 --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/angular/example_component_html.md @@ -0,0 +1,8 @@ +```html + + + Toolbar + + + +``` diff --git a/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md b/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md new file mode 100644 index 00000000000..68b20a165cf --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonHeader, IonProgressBar, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/progress-bars/demo.html b/static/usage/v9/toolbar/progress-bars/demo.html new file mode 100644 index 00000000000..f30ccd42ca2 --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/demo.html @@ -0,0 +1,23 @@ + + + + + + Toolbar + + + + + + + + + + + Toolbar + + + + + + diff --git a/static/usage/v9/toolbar/progress-bars/index.md b/static/usage/v9/toolbar/progress-bars/index.md new file mode 100644 index 00000000000..21f33518501 --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/progress-bars/javascript.md b/static/usage/v9/toolbar/progress-bars/javascript.md new file mode 100644 index 00000000000..0c80f0f5955 --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/javascript.md @@ -0,0 +1,8 @@ +```html + + + Toolbar + + + +``` diff --git a/static/usage/v9/toolbar/progress-bars/react.md b/static/usage/v9/toolbar/progress-bars/react.md new file mode 100644 index 00000000000..52720f12b14 --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/react.md @@ -0,0 +1,16 @@ +```tsx +import React from 'react'; +import { IonHeader, IonProgressBar, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Toolbar + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/progress-bars/vue.md b/static/usage/v9/toolbar/progress-bars/vue.md new file mode 100644 index 00000000000..4cc4a0d2d8b --- /dev/null +++ b/static/usage/v9/toolbar/progress-bars/vue.md @@ -0,0 +1,14 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/searchbars/angular/example_component_html.md b/static/usage/v9/toolbar/searchbars/angular/example_component_html.md new file mode 100644 index 00000000000..9016e1e04cf --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/angular/example_component_html.md @@ -0,0 +1,10 @@ +```html + + + Toolbar + + + + + +``` diff --git a/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md b/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md new file mode 100644 index 00000000000..fc531acd063 --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonHeader, IonSearchbar, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/searchbars/demo.html b/static/usage/v9/toolbar/searchbars/demo.html new file mode 100644 index 00000000000..565d6b68c6b --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/demo.html @@ -0,0 +1,25 @@ + + + + + + Toolbar + + + + + + + + + + + Toolbar + + + + + + + + diff --git a/static/usage/v9/toolbar/searchbars/index.md b/static/usage/v9/toolbar/searchbars/index.md new file mode 100644 index 00000000000..39ee4dc05c3 --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/searchbars/javascript.md b/static/usage/v9/toolbar/searchbars/javascript.md new file mode 100644 index 00000000000..9016e1e04cf --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/javascript.md @@ -0,0 +1,10 @@ +```html + + + Toolbar + + + + + +``` diff --git a/static/usage/v9/toolbar/searchbars/react.md b/static/usage/v9/toolbar/searchbars/react.md new file mode 100644 index 00000000000..dcf4fc644f3 --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/react.md @@ -0,0 +1,18 @@ +```tsx +import React from 'react'; +import { IonHeader, IonSearchbar, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + Toolbar + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/searchbars/vue.md b/static/usage/v9/toolbar/searchbars/vue.md new file mode 100644 index 00000000000..c5a1d953a39 --- /dev/null +++ b/static/usage/v9/toolbar/searchbars/vue.md @@ -0,0 +1,16 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/segments/angular/example_component_html.md b/static/usage/v9/toolbar/segments/angular/example_component_html.md new file mode 100644 index 00000000000..e7cce4323dc --- /dev/null +++ b/static/usage/v9/toolbar/segments/angular/example_component_html.md @@ -0,0 +1,14 @@ +```html + + + + + All + + + Favorites + + + + +``` diff --git a/static/usage/v9/toolbar/segments/angular/example_component_ts.md b/static/usage/v9/toolbar/segments/angular/example_component_ts.md new file mode 100644 index 00000000000..258ca62e392 --- /dev/null +++ b/static/usage/v9/toolbar/segments/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonHeader, IonLabel, IonSegment, IonSegmentButton, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/segments/demo.html b/static/usage/v9/toolbar/segments/demo.html new file mode 100644 index 00000000000..7580bf51736 --- /dev/null +++ b/static/usage/v9/toolbar/segments/demo.html @@ -0,0 +1,29 @@ + + + + + + Toolbar + + + + + + + + + + + + + All + + + Favorites + + + + + + + diff --git a/static/usage/v9/toolbar/segments/index.md b/static/usage/v9/toolbar/segments/index.md new file mode 100644 index 00000000000..1f430290037 --- /dev/null +++ b/static/usage/v9/toolbar/segments/index.md @@ -0,0 +1,26 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/segments/javascript.md b/static/usage/v9/toolbar/segments/javascript.md new file mode 100644 index 00000000000..e7cce4323dc --- /dev/null +++ b/static/usage/v9/toolbar/segments/javascript.md @@ -0,0 +1,14 @@ +```html + + + + + All + + + Favorites + + + + +``` diff --git a/static/usage/v9/toolbar/segments/react.md b/static/usage/v9/toolbar/segments/react.md new file mode 100644 index 00000000000..f2fad4d0ec5 --- /dev/null +++ b/static/usage/v9/toolbar/segments/react.md @@ -0,0 +1,22 @@ +```tsx +import React from 'react'; +import { IonHeader, IonLabel, IonSegment, IonSegmentButton, IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + + + + + All + + + Favorites + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/segments/vue.md b/static/usage/v9/toolbar/segments/vue.md new file mode 100644 index 00000000000..84704bc878c --- /dev/null +++ b/static/usage/v9/toolbar/segments/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md b/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md new file mode 100644 index 00000000000..a2763a1c1c7 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +``` diff --git a/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md b/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md new file mode 100644 index 00000000000..c4c55b1383a --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/theming/colors/demo.html b/static/usage/v9/toolbar/theming/colors/demo.html new file mode 100644 index 00000000000..daab82e33e7 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/demo.html @@ -0,0 +1,58 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +
+ + + + diff --git a/static/usage/v9/toolbar/theming/colors/index.md b/static/usage/v9/toolbar/theming/colors/index.md new file mode 100644 index 00000000000..5972e823421 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/index.md @@ -0,0 +1,25 @@ +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_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/theming/colors/javascript.md b/static/usage/v9/toolbar/theming/colors/javascript.md new file mode 100644 index 00000000000..a2763a1c1c7 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/javascript.md @@ -0,0 +1,32 @@ +```html + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + +``` diff --git a/static/usage/v9/toolbar/theming/colors/react.md b/static/usage/v9/toolbar/theming/colors/react.md new file mode 100644 index 00000000000..ba6fd010f23 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/react.md @@ -0,0 +1,42 @@ +```tsx +import React from 'react'; +import { IonTitle, IonToolbar } from '@ionic/react'; + +function Example() { + return ( + <> + + Default Toolbar + + + Primary Toolbar + + + Secondary Toolbar + + + Tertiary Toolbar + + + Success Toolbar + + + Warning Toolbar + + + Danger Toolbar + + + Light Toolbar + + + Medium Toolbar + + + Dark Toolbar + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/theming/colors/vue.md b/static/usage/v9/toolbar/theming/colors/vue.md new file mode 100644 index 00000000000..e9f4ab0ffa0 --- /dev/null +++ b/static/usage/v9/toolbar/theming/colors/vue.md @@ -0,0 +1,38 @@ +```html + + + +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md new file mode 100644 index 00000000000..f485553f7ad --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_css.md @@ -0,0 +1,14 @@ +```css +ion-toolbar { + --background: #19422d; + --color: white; + + --border-color: #f24aec; + --border-width: 4px 0; + --border-style: double; + + --min-height: 80px; + --padding-top: 20px; + --padding-bottom: 20px; +} +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md new file mode 100644 index 00000000000..8f21356a707 --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Custom Toolbar + +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md new file mode 100644 index 00000000000..c4c55b1383a --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/angular/example_component_ts.md @@ -0,0 +1,12 @@ +```ts +import { Component } from '@angular/core'; +import { IonTitle, IonToolbar } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/demo.html b/static/usage/v9/toolbar/theming/css-properties/demo.html new file mode 100644 index 00000000000..fdb73e31a9b --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/demo.html @@ -0,0 +1,44 @@ + + + + + + Toolbar + + + + + + + + + + + +
+ + Custom Toolbar + +
+ + + + diff --git a/static/usage/v9/toolbar/theming/css-properties/index.md b/static/usage/v9/toolbar/theming/css-properties/index.md new file mode 100644 index 00000000000..2cb1c621523 --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/index.md @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/toolbar/theming/css-properties/javascript.md b/static/usage/v9/toolbar/theming/css-properties/javascript.md new file mode 100644 index 00000000000..7ee9cd6d581 --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/javascript.md @@ -0,0 +1,20 @@ +```html + + Custom Toolbar + + + +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/react/main_css.md b/static/usage/v9/toolbar/theming/css-properties/react/main_css.md new file mode 100644 index 00000000000..f485553f7ad --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/react/main_css.md @@ -0,0 +1,14 @@ +```css +ion-toolbar { + --background: #19422d; + --color: white; + + --border-color: #f24aec; + --border-width: 4px 0; + --border-style: double; + + --min-height: 80px; + --padding-top: 20px; + --padding-bottom: 20px; +} +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md b/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md new file mode 100644 index 00000000000..8e8f663cd98 --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/react/main_tsx.md @@ -0,0 +1,15 @@ +```tsx +import React from 'react'; +import { IonTitle, IonToolbar } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + + Custom Toolbar + + ); +} +export default Example; +``` diff --git a/static/usage/v9/toolbar/theming/css-properties/vue.md b/static/usage/v9/toolbar/theming/css-properties/vue.md new file mode 100644 index 00000000000..b38a6cbc7cd --- /dev/null +++ b/static/usage/v9/toolbar/theming/css-properties/vue.md @@ -0,0 +1,26 @@ +```html + + + + + +``` diff --git a/vercel.json b/vercel.json index 8c7509aaf63..ea4a0e6d7de 100644 --- a/vercel.json +++ b/vercel.json @@ -41,13 +41,13 @@ "source": "/docs/ja/", "destination": "/docs/ja" }, - { "source": "/docs/ja/v8/:match*", "destination": "/docs/ja/:match*" }, + { "source": "/docs/ja/v9/:match*", "destination": "/docs/ja/:match*" }, { "source": "/docs/(v5|next)?/developer-resources/:path*", "destination": "https://ionic.io/resources" }, { "source": "/docs/next/:match*", "destination": "/docs/:match*" }, - { "source": "/docs/v8/:match*", "destination": "/docs/:match*" }, + { "source": "/docs/v9/:match*", "destination": "/docs/:match*" }, { "source": "/docs/react", "destination": "/docs/react/overview" diff --git a/versioned_docs/version-v5/reference/support.md b/versioned_docs/version-v5/reference/support.md index 1a420876b28..663ddaed953 100644 --- a/versioned_docs/version-v5/reference/support.md +++ b/versioned_docs/version-v5/reference/support.md @@ -19,7 +19,7 @@ The current status of each Ionic Framework version is: | V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | - **Maintenance**: Only critical bug and security fixes. No major feature improvements. -- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise). +- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. ## Compatibility Recommendations diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.md index dbf23bba513..bde8adb5221 100644 --- a/versioned_docs/version-v6/angular/overview.md +++ b/versioned_docs/version-v6/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling diff --git a/versioned_docs/version-v6/deployment/play-store.mdx b/versioned_docs/version-v6/deployment/play-store.mdx index ce2dd35317e..577cbfdf625 100644 --- a/versioned_docs/version-v6/deployment/play-store.mdx +++ b/versioned_docs/version-v6/deployment/play-store.mdx @@ -23,7 +23,7 @@ If you are using Capacitor, you can additionally refer to the Capacitor document To generate a release build for Android, build your web app and then run the following cli command: ```shell -npx cap copy && npx cap sync +npx cap sync ``` This will copy all web assets and sync any plugin changes. diff --git a/versioned_docs/version-v6/react/pwa.md b/versioned_docs/version-v6/react/pwa.md index bc908da6c18..29f785ca68b 100644 --- a/versioned_docs/version-v6/react/pwa.md +++ b/versioned_docs/version-v6/react/pwa.md @@ -73,7 +73,7 @@ With the Firebase CLI installed, run `firebase init` within your Ionic project. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. -**"What do you want to use as your public directory?"** Enter "build". +**"What do you want to use as your public directory?"** Enter "dist". :::note Answering these next two questions will ensure that routing, hard reload, and deep linking work in the app: diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md index 220dc010585..3b7a9fd079f 100644 --- a/versioned_docs/version-v6/react/quickstart.md +++ b/versioned_docs/version-v6/react/quickstart.md @@ -156,7 +156,7 @@ const Home: React.FC = () => { export default Home; ``` -This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v6/reference/support.md b/versioned_docs/version-v6/reference/support.md index ea86dd944c8..d5d2297823c 100644 --- a/versioned_docs/version-v6/reference/support.md +++ b/versioned_docs/version-v6/reference/support.md @@ -30,7 +30,7 @@ The current status of each Ionic Framework version is: | V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | - **Maintenance**: Only critical bug and security fixes. No major feature improvements. -- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise). +- **Extended Support**: For teams and organizations that require additional long term support, Ionic has extended support options available. ## Compatibility Recommendations diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md index b1bb31141af..97080b04e19 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.md @@ -160,7 +160,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. diff --git a/versioned_docs/version-v7/angular/navigation.md b/versioned_docs/version-v7/angular/navigation.md index 9ad675058a0..9b07fa29860 100644 --- a/versioned_docs/version-v7/angular/navigation.md +++ b/versioned_docs/version-v7/angular/navigation.md @@ -175,7 +175,7 @@ Here, we have a typical Angular Module setup, along with a RouterModule import, ## Standalone Components -:::caution Experimental API +:::caution[Experimental API] Standalone components is an experimental API introduced in Angular 14.x and available in Ionic 6.3 and later. This feature may change before it is stable. diff --git a/versioned_docs/version-v7/angular/overview.md b/versioned_docs/version-v7/angular/overview.md index cdef82fdf48..edae3e6e2ca 100644 --- a/versioned_docs/version-v7/angular/overview.md +++ b/versioned_docs/version-v7/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling diff --git a/versioned_docs/version-v7/angular/performance.md b/versioned_docs/version-v7/angular/performance.md index 62877e6e4dd..c4f7760e318 100644 --- a/versioned_docs/version-v7/angular/performance.md +++ b/versioned_docs/version-v7/angular/performance.md @@ -56,7 +56,7 @@ For more information on how Angular manages change propagation with `ngFor` see ## From the Community - +{/* cspell:disable */} [High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony @@ -66,7 +66,7 @@ For more information on how Angular manages change propagation with `ngFor` see [Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony - +{/* cspell:enable */} :::note Do you have a guide you'd like to share? Click the _Edit this page_ button below. diff --git a/versioned_docs/version-v7/angular/quickstart.md b/versioned_docs/version-v7/angular/quickstart.md index e2d7b1436f0..39e6aed97aa 100644 --- a/versioned_docs/version-v7/angular/quickstart.md +++ b/versioned_docs/version-v7/angular/quickstart.md @@ -172,9 +172,9 @@ And the template, in the `home.page.html` file, uses those components: ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. -:::tip Learn More +:::tip[Learn More] For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: diff --git a/versioned_docs/version-v7/angular/slides.md b/versioned_docs/version-v7/angular/slides.md index d6d365f6ebf..9069c30fecb 100644 --- a/versioned_docs/version-v7/angular/slides.md +++ b/versioned_docs/version-v7/angular/slides.md @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; /> -:::caution Looking for `ion-slides`? +:::caution[Looking for `ion-slides`?] `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: @@ -71,7 +71,7 @@ From there, we just have to replace `ion-slides` elements with `swiper-container By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. -If you would like to use the Core version instead, which does not include additional modules automatically, see https://swiperjs.com/element#core-version-and-modules. The rest of this migration guide will assume you are using the bundled version. +If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation. The rest of this migration guide will assume you are using the bundled version. ## Swiping with Style @@ -93,7 +93,7 @@ If you were using the CSS custom properties found on `ion-slides`, below is a li | `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | | `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | -For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. See https://swiperjs.com/element#injecting-styles for instructions. +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions. ### Additional `ion-slides` Styles @@ -227,7 +227,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | pager | Use the `pagination` property instead. | :::note -All properties available in Swiper Element can be found at https://swiperjs.com/swiper-api#parameters. +All properties available in Swiper Element can be found in the Swiper API parameters documentation. ::: ## Events @@ -276,7 +276,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `init` | :::note -All events available in Swiper Element can be found at https://swiperjs.com/swiper-api#events. +All events available in Swiper Element can be found in the Swiper API events documentation. ::: ## Methods @@ -328,7 +328,7 @@ Below is a full list of method changes when going from `ion-slides` to Swiper El | `stopAutoplay()` | Use the `autoplay` property instead. | :::note -All methods and properties available on the Swiper instance can be found at https://swiperjs.com/swiper-api#methods-and-properties. +All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation. ::: ## Effects @@ -340,7 +340,7 @@ Effects such as Cube or Fade can be used in Swiper Element with no additional im ``` :::note -For more information on effects in Swiper, please see https://swiperjs.com/swiper-api#fade-effect. +For more information on effects in Swiper, please refer to the Swiper API fade effect documentation. ::: ## Wrap Up @@ -361,6 +361,6 @@ If you are running into issues with the migration, please create a post on the [ Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. diff --git a/versioned_docs/version-v7/angular/virtual-scroll.md b/versioned_docs/version-v7/angular/virtual-scroll.md index 634821b18f6..53bb1c3761c 100644 --- a/versioned_docs/version-v7/angular/virtual-scroll.md +++ b/versioned_docs/version-v7/angular/virtual-scroll.md @@ -1,6 +1,6 @@ # Virtual Scroll -:::caution Looking for `ion-virtual-scroll`? +:::caution[Looking for `ion-virtual-scroll`?] `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. diff --git a/versioned_docs/version-v7/api/buttons.md b/versioned_docs/version-v7/api/buttons.md index 1f6cdb267df..1202797f2f7 100644 --- a/versioned_docs/version-v7/api/buttons.md +++ b/versioned_docs/version-v7/api/buttons.md @@ -62,7 +62,7 @@ This feature is only available for iOS. ::: - +{/* Reuse the playground from the Title directory */} import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.md'; diff --git a/versioned_docs/version-v7/api/datetime-button.md b/versioned_docs/version-v7/api/datetime-button.md index b3c49958165..6e19182974a 100644 --- a/versioned_docs/version-v7/api/datetime-button.md +++ b/versioned_docs/version-v7/api/datetime-button.md @@ -27,7 +27,7 @@ Datetime Button links with a [Datetime](./datetime) component to display the for Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. -When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. +When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](./popover#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. ## Basic Usage @@ -51,20 +51,6 @@ import FormatOptions from '@site/static/usage/v7/datetime-button/format-options/ `ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. - - ## Properties diff --git a/versioned_docs/version-v7/api/datetime.md b/versioned_docs/version-v7/api/datetime.md index 5a59ea157df..e31bdb93467 100644 --- a/versioned_docs/version-v7/api/datetime.md +++ b/versioned_docs/version-v7/api/datetime.md @@ -342,7 +342,7 @@ The benefit of this approach is that every component, not just `ion-datetime`, c -### Calender Header +### Calendar Header The calendar header manages the date navigation controls (month/year picker and prev/next buttons) and the days of the week when using a grid style layout. diff --git a/versioned_docs/version-v7/api/item.md b/versioned_docs/version-v7/api/item.md index da91adfbed0..598cae79c9e 100644 --- a/versioned_docs/version-v7/api/item.md +++ b/versioned_docs/version-v7/api/item.md @@ -292,20 +292,6 @@ import DetailArrows from '@site/static/usage/v7/item/detail-arrows/index.md'; - - ## Item Lines Items show an inset bottom border by default. The border has padding on the left and does not appear under any content that is slotted in the `"start"` slot. The `lines` property can be modified to `"full"` or `"none"` which will show a full width border or no border, respectively. diff --git a/versioned_docs/version-v7/api/loading.md b/versioned_docs/version-v7/api/loading.md index 64e115c95bb..35cf73fc394 100644 --- a/versioned_docs/version-v7/api/loading.md +++ b/versioned_docs/version-v7/api/loading.md @@ -45,7 +45,7 @@ import Controller from '@site/static/usage/v7/loading/controller/index.md'; ### Spinners -The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options. +The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#prop-spinner) for a full list of options. import Spinners from '@site/static/usage/v7/loading/spinners/index.md'; diff --git a/versioned_docs/version-v7/api/progress-bar.md b/versioned_docs/version-v7/api/progress-bar.md index 7bd6d357c4a..2136470967f 100644 --- a/versioned_docs/version-v7/api/progress-bar.md +++ b/versioned_docs/version-v7/api/progress-bar.md @@ -49,7 +49,7 @@ import Indeterminate from '@site/static/usage/v7/progress-bar/indeterminate/inde ## Progress Bars in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v7/toolbar/progress-bars/index.md'; diff --git a/versioned_docs/version-v7/api/router.md b/versioned_docs/version-v7/api/router.md index 122a3f17445..c574f982389 100644 --- a/versioned_docs/version-v7/api/router.md +++ b/versioned_docs/version-v7/api/router.md @@ -13,7 +13,7 @@ import Slots from '@ionic-internal/component-api/v7/router/slots.md'; ion-router: Router Component to Coordinate URL Navigation @@ -28,11 +28,11 @@ Note: This component should only be used with vanilla and Stencil JavaScript pro Apps should have a single `ion-router` component in the codebase. This component controls all interactions with the browser history and it aggregates updates through an event system. -`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-nav`, `ion-tabs`, and `ion-router-outlet`. +`ion-router` is just a URL coordinator for the navigation outlets of ionic: `ion-tabs` and `ion-router-outlet`. -That means the `ion-router` never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells `ion-nav`, `ion-tabs`, and `ion-router-outlet` what and when to "show" based on the browser's URL. +That means the `ion-router` never touches the DOM, it does NOT show the components or emit any kind of lifecycle events, it just tells `ion-tabs` and `ion-router-outlet` what and when to "show" based on the browser's URL. -In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes. +To configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes. ## Basic Usage diff --git a/versioned_docs/version-v7/api/searchbar.md b/versioned_docs/version-v7/api/searchbar.md index c61bcc204bc..1296f4f8374 100644 --- a/versioned_docs/version-v7/api/searchbar.md +++ b/versioned_docs/version-v7/api/searchbar.md @@ -57,7 +57,7 @@ import CancelButton from '@site/static/usage/v7/searchbar/cancel-button/index.md Searchbars are styled to look native when placed inside of a toolbar. In iOS, searchbars should be placed in their own toolbar, under a toolbar that contains the page title. In Material Design, searchbars are either persistently displayed in their own toolbar, or expand over a toolbar containing the page title. - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v7/toolbar/searchbars/index.md'; diff --git a/versioned_docs/version-v7/api/segment.md b/versioned_docs/version-v7/api/segment.md index b9aae88a547..3ec85af17f5 100644 --- a/versioned_docs/version-v7/api/segment.md +++ b/versioned_docs/version-v7/api/segment.md @@ -43,7 +43,7 @@ import Scrollable from '@site/static/usage/v7/segment/scrollable/index.md'; ## Segments in Toolbars - +{/* Reuse the playground from the Toolbar directory */} import Toolbar from '@site/static/usage/v7/toolbar/segments/index.md'; diff --git a/versioned_docs/version-v7/api/tabs.md b/versioned_docs/version-v7/api/tabs.md index 29f51e8150a..c3a9b5ee572 100644 --- a/versioned_docs/version-v7/api/tabs.md +++ b/versioned_docs/version-v7/api/tabs.md @@ -30,7 +30,7 @@ Both `ion-tabs` and `ion-tab-bar` can be used as standalone elements. They don The `ion-tab-bar` needs a slot defined in order to be projected to the right place in an `ion-tabs` component. -:::note Framework Support +:::note[Framework Support] Using `ion-tabs` within Angular, React or Vue requires the use of the `ion-router-outlet` or `ion-nav` components. @@ -44,7 +44,7 @@ import Router from '@site/static/usage/v7/tabs/router/index.md'; -:::tip Best Practices +:::tip[Best Practices] Ionic has guides on best practices for routing patterns with tabs. Check out the guides for [Angular](/angular/navigation#working-with-tabs), [React](/react/navigation#working-with-tabs), and [Vue](/vue/navigation#working-with-tabs) for additional information. diff --git a/versioned_docs/version-v7/cli.md b/versioned_docs/version-v7/cli.md index 3951b45447b..c976b1a9f82 100644 --- a/versioned_docs/version-v7/cli.md +++ b/versioned_docs/version-v7/cli.md @@ -37,8 +37,6 @@ Be sure to run `ionic --help` in your project directory. For some commands, such as `ionic serve`, the help documentation is contextual to the type of your project, e.g. React vs Angular. ::: - - ## Architecture The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. diff --git a/versioned_docs/version-v7/components.md b/versioned_docs/version-v7/components.md index 4d1b2cf28a2..a437db16c89 100644 --- a/versioned_docs/version-v7/components.md +++ b/versioned_docs/version-v7/components.md @@ -49,9 +49,7 @@ Ionic apps are made of high-level building blocks called Components, which allow -

- Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more. -

+ Cards are a great way to display an important piece of content, and can contain images, buttons, text, and more. @@ -91,10 +89,8 @@ Ionic apps are made of high-level building blocks called Components, which allow -

- Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. - Items can be swiped, deleted, reordered, edited, and more. -

+ Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. + Items can be swiped, deleted, reordered, edited, and more. @@ -102,10 +98,8 @@ Ionic apps are made of high-level building blocks called Components, which allow -

- A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual - content. -

+ A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual + content. diff --git a/versioned_docs/version-v7/contributing/coc.md b/versioned_docs/version-v7/contributing/coc.md index b347ee6e9b0..289d558528f 100644 --- a/versioned_docs/version-v7/contributing/coc.md +++ b/versioned_docs/version-v7/contributing/coc.md @@ -8,6 +8,6 @@ We promise to extend courtesy and respect to everyone involved in this project r If any member of the community violates this code of conduct, the maintainers of the Ionic project may take action, removing issues, comments, and PRs or blocking accounts as deemed appropriate. -If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. +If you are subject to or witness unacceptable behavior, or have any other concerns, please email us at devrel@ionic.io. Please click here to review to Ionic's full code of conduct. diff --git a/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md b/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md index 2310a451f01..46b425a49bc 100644 --- a/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md +++ b/versioned_docs/version-v7/core-concepts/what-are-progressive-web-apps.md @@ -11,8 +11,6 @@ title: Progressive Web Apps /> - - ### The web...but better A Progressive Web App (PWA) is a web app that uses modern web capabilities to deliver an app-like experience to users. @@ -47,7 +45,7 @@ To be considered a Progressive Web App, your app must be: - Linkable - Easily share via URL and not require complex installation. - +{/* cspell:disable */} @@ -55,7 +53,7 @@ To be considered a Progressive Web App, your app must be: - +{/* cspell:enable */} There is a lot here, but it boils down to a few points for Ionic apps. diff --git a/versioned_docs/version-v7/deployment/play-store.mdx b/versioned_docs/version-v7/deployment/play-store.mdx index 4dfdb71268c..c5fb4f37d64 100644 --- a/versioned_docs/version-v7/deployment/play-store.mdx +++ b/versioned_docs/version-v7/deployment/play-store.mdx @@ -23,7 +23,7 @@ If you are using Capacitor, you can additionally refer to the Capacitor document To generate a release build for Android, build your web app and then run the following cli command: ```shell -npx cap copy && npx cap sync +npx cap sync ``` This will copy all web assets and sync any plugin changes. @@ -69,15 +69,15 @@ If you haven't made the switch to Android app bundles yet, you will need to opt First, create a new app in the Google Play Console. In order to enable app signing, you'll need to navigate to the new release screen, on one of the Production, Open testing, closed testing, or internal testing pages. Select the Create new release button as seen below (it doesn't matter which release type, since you don't have to actually go through with creating a new release right now): -![Google Play Console's Production tab with arrow pointing to the 'Create new release' button.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png "Google Play Console New Release Creation") +![Google Play Console's Production tab with arrow pointing to the 'Create new release' button.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-release-1024x561.png 'Google Play Console New Release Creation') Under the App integrity section, click the **Change app signing key** button: -![Google Play Console's App integrity section with the 'Change app signing key' button highlighted.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png "Google Play Console Change App Signing Key Option") +![Google Play Console's App integrity section with the 'Change app signing key' button highlighted.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-signingkey.png 'Google Play Console Change App Signing Key Option') Next, select the **Export and upload a key from Java Keystore** option. This is the only way in which you can retain the key and have Google Play use it for signing. If you're using Appflow to build Android apps in the cloud, this is also the required option so you can upload the keystore file to Appflow. -![The Google Play Console showing the option to 'Export and upload a key from Java Keystore'.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png "Google Play Console Export and Upload Key Option") +![The Google Play Console showing the option to 'Export and upload a key from Java Keystore'.](https://blog.ionicframework.com/wp-content/uploads/2021/12/newapps-export-1024x564.png 'Google Play Console Export and Upload Key Option') Follow the instructions on the screen to generate the Keystore and you can use the same Keystore file to sign your app in the Appflow dashboard as well. If you need any help generating the Keystore file, you can refer to our docs [here](https://ionic.io/docs/appflow/package/credentials#android-certificates). Once the generated zip file has been uploaded, you're all set! Build an AAB binary signed with the keystore file then upload it to Google Play. @@ -88,7 +88,7 @@ As of now, existing apps aren't required to use the AAB format, but you can stil To opt into app signing, you'll need to upload the app signing key used to sign previous releases of the app. Navigate to Setup -> App integrity, then choose one of the two methods seen in the screenshot below. Once the key has been uploaded, you can enroll in Play App Signing. -![The opt-in options for Play App Signing in the Google Play Console.](https://blog.ionicframework.com/wp-content/uploads/2021/12/existingapps-optin.png "Google Play Console Opt-in to Play App Signing") +![The opt-in options for Play App Signing in the Google Play Console.](https://blog.ionicframework.com/wp-content/uploads/2021/12/existingapps-optin.png 'Google Play Console Opt-in to Play App Signing') :::tip With smaller app sizes, improved performance, and enhanced security, the AAB binary format is a win for app developers and users alike. If you have an existing Android app using the APK format, consider migrating to AAB to take advantage of all the great features it provides. @@ -140,7 +140,7 @@ Making a developer account with Google Play costs $25 USD. Once a developer account has been created, go ahead and click the `Create an Application` -![The Google Play Store Developer Console with the 'CREATE APPLICATION' button highlighted.](/img/publishing/newAppGPlay.png "Google Play Store Create Application Button") +![The Google Play Store Developer Console with the 'CREATE APPLICATION' button highlighted.](/img/publishing/newAppGPlay.png 'Google Play Store Create Application Button') Be sure to fill out the description for the app along with providing screenshots and additional info. When ready, upload the signed release AAB/APK that was generated and publish the app. diff --git a/versioned_docs/version-v7/developer-resources/courses.md b/versioned_docs/version-v7/developer-resources/courses.md index 900a2c51084..568f0fc05a4 100644 --- a/versioned_docs/version-v7/developer-resources/courses.md +++ b/versioned_docs/version-v7/developer-resources/courses.md @@ -2,7 +2,7 @@ ### [Elite Ionic](https://www.joshmorony.com/elite/) - +{/* cspell:disable-next-line */} by Josh Morony @@ -10,7 +10,7 @@ Elite Ionic is an online course for Ionic developers who want to move past the b ### [Ionic Academy](https://ionicacademy.com/) - +{/* cspell:disable-next-line */} by Simon Grimm @@ -18,7 +18,7 @@ Learn Ionic with step-by-step video courses & quick wins from one of the Ionic c ### [Ionic Framework: Tips, Tricks & Techniques](https://www.packtpub.com/mobile/ionic-framework-tips-tricks-and-techniques-video) - +{/* cspell:disable-next-line */} by Charles Muzonzini @@ -26,7 +26,7 @@ In this course, you will master tips and best practices for Ionic 4 & Ionic 5 th ### [Building Desktop Apps with Ionic and Electron](https://pluralsight.pxf.io/VeMXO) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -41,7 +41,7 @@ Windows and macOS users. ### [Building Progressive Web Apps with Ionic](https://pluralsight.pxf.io/Ly2EY) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -58,7 +58,7 @@ Progressive Web Application anywhere you desire. ### [Ionic CLI](https://pluralsight.pxf.io/ionic-cli) - +{/* cspell:disable-next-line */} by Michael Callaghan at Pluralsight @@ -72,36 +72,36 @@ the confidence to use the Ionic CLI as part of your everyday Ionic development. ### [Wordpress Rest API and Ionic 4 (Angular) App With Auth](https://www.udemy.com/course/wordpress-rest-api-and-ionic-3-crud/) - +{/* cspell:disable-next-line */} by Baljeet Singh at Udemy ### [Building Mobile Apps with Ionic 2, Angular 2, and TypeScript](https://app.pluralsight.com/library/courses/ionic2-angular2-typescript-mobile-apps/table-of-contents) - +{/* cspell:disable-next-line */} by Pluralsight ### [Introducing Ionic 2](http://shop.oreilly.com/product/0636920050353.do) - +{/* cspell:disable-next-line */} by Mathieu Chauvinc ### [Ionic 2 Master Course](https://www.udemy.com/ionic-2-tutorial/) - +{/* cspell:disable-next-line */} by Udemy ### [Introducing Ionic 2](https://www.udemy.com/introducing-ionic-2/) - +{/* cspell:disable-next-line */} by Udemy ### [Ionic 2 Solutions](https://www.packtpub.com/web-development/ionic-2-solutions-video) - +{/* cspell:disable-next-line */} by Hoc Phan diff --git a/versioned_docs/version-v7/developing/android.md b/versioned_docs/version-v7/developing/android.md index 9775b991610..f613b2bbc2d 100644 --- a/versioned_docs/version-v7/developing/android.md +++ b/versioned_docs/version-v7/developing/android.md @@ -14,7 +14,7 @@ sidebar_label: Developing for Android import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -:::info Looking for the legacy Android guide? +:::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](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/android). diff --git a/versioned_docs/version-v7/developing/ios.md b/versioned_docs/version-v7/developing/ios.md index a5d5519baa3..ad637ce4b1e 100644 --- a/versioned_docs/version-v7/developing/ios.md +++ b/versioned_docs/version-v7/developing/ios.md @@ -15,7 +15,7 @@ skipIntros: true import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -:::info Looking for the legacy iOS guide? +:::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](https://ionic-docs-fo03f34h5-ionic1.vercel.app/docs/v6/developing/ios). diff --git a/versioned_docs/version-v7/index.md b/versioned_docs/version-v7/index.md index 86bcb90b6e4..f11135453a8 100644 --- a/versioned_docs/version-v7/index.md +++ b/versioned_docs/version-v7/index.md @@ -139,7 +139,9 @@ Ionic is actively developed and maintained full-time by a core team, and its eco There are millions of Ionic developers in over 200 countries worldwide. Here are some ways to join: - +{/* Keep the prettier-ignore below. Without it, Prettier reformats these list items and the page stops building. These links stay as HTML because target="_blank" opens them in a new tab, which a markdown link cannot do. */} + +{/* prettier-ignore */} - Forum: A great place for asking questions and sharing ideas. - Twitter: Where we post updates and share content from the Ionic community. - GitHub: For reporting bugs or requesting new features, create an issue here. PRs welcome! diff --git a/versioned_docs/version-v7/layout/dynamic-font-scaling.md b/versioned_docs/version-v7/layout/dynamic-font-scaling.md index bfce2ea3485..d27c621f850 100644 --- a/versioned_docs/version-v7/layout/dynamic-font-scaling.md +++ b/versioned_docs/version-v7/layout/dynamic-font-scaling.md @@ -93,7 +93,6 @@ However, the `em` unit has a compounding effect which can cause issues. In the f
Child element with 80px
-```
Parent element with 20px @@ -102,6 +101,7 @@ However, the `em` unit has a compounding effect which can cause issues. In the f
Child element with 80px
+``` Due to this compounding effect, we strongly recommend using `rem` units instead of `em` units when working with Dynamic Font Scaling. `rem` units set the font size of an element relative to the font size of the root element, which is typically ``. The default font size of the root element is typically `16px`. diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md deleted file mode 100644 index 7718b91147e..00000000000 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -title: Add to Existing React Project -sidebar_label: Add to Existing ---- - -This page has moved. Go to [Add to Existing](/docs/react/add-to-existing). diff --git a/versioned_docs/version-v7/react/navigation.md b/versioned_docs/version-v7/react/navigation.md index add9fcb1102..832c96bbb9e 100644 --- a/versioned_docs/version-v7/react/navigation.md +++ b/versioned_docs/version-v7/react/navigation.md @@ -617,7 +617,7 @@ type UseIonRouterResult = { */ goBack(animationBuilder?: AnimationBuilder): void; /** - * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not. + * Determines if there are any additional routes in the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not. */ canGoBack(): boolean; /** @@ -649,8 +649,8 @@ For more info on routing in React using the React Router implementation that Ion ## From the Community - +{/* cspell:disable */} [Ionic 4 and React: Navigation](https://alligator.io/ionic/ionic-4-react-navigation) - Paul Halliday - +{/* cspell:enable */} diff --git a/versioned_docs/version-v7/react/pwa.md b/versioned_docs/version-v7/react/pwa.md index 16ea8df72f2..121b485c023 100644 --- a/versioned_docs/version-v7/react/pwa.md +++ b/versioned_docs/version-v7/react/pwa.md @@ -111,7 +111,7 @@ Create a new Firebase project or select an existing one. **"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. -**"What do you want to use as your public directory?"** Enter "build". +**"What do you want to use as your public directory?"** Enter "dist". :::note Answering this next question will ensure that routing, hard reload, and deep linking work in the app: diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.md index 220dc010585..98fd16579ee 100644 --- a/versioned_docs/version-v7/react/quickstart.md +++ b/versioned_docs/version-v7/react/quickstart.md @@ -156,9 +156,9 @@ const Home: React.FC = () => { export default Home; ``` -This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. -:::tip Learn More +:::tip[Learn More] For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: diff --git a/versioned_docs/version-v7/react/slides.md b/versioned_docs/version-v7/react/slides.md index 98d64724166..dcb57bc0859 100644 --- a/versioned_docs/version-v7/react/slides.md +++ b/versioned_docs/version-v7/react/slides.md @@ -10,7 +10,7 @@ title: Migrating From IonSlides to Swiper.js /> -:::caution Looking for `IonSlides`? +:::caution[Looking for `IonSlides`?] `IonSlides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. @@ -257,7 +257,7 @@ export default Home; ``` :::note -See https://swiperjs.com/react#usage for a full list of modules. +Refer to Swiper's React usage documentation for a full list of modules. ::: ## The IonicSlides Module @@ -356,7 +356,7 @@ Below is a full list of property changes when going from `IonSlides` to Swiper R | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper React can be found at https://swiperjs.com/react#swiper-props. +All properties available in Swiper React can be found in the Swiper React props documentation. ::: ## Events @@ -413,7 +413,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper | `onIonSlidesDidLoad` | `onInit` | :::note -All events available in Swiper can be found at https://swiperjs.com/swiper-api#events. +All events available in Swiper can be found in the Swiper API events documentation. ::: ## Methods @@ -545,7 +545,7 @@ export default Home; ``` :::note -For more information on effects in Swiper, please see https://swiperjs.com/react#effects. +For more information on effects in Swiper, please refer to the Swiper React effects documentation. ::: ## Wrap Up @@ -566,6 +566,6 @@ If you are running into issues with the migration, please create a post on the [ Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. diff --git a/versioned_docs/version-v7/react/virtual-scroll.md b/versioned_docs/version-v7/react/virtual-scroll.md index b77bf341b69..0feb4a647d0 100644 --- a/versioned_docs/version-v7/react/virtual-scroll.md +++ b/versioned_docs/version-v7/react/virtual-scroll.md @@ -1,6 +1,6 @@ # Virtual Scroll -:::caution Looking for `ion-virtual-scroll`? +:::caution[Looking for `ion-virtual-scroll`?] `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Virtuoso package detailed below. diff --git a/versioned_docs/version-v7/reference/glossary.md b/versioned_docs/version-v7/reference/glossary.md index 110d5514beb..82d19955156 100644 --- a/versioned_docs/version-v7/reference/glossary.md +++ b/versioned_docs/version-v7/reference/glossary.md @@ -16,555 +16,291 @@ title: Glossary

Accessibility

 -

- - Accessibility - {' '} - (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited - abilities. This includes people with disabilities, those using mobile devices, and those with slow network - connections. Content should be developed to be as accessible as technology allows. -

+ Accessibility (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows.

Android SDK

 -

- The{' '} - - Android SDK - {' '} - is a software development kit built for developers building for Google's Android Platform. It includes tools for - building, testing, and debugging Android applications. -

+ The Android SDK is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications.

Android Studio

 -

- - Android Studio - {' '} - is the official Integrated Development Environment (IDE) for Native Android app development. -

+ Android Studio is the official Integrated Development Environment (IDE) for Native Android app development.

Autoprefixer

 -

- - Autoprefixer - {' '} - is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules - you write will be applied across all supporting browsers. For example, instead of having to know every flexbox - syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll - automatically plug in the correct CSS. -

+ Autoprefixer is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS.

Bundling

 -

- Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and - compiling/transpiling them down to one single file. -

+ Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file.

Capacitor

 -

- - Capacitor - {' '} - is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, - and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution - beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the - company. -

+ Capacitor is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company.
- +{/* cspell:disable */}

CLI

 -

- A CLI, or Command-Line Interface, is a text-based interface for - interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often - use Command Prompt. The Ionic community often uses this term to refer to{' '} - Ionic's CLI. Ionic's CLI can be used for a number of things, such - as creating production builds of an app, running the development server, and accessing{' '} - - Ionic commercial services - - . -

+ A CLI, or Command-Line Interface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to Ionic's CLI. Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing Ionic commercial services.
- +{/* cspell:enable */}

CommonJS

 -

- - CommonJS - {' '} - is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and - packages. -

+ CommonJS is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages.

Cordova

 -

- - Apache Cordova - {' '} - is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged - native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or - accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. -

+ Apache Cordova is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone.

CORS

 -

- - CORS - {' '} - (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the{' '} - CORS FAQs for more information. -

+ CORS (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. See the CORS FAQs for more information.

CSS Variables

 -

- You may be familiar with variables from Sass.{' '} - - CSS Variables - {' '} - enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -

+ You may be familiar with variables from Sass. CSS Variables enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers.

Decorators

 -

- Decorators are expressions that return a function. They allow you to take an existing function, and extend its - behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a{' '} - class, you are wrapping and extending the behavior of its constructor. In other words, the - decorator will add some functionality when the constructor is called, and will then return the original constructor. - When you decorate a parameter, you are wrapping the argument that gets passed in for that - parameter. The decorator will add functionality when an argument is passed to the method, and then return the - original argument. -

+ Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate classes and parameters. When you decorate a class, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a parameter, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument.

ES5

 -

- ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which - developers are most familiar with today. -

+ ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today.

ES2015/ES6

 -

- A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, - and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 - features in older browsers, tools such as Babel and TypeScript have - to transpile ES6 code down to ES5. -

+ A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as Babel and TypeScript have to transpile ES6 code down to ES5.

ES2016/ES7

 -

- This version of JavaScript added a number of new features to the language, including Array.includes and - the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, - Safari, Firefox and Edge) -

+ This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge)

ES2017/ES8

 -

- This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new - official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -

+ This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics.

Genymotion

 -

- Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on - Android. Check out our resource section on Genymotion for - more info. -

+ Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our resource section on Genymotion for more info.

Git

 -

- - Git - {' '} - is a distributed version control system for managing code. It allows development teams to contribute code to the - same project without causing code conflicts. -

+ Git is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts.

Gulp

 -

- - Gulp - {' '} - is a tool for running tasks which can be used to build your app. Common build tasks include transpiling{' '} - ES6 to ES5, turning Sass into CSS, minifying code, - and concatenating files. -

+ Gulp is a tool for running tasks which can be used to build your app. Common build tasks include transpiling ES6 to ES5, turning Sass into CSS, minifying code, and concatenating files.

ES Modules

 -

- - ES Modules - {' '} - brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the - global scope and have to be explicitly imported into your project to be used. This makes it much easier to - understand where your code is coming from and increases modularity and compartmentalization of functionality. -

+ ES Modules brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality.

Ionicons

 -

- - Ionicons - {' '} - is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as - commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be - used in any project. -

+ Ionicons is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project.

Karma

 -

- - Karma - {' '} - is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing - framework, in a real browser. Karma was originally written for use with Angular 1. -

+ Karma is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1.

Module

 -

- Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the - Global scope. -

+ Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope.

Monorepo

 -

- A monorepo is a single git repository with multiple projects. Advantages include simpler - organization, shared tooling and dependencies, and better collaboration with teammates. -

+ A monorepo is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates.

Live Reload

 -

- Live Reload (or live-reload) is a tool that automatically reloads the browser or{' '} - Web View when it detects changes in your app. In some cases, it can replace - parts of your app without having to reload the entire window. See the{' '} - Live Reload docs for more information. -

+ Live Reload (or live-reload) is a tool that automatically reloads the browser or Web View when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. See the Live Reload docs for more information.

Node

 -

- - Node - {' '} - is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web - services, node is often used to build developer tools, such as the Ionic CLI. -

+ Node is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the Ionic CLI.

npm

 -

- - npm - {' '} - is the package manager for node. It allows developers to install, share, and package node - modules. Ionic can be installed with npm, along with a number of its dependencies. -

+ npm is the package manager for node. It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies.

Observable

 -

- An observable is an object that emits events (or notifications). An observer is an object that listens for these - events, and does something when an event is received. Together, they create a pattern that can be used for - programming asynchronously. -

+ An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously.

Package ID

 -

- Referred to by Apple as Bundle ID and by Android as Application ID, the{' '} - Package ID is used for identifying apps published to the App Store/Play Store. It is a string - formatted in{' '} - - reverse-DNS notation - - . -

+ Referred to by Apple as Bundle ID and by Android as Application ID, the Package ID is used for identifying apps published to the App Store/Play Store. It is a string formatted in reverse-DNS notation.

Polyfill

 -

- A{' '} - - polyfill - {' '} - is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a{' '} - shim, but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -

+ A polyfill is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a shim, but where a shim has it's own API, a polyfill let's the expect API of the browser be used.

Protractor

 -

- - Protractor - {' '} - is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, - for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. -

+ Protractor is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality.

Sass

 -

- Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features - such as{' '} - - variables - - , - mixins - , and - loops - . -

+ Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as variables, mixins, and loops.

Scoped Encapsulation

 -

- A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a - data attribute at run time. Overriding scoped selectors in CSS requires a{' '} - - higher specificity - {' '} - selector. Scoped components can also be styled using{' '} - - CSS Custom Properties - - . -

+ A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a higher specificity selector. Scoped components can also be styled using CSS Custom Properties.

Shadow DOM

 -

- - Shadow DOM - {' '} - is a native browser solution for DOM and style encapsulation of a component. It shields the component from its - surrounding environment. To externally style internal elements of a Shadow DOM component you must use{' '} - - CSS Custom Properties - {' '} - or{' '} - - CSS Shadow Parts - - . -

+ Shadow DOM is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use CSS Custom Properties or CSS Shadow Parts.

Shim

 -

- A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the - browser specific implementation from the end user. -

+ A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user.

Transpiler

 -

- Transpilation is the process of converting code from one language to another language prior to execution. Typically, - a transpiler will convert a high-level language to another high-level language. The most common type of{' '} - transpilation in Ionic Framework is converting ES2015/ES6 ( - TypeScript) to ES5 (traditional JavaScript). -

+ Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of transpilation in Ionic Framework is converting ES2015/ES6 (TypeScript) to ES5 (traditional JavaScript).

TypeScript

 -

- - TypeScript - {' '} - is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as{' '} - - type declarations - {' '} - and{' '} - - interfaces - - . Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -

+ TypeScript is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as type declarations and interfaces. Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional.

Unit Tests

 -

- Unit Tests and unit testing are a way to test small pieces of code to see if they behave as expected. Unit testing - frameworks include Jasmine, Mocha, QUnit, and many others. -

+ Unit Tests and unit testing are a way to test small pieces of code to see if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others.

Webpack

 -

- - Webpack - {' '} - bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are - only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or - other types. -

+ Webpack bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types.

Web Standards

 -

- The{' '} - - World Wide Web Consortium - {' '} - (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop{' '} - - web standards - - , which are a set of protocols, specifications, and technologies that define the Web Platform. -

+ The World Wide Web Consortium (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop web standards, which are a set of protocols, specifications, and technologies that define the Web Platform.

Xcode

 -

- - Xcode - {' '} - is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, - iOS, watchOS and tvOS), with extensions available for other languages and platforms. -

+ Xcode is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms.
diff --git a/versioned_docs/version-v7/reference/support.md b/versioned_docs/version-v7/reference/support.md index 0ed8c8ce5a2..92ad85a42d5 100644 --- a/versioned_docs/version-v7/reference/support.md +++ b/versioned_docs/version-v7/reference/support.md @@ -31,7 +31,7 @@ The current status of each Ionic Framework version is: | V1 | End of Support | May 12, 2015 | Jan 25, 2017 | Jan 25, 2017 | - **Maintenance**: Only critical bug and security fixes. No major feature improvements. -- **Extended Support**: For teams and organizations that require additional long term maintenance support, Ionic has extended support options available. To learn more, see our [Enterprise offerings](https://ionicframework.com/enterprise). +- **Extended Support**: For teams and organizations that require additional long term maintenance support, Ionic has extended support options available. ## Compatibility Recommendations diff --git a/versioned_docs/version-v7/reference/versioning.md b/versioned_docs/version-v7/reference/versioning.md index 7c48549721e..6b2e95fa228 100644 --- a/versioned_docs/version-v7/reference/versioning.md +++ b/versioned_docs/version-v7/reference/versioning.md @@ -1,7 +1,5 @@ # Versioning - - Ionic Framework follows the Semantic Versioning (SemVer) convention: major.minor.patch. Incompatible API changes increment the major version, adding backwards-compatible functionality increments the minor version, and backwards-compatible bug fixes increment the patch version. ## Release Schedule diff --git a/versioned_docs/version-v7/theming/css-shadow-parts.md b/versioned_docs/version-v7/theming/css-shadow-parts.md index 6d539b9cc55..7dcc2431bb3 100644 --- a/versioned_docs/version-v7/theming/css-shadow-parts.md +++ b/versioned_docs/version-v7/theming/css-shadow-parts.md @@ -123,13 +123,7 @@ CSS Shadow Parts are supported in the recent versions of all of the major browse ### Vendor Prefixed Pseudo-Elements -

- - Vendor prefixed - {' '} - pseudo-elements are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` - pseudo-elements: -

+Pseudo-elements that are vendor prefixed are not supported at this time. An example of this would be any of the `::-webkit-scrollbar` pseudo-elements: ```css /* Does NOT work */ diff --git a/versioned_docs/version-v7/troubleshooting/native.md b/versioned_docs/version-v7/troubleshooting/native.md index bdaf0c244eb..460266fbc4f 100644 --- a/versioned_docs/version-v7/troubleshooting/native.md +++ b/versioned_docs/version-v7/troubleshooting/native.md @@ -18,14 +18,13 @@ Code Signing Error: Failed to create provisioning profile. The app ID "com.csfor Running an app on an iOS device requires a provisioning profile. If a provisioning profile has not been created yet follow these directions: -1. Set the [Package ID](../reference/glossary.md#package-id). +1. **Set the [Package ID](../reference/glossary.md#package-id).** For Capacitor, open the `capacitor.config.json` file and modify the `appId` property. For Cordova, open the `config.xml` file and modify the `id` attribute of the root element, ``. See [the Cordova documentation](https://cordova.apache.org/docs/en/latest/config_ref/#widget) for more information. - -2. Open the project in Xcode. +2. **Open the project in Xcode.** For Capacitor, run the following to open the app in Xcode: @@ -35,15 +34,13 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni For Cordova, open Xcode. Use **File** » **Open** and locate the app. Open the app's `platforms/ios` directory. - -3. In Project navigator, select the project root to open the project editor. Under the **Identity** section, verify that the Package ID that was set matches the Bundle Identifier. +3. **In Project navigator, select the project root to open the project editor. Under the Identity section, verify that the Package ID that was set matches the Bundle Identifier.** - ![Xcode showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png "Xcode Identity Section") + ![Xcode showing the Identity section for an iOS app with fields for Display Name, Bundle Identifier, Version, and Build.](/img/running/ios-xcode-identity-setup.png 'Xcode Identity Section') - -4. In the same project editor, under the Signing section, ensure Automatically manage signing is enabled. Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. +4. **In the same project editor, under the Signing section, ensure Automatically manage signing is enabled.** Then, select a Development Team. Given a Development Team, Xcode will attempt to automatically prepare provisioning and signing. - ![Xcode showing the Signing section with 'Automatically manage signing' enabled and a Development Team selected.](/img/running/ios-xcode-signing-setup.png "Xcode Signing Section") + ![Xcode showing the Signing section with 'Automatically manage signing' enabled and a Development Team selected.](/img/running/ios-xcode-signing-setup.png 'Xcode Signing Section') ## Xcode build error 65 diff --git a/versioned_docs/version-v7/troubleshooting/runtime.md b/versioned_docs/version-v7/troubleshooting/runtime.md index c0466b288f9..7b5d0450155 100644 --- a/versioned_docs/version-v7/troubleshooting/runtime.md +++ b/versioned_docs/version-v7/troubleshooting/runtime.md @@ -138,9 +138,8 @@ This change will only affect applications that depend on zone.js `0.8.27` or newer. Older versions will not be affected by this change. :::note -This flag is automatically included when creating an Ionic app via +This flag is automatically included when creating an Ionic app via the Ionic CLI. ::: -the Ionic CLI. ## Cordova plugins not working in the browser @@ -208,11 +207,11 @@ class MyApp { } ``` - +{/* This is referenced in Ionic Framework component documentation so we explicitly define the anchor so it remains consistent. */} -## Accessing `this` in a function callback returns `undefined` {#accessing-this} +## Accessing `this` in a function callback returns `undefined` {/* #accessing-this */} -Certain components, such as [counterFormatter on ion-input](../api/input#counterformatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: +Certain components, such as [counterFormatter on ion-input](../api/input#prop-counter-formatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: The first way to bind `this` is to use the `bind()` method on a function instance. If you want to pass a callback called `counterFormatterFn`, then you would write `counterFormatterFn.bind(this)`. diff --git a/versioned_docs/version-v7/updating/4-0.md b/versioned_docs/version-v7/updating/4-0.md index 57c6e32969f..f471955ba7b 100644 --- a/versioned_docs/version-v7/updating/4-0.md +++ b/versioned_docs/version-v7/updating/4-0.md @@ -13,7 +13,7 @@ import TabItem from '@theme/TabItem'; This guide assumes that you have already updated your app to the latest version of Ionic 3. If you are using Ionic 1 or 2, Make sure to follow the [Updating from Ionic 1 to 4 Guide](#updating-from-ionic-1-to-4) instead. ::: -:::info Breaking Changes +:::info[Breaking Changes] For a **complete list of breaking changes** from Ionic 3 to Ionic 4, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v4.md) in the Ionic Framework repository. ::: diff --git a/versioned_docs/version-v7/updating/5-0.md b/versioned_docs/version-v7/updating/5-0.md index 6a5f621b4e9..66698354270 100644 --- a/versioned_docs/version-v7/updating/5-0.md +++ b/versioned_docs/version-v7/updating/5-0.md @@ -10,7 +10,7 @@ Migrating an app from Ionic 4 to 5 requires a few updates to the API properties, This guide assumes that you have already updated your app to the latest version of Ionic 4. Make sure you have followed the [Updating to Ionic 4 Guide](./4-0) before starting this guide. ::: -:::info Breaking Changes +:::info[Breaking Changes] For a **complete list of breaking changes** from Ionic 4 to Ionic 5, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING_ARCHIVE/v5.md) in the Ionic Framework repository. ::: diff --git a/versioned_docs/version-v7/updating/6-0.md b/versioned_docs/version-v7/updating/6-0.md index d9fe7d33dfc..b4176cdb84e 100644 --- a/versioned_docs/version-v7/updating/6-0.md +++ b/versioned_docs/version-v7/updating/6-0.md @@ -8,487 +8,7 @@ title: Updating to v6 This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide. ::: -:::info Breaking Changes -For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository. -::: - -## Getting Started - -### Angular - -1. Ionic 6 supports Angular 12+. Update to the latest version of Angular by following the [Angular Update Guide](https://update.angular.io/). -2. Update to the latest version of Ionic 6: - -```shell -npm install @ionic/angular@6 -``` - -If you are using Ionic Angular Server, be sure to update that as well: - -```shell -npm install @ionic/angular@6 @ionic/angular-server@6 -``` - -3. Remove any usage of `Config.set()`. Instead, set your config in `IonicModule.forRoot()`. See the [Config Documentation](../developing/config) for more examples. - -4. Remove any usage of the `setupConfig` function previously exported from `@ionic/angular`. Set your config in `IonicModule.forRoot()` instead. - -### React - -1. Ionic 6 supports React 17+. Update to the latest version of React: - -```shell -npm install react@latest react-dom@latest -``` - -2. Update to the latest version of Ionic 6: - -```shell -npm install @ionic/react@6 @ionic/react-router@6 -``` - -3. Update the `test` field in the `scripts` object of your `package.json` to include `transformIgnorePatterns`: - -```json -"scripts": { - "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'", - ... -} -``` - -4. Import and call `setupIonicReact` in your `App` component file. If you are also using `setupConfig`, pass your config to `setupIonicReact` instead: - -**Before** - -```tsx title="App.tsx" -import { setupConfig } from '@ionic/react'; - -... - -setupConfig({ - mode: 'md' -}); -``` - -**After** - -```tsx title="App.tsx" -import { setupIonicReact } from '@ionic/react'; - -... - -setupIonicReact({ - mode: 'md' -}); -``` - -:::note -Developers must import and call `setupIonicReact` even if they are not setting custom config. -::: - -See the [Config Documentation](../developing/config) for more examples. - -5. Update all controller imports from `@ionic/core` to `@ionic/core/components`. As an example, here is a migration for `menuController`: - -**Before** - -```tsx -import { menuController } from '@ionic/core'; -``` - -**After** - -```tsx -import { menuController } from '@ionic/core/components'; -``` - -### Vue - -1. Ionic 6 supports Vue 3.0.6+. Update to the latest version of Vue: - -```shell -npm install vue@3 vue-router@4 -``` - -2. For apps that use the Vue CLI, install Vue CLI 5: - -```shell -npm install -g @vue/cli@next -``` - -Then, upgrade all Vue CLI plugins: - -```shell -vue upgrade --next -``` - -3. Update to the latest version of Ionic 6: - -```shell -npm install @ionic/vue@6 @ionic/vue-router@6 -``` - -4. Add the following `transformIgnorePatterns` to either `jest.config.js` or the `jest` field in `package.json`: - -```js title="jest.config.js" -module.exports = { - ... - transformIgnorePatterns: ['/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)'] -} -``` - -```json title="package.json" - { - ... - "jest": { - "transformIgnorePatterns": ["/node_modules/(?!@ionic/vue|@ionic/vue-router|@ionic/core|@stencil/core|ionicons)"] - } - } -``` - -See the [Testing section below](#testing) for more information. - -5. Remove any usage of the `setupConfig` function previously exported from `@ionic/vue`. Set your config when installing the `IonicVue` plugin instead. See the [Config Documentation](../developing/config) for more examples. - -6. Rename the `IonRouter` type for `useIonRouter` to `UseIonRouterResult`. - -7. Rename the `IonKeyboardRef` type for `useKeyboard` to `UseKeyboardResult`. - -8. Rename any overlay event listeners to use the new format: - -**Before** - -```html - - ... - -``` - -**After** - -```html - - ... - -``` - -:::note -This applies to `ion-action-sheet`, `ion-alert`, `ion-loading`, `ion-modal`, `ion-picker`, `ion-popover`, and `ion-toast`. -::: - -9. Pass in an `ion-router-outlet` into any `ion-tabs` that are being used: - -**Before** - -```html - - ... - - - -``` - -**After** - -```html - - - ... - - - -``` - -10. Additional routes inside of tabs should be re-written as sibling routes instead of child routes: - -**Before** - -```ts -const routes: Array = [ - { - path: '/', - redirect: '/tabs/tab1' - }, - { - path: '/tabs/', - component: Tabs, - children: [ - { - path: '', - redirect: 'tab1' - }, - { - path: 'tab1', - component: () => import('@/views/Tab1.vue'), - children: { - { - path: 'view', - component: () => import('@/views/Tab1View.vue') - } - } - }, - { - path: 'tab2', - component: () => import('@/views/Tab2.vue') - }, - { - path: 'tab3', - component: () => import('@/views/Tab3.vue') - } - ] - } -] -``` - -**After** - -```ts -const routes: Array = [ - { - path: '/', - redirect: '/tabs/tab1', - }, - { - path: '/tabs/', - component: Tabs, - children: [ - { - path: '', - redirect: 'tab1', - }, - { - path: 'tab1', - component: () => import('@/views/Tab1.vue'), - }, - { - path: 'tab1/view', - component: () => import('@/views/Tab1View.vue'), - }, - { - path: 'tab2', - component: () => import('@/views/Tab2.vue'), - }, - { - path: 'tab3', - component: () => import('@/views/Tab3.vue'), - }, - ], - }, -]; -``` - -### Core - -1. Update to the latest version of Ionic 6: - -```shell -npm install @ionic/core@6 -``` - -## Updating Your Code - -### Datetime - -1. Remove any usages of the `placeholder`, `pickerOptions`, `pickerFormat`, `monthNames`, `monthShortNames`, `dayNames`, and `dayShortNames` properties. `ion-datetime` now automatically formats the month names, day names, and time displayed inside of the component according to the language and region set on the device. See the [ion-datetime Localization Documentation](../api/datetime#localization) for more information. - -2. Remove any usages of the `text` and `placeholder` CSS Shadow Parts. - -3. Remove any usages of the `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, and `--placeholder-color` CSS Variables. To customize the padding on `ion-datetime`, you can use any of the `padding` CSS properties. - -4. Remove any usage of the `open` method. To present the datetime in an overlay, place it inside of an `ion-modal` or an `ion-popover` component. See the [ion-datetime Usage Examples](../api/datetime#usage) for more information. - -5. Remove any usage of the `displayFormat` or `displayTimezone` properties. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using [date-fns](https://date-fns.org/). See the [ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) for examples. - -:::note -See the [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) for more migration examples. -::: - -### Icon - -Ionic 6 now ships with Ionicons 6. Review the [Ionicons 6 Breaking Changes Guide](https://github.com/ionic-team/ionicons/releases/tag/v6.0.0) and make any necessary changes. - -### Input - -Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead. - -### Modal - -`ion-modal` now uses the Shadow DOM. Update any styles targeting the internals of `ion-modal` to use either the [ion-modal CSS Variables](../api/modal#css-custom-properties) or the [ion-modal CSS Shadow Parts](../api/modal#css-shadow-parts): - -**Before** - -```css -ion-modal .modal-wrapper { - /* Any custom styles here */ -} - -ion-modal ion-backdrop { - /* Any custom styles here */ -} -``` - -**After** - -```css -ion-modal::part(content) { - /* Any custom styles here */ -} - -ion-modal::part(backdrop) { - /* Any custom styles here */ -} - -ion-modal::part(backdrop) { - /* Any custom styles here */ -} -``` - -### Popover - -`ion-popover` now uses the Shadow DOM. Update any styles targeting the internals of `ion-popover` to use either [ion-popover CSS Variables](../api/popover#css-custom-properties) or the [ion-popover CSS Shadow Parts](../api/popover#css-shadow-parts): - -**Before** - -```css -ion-popover .popover-arrow { - /* Any custom styles here */ -} - -ion-popover ion-backdrop { - /* Any custom styles here */ -} -``` - -**After** - -```css -ion-popover::part(arrow) { - /* Any custom styles here */ -} - -ion-popover::part(backdrop) { - /* Any custom styles here */ -} - -ion-popover::part(content) { - /* Any custom styles here */ -} -``` - -### Radio - -Remove any usage of the `RadioChangeEventDetail` interface. - -### Select - -Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead. - -### Textarea - -Ensure `null` is not passed in as a value to the `placeholder` property. We recommend using `undefined` instead. - -### Browser Support - -The list of browsers that Ionic supports has changed. Review the [Browser Support Guide](../reference/browser-support) to ensure you are deploying apps to supported browsers. - -If you have a `browserslist` or `.browserslistrc` file, update it with the following content: - -``` -Chrome >=60 -Firefox >=63 -Edge >=79 -Safari >=13 -iOS >=13 -``` - -### Testing - -Ionic 6 now ships as ES Modules. ES Modules are supported in all major browsers and bring developer experience and code maintenance improvements. Developers testing with Jest will need to update their Jest configuration as Jest does not have full support for ES Modules as of Jest 27. - -This update involves using Babel to compile Ionic's ES Modules down to the CommonJS (CJS) format, a format that Jest can understand. Once Jest ships support for ES Modules, this change will no longer be necessary. See https://github.com/facebook/jest/issues/9430 for updates on ES Modules support in Jest. - -If you are starting fresh with a new Ionic app, this configuration is done for you in our starter applications. For those with existing Ionic apps, follow the steps below to get Jest working with Ionic 6: - -1. Add a `transformIgnorePatterns` field to your Jest config that includes the relevant Ionic packages. This is typically found in `jest.config.js` or the `jest` field in `package.json`: - -```js title="jest.config.js" -module.exports = { - ... - transformIgnorePatterns: ['/node_modules/(?!@ionic/core|@stencil/core|ionicons)'] -} -``` - -```json title="package.json" - { - ... - "jest": { - "transformIgnorePatterns": ["/node_modules/(?!@ionic/core|@stencil/core|ionicons)"] - } - } -``` - -:::note -If you are using Ionic React or Ionic Vue, be sure to add the appropriate packages to the `transformIgnorePatterns` array. For Ionic React this includes `@ionic/react` and `@ionic/react-router`. For Ionic Vue this includes `@ionic/vue` and `@ionic/vue-router`. -::: - -For developers using Create React App (CRA), there is currently no way to update the `transformIgnorePatterns` in a Jest config file. This is a CRA restriction and not something Ionic has control over. We can, however, pass the `transformIgnorePatterns` directly into the `react-scripts test` command: - -```json title="package.json" -"scripts": { - "test": "react-scripts test --transformIgnorePatterns 'node_modules/(?!(@ionic/react|@ionic/react-router|@ionic/core|@stencil/core|ionicons)/)'", - ... -} -``` - -If you are still running into issues, here are a couple things to try: - -1. Verify that `@babel/preset-env` is included in your [project-wide configuration](https://babeljs.io/docs/en/config-files#project-wide-configuration) instead of your [file-relative configuration](https://babeljs.io/docs/en/config-files#file-relative-configuration). This typically means defining the Babel configuration in `/babel.config.json`. - -2. If you have a `browserslist/test` field in `package.json` file, make sure it is set to `current node`. - -## Need Help Upgrading? - -Be sure to look at the [Ionic 6 Breaking Changes Guide](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md). There were several changes to default property and CSS Variable values that developers may need to be aware of. Only the breaking changes that required user action are listed on this page. - -If you need help upgrading, please post a thread on the [Ionic Forum](https://forum.ionicframework.com/). - ---- - -## title: Updating to v6 - -# Updating from Ionic 5 to 6 - -:::note -This guide assumes that you have already updated your app to the latest version of Ionic 5. Make sure you have followed the [Updating to Ionic 5 Guide](./5-0) before starting this guide. -::: - -:::info Breaking Changes +:::info[Breaking Changes] For a **complete list of breaking changes** from Ionic 5 to Ionic 6, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md) in the Ionic Framework repository. ::: diff --git a/versioned_docs/version-v7/updating/7-0.md b/versioned_docs/version-v7/updating/7-0.md index b2301a246cc..a71fcdb7132 100644 --- a/versioned_docs/version-v7/updating/7-0.md +++ b/versioned_docs/version-v7/updating/7-0.md @@ -8,7 +8,7 @@ title: Updating to v7 This guide assumes that you have already updated your app to the latest version of Ionic 6. Make sure you have followed the [Upgrading to Ionic 6 Guide](./6-0) before starting this guide. ::: -:::info Breaking Changes +:::info[Breaking Changes] For a **complete list of breaking changes** from Ionic 6 to Ionic 7, please refer to [the breaking changes document](https://github.com/ionic-team/ionic-framework/blob/main/BREAKING.md#version-7x) in the Ionic Framework repository. ::: diff --git a/versioned_docs/version-v7/utilities/gestures.md b/versioned_docs/version-v7/utilities/gestures.md index dcc4772e2fe..2324da88ca6 100644 --- a/versioned_docs/version-v7/utilities/gestures.md +++ b/versioned_docs/version-v7/utilities/gestures.md @@ -119,7 +119,7 @@ constructor(private gestureCtrl: GestureController) { -Developers using React should install the latest version of `@ionic/react`. Full React wrappers are coming soon! +Developers using React should install the latest version of `@ionic/react`. ```tsx import { createGesture, Gesture } from '@ionic/react'; diff --git a/versioned_docs/version-v7/vue/navigation.md b/versioned_docs/version-v7/vue/navigation.md index 6f6afa3575f..745e3dda77c 100644 --- a/versioned_docs/version-v7/vue/navigation.md +++ b/versioned_docs/version-v7/vue/navigation.md @@ -527,7 +527,7 @@ For example usages, please refer to our [Utility Functions](utility-functions#us ## URL Parameters -Let's expand upon our original routing example to show how we can use URL parameters: +Let's expand upon our original routing example to show how we can use URL parameters. We recommend [passing URL parameters as props](https://router.vuejs.org/guide/essentials/passing-props.html) so that the component does not need a direct reference to the router, which makes it easier to reuse and test in isolation. ```tsx const routes: Array = [ @@ -544,11 +544,12 @@ const routes: Array = [ path: '/detail/:id', name: 'Detail', component: DetailPage, + props: true, }, ]; ``` -Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders. +Notice that we have now added `:id` to the end of our `detail` path string. URL parameters are dynamic portions of our route paths. When the user navigates to a URL such as `/details/1` the "1" is saved to a parameter named "id" which can be accessed in the component when the route renders. Setting `props: true` on the route record tells Vue Router to pass the matched URL parameters to the component as props. Let's look at how to use it in our component: @@ -567,14 +568,12 @@ Let's look at how to use it in our component: ``` -Our `route` variable contains an instance of the current route. It also contains any parameters we have passed in. We can obtain the `id` parameter from here and display it on the screen. +The `id` parameter from the URL is received as a prop and rendered on the screen. The component has no dependency on the router itself. ## Router History diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md index b1bb31141af..70a1e3d5fa6 100644 --- a/versioned_docs/version-v7/vue/quickstart.md +++ b/versioned_docs/version-v7/vue/quickstart.md @@ -160,9 +160,9 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. -:::tip Learn More +:::tip[Learn More] For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: diff --git a/versioned_docs/version-v7/vue/slides.md b/versioned_docs/version-v7/vue/slides.md index e55c22a0971..8bf4cfd8154 100644 --- a/versioned_docs/version-v7/vue/slides.md +++ b/versioned_docs/version-v7/vue/slides.md @@ -10,7 +10,7 @@ title: Migrating From ion-slides to Swiper.js /> -:::warning Looking for `ion-slides`? +:::warning[Looking for `ion-slides`?] `ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. ::: @@ -212,7 +212,7 @@ const modules = [Autoplay, Keyboard, Pagination, Scrollbar, Zoom]; ``` :::note -See https://swiperjs.com/vue#usage for a full list of modules. +Refer to Swiper's Vue usage documentation for a full list of modules. ::: ## The IonicSlides Module @@ -294,7 +294,7 @@ Below is a full list of property changes when going from `ion-slides` to Swiper | scrollbar | You can continue to use the `scrollbar` property, just be sure to install the Scrollbar module first. | :::note -All properties available in Swiper Vue can be found at https://swiperjs.com/vue#swiper-props. +All properties available in Swiper Vue can be found in the Swiper Vue props documentation. ::: ## Events @@ -347,7 +347,7 @@ Below is a full list of event name changes when going from `ion-slides` to Swipe | `ionSlidesDidLoad` | `init` | :::note -All events available in Swiper Vue can be found at https://swiperjs.com/vue#swiper-events. +All events available in Swiper Vue can be found in the Swiper Vue events documentation. ::: ## Methods @@ -472,7 +472,7 @@ const modules = [EffectFade, IonicSlides]; ``` :::note -For more information on effects in Swiper, please see https://swiperjs.com/vue#effects. +For more information on effects in Swiper, please refer to the Swiper Vue effects documentation. ::: ## Wrap Up @@ -493,6 +493,6 @@ If you are running into issues with the migration, please create a post on the [ Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to see if your issue can be resolved by the community. -If you are running into problems with the Swiper library, new bugs should be filed on the Swiper repo: https://github.com/nolimits4web/swiper/issues +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. -If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework repo: https://github.com/ionic-team/ionic-framework/issues +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. diff --git a/versioned_docs/version-v7/vue/virtual-scroll.md b/versioned_docs/version-v7/vue/virtual-scroll.md index d574c3bb5ea..88b17a4f83c 100644 --- a/versioned_docs/version-v7/vue/virtual-scroll.md +++ b/versioned_docs/version-v7/vue/virtual-scroll.md @@ -1,6 +1,6 @@ # Virtual Scroll -:::warning Looking for `ion-virtual-scroll`? +:::warning[Looking for `ion-virtual-scroll`?] `ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using a Vue library to accomplish this. We outline one approach using `vue-virtual-scroller` below. diff --git a/versioned_docs/version-v8/README.md b/versioned_docs/version-v8/README.md new file mode 100644 index 00000000000..12005305278 --- /dev/null +++ b/versioned_docs/version-v8/README.md @@ -0,0 +1,17 @@ +# Docs folder + +The `/docs` folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter. + +## Versioning + +This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the `layout` section in the current version of Ionic, it could be added to a `_components/` folder in `docs/layout/`. When the versioning script is run, the component will be copied to `versioned_docs/version-{X}/layout/_components/` and there will now be a separate component in `docs/layout/_components/` that can be deleted or updated to the latest version. The same concept applies to images and other files. + +If components are meant to be shared across versions, they can be put in `src/components/`. If images and other served files are meant to be shared across versions they can be put in `static/`. + +## Auto Generated Files + +All markdown files in these directories are generated from [scripts](/scripts): + +- `docs/api/` +- `docs/cli/commands/` +- `docs/native/` diff --git a/versioned_docs/version-v8/angular/add-to-existing.md b/versioned_docs/version-v8/angular/add-to-existing.md new file mode 100644 index 00000000000..d9a41e4e1a1 --- /dev/null +++ b/versioned_docs/version-v8/angular/add-to-existing.md @@ -0,0 +1,344 @@ +--- +title: Add to Existing Angular Project +sidebar_label: Add to Existing +--- + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + + + Add Ionic Angular to Existing Project: Integration Guide + + + +This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.md) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.md). + +:::tip + +This guide uses `.css` file extensions for stylesheets. If you created your Angular app with a different stylesheet format (such as `.scss`, `.sass`, or `.less`), use that extension instead. + +::: + +## Setup + +:::info + +This guide follows the structure of an Angular app created with the Angular CLI. If you started your Angular app using a different method, your file structure and setup may differ. + +::: + +You can add Ionic Angular to your existing Angular project using the Angular CLI's `ng add` feature or by installing it manually. + +### Using ng add + +The easiest way to add Ionic Angular is to use the Angular CLI's `ng add` feature: + +```bash +ng add @ionic/angular +``` + +This will install the `@ionic/angular` package and automatically configure the necessary imports and styles. + +### Manual Installation + +If you prefer to install Ionic Angular manually, you can follow these steps: + +#### 1. Install the Package + +```bash +npm install @ionic/angular +``` + +#### 2. Add Ionic Framework Stylesheets + +Replace the existing `styles` array in `angular.json` with the following: + +```json title="angular.json" +"styles": [ + "src/styles.css", + { + "input": "node_modules/@ionic/angular/css/core.css" + }, + { + "input": "node_modules/@ionic/angular/css/normalize.css" + }, + { + "input": "node_modules/@ionic/angular/css/structure.css" + }, + { + "input": "node_modules/@ionic/angular/css/typography.css" + } +] +``` + +:::info + +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md). + +::: + +#### 3. Configure Ionic Angular + +Update `src/app/app.config.ts` to include `provideIonicAngular`: + +```typescript title="src/app/app.config.ts" +import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZoneChangeDetection } from '@angular/core'; +import { provideRouter } from '@angular/router'; + +import { routes } from './app.routes'; +import { provideIonicAngular } from '@ionic/angular/standalone'; + +export const appConfig: ApplicationConfig = { + providers: [ + provideBrowserGlobalErrorListeners(), + provideZoneChangeDetection({ eventCoalescing: true }), + provideRouter(routes), + provideIonicAngular({}), + ], +}; +``` + +## Using Individual Components + +After completing the setup above, you can start using Ionic components in your existing Angular app. Here's an example of how to use them: + +Update `src/app/app.html` to the following: + +```html title="src/app/app.html" +Button +``` + +Then, import the components in `src/app/app.ts`: + +```ts title="src/app/app.ts" +import { Component } from '@angular/core'; +import { IonButton, IonDatetime } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + imports: [IonButton, IonDatetime], + templateUrl: './app.html', + styleUrl: './app.css', +}) +export class App {} +``` + +Visit the [components](/docs/components.md) page for all of the available Ionic components. + +## Using Ionic Pages + +If you want to use Ionic pages with full navigation and page transitions, follow these additional setup steps. + +#### 1. Add Additional Ionic Framework Stylesheets + +Replace the existing `styles` array in `angular.json` with the following: + +```json title="angular.json" +"styles": [ + "src/styles.css", + { + "input": "node_modules/@ionic/angular/css/core.css" + }, + { + "input": "node_modules/@ionic/angular/css/normalize.css" + }, + { + "input": "node_modules/@ionic/angular/css/structure.css" + }, + { + "input": "node_modules/@ionic/angular/css/typography.css" + }, + { + "input": "node_modules/@ionic/angular/css/display.css" + }, + { + "input": "node_modules/@ionic/angular/css/padding.css" + }, + { + "input": "node_modules/@ionic/angular/css/float-elements.css" + }, + { + "input": "node_modules/@ionic/angular/css/text-alignment.css" + }, + { + "input": "node_modules/@ionic/angular/css/text-transformation.css" + }, + { + "input": "node_modules/@ionic/angular/css/flex-utils.css" + }, + { + "input": "src/theme/variables.css" + } +] +``` + +These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.md) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.md). + +#### 2. Set up Theming + +Create a `src/theme/variables.css` file with the following content: + +```css title="src/theme/variables.css" +/** + * Ionic Dark Theme + * ----------------------------------------------------- + * For more info, please refer to: + * https://ionicframework.com/docs/theming/dark-mode + */ + +/* @import "@ionic/angular/css/palettes/dark.always.css"; */ +/* @import "@ionic/angular/css/palettes/dark.class.css"; */ +@import '@ionic/angular/css/palettes/dark.system.css'; +``` + +This file enables [dark mode support](/docs/theming/dark-mode.md) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. + +#### 3. Update the App Component + +Update `src/app/app.html` to the following: + +```html title="src/app/app.html" + + + +``` + +Then, update `src/app/app.ts` to include the component imports: + +```ts title="src/app/app.ts" +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + imports: [IonApp, IonRouterOutlet], + templateUrl: './app.html', + styleUrl: './app.css', +}) +export class App {} +``` + +#### 4. Create a Home Page + +Start by adding a template at `src/app/home/home.html`: + +```html title="src/app/home/home.html" + + + Home + + + + + + + Home + + + +
+ Ready to create an app? +

+ Start with Ionic + UI Components +

+
+ +``` + +Then, create `src/app/home/home.ts` with the following: + +```ts title="src/app/home/home.ts" +import { Component } from '@angular/core'; +import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + imports: [IonContent, IonHeader, IonTitle, IonToolbar], + templateUrl: './home.html', + styleUrl: './home.css', +}) +export class HomePage {} +``` + +Finally, add a `src/app/home/home.css` file: + +```css title="src/app/home/home.css" +#container { + text-align: center; + + position: absolute; + left: 0; + right: 0; + top: 50%; + transform: translateY(-50%); +} + +#container strong { + font-size: 20px; + line-height: 26px; +} + +#container p { + font-size: 16px; + line-height: 22px; + + color: #8c8c8c; + + margin: 0; +} + +#container a { + text-decoration: none; +} +``` + +#### 5. Set up Routing + +Update `src/app/app.routes.ts` to add a `home` route: + +```ts title="src/app/app.routes.ts" +import { Routes } from '@angular/router'; +import { HomePage } from './home/home'; + +export const routes: Routes = [ + { + path: '', + redirectTo: 'home', + pathMatch: 'full', + }, + { + path: 'home', + component: HomePage, + }, +]; +``` + +You're all set! Your Ionic Angular app is now configured with full Ionic page support. Run `ng serve` to start your development server and view your app. + +## Next Steps + +Now that you have Ionic Angular integrated into your project, check out: + + + + +

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

+ + + +

Explore Ionic's rich library of UI components for building beautiful apps.

+ + + +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

+ + + +

Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.

+ + + diff --git a/versioned_docs/version-v8/angular/build-options.md b/versioned_docs/version-v8/angular/build-options.md new file mode 100644 index 00000000000..857bc28a3cb --- /dev/null +++ b/versioned_docs/version-v8/angular/build-options.md @@ -0,0 +1,700 @@ +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Build Options + +Developers have two options for using Ionic components: Standalone or Modules. This guide covers both options as well as the benefits and downsides of each approach. + +While the Standalone approach is newer and makes use of more modern Angular APIs, the Modules approach will continue to be supported in Ionic. Most of the Angular examples on this documentation website use the Modules approach. + +## Standalone + +:::info +Ionic UI components as Angular standalone components is supported starting in Ionic v7.5. +::: + +### Overview + +Developers can use Ionic components as standalone components to take advantage of treeshaking and newer Angular features. This option involves importing specific Ionic components in the Angular components you want to use them in. Developers can use Ionic standalone components even if their Angular application is NgModule-based. + +Refer to the [Standalone Migration Guide](#migrating-from-modules-to-standalone) for instructions on how to update your Ionic app to make use of Ionic standalone components. + +**Benefits** + +1. Enables treeshaking so the final build output only includes the code necessary to run your app which reduces overall build size. +2. Avoids the use of NgModules to streamline the development experience and make your code easier to understand. +3. Allows developers to also use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +**Drawbacks** + +1. Ionic components need to be imported into every Angular component they are used in which can be time consuming to set up. + +### Usage with Standalone-based Applications + +:::warning +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured when the Angular application calls `bootstrapApplication` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonButton, IonContent], +}) +export class HomePage { + constructor() {} +} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { IonIcon } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [IonIcon], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + standalone: true, + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + ], +}) +export class HomePage {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +**Testing** + +Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config: + + + + +```json + +"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"] +``` + + + + +```json + +"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"] +``` + + + + +### Usage with NgModule-based Applications + +:::warning +All Ionic imports should be imported from the `@ionic/angular/standalone` submodule. This includes imports such as components, directives, providers, and types. Importing from `@ionic/angular` may pull in lazy loaded Ionic code which can interfere with treeshaking. +::: + +**Bootstrapping and Configuration** + +Ionic Angular needs to be configured in the `providers` array of `app.module.ts` using the `provideIonicAngular` function. Developers can pass any [IonicConfig](../developing/config#ionicconfig) values as an object in this function. Note that `provideIonicAngular` needs to be called even if no custom config is passed. + +```typescript title="app.module.ts" +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { RouteReuseStrategy } from '@angular/router'; + +import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone'; + +import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, AppRoutingModule], + providers: [provideIonicAngular(), { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +**Components** + +In the example below, we are importing `IonContent` and `IonButton` from `@ionic/angular/standalone` and passing them to `imports` array in the Angular component's NgModule for use in the component template. We would get a compiler error if these components were not imported and provided to the `imports` array. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { IonButton, IonContent } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [IonButton, IonContent, HomePageRoutingModule], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +**Icons** + +The icon SVG data needs to be defined in the Angular component so it can be loaded correctly. Developers can use the `addIcons` function from `ionicons` to map the SVG data to a string name. Developers can then reference the icon by its string name using the `name` property on `IonIcon`. The `IonIcon` component should be added in `app.module.ts` just like the other Ionic components. + +We recommend calling `addIcons` in the Angular component `constructor` so the data is only added if the Angular component is being used. + +For developers using Ionicons 7.2 or newer, passing only the SVG data will cause the string name to be automatically generated. + +```typescript title="home.page.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], +}) +export class HomePage { + constructor() { + /** + * On Ionicons 7.2+ this icon + * gets mapped to a "logo-ionic" key. + * Alternatively, developers can do: + * addIcons({ 'logo-ionic': logoIonic }); + */ + addIcons({ logoIonic }); + } +} +``` + +Icons can also be registered in entry points such as `app.component.ts` to avoid the need to call `addIcons` multiple times. Developers should be aware that the initial application chunk may increase because the registered icons will need to be loaded at application start. However, if your application uses a small number of icons the impact of this may be minimal. + +```typescript title="app.component.ts" +import { Component } from '@angular/core'; +import { addIcons } from 'ionicons'; +import { logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class AppComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ logoIonic }); + } +} +``` + +Icons registered in an application entry point can then be referenced by name anywhere in the application. + +```html title="home.page.html" + + +``` + +**Routing** + +Developers who wish to use `routerLink`, `routerAction`, or `routerDirection` on Ionic components should import the `IonRouterLink` directive. Developers who wish to use these routing features on anchor (``) elements should import `IonRouterLinkWithHref` instead. + +```typescript title="home.module.ts" +import { NgModule } from '@angular/core'; +import { RouterLink } from '@angular/router'; +import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + +@NgModule({ + imports: [ + IonButton, + RouterLink, // required to get base routerLink behavior for @angular/router + IonRouterLink, // use IonRouterLinkWithHref if you are using an element instead + HomePageRoutingModule, + ], + declarations: [HomePage], +}) +export class HomePageModule {} +``` + +```html title="home.page.html" +Go to Foo Page +``` + +**Testing** + +Ionic Angular's standalone components use ES Modules. As a result, developers using Jest should ensure that ES Modules are transpiled to a format that Jest can use. Developers using Jest should add the following to their Jest config: + + + + +```json + +"transformIgnorePatterns": ["/node_modules/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)/)"] +``` + + + + +```json + +"transformIgnorePatterns": ["/node_modules/.pnpm/(?!(@ionic/angular|@ionic/core|ionicons|@stencil/core|@angular/*)@)"] +``` + + + + +## Modules + +### Overview + +Developers can also use the Modules approach by importing `IonicModule` and calling `IonicModule.forRoot()` in the `imports` array in `app.module.ts`. This registers a version of Ionic where Ionic components will be lazily loaded at runtime. + +**Benefits** + +1. Since components are lazily loaded as needed, developers do not need to spend time manually importing and registering each Ionic component. + +**Drawbacks** + +1. Lazily loading Ionic components means that the compiler does not know which components are needed at build time. This means your final application bundle may be much larger than it needs to be. +2. Developers are unable to use newer Angular features such as [ESBuild](https://angular.io/guide/esbuild). + +### Usage + +In the example below, we are using `IonicModule` to create a lazily loaded version of Ionic. We can then reference any Ionic component without needing to explicitly import it. + +```typescript +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { IonicModule } from '@ionic/angular'; + +import { AppComponent } from './app.component'; + +@NgModule({ + declarations: [AppComponent], + imports: [BrowserModule, IonicModule.forRoot()], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +## Migrating from Modules to Standalone + +:::tip +Try our automated utility for migrating to standalone! + +See https://github.com/ionic-team/ionic-angular-standalone-codemods for instructions on how to get started. All issues related to the migration utility should be filed on the linked repo. +::: + +The Standalone option is newer than the Modules option, so developers may wish to switch during the development of their application. This guide details the steps needed to migrate. + +Migrating to Ionic standalone components must be done all at the same time and cannot be done gradually. The Modules and Standalone approaches use two different build systems of Ionic that cannot be used at the same time. + +Developers are encouraged to try the [automated migration utility](https://github.com/ionic-team/ionic-angular-standalone-codemods), though they can also follow the steps below if they would like to manually migrate their applications. + +### Standalone-based Applications + +Follow these steps if your Angular application is already using the standalone architecture, and you want to use Ionic UI components as standalone components too. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `main.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="main.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +bootstrapApplication(AppComponent, { + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ +- importProvidersFrom(IonicModule.forRoot({ mode: 'ios' })), ++ provideIonicAngular({ mode: 'ios' }), + provideRouter(routes), + ], +}); +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the Angular component where they are used. Be sure to pass the imports to the `imports` array on your Angular component. + +```diff title="app.component.ts" +import { Component } from '@angular/core'; ++ import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { IonIcon } from '@ionic/angular/standalone'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, ++ imports: [IonIcon], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], + standalone: true, + imports: [ + IonButton, ++ IonRouterLink + ], +}) +export class TestComponent {} +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` + +### NgModule-based Applications + +Follow these steps if your Angular application is still using the NgModule architecture, but you want to adopt Ionic UI components as standalone components now. + +1. Run `npm install @ionic/angular@latest` to ensure you are running the latest version of Ionic. Ionic UI Standalone Components is supported in Ionic v7.5 or newer. + +2. Run `npm install ionicons@latest` to ensure you are running the latest version of Ionicons. Ionicons v7.2 brings usability improvements that reduce the code boilerplate needed to use icons with standalone components. + +3. Remove the `IonicModule` call in `app.module.ts` in favor of `provideIonicAngular` imported from `@ionic/angular/standalone`. Any config passed to `IonicModule.forRoot` can be passed as an object to this new function. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; ++ import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, IonicModule.forRoot({ mode: 'ios' }), AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + /** + * The custom config serves as an example + * of how to pass a config to provideIonicAngular. + * You do not need to set "mode: 'ios'" to + * use Ionic standalone components. + */ ++ provideIonicAngular({ mode: 'ios' }), + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +4. Remove any references to `IonicModule` found elsewhere in your application. + +5. Update any existing imports from `@ionic/angular` to import from `@ionic/angular/standalone` instead. + +```diff +- import { Platform } from '@ionic/angular'; ++ import { Platform } from '@ionic/angular/standalone'; +``` + +6. Add imports for each Ionic component in the NgModule for the Angular component where they are used. Be sure to pass the components to the `imports` array on the module. + +```diff title="app.module.ts" +import { enableProdMode, importProvidersFrom } from '@angular/core'; +import { bootstrapApplication } from '@angular/platform-browser'; +import { RouteReuseStrategy, provideRouter } from '@angular/router'; +- import { provideIonicAngular, IonicRouteStrategy } from '@ionic/angular/standalone'; ++ import { provideIonicAngular, IonicRouteStrategy, IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +import { routes } from './app/app.routes'; +import { AppComponent } from './app/app.component'; + +@NgModule({ + declarations: [AppComponent], +- imports: [BrowserModule, AppRoutingModule], ++ imports: [BrowserModule, AppRoutingModule, IonApp, IonRouterOutlet], + providers: [ + { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, + provideIonicAngular({ mode: 'ios' }) + ], + bootstrap: [AppComponent], +}) +export class AppModule {} +``` + +For example, all modules that are using Ionic components need to have the Ionic components imported in their component module. + +```diff title="home.module.ts" +import { NgModule } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { FormsModule } from '@angular/forms'; +import { HomePage } from './home.page'; + +import { HomePageRoutingModule } from './home-routing.module'; + ++ import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + HomePageRoutingModule, ++ IonContent, ++ IonHeader, ++ IonTitle, ++ IonToolbar + ], + declarations: [HomePage] +}) +export class HomePageModule {} +``` + +7. If you are using Ionicons, define the icon SVG data used in each Angular component using `addIcons`. This allows you to continue referencing icons by string name in your component template. Note that you will need to do this for any additional icons added. The `IonIcon` component should still be provided in the NgModule. + +```diff title="test.component.ts" +import { Component } from '@angular/core'; ++ import { addIcons } from 'ionicons'; ++ import { alarm, logoIonic } from 'ionicons/icons'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + styleUrls: ['app.component.scss'], +}) +export class TestComponent { + constructor() { ++ addIcons({ alarm, logoIonic }); + } +} +``` + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; ++ import { IonIcon } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ ++ IonIcon, + ], + declarations: [TestComponent] +}) +export class TestComponentModule {} +``` + +8. Remove the following code from your `angular.json` file if present. Note that it may appear multiple times. + +```diff title="angular.json" +- { +- "glob": "**/*.svg", +- "input": "node_modules/ionicons/dist/ionicons/svg", +- "output": "./svg" +- } +``` + +9. If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to import the `IonRouterLink` directive for Ionic components or `IonRouterLinkWithHref` directive for `` elements. + +```diff title="test.module.ts" +import { NgModule } from '@angular/core'; +import { TestComponent } from './test.component'; +- import { IonButton } from '@ionic/angular/standalone'; ++ import { IonButton, IonRouterLink } from '@ionic/angular/standalone'; + +@NgModule({ + imports: [ + IonButton, ++ IonRouterLink, + ], + declarations: [TestComponent] +}) +``` + +10. If you are using VSCode it is recommended to ignore the `@ionic/angular/common` and `@ionic/angular` module specifiers for import recommendations. + +```json title=".vscode/settings.json" +{ + "typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular"] +} +``` diff --git a/versioned_docs/version-v8/angular/injection-tokens.md b/versioned_docs/version-v8/angular/injection-tokens.md new file mode 100644 index 00000000000..c7c775fd69c --- /dev/null +++ b/versioned_docs/version-v8/angular/injection-tokens.md @@ -0,0 +1,177 @@ +--- +title: Angular Injection Tokens +sidebar_label: Injection Tokens +--- + + + Angular Injection Tokens | Access Ionic Elements via Dependency Injection + + + +Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically. + +## Benefits + +Using injection tokens provides several advantages: + +- **Type Safety**: Full TypeScript support with proper typing for the modal element +- **Angular Integration**: Works seamlessly with Angular's dependency injection system +- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references +- **Better Testing**: Easier to mock and test components that use injection tokens + +## IonModalToken + +The `IonModalToken` injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties. + +Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications. + +### Basic Usage + +To use the `IonModalToken`, inject it into your component's constructor: + +```tsx +import { Component, inject } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-modal', + template: ` + + + Modal Content + + + +

This is modal content

+ Close Modal + + `, + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton], +}) +export class ModalComponent { + private modalToken = inject(IonModalToken); + + closeModal() { + this.modalToken.dismiss(); + } +} +``` + +### Listening to Modal Events + +You can use the injected modal reference to listen to modal lifecycle events: + +```tsx +import { Component, inject, OnInit } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-modal', + template: ` + + + Modal with Events + + + +

Check the console for modal events

+ Close + + `, + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton], +}) +export class ModalComponent implements OnInit { + private modalToken = inject(IonModalToken); + + ngOnInit() { + this.modalToken.addEventListener('ionModalWillDismiss', (event) => { + console.log('Modal will dismiss:', event.detail); + }); + + this.modalToken.addEventListener('ionModalDidDismiss', (event) => { + console.log('Modal did dismiss:', event.detail); + }); + } + + closeModal() { + this.modalToken.dismiss({ result: 'closed by button' }); + } +} +``` + +### Accessing Modal Properties + +The injected modal reference provides access to all modal properties and methods: + +```tsx +import { Component, inject, OnInit } from '@angular/core'; +import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-modal', + template: ` + + + Modal Properties + + + +

Modal ID: {{ modalId }}

+ Toggle Backdrop Dismiss: {{ backdropDismiss }} + + `, + imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton], +}) +export class ModalComponent implements OnInit { + private modalToken = inject(IonModalToken); + + modalId = ''; + backdropDismiss = true; + + ngOnInit() { + this.modalId = this.modalToken.id || 'No ID'; + this.backdropDismiss = this.modalToken.backdropDismiss; + } + + toggleBackdropDismiss() { + this.backdropDismiss = !this.backdropDismiss; + this.modalToken.backdropDismiss = this.backdropDismiss; + } +} +``` + +### Opening a Modal with Injection Token Content + +When opening a modal that uses the injection token, you can pass the component directly to the modal controller: + +```tsx +import { Component, inject } from '@angular/core'; +import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone'; +import { ModalComponent } from './modal.component'; + +@Component({ + selector: 'app-home', + template: ` + + Open Modal + + `, +}) +export class HomePage { + private modalController = inject(ModalController); + + async openModal() { + const myModal = await this.modalController.create({ + component: ModalComponent, + componentProps: { + // Any props you want to pass to the modal content + }, + }); + + await myModal.present(); + } +} +``` diff --git a/versioned_docs/version-v8/angular/lifecycle.md b/versioned_docs/version-v8/angular/lifecycle.md new file mode 100644 index 00000000000..e56f65dbbf0 --- /dev/null +++ b/versioned_docs/version-v8/angular/lifecycle.md @@ -0,0 +1,103 @@ +--- +title: Ionic Page Life Cycle +sidebar_label: Lifecycle +--- + + + Angular Page Component Life Cycle - App Events Documentation + + + +This guide covers how the page life cycle works in an app built with Ionic and Angular. + +![Flowchart illustrating the Ionic page life cycle events and their sequence.](/img/guides/lifecycle/ioniclifecycle.png 'Ionic Lifecycle Diagram') + +## Angular Life Cycle Events + +Ionic embraces the life cycle events provided by Angular. The two Angular events you will find using the most are: + +| Event Name | Description | +| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `ngOnInit` | Fired once during component initialization. This event can be used to initialize local members and make calls into services that only need to be done once. | +| `ngOnDestroy` | Fired right before Angular destroys the view. Useful for cleanup like unsubscribing from observables. | + +For more info on the Angular Component Life Cycle events, visit their [component lifecycle docs](https://angular.io/guide/lifecycle-hooks). + +:::note +Components that use `ion-nav` or `ion-router-outlet` should not use the `OnPush` change detection strategy. Doing so will prevent lifecycle hooks such as `ngOnInit` from firing. Additionally, asynchronous state changes may not render properly. +::: + +## Ionic Page Events + +In addition to the Angular life cycle events, Ionic Angular provides a few additional events that you can use: + +| Event Name | Description | +| ------------------ | ------------------------------------------------------------------ | +| `ionViewWillEnter` | Fired when the component routing to is about to animate into view. | +| `ionViewDidEnter` | Fired when the component routing to has _finished_ animating. | +| `ionViewWillLeave` | Fired when the component routing _from_ is about to animate. | +| `ionViewDidLeave` | Fired when the component routing _from_ has _finished_ animating. | + +These lifecycles are only called on components directly mapped by a router. This means if `/pageOne` maps to `PageOneComponent`, then Ionic lifecycles will be called on `PageOneComponent` but will not be called on any child components that `PageOneComponent` may render. + +The difference between `ionViewWillEnter` and `ionViewDidEnter` is when they fire. The former fires right after `ngOnInit` but before the page transition begins, and the latter directly after the transition ends. + +For `ionViewWillLeave` and `ionViewDidLeave`, `ionViewWillLeave` gets called directly before the transition away from the current page begins, and `ionViewDidLeave` does not get called until after the new page gets successfully transitioned into (after the new pages `ionViewDidEnter` fires). + +![Animated GIF showing Ionic page life cycle events in a console log as a page transition occurs.](/img/guides/lifecycle/ioniclifecycle.gif 'Ionic Lifecycle Animation') + +## How Ionic Handles the Life of a Page + +Ionic has its router outlet, called ``. This outlet extends Angular's `` with some additional functionality to enable better experiences for mobile devices. + +When an app is wrapped in ``, Ionic treats navigation a bit differently. When you navigate to a new page, Ionic will keep the old page in the existing DOM, but hide it from your view and transition the new page. The reason we do this is two-fold: + +1. We can maintain the state of the old page (data on the screen, scroll position, etc..) +2. We can provide a smoother transition back to the page since it is already there and doesn't need to be recreated. + +Pages are only removed from the DOM when they are "popped", for instance, by pressing the back button in the UI or the browsers back button. + +Because of this special handling, the `ngOnInit` and `ngOnDestroy` methods might not fire when you would usually think they should. + +`ngOnInit` will only fire each time the page is freshly created, but not when navigated back to the page. For instance, navigating between each page in a tabs interface will only call each page's `ngOnInit` method once, but not on subsequent visits. `ngOnDestroy` will only fire when a page "popped". + +## Route Guards + +In Ionic 3, there were a couple of additional life cycle methods that were useful to control when a page could be entered (`ionViewCanEnter`) and left (`ionViewCanLeave`). These could be used to protect pages from unauthorized users and to keep a user on a page when you don't want them to leave (like during a form fill). + +These methods were removed in Ionic 4 in favor of using Angular's Route Guards. + +A route guard helps determine if a particular action can be taken against a route. They are classes that implement a certain interface. The `CanActivate` and `CanDeactivate` interfaces can be used to implement the same type of logic that the removed events `ionViewCanEnter` and `ionViewCanLeave` did. + +```tsx +@Injectable() +export class AuthGuard implements CanActivate { + constructor(private authService: AuthService) {} + + canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { + return this.authService.isAuthenticated(); + } +} +``` + +To use this guard, add it to the appropriate param in the route definition: + +```tsx +{ path: 'settings', canActivate: [AuthGuard], loadChildren: '...', } +``` + +For more info on how to use route guards, go to Angular's [router documentation](https://angular.io/guide/router). + +## Guidance for Each Life Cycle Method + +Below are some tips on use cases for each of the life cycle events. + +- `ngOnInit` - Initialize your component and load data from services that don't need refreshing on each subsequent visit. +- `ionViewWillEnter` - Since `ionViewWillEnter` is called every time the view is navigated to (regardless if initialized or not), it's a good method to load data from services. However, if your data comes back during the animation, it can start lots of DOM manipulation, which can cause some janky animations. +- `ionViewDidEnter` - If you encounter performance problems from using `ionViewWillEnter` when loading data, you can do your data calls in `ionViewDidEnter` instead. This event won't fire until after the page is visible by the user, however, so you might want to use either a loading indicator or a skeleton screen, so content doesn't flash in un-naturally after the transition is complete. +- `ionViewWillLeave` - Can be used for cleanup, like unsubscribing from observables. Since `ngOnDestroy` might not fire when you navigate from the current page, put your cleanup code here if you don't want it active while the screen is not in view. +- `ionViewDidLeave` - When this event fires, you know the new page has fully transitioned in, so any logic you might not normally do when the view is visible can go here. +- `ngOnDestroy` - Cleanup logic for your pages that you don't want to clean up in `ionViewWillLeave`. diff --git a/versioned_docs/version-v8/angular/navigation.md b/versioned_docs/version-v8/angular/navigation.md new file mode 100644 index 00000000000..964a4e0c05f --- /dev/null +++ b/versioned_docs/version-v8/angular/navigation.md @@ -0,0 +1,475 @@ +--- +title: Angular Navigation +sidebar_label: Navigation/Routing +--- + +import useBaseUrl from '@docusaurus/useBaseUrl'; + + + Angular Navigation: How Routing & Redirects Work in Angular Apps + + + +This guide covers how routing works in an app built with Ionic and Angular. + +The Angular Router is one of the most important libraries in an Angular application. Without it, apps would be single view/single context apps or would not be able to maintain their navigation state on browser reloads. With Angular Router, we can create rich apps that are linkable and have rich animations (when paired with Ionic of course). Let's walk through the basics of the Angular Router and how we can configure it for Ionic apps. + +## A simple Route + +For most apps, having some sort of route is often required. The most basic configuration looks a bit like this: + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, + ]) + ], +}) +``` + +The simplest breakdown for what we have here is a path/component lookup. When our app loads, the router kicks things off by reading the URL the user is trying to load. In our sample, our route looks for `''`, which is essentially our index route. So for this, we load the `LoginComponent`. Fairly straight forward. This pattern of matching paths with a component continues for every entry we have in the router config. But what if we wanted to load a different path on our initial load? + +## Handling Redirects + +For this we can use router redirects. Redirects work the same way that a typical route object does, but just includes a few different keys. + +```tsx +[ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]; +``` + +In our redirect, we look for the index path of our app. Then if we load that, we redirect to the `login` route. The last key of `pathMatch` is required to tell the router how it should look up the path. + +Since we use `full`, we're telling the router that we should compare the full path, even if ends up being something like `/route1/route2/route3`. Meaning that if we have: + +```tsx +{ path: '/route1/route2/route3', redirectTo: 'login', pathMatch: 'full' }, +{ path: 'login', component: LoginComponent }, +``` + +And load `/route1/route2/route3` we'll redirect. But if we loaded `/route1/route2/route4`, we won't redirect, as the paths don't match fully. + +Alternatively, if we used: + +```tsx +{ path: '/route1/route2', redirectTo: 'login', pathMatch: 'prefix' }, +{ path: 'login', component: LoginComponent }, +``` + +Then load both `/route1/route2/route3` and `/route1/route2/route4`, we'll be redirected for both routes. This is because `pathMatch: 'prefix'` will match only part of the path. + +## Navigating to different routes + +Talking about routes is good and all, but how does one actually navigate to said routes? For this, we can use the `routerLink` directive. Let's go back and take our simple router setup from earlier: + +```ts +RouterModule.forRoot([ + { path: '', component: LoginComponent }, + { path: 'detail', component: DetailComponent }, +]); +``` + +Now from the `LoginComponent`, we can use the following HTML to navigate to the detail route. + +```html + + + Login + + + + + Go to detail + +``` + +The important part here is the `ion-button` and `routerLink` directive. RouterLink works on a similar idea as typical `href`s, but instead of building out the URL as a string, it can be built as an array, which can provide more complicated paths. + +We also can programmatically navigate in our app by using the router API. + +```tsx +import { Component } from '@angular/core'; +import { Router } from '@angular/router'; + +@Component({ + ... +}) +export class LoginComponent { + + constructor(private router: Router){} + + navigate(){ + this.router.navigate(['/detail']) + } +} +``` + +Both options provide the same navigation mechanism, just fitting different use cases. + +### Navigating using LocationStrategy.historyGo + +Angular Router has a [LocationStrategy.historyGo](https://angular.io/api/common/LocationStrategy#historyGo) method that allows developers to move forward or backward through the application history. Let's walk through an example. + +Say you have the following application history: + +`/pageA` --> `/pageB` --> `/pageC` + +If you were to call `LocationStrategy.historyGo(-2)` on `/pageC`, you would be brought back to `/pageA`. If you then called `LocationStrategy.historyGo(2)`, you would be brought to `/pageC`. + +An key characteristic of `LocationStrategy.historyGo()` is that it expects your application history to be linear. This means that `LocationStrategy.historyGo()` should not be used in applications that make use of non-linear routing. Refer to [Linear Routing versus Non-Linear Routing](#linear-routing-versus-non-linear-routing) for more information. + +## Lazy loading routes + +Now the current way our routes are setup makes it so they are included in the same chunk as the root app.module, which is not ideal. Instead, the router has a setup that allows the components to be isolated to their own chunks. + +```tsx + +import { RouterModule } from '@angular/router'; + +@NgModule({ + imports: [ + ... + RouterModule.forRoot([ + { path: '', redirectTo: 'login', pathMatch: 'full' }, + { path: 'login', loadChildren: () => import('./login/login.module').then(m => m.LoginModule) }, + { path: 'detail', loadChildren: () => import('./detail/detail.module').then(m => m.DetailModule) } + ]) + ], +}) +``` + +While similar, the `loadChildren` property is a way to reference a module by using native import instead of a component directly. In order to do this though, we need to create a module for each of the components. + +```tsx +... +import { RouterModule } from '@angular/router'; +import { LoginComponent } from './login.component'; + +@NgModule({ + imports: [ + ... + RouterModule.forChild([ + { path: '', component: LoginComponent }, + ]) + ], +}) +``` + +:::note +We're excluding some additional content and only including the necessary parts. +::: + +Here, we have a typical Angular Module setup, along with a RouterModule import, but we're now using `forChild` and declaring the component in that setup. With this setup, when we run our build, we will produce separate chunks for both the app component, the login component, and the detail component. + +## Standalone Components + +Standalone components allow developers to lazy load a component on a route without having to declare the component to an Angular module. + +Developers can use the existing syntax for standalone component routing from Angular: + +```ts +@NgModule({ + imports: [ + RouterModule.forRoot([ + { + path: 'standalone-route', + loadComponent: () => import('./path/to/my-component.component').then((c) => c.MyComponent), + }, + ]), + ], +}) +export class AppRoutingModule {} +``` + +:::tip +If you are using `routerLink`, `routerDirection`, or `routerAction` be sure to also import the `IonRouterLink` directive for Ionic components or the `IonRouterLinkWithHref` directive for `` elements. An example of this is available in the [Ionic Angular Build Options docs](./build-options.md#migrating-from-modules-to-standalone). +::: + +To get started with standalone components [visit Angular's official docs](https://angular.io/guide/standalone-components). + +## Live Example + +If you would prefer to get hands on with the concepts and code described above, please checkout our [live example](https://stackblitz.com/edit/ionic-angular-routing?file=src/app/app-routing.module.ts) of the topics above on StackBlitz. + +## Linear Routing versus Non-Linear Routing + +### Linear Routing + +If you have built a web app that uses routing, you likely have used linear routing before. Linear routing means that you can move forward or backward through the application history by pushing and popping pages. + +The following is an example of linear routing in a mobile app: + + + +The application history in this example has the following path: + +`Accessibility` --> `VoiceOver` --> `Speech` + +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). + +The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. + +### Non-Linear Routing + +Non-linear routing is a concept that may be new to many web developers learning to build mobile apps with Ionic. + +Non-linear routing means that the view that the user should go back to is not necessarily the previous view that was displayed on the screen. + +The following is an example of non-linear routing: + + + +In the example above, we start on the `Originals` tab. Tapping a card brings us to the `Ted Lasso` view within the `Originals` tab. + +From here, we switch to the `Search` tab. Then, we tap the `Originals` tab again and are brought back to the `Ted Lasso` view. At this point, we have started using non-linear routing. + +Why is this non-linear routing? The previous view we were on was the `Search` view. However, pressing the back button on the `Ted Lasso` view should bring us back to the root `Originals` view. This happens because each tab in a mobile app is treated as its own stack. The [Working with Tabs](#working-with-tabs) sections goes over this in more detail. + +If tapping the back button simply called `LocationStrategy.historyGo(-1)` from the `Ted Lasso` view, we would be brought back to the `Search` view which is not correct. + +Non-linear routing allows for sophisticated user flows that linear routing cannot handle. However, certain linear routing APIs such as `LocationStrategy.historyGo()` cannot be used in this non-linear environment. This means that `LocationStrategy.historyGo()` should not be used when using tabs or nested outlets. + +### Which one should I choose? + +We recommend keeping your application as simple as possible until you need to add non-linear routing. Non-linear routing is very powerful, but it also adds a considerable amount of complexity to mobile applications. + +The two most common uses of non-linear routing is with tabs and nested `ion-router-outlet`s. We recommend only using non-linear routing if your application meets the tabs or nested router outlet use cases. + +For more on tabs, please refer to [Working with Tabs](#working-with-tabs). + +For more on nested router outlets, please refer to [Nested Routes](#nested-routes). + +## Shared URLs versus Nested Routes + +A common point of confusion when setting up routing is deciding between shared URLs or nested routes. This part of the guide will explain both and help you decide which one to use. + +### Shared URLs + +Shared URLs is a route configuration where routes have pieces of the URL in common. The following is an example of a shared URL configuration: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardMainPage, + }, + { + path: 'dashboard/stats', + component: DashboardStatsPage, + }, +]; +``` + +The above routes are considered "shared" because they reuse the `dashboard` piece of the URL. + +### Nested Routes + +Nested Routes is a route configuration where routes are listed as children of other routes. The following is an example of a nested route configuration: + +```tsx +const routes: Routes = [ + { + path: 'dashboard', + component: DashboardRouterOutlet, + children: [ + { + path: '', + component: DashboardMainPage, + }, + { + path: 'stats', + component: DashboardStatsPage, + }, + ], + }, +]; +``` + +The above routes are nested because they are in the `children` array of the parent route. Notice that the parent route renders the `DashboardRouterOutlet` component. When you nest routes, you need to render another instance of `ion-router-outlet`. + +### Which one should I choose? + +Shared URLs are great when you want to transition from page A to page B while preserving the relationship between the two pages in the URL. In our previous example, a button on the `/dashboard` page could transition to the `/dashboard/stats` page. The relationship between the two pages is preserved because of a) the page transition and b) the url. + +Nested routes should be used when you want to render content in outlet A while also rendering sub-content inside of a nested outlet B. The most common use case you will run into is tabs. When you load up a tabs Ionic starter application, the first `ion-router-outlet` renders the `ion-tab-bar` and `ion-tabs` components. The `ion-tabs` component renders another `ion-router-outlet` which is responsible for rendering the contents of each tab. + +There are very few use cases in which nested routes make sense in mobile applications. When in doubt, use the shared URL route configuration. We strongly caution against using nested routing in contexts other than tabs as it can quickly make navigating your app confusing. + +## Working with Tabs + +With Tabs, the Angular Router provides Ionic the mechanism to know what components should be loaded, but the heavy lifting is actually done by the tabs component. Let's walk through a simple example. + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +Here we have a "tabs" path that we load. In this example we call the path "tabs", but the name of the paths can be changed. They can be called whatever fits your app. In that route object, we can define a child route as well. In this example, the top level child route "tab1" acts as our "outlet", and can load additional child routes. For this example, we have a single sub-child-route, which just loads a new component. The markup for the tab is as follows: + +```html + + + + + Tab One + + + +``` + +If you've built apps with Ionic before, this should feel familiar. We create a `ion-tabs` component, and provide a `ion-tab-bar`. The `ion-tab-bar` provides a `ion-tab-button` with a `tab` property that is associated with the tab "outlet" in the router config. Note that the latest version of `@ionic/angular` no longer requires ``, but instead allows developers to fully customize the tab bar, and the single source of truth lives within the router configuration. + +### How Tabs in Ionic Work + +Each tab in Ionic is treated as an individual navigation stack. This means if you have three tabs in your application, each tab has its own navigation stack. Within each stack you can navigate forwards (push a view) and backwards (pop a view). + +This behavior is important to note as it is different than most tab implementations that are found in other web based UI libraries. Other libraries typically manage tabs as one single history stack. + +Since Ionic is focused on helping developers build mobile apps, the tabs in Ionic are designed to match native mobile tabs as closely as possible. As a result, there may be certain behaviors in Ionic's tabs that differ from tabs implementations in other UI libraries. Read on to learn more about some of these differences. + +### Child Routes within Tabs + +When adding additional routes to tabs you should write them as sibling routes with the parent tab as the path prefix. The example below defines the `/tabs/tab1/view` route as a sibling of the `/tabs/tab1` route. Since this new route has the `tab1` prefix, it will be rendered inside of the `Tabs` component, and Tab 1 will still be selected in the `ion-tab-bar`. + +```ts +const routes: Routes = [ + { + path: 'tabs', + component: TabsPage, + children: [ + { + path: 'tab1', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1.module').then((m) => m.Tab1PageModule), + }, + ], + }, + { + path: 'tab1/view', + children: [ + { + path: '', + loadChildren: () => import('../tab1/tab1view.module').then((m) => m.Tab1ViewPageModule), + }, + ], + }, + { + path: 'tab2', + children: [ + { + path: '', + loadChildren: () => import('../tab2/tab2.module').then((m) => m.Tab2PageModule), + }, + ], + }, + { + path: 'tab3', + children: [ + { + path: '', + loadChildren: () => import('../tab3/tab3.module').then((m) => m.Tab3PageModule), + }, + ], + }, + ], + }, + { + path: '', + redirectTo: '/tabs/tab1', + pathMatch: 'full', + }, +]; +``` + +### Switching Between Tabs + +Since each tab is its own navigation stack, it is important to note that these navigation stacks should never interact. This means that there should never be a button in Tab 1 that routes a user to Tab 2. In other words, tabs should only be changed by the user tapping a tab button in the tab bar. + +A good example of this in practice is the iOS App Store and Google Play Store mobile applications. These apps both provide tabbed interfaces, but neither one ever routes the user across tabs. For example, the "Games" tab in the iOS App Store app never directs users to the "Search" tab and vice versa. + +Let's go over a couple common mistakes that are made with tabs. + +**A Settings Tab That Multiple Tabs Reference** + +A common practice is to create a Settings view as its own tab. This is great if developers need to present several nested settings menus. However, other tabs should never try to route to the Settings tab. As we mentioned above, the only way that the Settings tab should be activated is by a user tapping the appropriate tab button. + +If you find that your tabs need to reference the Settings tab, we recommend making the Settings view a modal by using `ion-modal`. This is a practice found in the iOS App Store app. With this approach, any tab can present the modal without breaking the mobile tabs pattern of each tab being its own stack. + +The example below shows how the iOS App Store app handles presenting an "Account" view from multiple tabs. By presenting the "Account" view in a modal, the app can work within the mobile tabs best practices to show the same view across multiple tabs. + + + +**Reusing Views Across Tabs** + +Another common practice is to present the same view in multiple tabs. Developers often try to do this by having the view contained in a single tab, with other tabs routing to that tab. As we mentioned above, this breaks the mobile tabs pattern and should be avoided. + +Instead, we recommend having routes in each tab that reference the same component. This is a practice done in popular apps like Spotify. For example, you can access an album or podcast from the "Home", "Search", and "Your Library" tabs. When accessing the album or podcast, users stay within that tab. The app does this by creating routes per tab and sharing a common component in the codebase. + +The example below shows how the Spotify app reuses the same album component to show content in multiple tabs. Notice that each screenshot shows the same album but from a different tab. + +| Home Tab | Search Tab | +| :-------------------------------------------------: | :---------------------------------------------------: | +| | | diff --git a/versioned_docs/version-v8/angular/overlays.md b/versioned_docs/version-v8/angular/overlays.md new file mode 100644 index 00000000000..15863b5c022 --- /dev/null +++ b/versioned_docs/version-v8/angular/overlays.md @@ -0,0 +1,213 @@ +--- +title: Overlay Components +sidebar_label: Overlays +--- + + + Angular Overlay Components: Modals, Popovers with Custom Injectors + + + +Ionic provides overlay components such as modals and popovers that display content on top of your application. In Angular, these overlays can be created using controllers like `ModalController` and `PopoverController`. + +## Creating Overlays + +Overlays can be created programmatically using their respective controllers: + +```typescript +import { Component } from '@angular/core'; +import { ModalController } from '@ionic/angular/standalone'; +import { MyModalComponent } from './my-modal.component'; + +@Component({ + selector: 'app-home', + templateUrl: './home.component.html', +}) +export class HomeComponent { + constructor(private modalController: ModalController) {} + + async openModal() { + const modal = await this.modalController.create({ + component: MyModalComponent, + componentProps: { + title: 'My Modal', + }, + }); + await modal.present(); + } +} +``` + +## Custom Injectors + +By default, overlay components use the root injector for dependency injection. This means that services or tokens provided at the route level or within a specific component tree are not accessible inside the overlay. + +The `injector` option allows you to pass a custom Angular `Injector` when creating a modal or popover. This enables overlay components to access services and tokens that are not available in the root injector. + +### Use Cases + +Custom injectors are useful when you need to: + +- Access route-scoped services from within an overlay +- Use Angular CDK's `Dir` directive for bidirectional text support +- Access any providers that are not registered at the root level + +### Usage + +To use a custom injector, pass it to the `create()` method: + +```typescript +import { Component, Injector } from '@angular/core'; +import { ModalController } from '@ionic/angular/standalone'; +import { MyModalComponent } from './my-modal.component'; +import { MyRouteService } from './my-route.service'; + +@Component({ + selector: 'app-feature', + templateUrl: './feature.component.html', + providers: [MyRouteService], // Service provided at route level +}) +export class FeatureComponent { + constructor(private modalController: ModalController, private injector: Injector) {} + + async openModal() { + const modal = await this.modalController.create({ + component: MyModalComponent, + injector: this.injector, // Pass the component's injector + }); + await modal.present(); + } +} +``` + +The modal component can now inject `MyRouteService`: + +```typescript +import { Component, inject } from '@angular/core'; +import { MyRouteService } from '../my-route.service'; + +@Component({ + selector: 'app-my-modal', + templateUrl: './my-modal.component.html', +}) +export class MyModalComponent { + private myRouteService = inject(MyRouteService); +} +``` + +### Creating a Custom Injector + +You can also create a custom injector with specific providers: + +```typescript +import { Component, Injector } from '@angular/core'; +import { ModalController } from '@ionic/angular/standalone'; +import { MyModalComponent } from './my-modal.component'; +import { MyService } from './my.service'; + +@Component({ + selector: 'app-feature', + templateUrl: './feature.component.html', +}) +export class FeatureComponent { + constructor(private modalController: ModalController, private injector: Injector) {} + + async openModal() { + const myService = new MyService(); + myService.configure({ someOption: true }); + + const customInjector = Injector.create({ + providers: [{ provide: MyService, useValue: myService }], + parent: this.injector, + }); + + const modal = await this.modalController.create({ + component: MyModalComponent, + injector: customInjector, + }); + await modal.present(); + } +} +``` + +### Using with Angular CDK Directionality + +A common use case is providing the Angular CDK `Dir` directive to overlays for bidirectional text support: + +```typescript +import { Component, Injector } from '@angular/core'; +import { Dir } from '@angular/cdk/bidi'; +import { ModalController } from '@ionic/angular/standalone'; +import { MyModalComponent } from './my-modal.component'; + +@Component({ + selector: 'app-feature', + templateUrl: './feature.component.html', +}) +export class FeatureComponent { + constructor(private modalController: ModalController, private injector: Injector) {} + + async openModal() { + const modal = await this.modalController.create({ + component: MyModalComponent, + injector: this.injector, // Includes Dir from component tree + }); + await modal.present(); + } +} +``` + +### Popover Controller + +The `PopoverController` supports the same `injector` option: + +```typescript +import { Component, Injector } from '@angular/core'; +import { PopoverController } from '@ionic/angular/standalone'; +import { MyPopoverComponent } from './my-popover.component'; + +@Component({ + selector: 'app-feature', + templateUrl: './feature.component.html', +}) +export class FeatureComponent { + constructor(private popoverController: PopoverController, private injector: Injector) {} + + async openPopover(event: Event) { + const popover = await this.popoverController.create({ + component: MyPopoverComponent, + event: event, + injector: this.injector, + }); + await popover.present(); + } +} +``` + +## Angular Options Types + +Ionic Angular exports its own `ModalOptions` and `PopoverOptions` types that extend the core options with Angular-specific properties like `injector`: + +- `ModalOptions` - Extends core `ModalOptions` with the `injector` property +- `PopoverOptions` - Extends core `PopoverOptions` with the `injector` property + +These types are exported from `@ionic/angular` and `@ionic/angular/standalone`: + +```typescript +import type { ModalOptions, PopoverOptions } from '@ionic/angular/standalone'; +``` + +## Docs for Overlays in Ionic + +For full docs and usage examples, visit the docs page for each of the overlays in Ionic: + +- [Action Sheet](https://ionicframework.com/docs/api/action-sheet) +- [Alert](https://ionicframework.com/docs/api/alert) +- [Loading](https://ionicframework.com/docs/api/loading) +- [Modal](https://ionicframework.com/docs/api/modal) +- [Picker](https://ionicframework.com/docs/api/picker) +- [Popover](https://ionicframework.com/docs/api/popover) +- [Toast](https://ionicframework.com/docs/api/toast) diff --git a/versioned_docs/version-v8/angular/overview.md b/versioned_docs/version-v8/angular/overview.md new file mode 100644 index 00000000000..6605cdbfd3a --- /dev/null +++ b/versioned_docs/version-v8/angular/overview.md @@ -0,0 +1,71 @@ +--- +title: 'Ionic Angular Overview' +sidebar_label: Overview +--- + + + Ionic Angular Overview | Angular Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. + +## Angular Version Support + +Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). + +## Angular Tooling + +Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +Before you begin, make sure you have [Node.js](https://nodejs.org/) (which includes npm) installed on your machine. + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type angular + +$ cd myApp +$ ionic serve █ +``` + +## Resources + + + + +

Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.

+ + + +

Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.

+ + + +

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

+ + + +

Explore Ionic's rich library of UI components for building beautiful apps.

+ + + +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

+ + + +

Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.

+ + + diff --git a/versioned_docs/version-v8/angular/performance.md b/versioned_docs/version-v8/angular/performance.md new file mode 100644 index 00000000000..de83b3af578 --- /dev/null +++ b/versioned_docs/version-v8/angular/performance.md @@ -0,0 +1,73 @@ +--- +title: Angular Performance +sidebar_label: Performance +--- + + + Angular Performance: Manage App Component Change with ngFor + + + +## \*ngFor with Ionic Components + +When using `*ngFor` with Ionic components, we recommend using Angular's `trackBy` option. This allows Angular to manage change propagation in a much more efficient way and only update the content inside of the component rather than re-create the component altogether. + +By using `trackBy` you can provide a stable identity for each loop element so Angular can track insertions and deletions within the iterator. Below is an example of how to use `trackBy`: + +**home.page.html** + +```html + + {{ item.value }} + +``` + +**home.component.ts** + +```tsx + +items = [ + { id: 0, value: 'Item 0' }, + { id: 1, value: 'Item 1' }, + ... +] + +trackItems(index: number, itemObject: any) { + return itemObject.id; +} +``` + +In this example, we have an array of objects called `items`. Each object contains a `value` and an `id`. Using `trackBy`, we pass a `trackItems` function which returns the `id` of each object. This `id` is used to provide a stable identity for each loop element. + +For more information, refer to the [Angular NgForOf change propagation documentation](https://angular.io/api/common/NgForOf#change-propagation). + +## From the Ionic Team + +[How to Lazy Load in Ionic Angular](https://ionicframework.com/blog/how-to-lazy-load-in-ionic-angular/) + +[Improved Perceived Performance with Skeleton Screens](https://ionicframework.com/blog/improved-perceived-performance-with-skeleton-screens/) + +## From the Angular Team + +[Build performant and progressive Angular apps](https://web.dev/angular) - web.dev + +## From the Community + +{/* cspell:disable */} + +[High Performance Animations in Ionic](https://www.joshmorony.com/high-performance-animations-in-ionic/) - Josh Morony + +[High Performance List Filtering in Ionic](https://www.joshmorony.com/high-performance-list-filtering-in-ionic-2/) - Josh Morony + +[Increasing Performance with Efficient DOM Writes in Ionic](https://www.joshmorony.com/increasing-performance-with-efficient-dom-writes-in-ionic-2/) - Josh Morony + +[Ionic Framework is Fast (But Your Code Might Not Be)](https://www.joshmorony.com/ionic-framework-is-fast-but-your-code-might-not-be/) - Josh Morony + +{/* cspell:enable */} + +:::note +Do you have a guide you'd like to share? Click the _Edit this page_ button below. +::: diff --git a/versioned_docs/version-v8/angular/platform.md b/versioned_docs/version-v8/angular/platform.md new file mode 100644 index 00000000000..3cd0d7833f3 --- /dev/null +++ b/versioned_docs/version-v8/angular/platform.md @@ -0,0 +1,246 @@ +--- +title: Platform +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Platform | Ionic Platform to Customize Apps to Fit Any Device + + + +The Platform service can be used to get information about your current device. You can get all of the platforms associated with the device using the `platforms` method, including whether the app is being viewed from a tablet, if it's on a mobile device or browser, and the exact platform (iOS, Android, etc). You can also get the orientation of the device, if it uses right-to-left language direction, and much much more. With this information you can completely customize your app to fit any device. + +## Usage + + + + +```tsx +import { Platform } from '@ionic/angular'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +```tsx +import { Platform } from '@ionic/angular/standalone'; + +@Component({...}) +export class MyPage { + constructor(public platform: Platform) { + + } +} +``` + + + + +## Methods + +### `is` + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Depending on the platform the user is on, `is(platformName)` will return true or false. Note that the same app can return true for more than one platform name. For example, an app running from an iPad would return true for the platform names: `mobile`, `ios`, `ipad`, and `tablet`. Additionally, if the app was running from Cordova then `cordova` would be true. | +| **Signature** | `is(platformName: Platforms) => boolean` | + +#### Parameters + +| Name | Type | Description | +| -------------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| `platformName` | `Platforms` | Name of the platform. Available options are android, capacitor, cordova, desktop, electron, hybrid, ios, ipad, iphone, mobile, phablet, pwa, tablet | + +#### Platforms + +Below is a table listing all the possible platform values along with corresponding descriptions. + +| Platform Name | Description | +| ------------- | ---------------------------------------- | +| android | a device running Android | +| capacitor | a device running Capacitor | +| cordova | a device running Cordova | +| desktop | a desktop device | +| electron | a desktop device running Electron | +| hybrid | a device running Capacitor or Cordova | +| ios | a device running iOS | +| ipad | an iPad device | +| iphone | an iPhone device | +| mobile | a mobile device | +| mobileweb | a web browser running in a mobile device | +| phablet | a phablet device | +| pwa | a PWA app | +| tablet | a tablet device | + +#### Customizing Platform Detection Functions + +The function used to detect a specific platform can be overridden by providing an alternative function in the global [Ionic config](../developing/config). Each function takes `window` as a parameter and returns a boolean. + +```tsx +import { IonicModule } from '@ionic/angular'; + +@NgModule({ + ... + imports: [ + BrowserModule, + IonicModule.forRoot({ + platform: { + /** The default `desktop` function returns false for devices with a touchscreen. + * This is not always wanted, so this function tests the User Agent instead. + **/ + 'desktop': (win) => { + const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(win.navigator.userAgent); + return !isMobile; + } + }, + }), + AppRoutingModule + ], + ... +}) +``` + +```ts +type PlatformConfig = { + android?: ((win: Window) => boolean) | undefined; + capacitor?: ((win: Window) => boolean) | undefined; + cordova?: ((win: Window) => boolean) | undefined; + desktop?: ((win: Window) => boolean) | undefined; + electron?: ((win: Window) => boolean) | undefined; + hybrid?: ((win: Window) => boolean) | undefined; + ios?: ((win: Window) => boolean) | undefined; + ipad?: ((win: Window) => boolean) | undefined; + iphone?: ((win: Window) => boolean) | undefined; + mobile?: ((win: Window) => boolean) | undefined; + mobileweb?: ((win: Window) => boolean) | undefined; + phablet?: ((win: Window) => boolean) | undefined; + pwa?: ((win: Window) => boolean) | undefined; + tablet?: ((win: Window) => boolean) | undefined; +}; +``` + +### `platforms` + +| | | +| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Depending on what device you are on, `platforms` can return multiple values. Each possible value is a hierarchy of platforms. For example, on an iPhone, it would return `mobile`, `ios`, and `iphone`. | +| **Signature** | `platforms() => string[]` | + +### `ready` + +| | | +| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Returns a promise when the platform is ready and native functionality can be called. If the app is running from within a web browser, then the promise will resolve when the DOM is ready. When the app is running from an application engine such as Cordova, then the promise will resolve when Cordova triggers the `deviceready` event. The resolved value is the `readySource`, which states the platform that was used.

For example, when Cordova is ready, the resolved ready source is `cordova`. The default ready source value will be `dom`. The `readySource` is useful if different logic should run depending on the platform the app is running from. For example, only Capacitor and Cordova can execute the status bar plugin, so the web should not run status bar plugin logic. | +| **Signature** | `ready() => Promise` | + +### `isRTL` + +| | | +| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Description** | Returns if this app is using right-to-left language direction or not. We recommend the app's `index.html` file already has the correct `dir` attribute value set, such as `` or ``. [W3C: Structural markup and right-to-left text in HTML](http://www.w3.org/International/questions/qa-html-dir) | +| **Signature** | `isRTL() => boolean` | + +### `isLandscape` + +| | | +| --------------- | ----------------------------------------------- | +| **Description** | Returns `true` if the app is in landscape mode. | +| **Signature** | `isLandscape() => boolean` | + +### `isPortrait` + +| | | +| --------------- | ---------------------------------------------- | +| **Description** | Returns `true` if the app is in portrait mode. | +| **Signature** | `isPortrait() => boolean` | + +### `width` + +| | | +| --------------- | -------------------------------------------------------------------- | +| **Description** | Gets the width of the platform's viewport using `window.innerWidth`. | +| **Signature** | `width() => number` | + +### `height` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Gets the height of the platform's viewport using `window.innerHeight`. | +| **Signature** | `height() => number` | + +### `url` + +| | | +| --------------- | -------------------- | +| **Description** | Get the current url. | +| **Signature** | `url() => string` | + +### `testUserAgent` + +| | | +| --------------- | ---------------------------------------------------------------------- | +| **Description** | Returns `true` if the expression is included in the user agent string. | +| **Signature** | `testUserAgent(expression: string) => boolean` | + +#### Parameters + +| Name | Type | Description | +| ---------- | ------ | ------------------------------------- | +| expression | string | The string to check in the user agent | + +## Events + +### `pause` + +The `pause` event emits when the native platform puts the application into the background, typically when the user switches to a different application. This event emits when a Cordova/Capacitor app is put into the background but doesn't fire in a standard web browser. + +#### Examples + +```tsx +this.platform.pause.subscribe(async () => { + alert('Pause event detected'); +}); +``` + +### `resize` + +The `resize` event emits when the browser window has changed dimensions. This could be from a browser window being physically resized, or from a device changing orientation. + +#### Examples + +```tsx +this.platform.resize.subscribe(async () => { + alert('Resize event detected'); +}); +``` + +### `resume` + +The `resume` event fires when the native platform pulls the application out from the background. This event emits when a Cordova/Capacitor app comes out from the background but doesn't fire in a standard web browser. + +#### Examples + +```tsx +this.platform.resume.subscribe(async () => { + alert('Resume event detected'); +}); +``` diff --git a/versioned_docs/version-v8/angular/pwa.md b/versioned_docs/version-v8/angular/pwa.md new file mode 100644 index 00000000000..47666c70309 --- /dev/null +++ b/versioned_docs/version-v8/angular/pwa.md @@ -0,0 +1,166 @@ +--- +title: Progressive Web Apps in Angular +sidebar_label: Progressive Web Apps +--- + + + Make Progressive Web Apps (PWA) in Angular - Ionic Tutorial + + + +## Making your Angular app a PWA + +The two main requirements of a PWA are a Service Worker and a Web Manifest. While it's possible to add both of these to an app manually, the Angular team has an `@angular/pwa` package that can be used to automate this. + +The `@angular/pwa` package will automatically add a service worker and an app manifest to the app. +To add this package to the app, run: + +```shell +ng add @angular/pwa +``` + +Once this package has been added run `ionic build --prod` and the `www` directory will be ready to deploy as a PWA. + +:::note +By default, the `@angular/pwa` package comes with the Angular logo for the app icons. Be sure to update the manifest to use the correct app name and also replace the icons. +::: + +:::note +Features like Service Workers and many JavaScript APIs (such as geolocation) require the app be hosted in a secure context. When deploying an app through a hosting service, be aware that HTTPS will be required to take full advantage of Service Workers. +::: + +## Service Worker configuration + +After `@angular/pwa` has been added, a new `ngsw-config.json` file will be created at the root of the project. This file is responsible for configuring how Angular's service worker mechanism will handle caching assets. By default, the following will be provided: + +```json +{ + "$schema": "./node_modules/@angular/service-worker/config/schema.json", + "index": "/index.html", + "assetGroups": [ + { + "name": "app", + "installMode": "prefetch", + "resources": { + "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"] + } + }, + { + "name": "assets", + "installMode": "lazy", + "updateMode": "prefetch", + "resources": { + "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"] + } + } + ] +} +``` + +There are two sections in here, one for app specific resources (JS, CSS, HTML) and assets the app will load on demand. Depending on your app, these options can be customized. For a more detailed guide, read [the official guide from the Angular Team](https://angular.io/guide/service-worker-config). + +## Deploying + +### Firebase + +Firebase hosting provides many benefits for Progressive Web Apps, including fast response times thanks to CDNs, HTTPS enabled by default, and support for [HTTP2 push](https://firebase.googleblog.com/2016/09/http2-comes-to-firebase-hosting.html). + +First, if not already available, [create the project](https://console.firebase.google.com) in Firebase. + +Next, in a Terminal, install the Firebase CLI: + +```shell +npm install -g firebase-tools +``` + +:::note +If it's the first time you use firebase-tools, login to your Google account with `firebase login` command. +::: + +With the Firebase CLI installed, run `firebase init` within your Ionic project. The CLI prompts: + +**"Which Firebase CLI features do you want to set up for this folder?"** Choose "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys". + +Create a new Firebase project or select an existing one. + +**"Select a default Firebase project for this directory:"** Choose the project you created on the Firebase website. + +**"What do you want to use as your public directory?"** Enter "www". + +:::note +Answering this next question will ensure that routing, hard reload, and deep linking work in the app: +::: + +**Configure as a single-page app (rewrite all urls to /index.html)?"** Enter "Yes". + +**"File build/index.html already exists. Overwrite?"** Enter "No". + +**Set up automatic builds and deploys with Github?** Enter "Yes". + +**For which GitHub repository would you like to set up a Github Workflow?** Enter your project name. + +**Set up the workflow to run a build script before every deploy?** Enter "Yes". + +**What script should be run before every deploy?** Enter `npm ci && npm run build`. + +**Set up automatic deployment to your sites live channel when a PR is merged?** Enter "Yes". + +**What is the name of the get hooked branch associated with your sites live channel?** Enter your project's main branch name. + +A `firebase.json` config file is generated, configuring the app for deployment. + +The last thing needed is to make sure caching headers are being set correctly. To do this, add a `headers` snippet to the `firebase.json` file. The complete `firebase.json` looks like: + +```json +{ + "hosting": { + "public": "www", + "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ], + "headers": [ + { + "source": "/build/app/**", + "headers": [ + { + "key": "Cache-Control", + "value": "public, max-age=31536000" + } + ] + }, + { + "source": "ngsw-worker.js", + "headers": [ + { + "key": "Cache-Control", + "value": "no-cache" + } + ] + } + ] + } +} +``` + +For more information about the `firebase.json` properties, refer to the [Firebase documentation](https://firebase.google.com/docs/hosting/full-config#section-firebase-json). + +Next, build an optimized version of the app by running: + +```shell +ionic build --prod +``` + +Last, deploy the app by running: + +```shell +firebase deploy +``` + +After this completes, the app will be live. diff --git a/versioned_docs/version-v8/angular/quickstart.md b/versioned_docs/version-v8/angular/quickstart.md new file mode 100644 index 00000000000..f937ed99ee6 --- /dev/null +++ b/versioned_docs/version-v8/angular/quickstart.md @@ -0,0 +1,441 @@ +--- +title: Ionic Angular Quickstart +sidebar_label: Quickstart +--- + + + Ionic Angular Quickstart Using Ionic CLI: Angular Basics + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +Welcome! This guide will walk you through the basics of Ionic Angular development. You'll learn how to set up your development environment, generate a simple project, explore the project structure, and understand how Ionic components work. This is perfect for getting familiar with Ionic Angular before building your first real app. + +If you're looking for a high-level overview of what Ionic Angular is and how it fits into the Angular ecosystem, refer to the [Ionic Angular Overview](overview). + +## Prerequisites + +Before you begin, make sure you have Node.js and npm installed on your machine. +You can check by running: + +```shell +node -v +npm -v +``` + +If you don't have Node.js and npm, [download Node.js](https://nodejs.org/en/download) (which includes npm). + +## Create a Project with the Ionic CLI + +First, install the latest [Ionic CLI](../cli): + +```shell +npm install -g @ionic/cli +``` + +Then, run the following commands to create and run a new project: + +```shell +ionic start myApp blank --type angular + +cd myApp +ionic serve +``` + +At the first prompt, choose `Standalone`. + +After running `ionic serve`, your project will open in the browser. + +![Screenshot of the Ionic Angular Home page](/img/guides/quickstart/home-page.png 'Ionic Angular Home Component') + +## Explore the Project Structure + +Your new app's directory will look like this: + +```shell +└── src/ + └── app + ├── app.component.html + ├── app.component.scss + ├── app.component.ts + ├── app.routes.ts + └── home/ + ├── home.page.html + ├── home.page.scss + ├── home.page.spec.ts + └── home.page.ts +``` + +:::info +All file paths in the examples below are relative to the project root directory. +::: + +Let's walk through these files to understand the app's structure. + +## View the App Component + +The root of your app is defined in `app.component.ts`: + +```ts title="src/app/app.component.ts" +import { Component } from '@angular/core'; +import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-root', + templateUrl: 'app.component.html', + imports: [IonApp, IonRouterOutlet], +}) +export class AppComponent { + constructor() {} +} +``` + +And its template in `app.component.html`: + +```html title="src/app/app.component.html" + + + +``` + +This sets up the root of your application, using Ionic's `ion-app` and `ion-router-outlet` components. The router outlet is where your pages will be displayed. + +## View Routes + +Routes are defined in `app.routes.ts`: + +```ts title="src/app/app.routes.ts" +import { Routes } from '@angular/router'; + +export const routes: Routes = [ + { + path: 'home', + loadComponent: () => import('./home/home.page').then((m) => m.HomePage), + }, + { + path: '', + redirectTo: 'home', + pathMatch: 'full', + }, +]; +``` + +When you visit the root URL (`/`), the `HomePage` component will be loaded. + +## View the Home Page + +The Home page component, defined in `home.page.ts`, imports the Ionic components it uses: + +```ts title="src/app/home/home.page.ts" +import { Component } from '@angular/core'; +import { IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-home', + templateUrl: 'home.page.html', + styleUrls: ['home.page.scss'], + imports: [IonHeader, IonToolbar, IonTitle, IonContent], +}) +export class HomePage { + constructor() {} +} +``` + +And the template, in the `home.page.html` file, uses those components: + +```html title="src/app/home/home.page.html" + + + Blank + + + + + + + Blank + + + +
+ Ready to create an app? +

+ Start with Ionic + UI Components +

+
+ +``` + +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays on iOS devices when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. + +:::tip[Learn More] +For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. +::: + +## Add an Ionic Component + +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`: + +```html title="src/app/home/home.page.html" + + + + Navigate + +``` + +Then, import the `IonButton` component in `home.page.ts`: + +```ts title="src/app/home/home.page.ts" +import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + // ...existing config... + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar], +}) +``` + +## Add a New Page + +To add a new page, generate it with the CLI: + +```shell +ionic generate page new +``` + +A route will be automatically added to `app.routes.ts`. + +In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md): + +```html title="src/app/new/new.page.html" + + + + + + new + + +``` + +And import `IonBackButton` and `IonButtons` in `new.page.ts`: + +```ts title="src/app/new/new.page.ts" +import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; + +@Component({ + // ...existing config... + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar], +}) +``` + +The `ion-back-button` will automatically handle navigation back to the previous page, or to `/` if there is no history. + +## Navigate to the New Page + +To navigate to the new page, update the button in `home.page.html`: + +```html title="src/app/home/home.page.html" +Navigate +``` + +Then, import `RouterLink` in `home.page.ts`: + +```ts title="src/app/home/home.page.ts" +import { RouterLink } from '@angular/router'; + +@Component({ + // ...existing config... + imports: [IonButton, IonContent, IonHeader, IonTitle, IonToolbar, RouterLink], +}) +``` + +:::info +Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information. +::: + +## Add Icons to the New Page + +Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`: + +```html title="src/app/new/new.page.html" + + + + + + +``` + +You'll also need to import and register these icons in `new.page.ts`: + +```ts title="src/app/new/new.page.ts" +// ...existing imports... +import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar } from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { heart, logoIonic } from 'ionicons/icons'; + +@Component({ + // ...existing config... + imports: [IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonTitle, IonToolbar], +}) +``` + +Then, update the constructor of the page to use `addIcons`: + +```ts title="src/app/new/new.page.ts" +export class NewPage implements OnInit { + constructor() { + addIcons({ heart, logoIonic }); + } + + ngOnInit() {} +} +``` + +Alternatively, you can register icons in `app.component.ts` to use them throughout your app. + +For more information, refer to the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). + +## Call Component Methods + +Let's add a button that can scroll the content area to the bottom. + +Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons: + +```html title="src/app/new/new.page.html" + + + + new + + + + + + + Scroll to Bottom + + + @for (item of items; track $index; let i = $index) { + + Item {{ i + 1 }} + + } + +``` + +In the component, add the `ViewChild` import, the new component imports and define the `scrollToBottom` function: + +```ts title="src/app/new/new.page.ts" +import { Component, OnInit, ViewChild } from '@angular/core'; +import { + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonTitle, + IonToolbar, +} from '@ionic/angular/standalone'; +import { addIcons } from 'ionicons'; +import { heart, logoIonic } from 'ionicons/icons'; + +@Component({ + // ...existing config... + imports: [ + IonBackButton, + IonButton, + IonButtons, + IonContent, + IonHeader, + IonIcon, + IonItem, + IonLabel, + IonTitle, + IonToolbar, + ], +}) +export class NewPage implements OnInit { + @ViewChild(IonContent) content!: IonContent; + + items = Array.from({ length: 50 }, (_, i) => i); + + constructor() { + addIcons({ heart, logoIonic }); + } + + ngOnInit() {} + + scrollToBottom = () => { + this.content.scrollToBottom(300); + }; +} +``` + +To call methods on Ionic components: + +1. Create a `ViewChild` reference for the component +2. Call the method directly on the component instance + +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. + +## Run on a Device + +Ionic's components work everywhere: on iOS, Android, and PWAs. To deploy to mobile, use [Capacitor](https://capacitorjs.com): + +```shell +ionic build +ionic cap add ios +ionic cap add android +``` + +Open the native projects in their IDEs: + +```shell +ionic cap open ios +ionic cap open android +``` + +Refer to [Capacitor's Getting Started guide](https://capacitorjs.com/docs/getting-started/with-ionic) for more. + +## Explore More + +This guide covered the basics of creating an Ionic Angular app, adding navigation, and introducing Capacitor for native builds. To dive deeper, check out: + + + + +

Build a real Photo Gallery app with Ionic Angular and native device features.

+ + + +

Learn more about Angular's core concepts, tools, and best practices from the official Angular documentation.

+ + + +

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

+ + + +

Explore Ionic's rich library of UI components for building beautiful apps.

+ + + +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

+ + + +

Explore how to access native device features and deploy your app to iOS, Android, and the web with Capacitor.

+ + + diff --git a/versioned_docs/version-v8/angular/slides.md b/versioned_docs/version-v8/angular/slides.md new file mode 100644 index 00000000000..5ce50aa09d9 --- /dev/null +++ b/versioned_docs/version-v8/angular/slides.md @@ -0,0 +1,366 @@ +--- +title: Migrating from ion-slides to Swiper.js +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + + + Set Up Swiper.js for Angular Slides [Example] | Ionic + + + +:::warning[Looking for `ion-slides`?] +`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below. +::: + +We recommend Swiper.js if you need a modern touch slider component. Swiper 9 introduced Swiper Element as a replacement for its Angular component, so this guide will go over how to get Swiper Element set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to Swiper Element. + +## Getting Started + +First, update to the latest version of Ionic: + +```shell +npm install @ionic/angular@latest +``` + +Once that is done, install the Swiper dependency in your project: + +```shell +npm install swiper@latest +``` + +Next, we need to add the `CUSTOM_ELEMENTS_SCHEMA`, which tells Angular that we will be using custom elements. This can be done in either `app.module.ts`, or the module file for the component where you will be using Swiper. + +```typescript +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; + +@NgModule({ + schemas: [..., CUSTOM_ELEMENTS_SCHEMA] +}); +... +``` + +Finally, we need to call Swiper's `register` function to globally register Swiper's custom elements. This should only be done once, so place it in `app.component.ts`. + +```typescript +import { register } from 'swiper/element/bundle'; + +register(); + +@Component({ + ... +}) +... +``` + +From there, we just have to replace `ion-slides` elements with `swiper-container` and `ion-slide` elements with `swiper-slide`. Note that these custom elements do not need to be imported, as calling `register` tells Angular about them on its own. + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +## Bundled vs. Core Versions + +By default, make sure you import the `register` function from `swiper/element/bundle`. This uses the bundled version of Swiper, which automatically includes all modules and stylesheets needed to run Swiper's various features. + +If you would like to use the Core version instead, which does not include additional modules automatically, refer to Swiper's core version and modules documentation. The rest of this migration guide will assume you are using the bundled version. + +## Swiping with Style + +To migrate over your CSS, first update your selectors to target the new custom elements instead: + +| ion-slides Selector | Swiper Selector | +| ------------------- | ------------------ | +| `ion-slides` | `swiper-container` | +| `ion-slide` | `swiper-slide` | + +If you were using the CSS custom properties found on `ion-slides`, below is a list of corresponding properties used in Swiper. + +| `ion-slides` CSS property | `swiper-container` CSS property | +| ---------------------------------- | ------------------------------------------- | +| `--bullet-background` | `--swiper-pagination-bullet-inactive-color` | +| `--bullet-background-active` | `--swiper-pagination-color` | +| `--progress-bar-background` | `--swiper-pagination-progressbar-bg-color` | +| `--progress-bar-background-active` | `--swiper-pagination-color` | +| `--scroll-bar-background` | `--swiper-scrollbar-bg-color` | +| `--scroll-bar-background-active` | `--swiper-scrollbar-drag-bg-color` | + +For additional custom CSS, because Swiper Element uses Shadow DOM encapsulation, styles will need to be injected into the Shadow DOM scope. Refer to Swiper's guide on injecting styles for instructions. + +### Additional `ion-slides` Styles + +The `ion-slides` component had additional styling that helped create a native look and feel. These styles are **not** required to use Swiper.js with Ionic, but if you would like to maintain the look of `ion-slides` as closely as possible, add the following CSS to your `global.scss`: + +```css +swiper-container { + --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc); + --swiper-pagination-color: var(--ion-color-primary, #0054e9); + --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25); + --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1); + --swiper-scrollbar-drag-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.5); +} + +swiper-slide { + display: flex; + position: relative; + + flex-direction: column; + flex-shrink: 0; + align-items: center; + justify-content: center; + + width: 100%; + height: 100%; + + font-size: 18px; + + text-align: center; + box-sizing: border-box; +} + +swiper-slide img { + width: auto; + max-width: 100%; + height: auto; + max-height: 100%; +} +``` + +## The IonicSlides Module + +With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic. + +It is recommended to review the [properties](https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/slides/IonicSlides.ts) set by `IonicSlides` and determine which ones you would like to customize. + +We can install the `IonicSlides` module by importing and passing it to the `modules` property of `swiper-container` as an array: + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```typescript +// home.page.ts + +import { IonicSlides } from '@ionic/angular/standalone'; + +@Component({ + ... +}) +export class HomePage { + swiperModules = [IonicSlides]; +} +``` + + + + +```html + + + ... +``` + +:::note +If you are using the Core version of Swiper and have installed additional modules, ensure that `IonicSlides` is the last module in the array. This will let it automatically customize the settings of modules such as Pagination, Scrollbar, Zoom, and more. +::: + +## Properties + +Swiper options should be provided as individual properties directly on the `` component. + +Let's say in an app with `ion-slides` we had the `slidesPerView` and `loop` options set: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To set these options as properties directly on `` we would do the following: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of property changes when going from `ion-slides` to Swiper Element: + +| Name | Notes | +| ------- | --------------------------------------------------------------------------------------------------------------------------------------- | +| options | Set each option as a property directly on the `` component. | +| mode | For different styles based upon the mode, you can target the slides with `.ios swiper-container` or `.md swiper-container` in your CSS. | +| pager | Use the `pagination` property instead. | + +:::note +All properties available in Swiper Element can be found in the Swiper API parameters documentation. +::: + +## Events + +Since the `swiper-container` component is not provided by Ionic Framework, event names will not have an `ionSlide` prefix to them. Additionally, all event names should be lowercase instead of camelCase. + +Let's say in an app with `ion-slides` we used the `ionSlideDidChange` event: + +```html + + Slide 1 + Slide 3 + Slide 3 + +``` + +To migrate, we would change the name of the event to `swiperslidechange`: + +```html + + Slide 1 + Slide 2 + Slide 3 + +``` + +Below is a full list of event name changes when going from `ion-slides` to Swiper Angular: + +| ion-slides Event | Swiper Event | +| ------------------------- | ---------------------------------- | +| `ionSlideWillChange` | `swiperslidechangetransitionstart` | +| `ionSlideDidChange` | `swiperslidechange` | +| `ionSlideDoubleTap` | `swiperdoubletap` | +| `ionSlideDrag` | `swiperslidermove` | +| `ionSlideNextStart` | `swiperslidenexttransitionstart` | +| `ionSlideNextEnd` | `swiperslidenexttransitionend` | +| `ionSlidePrevStart` | `swiperslideprevtransitionstart` | +| `ionSlidePrevEnd` | `swiperslideprevtransitionend` | +| `ionSlideReachStart` | `swiperreachbeginning` | +| `ionSlideReachEnd` | `swiperreachend` | +| `ionSlideTap` | `swipertap` | +| `ionSlideTouchStart` | `swipertouchstart` | +| `ionSlideTouchEnd` | `swipertouchend` | +| `ionSlideTransitionStart` | `swipertransitionstart` | +| `ionSlideTransitionEnd` | `swipertransitionend` | +| `ionSlidesDidLoad` | `swiperinit` | + +:::note +All events available in Swiper Element can be found in the Swiper API events documentation and should be lowercased and prefixed with the word `swiper`. +::: + +## Methods + +Most methods have been removed in favor of directly accessing the properties of the Swiper instance. To access the Swiper instance, first get a reference to the `` element (such as through `ViewChild`), then access its `swiper` prop: + +```html + + + + Slide 1 + Slide 2 + Slide 3 + +``` + +```typescript +// slides.component.ts + +import { ..., ElementRef, ViewChild } from '@angular/core'; + +@Component({ + ... +}) +export class SlidesExample { + @ViewChild('swiper') + swiperRef: ElementRef | undefined; + + logActiveIndex() { + console.log(this.swiperRef?.nativeElement.swiper.activeIndex); + } +} +``` + +Below is a full list of method changes when going from `ion-slides` to Swiper Element: + +| ion-slides Method | Notes | +| -------------------- | ------------------------------------------------------------------------------------ | +| `getActiveIndex()` | Use the `activeIndex` property instead. | +| `getPreviousIndex()` | Use the `previousIndex` property instead. | +| `getSwiper()` | Get a reference to the Swiper instance using the `swiper` prop. See example above. | +| `isBeginning()` | Use the `isBeginning` property instead. | +| `isEnd()` | Use the `isEnd` property instead. | +| `length()` | Use the `slides` property instead. (i.e swiper.slides.length) | +| `lockSwipeToNext()` | Use the `allowSlidesNext` property instead. | +| `lockSwipeToPrev()` | Use the `allowSlidePrev` property instead. | +| `lockSwipes()` | Use the `allowSlideNext`, `allowSlidePrev`, and `allowTouchMove` properties instead. | +| `startAutoplay()` | Use the `autoplay` property instead. | +| `stopAutoplay()` | Use the `autoplay` property instead. | + +:::note +All methods and properties available on the Swiper instance can be found in the Swiper API methods and properties documentation. +::: + +## Effects + +Effects such as Cube or Fade can be used in Swiper Element with no additional imports, as long as you are using the bundled version of Swiper. For example, the below code will cause the slides to have a flip transition effect: + +```html + ... +``` + +:::note +For more information on effects in Swiper, please refer to the Swiper API fade effect documentation. +::: + +## Wrap Up + +Now that you have Swiper installed, there is a whole set of new Swiper features for you to enjoy. We recommend starting with the Swiper Element documentation and then referencing the Swiper API docs. + +## FAQ + +### Where can I find an example of this migration? + +You can find a sample app with `ion-slides` and the equivalent Swiper usage at https://github.com/ionic-team/slides-migration-samples. + +### Where can I get help with this migration? + +If you are running into issues with the migration, please create a post on the [Ionic Forum](https://forum.ionicframework.com/). + +### Where do I file bug reports? + +Before opening an issue, please consider creating a post on the Swiper Discussion Board or the Ionic Forum to check if your issue can be resolved by the community. + +If you are running into problems with the Swiper library, new bugs should be filed on the Swiper issue tracker. + +If you are running into problems with the `IonicSlides` module, new bugs should be filed on the Ionic Framework issue tracker. diff --git a/versioned_docs/version-v8/angular/storage.md b/versioned_docs/version-v8/angular/storage.md new file mode 100644 index 00000000000..b7774589e80 --- /dev/null +++ b/versioned_docs/version-v8/angular/storage.md @@ -0,0 +1,50 @@ +--- +title: Data Storage +sidebar_label: Storage +--- + + + Angular App Data Storage Options - Ionic Documentation + + + +There are a variety of options available for storing data within an Ionic application. It is best to choose options that best fit the needs of your application. A single application may have requirements that span multiple options. + +:::info +Some storage options involve third-party plugins or products. In such cases, we neither endorse nor support those plugins or products. We are mentioning them here for informational purposes only. +::: + +Here are some common use cases and solutions: + +## Local Application Settings and Data + +Many applications need to locally store settings as well as other lightweight key/value data. The [Capacitor Preferences](https://capacitorjs.com/docs/apis/preferences) plugin is specifically designed to handle these scenarios. + +## Relational Data Storage (Mobile Only) + +Some applications, especially those following an offline-first methodology, may require locally storing high volumes of complex relational data. For such scenarios, a SQLite plugin may be used. The most common SQLite plugin offerings are: + +- [Cordova SQLite Storage](https://github.com/storesafe/cordova-sqlite-storage) (a [convenience wrapper](https://danielsogl.gitbook.io/awesome-cordova-plugins/sqlite) also exists for this plugin to aid in implementation) +- [Capacitor Community SQLite Plugin](https://github.com/capacitor-community/sqlite) + +## Non-Relational High Volume Data Storage (Mobile and Web) + +For applications that need to store a high volume of data as well as operate on both web and mobile, a potential solution is to create a key/value pair data storage service that uses [indexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) on the web and one of the previously mentioned SQLite plugins on mobile. + +Here a sample of how this can be accomplished: + +- [Full application](https://github.com/ionic-enterprise/tutorials-and-demos-ng/tree/main/demos/sqlcipher-kv-pair) +- [Mobile Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/mobile-kv-store.ts) +- [Web Service](https://github.com/ionic-enterprise/tutorials-and-demos-ng/blob/main/demos/sqlcipher-kv-pair/src/app/core/web-kv-store.ts) + +## Other Options + +Other storage options that provide local as well as cloud-based storage that work well within Capacitor applications also exist and may integrate well with your application. + +For example: + +- [PouchDB](https://pouchdb.com/) +- [Firestore](https://firebase.google.com/docs/firestore) diff --git a/versioned_docs/version-v8/angular/testing.md b/versioned_docs/version-v8/angular/testing.md new file mode 100644 index 00000000000..e11d91d4b04 --- /dev/null +++ b/versioned_docs/version-v8/angular/testing.md @@ -0,0 +1,621 @@ +--- +title: Testing +--- + + + Angular Unit and End-to-End Testing for Ionic App Components + + + +When an `@ionic/angular` application is generated using the Ionic CLI, it is automatically set up for unit testing and end-to-end testing of the application. This is the same setup that is used by the Angular CLI. Refer to the Angular Testing Guide for detailed information on testing Angular applications. + +## Testing Principles + +When testing an application, it is best to keep in mind that testing can show if defects are present in a system. However, it is impossible to prove that any non-trivial system is completely free of defects. For this reason, the goal of testing is not to verify that the code is correct but to find problems within the code. This is a subtle but important distinction. + +If we set out to prove that the code is correct, we are more likely to stick to the happy path through the code. If we set out to find problems, we are more likely to more fully exercise the code and find the bugs that are lurking there. + +It is also best to begin testing an application from the very start. This allows defects to be found early in the process when they are easier to fix. This also allows code to be refactored with confidence as new features are added to the system. + +## Unit Testing + +Unit tests exercise a single unit of code (component, page, service, pipe, etc) in isolation from the rest of the system. Isolation is achieved through the injection of mock objects in place of the code's dependencies. The mock objects allow the test to have fine-grained control of the outputs of the dependencies. The mocks also allow the test to determine which dependencies have been called and what has been passed to them. + +Well-written unit tests are structured such that the unit of code and the features it contains are described via `describe()` callbacks. The requirements for the unit of code and its features are tested via `it()` callbacks. When the descriptions for the `describe()` and `it()` callbacks are read, they make sense as a phrase. When the descriptions for nested `describe()`s and a final `it()` are concatenated together, they form a sentence that fully describes the test case. + +Since unit tests exercise the code in isolation, they are fast, robust, and allow for a high degree of code coverage. + +### Using Mocks + +Unit tests exercise a code module in isolation. To facilitate this, we recommend using Jasmine (https://jasmine.github.io/). Jasmine creates mock objects (which Jasmine calls "spies") to take the place of dependencies while testing. When a mock object is used, the test can control the values returned by calls to that dependency, making the current test independent of changes made to the dependency. This also makes the test setup easier, allowing the test to only be concerned with the code within the module under test. + +Using mocks also allows the test to query the mock to determine if it was called and how it was called via the `toHaveBeenCalled*` set of functions. Tests should be as specific as possible with these functions, favoring calls to `toHaveBeenCalledTimes` over calls to `toHaveBeenCalled` when testing that a method has been called. That is `expect(mock.foo).toHaveBeenCalledTimes(1)` is better than `expect(mock.foo).toHaveBeenCalled()`. The opposite advice should be followed when testing that something has not been called (`expect(mock.foo).not.toHaveBeenCalled()`). + +There are two common ways to create mock objects in Jasmine. Mock objects can be constructed from scratch using `jasmine.createSpy` and `jasmine.createSpyObj` or spies can be installed onto existing objects using `spyOn()` and `spyOnProperty()`. + +#### Using `jasmine.createSpy` and `jasmine.createSpyObj` + +`jasmine.createSpyObj` creates a full mock object from scratch with a set of mock methods defined on creation. This is useful in that it is very simple. Nothing needs to be constructed or injected into the test. The disadvantage of using this function is that it allows the creation of objects that may not match the real objects. + +`jasmine.createSpy` is similar but it creates a stand-alone mock function. + +#### Using `spyOn()` and `spyOnProperty()` + +`spyOn()` installs the spy on an existing object. The advantage of using this technique is that if an attempt is made to spy on a method that does not exist on the object, an exception is raised. This prevents the test from mocking methods that do not exist. The disadvantage is that the test needs a fully formed object to begin with, which may increase the amount of test setup required. + +`spyOnProperty()` is similar with the difference being that it spies on a property and not a method. + +### General Testing Structure + +Unit tests are contained in `spec` files with one `spec` file per entity (component, page, service, pipe, etc.). The `spec` files live side-by-side with and are named after the source that they are testing. For example, if the project has a service called WeatherService, the code for it is in a file named `weather.service.ts` with the tests in a file named `weather.service.spec.ts`. Both of those files are in the same folder. + +The `spec` files themselves contain a single `describe` call that defines that overall test. Nested within it are other `describe` calls that define major areas of functionality. Each `describe` call can contain setup and teardown code (generally handled via `beforeEach` and `afterEach` calls), more `describe` calls forming a hierarchical breakdown of functionality, and `it` calls which define individual test cases. + +The `describe` and `it` calls also contain a descriptive text label. In well-formed tests, the `describe` and `it` calls combine with their labels to perform proper phrases and the full label for each test case, formed by combining the `describe` and `it` labels, creates a full sentence. + +For example: + +```tsx +describe('Calculation', () => { + describe('divide', () => { + it('calculates 4 / 2 properly' () => {}); + it('cowardly refuses to divide by zero' () => {}); + ... + }); + + describe('multiply', () => { + ... + }); +}); +``` + +The outer `describe` call states that the `Calculation` service is being tested, the inner `describe` calls state exactly what functionality is being tested, and the `it` calls state what the test cases are. When run the full label for each test case is a sentence that makes sense (Calculation divide cowardly refuses to divide by zero). + +### Pages and Components + +Pages are just Angular components. Thus, pages and components are both tested using Angular's Component Testing guidelines. + +Since pages and components contain both TypeScript code and HTML template markup it is possible to perform both component class testing and component DOM testing. When a page is created, the template test that is generated looks like this: + +```tsx +import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TabsPage } from './tabs.page'; + +describe('TabsPage', () => { + let component: TabsPage; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [TabsPage], + schemas: [CUSTOM_ELEMENTS_SCHEMA], + }).compileComponents(); + + fixture = TestBed.createComponent(TabsPage); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); +``` + +When doing component class testing, the component object is accessed using the component object defined via `component = fixture.componentInstance;`. This is an instance of the component class. When doing DOM testing, the `fixture.nativeElement` property is used. This is the actual `HTMLElement` for the component, which allows the test to use standard HTML API methods such as `HTMLElement.querySelector` in order to examine the DOM. + +### Waiting for Components + +When testing Ionic components, use the `componentOnReady` helper exported from `@ionic/core` rather than calling `el.componentOnReady()` directly. The `el.componentOnReady()` method only exists on lazy-loaded elements and calling it directly throws an error on custom-element builds, which is what standalone projects use. The helper handles both. It awaits the element's own `componentOnReady()` promise when that exists. Otherwise it waits one animation frame, giving the component's inner contents a chance to render. Wait for the callback before asserting against the rendered DOM or running accessibility tests. + +```tsx +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { componentOnReady } from '@ionic/core'; +import { HomePage } from './home.page'; + +describe('HomePage', () => { + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HomePage], + }).compileComponents(); + fixture = TestBed.createComponent(HomePage); + fixture.detectChanges(); + }); + + it('renders the submit button', async () => { + const button = fixture.nativeElement.querySelector('ion-button'); + await new Promise((resolve) => componentOnReady(button, () => resolve())); + expect(button.textContent).toContain('Submit'); + }); +}); +``` + +## Services + +Services often fall into one of two broad categories: utility services that perform calculations and other operations, and data services that perform primarily HTTP operations and data manipulation. + +### Basic Service Testing + +The suggested way to test most services is to instantiate the service and manually inject mocks for any dependency the service has. This way, the code can be tested in isolation. + +Let's say that there is a service with a method that takes an array of timecards and calculates net pay. Let's also assume that the tax calculations are handled via another service that the current service depends on. This payroll service could be tested as such: + +```tsx +import { PayrollService } from './payroll.service'; + +describe('PayrollService', () => { + let service: PayrollService; + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0 + }); + service = new PayrollService(taxServiceSpy); + }); + + describe('net pay calculations', () => { + ... + }); +}); +``` + +This allows the test to control the values returned by the various tax calculations via mock setup such as `taxServiceSpy.federalIncomeTax.and.returnValue(73.24)`. This allows the "net pay" tests to be independent of the tax calculation logic. When the tax codes change, only the tax service related code and tests need to change. The tests for the net pay can continue to operate as they are since these tests do not care how the tax is calculated, just that the value is applied properly. + +The scaffolding that is used when a service is generated via `ionic g service name` uses Angular's testing utilities and sets up a testing module. Doing so is not strictly necessary. That code may be left in, however, allowing the service to be built manually or injected as such: + +```tsx +import { TestBed, inject } from '@angular/core/testing'; + +import { PayrollService } from './payroll.service'; +import { TaxService } from './tax.service'; + +describe('PayrolService', () => { + let taxServiceSpy; + + beforeEach(() => { + taxServiceSpy = jasmine.createSpyObj('TaxService', { + federalIncomeTax: 0, + stateIncomeTax: 0, + socialSecurity: 0, + medicare: 0, + }); + TestBed.configureTestingModule({ + providers: [PayrollService, { provide: TaxService, useValue: taxServiceSpy }], + }); + }); + + it('does some test where it is injected', inject([PayrollService], (service: PayrollService) => { + expect(service).toBeTruthy(); + })); + + it('does some test where it is manually built', () => { + const service = new PayrollService(taxServiceSpy); + expect(service).toBeTruthy(); + }); +}); +``` + +#### Testing HTTP Data Services + +Most services that perform HTTP operations will use Angular's HttpClient service in order to perform those operations. For such tests, it is suggested to use Angular's `HttpClientTestingModule`. For detailed documentation of this module, please refer to Angular's Angular's Testing HTTP requests guide. + +This basic setup for such a test looks like this: + +```tsx +import { HttpBackend, HttpClient } from '@angular/common/http'; +import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'; +import { TestBed, inject } from '@angular/core/testing'; + +import { IssTrackingDataService } from './iss-tracking-data.service'; + +describe('IssTrackingDataService', () => { + let httpClient: HttpClient; + let httpTestingController: HttpTestingController; + let issTrackingDataService: IssTrackingDataService; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [HttpClientTestingModule], + providers: [IssTrackingDataService], + }); + + httpClient = TestBed.get(HttpClient); + httpTestingController = TestBed.get(HttpTestingController); + issTrackingDataService = new IssTrackingDataService(httpClient); + }); + + it('exists', inject([IssTrackingDataService], (service: IssTrackingDataService) => { + expect(service).toBeTruthy(); + })); + + describe('location', () => { + it('gets the location of the ISS now', () => { + issTrackingDataService.location().subscribe((x) => { + expect(x).toEqual({ longitude: -138.1719, latitude: 44.4423 }); + }); + const req = httpTestingController.expectOne('http://api.open-notify.org/iss-now.json'); + expect(req.request.method).toEqual('GET'); + req.flush({ + iss_position: { longitude: '-138.1719', latitude: '44.4423' }, + timestamp: 1525950644, + message: 'success', + }); + httpTestingController.verify(); + }); + }); +}); +``` + +### Pipes + +A pipe is like a service with a specifically defined interface. It is a class that contains one public method, `transform`, which manipulates the input value (and other optional arguments) in order to create the output that is rendered on the page. To test a pipe: instantiate the pipe, call the transform method, and verify the results. + +As a simple example, let's consider a pipe that takes a `Person` object and formats the name. For the sake of simplicity, let's say a `Person` consists of an `id`, `firstName`, `lastName`, and `middleInitial`. The requirements for the pipe are to print the name as "Last, First M." handling situations where a first name, last name, or middle initial do not exist. Such a test might look like this: + +```tsx +import { NamePipe } from './name.pipe'; + +import { Person } from '../../models/person'; + +describe('NamePipe', () => { + let pipe: NamePipe; + let testPerson: Person; + + beforeEach(() => { + pipe = new NamePipe(); + testPerson = { + id: 42, + firstName: 'Douglas', + lastName: 'Adams', + middleInitial: 'N', + }; + }); + + it('exists', () => { + expect(pipe).toBeTruthy(); + }); + + it('formats a full name properly', () => { + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas N.'); + }); + + it('handles having no middle initial', () => { + delete testPerson.middleInitial; + expect(pipe.transform(testPerson)).toBeEqual('Adams, Douglas'); + }); + + it('handles having no first name', () => { + delete testPerson.firstName; + expect(pipe.transform(testPerson)).toBeEqual('Adams N.'); + }); + + it('handles having no last name', () => { + delete testPerson.lastName; + expect(pipe.transform(testPerson)).toBeEqual('Douglas N.'); + }); +}); +``` + +It is also beneficial to exercise the pipe via DOM testing in the components and pages that utilize the pipe. + +## End-to-end Testing + +End-to-end testing is used to verify that an application works as a whole and often includes a connection to live data. Whereas unit tests focus on code units in isolation and thus allow for low-level testing of the application logic, end-to-end tests focus on various user stories or usage scenarios, providing high-level testing of the overall flow of data through the application. Whereas unit tests try to uncover problems with an application's logic, end-to-end tests try to uncover problems that occur when those individual units are used together. End-to-end tests uncover problems with the overall architecture of the application. + +Since end-to-end tests exercise user stories and cover the application as a whole rather than individual code modules, end-to-end tests exist in their own application in the project apart from the code for the main application itself. Most end-to-end tests operate by automating common user interactions with the application and examining the DOM to determine the results of those interactions. + +### Test Structure + +When an `@ionic/angular` application is generated, a default end-to-end test application is generated in the `e2e` folder. This application uses Protractor to control the browser and Jasmine to structure and execute the tests. The application initially consists of four files: + +- `protractor.conf.js` - the Protractor configuration file +- `tsconfig.e2e.json` - specific TypeScript configuration for the testing application +- `src/app.po.ts` - a page object containing methods that navigate the application, query elements in the DOM, and manipulate elements on the page +- `src/app.e2e-spec.ts` - a testing script + +#### Page Objects + +End-to-end tests operate by automating common user interactions with the application, waiting for the application to respond, and examining the DOM to determine the results of the interaction. This involves a lot of DOM manipulation and examination. If this were all done manually, the tests would be very brittle and difficult to read and maintain. + +Page objects encapsulate the HTML for a single page in a TypeScript class, providing an API that the test scripts use to interact with the application. The encapsulation of the DOM manipulation logic in page objects makes the tests more readable and far easier to reason about, lowering the maintenance costs of the test. Creating well-crafted page objects is the key to creating high quality and maintainable end-to-end tests. + +##### Base Page Object + +A lot of tests rely on actions such as waiting for a page to be visible, entering text into an input, and clicking a button. The methods used to do this remain consistent with only the CSS selectors used to get the appropriate DOM element changing. Therefore it makes sense to abstract this logic into a base class that can be used by the other page objects. + +Here is an example that implements a few basic methods that all page objects will need to support. + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; + +export class PageObjectBase { + private path: string; + protected tag: string; + + constructor(tag: string, path: string) { + this.tag = tag; + this.path = path; + } + + load() { + return browser.get(this.path); + } + + rootElement() { + return element(by.css(this.tag)); + } + + waitUntilInvisible() { + browser.wait(ExpectedConditions.invisibilityOf(this.rootElement()), 3000); + } + + waitUntilPresent() { + browser.wait(ExpectedConditions.presenceOf(this.rootElement()), 3000); + } + + waitUntilNotPresent() { + browser.wait(ExpectedConditions.not(ExpectedConditions.presenceOf(this.rootElement())), 3000); + } + + waitUntilVisible() { + browser.wait(ExpectedConditions.visibilityOf(this.rootElement()), 3000); + } + + getTitle() { + return element(by.css(`${this.tag} ion-title`)).getText(); + } + + protected enterInputText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('input')); + inp.sendKeys(text); + } + + protected enterTextareaText(sel: string, text: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + const inp = el.element(by.css('textarea')); + inp.sendKeys(text); + } + + protected clickButton(sel: string) { + const el = element(by.css(`${this.tag} ${sel}`)); + browser.wait(ExpectedConditions.elementToBeClickable(el)); + el.click(); + } +} +``` + +##### Per-Page Abstractions + +Each page in the application will have its own page object class that abstracts the elements on that page. If a base page object class is used, creating the page object involves mostly creating custom methods for elements that are specific to that page. Often, these custom elements take advantage of methods in the base class in order to perform the work that is required. + +Here is an example page object for a simple but typical login page. Notice that many of the methods, such as `enterEMail()`, call methods in the base class that perform the bulk of the work. + +```tsx +import { browser, by, element, ExpectedConditions } from 'protractor'; +import { PageObjectBase } from './base.po'; + +export class LoginPage extends PageObjectBase { + constructor() { + super('app-login', '/login'); + } + + waitForError() { + browser.wait(ExpectedConditions.presenceOf(element(by.css('.error'))), 3000); + } + + getErrorMessage() { + return element(by.css('.error')).getText(); + } + + enterEMail(email: string) { + this.enterInputText('#email-input', email); + } + + enterPassword(password: string) { + this.enterInputText('#password-input', password); + } + + clickSignIn() { + this.clickButton('#signin-button'); + } +} +``` + +#### Testing Scripts + +Similar to unit tests, end-to-end test scripts consist of nested `describe()` and `it()` functions. In the case of end-to-end tests, the `describe()` functions generally denote specific scenarios with the `it()` functions denoting specific behaviors that should be exhibited by the application as actions are performed within that scenario. + +Also similar to unit tests, the labels used in the `describe()` and `it()` functions should make sense both with the "describe" or "it" and when concatenated together to form the complete test case. + +Here is a sample end-to-end test script that exercises some typical login scenarios. + +```tsx +import { AppPage } from '../page-objects/pages/app.po'; +import { AboutPage } from '../page-objects/pages/about.po'; +import { CustomersPage } from '../page-objects/pages/customers.po'; +import { LoginPage } from '../page-objects/pages/login.po'; +import { MenuPage } from '../page-objects/pages/menu.po'; +import { TasksPage } from '../page-objects/pages/tasks.po'; + +describe('Login', () => { + const about = new AboutPage(); + const app = new AppPage(); + const customers = new CustomersPage(); + const login = new LoginPage(); + const menu = new MenuPage(); + const tasks = new TasksPage(); + + beforeEach(() => { + app.load(); + }); + + describe('before logged in', () => { + it('displays the login screen', () => { + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('allows in-app navigation to about', () => { + menu.clickAbout(); + about.waitUntilVisible(); + login.waitUntilInvisible(); + }); + + it('does not allow in-app navigation to tasks', () => { + menu.clickTasks(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('does not allow in-app navigation to customers', () => { + menu.clickCustomers(); + app.waitForPageNavigation(); + expect(login.rootElement().isDisplayed()).toEqual(true); + }); + + it('displays an error message if the login fails', () => { + login.enterEMail('test@test.com'); + login.enterPassword('bogus'); + login.clickSignIn(); + login.waitForError(); + expect(login.getErrorMessage()).toEqual('The password is invalid or the user does not have a password.'); + }); + + it('navigates to the tasks page if the login succeeds', () => { + login.enterEMail('test@test.com'); + login.enterPassword('testtest'); + login.clickSignIn(); + tasks.waitUntilVisible(); + }); + }); + + describe('once logged in', () => { + beforeEach(() => { + tasks.waitUntilVisible(); + }); + + it('allows navigation to the customers page', () => { + menu.clickCustomers(); + customers.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation to the about page', () => { + menu.clickAbout(); + about.waitUntilVisible(); + tasks.waitUntilInvisible(); + }); + + it('allows navigation back to the tasks page', () => { + menu.clickAbout(); + tasks.waitUntilInvisible(); + menu.clickTasks(); + tasks.waitUntilVisible(); + }); + }); +}); +``` + +### Configuration + +The default configuration uses the same `environment.ts` file that is used for development. In order to provide better control over the data used by the end-to-end tests, it is often useful to create a specific environment for testing and use that environment for the tests. This section shows one possible way to create this configuration. + +#### Testing Environment + +Setting up a testing environment involves creating a new environment file that uses a dedicated testing backend, updating the `angular.json` file to use that environment, and modifying the `e2e` script in the `package.json` to specify the `test` environment. + +##### Create the `environment.e2e.ts` File + +The Angular `environment.ts` and `environment.prod.ts` files are often used to store information such as the base URL for the application's backend data services. Create an `environment.e2e.ts` that provides the same information, only connecting to backend services that are dedicated to testing rather than the development or production backend services. Here is an example: + +```tsx +export const environment = { + production: false, + databaseURL: 'https://e2e-test-api.my-great-app.com', + projectId: 'my-great-app-e2e', +}; +``` + +##### Modify the `angular.json` File + +The `angular.json` file needs to be modified to use this file. This is a layered process. Follow the XPaths listed below to add the configuration that is required. + +Add a configuration at `/projects/app/architect/build/configurations` called `test` that does the file replacement: + +```json +"test": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.e2e.ts" + } + ] +} +``` + +Add a configuration at `/projects/app/architect/serve/configurations` called `test` that points the browser target at the `test` build configuration that was defined above. + +```json +"test": { + "browserTarget": "app:build:test" +} +``` + +Add a configuration at `/projects/app-e2e/architect/e2e/configurations` called `test` that does points the dev server target at the `test` serve configuration defined above. + +```json +"test": { + "devServerTarget": "app:serve:test" +} +``` + +##### Modify the `package.json` File + +Modify the `package.json` file so that `npm run e2e` uses the `test` configuration. + +```json +"scripts": { + "e2e": "ng e2e --configuration=test", + "lint": "ng lint", + "ng": "ng", + "start": "ng serve", + "test": "ng test", + "test:dev": "ng test --browsers=ChromeHeadlessCI", + "test:ci": "ng test --no-watch --browsers=ChromeHeadlessCI" +}, +``` + +#### Test Cleanup + +If the end-to-end tests modify data in any way it is helpful to reset the data to a known state once the test completes. One way to do that is to: + +1. Create an endpoint that performs the cleanup. +1. Add a `onCleanUp()` function to the `config` object exported by the `protractor.conf.js` file. + +Here is an example: + +```javascript +onCleanUp() { + const axios = require('axios'); + return axios + .post( + 'https://e2e-test-api.my-great-app.com/purgeDatabase', + {} + ) + .then(res => { + console.log(res.data); + }) + .catch(err => console.log(err)); +} +``` diff --git a/versioned_docs/version-v8/angular/virtual-scroll.md b/versioned_docs/version-v8/angular/virtual-scroll.md new file mode 100644 index 00000000000..77e73ae36a1 --- /dev/null +++ b/versioned_docs/version-v8/angular/virtual-scroll.md @@ -0,0 +1,133 @@ +# Virtual Scroll + +:::warning[Looking for `ion-virtual-scroll`?] + +`ion-virtual-scroll` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the `@angular/cdk` package detailed below. + +::: + +## Installation + +To setup the CDK Scroller, first install `@angular/cdk`: + +```shell +npm add @angular/cdk +``` + +This provides a collection of different utilities, but we'll focus on `ScrollingModule` for now. + +When we want to use the CDK Scroller, we'll need to import the module in our component. For example, in a tabs starter project, we can add our import to the `tabs1.module.ts` file. + +```diff + import { IonicModule } from '@ionic/angular'; + import { NgModule } from '@angular/core'; + import { CommonModule } from '@angular/common'; + import { FormsModule } from '@angular/forms'; + import { Tab1Page } from './tab1.page'; + import { ExploreContainerComponentModule } from '../explore-container/explore-container.module'; ++ import { ScrollingModule } from '@angular/cdk/scrolling'; + import { Tab1PageRoutingModule } from './tab1-routing.module'; + @NgModule({ + imports: [ + IonicModule, + CommonModule, + FormsModule, + ExploreContainerComponentModule, + Tab1PageRoutingModule, ++ ScrollingModule + ], + declarations: [Tab1Page] + }) + export class Tab1PageModule {} +``` + +With this added, we have access to the Virtual Scroller in the Tab1Page component. + +## Usage + +The CDK Virtual Scroller can be added to a component by adding the `cdk-virtual-scroll-viewport` to a component's template. + +```html + + + +``` + +`cdk-virtual-scroll-viewport` becomes the root of our scrollable content and is responsible for recycling DOM nodes as they scroll out of view. + +The DOM nodes at this point can be any content needed for an app. The difference is that when we want to iterate over a collection, `*cdkVirtualFor` is used instead of `*ngFor`. + +```html + + + + + + + + {{item }} + + + + +``` + +Here, `items` is an array, but it can be an array, `Observable`, or `DataSource`. `DataSource` is an abstract class that can provide the data needed as well as utility methods. For more details, check out the [CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). + +The component is not complete yet as the `cdk-virtual-scroll-viewport` needs to know how big each node will be as well as the min/max buffer sizes. + +At the moment, CDK Virtual Scroller only supports fixed sized elements, but dynamic sized elements are planned for the future. For the `Tab1Page` component, since it is only rendering an item, it can be hard-coded to a fixed size. + +The min/max buffer size tells the scroller "render as many nodes as it takes to meet this minimum height, but not over this". + +```html + +``` + +For this case, the `cdk-virtual-scroll-viewport` will render cells at a height 56px until it reaches a height of 900px, but no more at 1350px. These numbers are arbitrary, so be sure to test out what values will work in a real use case. + +Putting everything together, the final HTML should look like: + +```html + + + + + + + + {{item }} + + + + +``` + +The last piece needed is a some CSS to size the viewport correctly. In the `tab1.page.scss` file, add the following + +```scss +cdk-virtual-scroll-viewport { + height: 100%; + width: 100%; +} +``` + +Since the viewport is built to fit various use cases, the default sizing is not set and is up to developers to set. + +## Usage with Ionic Components + +Ionic Framework requires that features such as collapsible large titles, `ion-infinite-scroll`, `ion-refresher`, and `ion-reorder-group` be used within an `ion-content`. To use these experiences with virtual scrolling, you must add the `.ion-content-scroll-host` class to the virtual scroll viewport. + +For example: + +```html + + + + + +``` + +## Further Reading + +This only covers a small portion of what the CDK Virtual Scroller is capable of. For more details, please refer to the [Angular CDK Virtual Scrolling docs](https://material.angular.io/cdk/scrolling/overview). diff --git a/versioned_docs/version-v8/angular/your-first-app.md b/versioned_docs/version-v8/angular/your-first-app.md new file mode 100644 index 00000000000..f445e23054b --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app.md @@ -0,0 +1,238 @@ +--- +title: 'Your First Ionic App: Angular' +sidebar_label: Build Your First App +--- + + + Build Your First Ionic Mobile App with Angular | Ionic Capacitor Camera + + + +The great thing about Ionic is that with one codebase, you can build for any platform using just HTML, CSS, and JavaScript. Follow along as we learn the fundamentals of Ionic app development by creating a realistic app step by step. + +Here’s the finished app running on all 3 platforms: + + + +:::note +Looking for the previous version of this guide that covered Ionic 4 and Cordova? Refer to the [Ionic 4 and Cordova guide](../developer-resources/guides/first-app-v4/intro.md). +::: + +## What We'll Build + +We'll create a Photo Gallery app that offers the ability to take photos with your device's camera, display them in a grid, and store them permanently on the device. + +Highlights include: + +- One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.md). +- Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. +- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.md), [Filesystem](../native/filesystem.md), and [Preferences](../native/preferences.md) APIs. + +Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub. + +## Download Required Tools + +Download and install these right away to ensure an optimal Ionic development experience: + +- **Node.js** for interacting with the Ionic ecosystem. [Download the LTS version](https://nodejs.org/en/). +- **A code editor** for... writing code! We are fans of [Visual Studio Code](https://code.visualstudio.com/). +- **Command-line interface/terminal (CLI)**: + - **Windows** users: for the best Ionic experience, we recommend the built-in command line (cmd) or the Powershell CLI, running in Administrator mode. + - **Mac/Linux** users: virtually any terminal will work. + +## Install Ionic Tooling + +Run the following in the command line terminal to install the Ionic CLI (`ionic`), `native-run`, used to run native binaries on devices and simulators/emulators, and `cordova-res`, used to generate native app icons and splash screens: + +:::note +To open a terminal in Visual Studio Code, go to Terminal -> New Terminal. +::: + +```shell +npm install -g @ionic/cli native-run cordova-res +``` + +:::note +The `-g` option means _install globally_. When packages are installed globally, `EACCES` permission errors can occur. + +Consider setting up npm to operate globally without elevated permissions. Refer to [Resolving Permission Errors](../developing/tips.md#resolving-permission-errors) for more information. +::: + +## Create an App + +Next, create an Ionic Angular app that uses the "Tabs" starter template and adds Capacitor for native functionality: + +```shell +ionic start photo-gallery tabs --type=angular +``` + +:::note + +When prompted to choose between `NgModules` and `Standalone`, opt for `NgModules` as this tutorial follows the `NgModules` approach. + +::: + +This starter project comes complete with three pre-built pages and best practices for Ionic development. With common building blocks already in place, we can add more features easily! + +Next, change into the app folder: + +```shell +cd photo-gallery +``` + +Next we'll need to install the necessary Capacitor plugins to make the app's native functionality work: + +```shell +npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem +``` + +### PWA Elements + +Some Capacitor plugins, including the [Camera API](../native/camera.md), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). + +It's a separate dependency, so install it next: + +```shell +npm install @ionic/pwa-elements +``` + +Next, import `@ionic/pwa-elements` by editing `src/main.ts`. + +```ts +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { AppModule } from './app/app.module'; +// CHANGE: Add the following import +import { defineCustomElements } from '@ionic/pwa-elements/loader'; + +// CHANGE: Call the element loader before the `bootstrapModule` call +defineCustomElements(window); + +platformBrowserDynamic() + .bootstrapModule(AppModule) + .catch((err) => console.log(err)); +``` + +That’s it! Now for the fun part - let’s run the app. + +## Run the App + +Run this command next: + +```shell +ionic serve +``` + +And voilà! Your Ionic app is now running in a web browser. Most of your app can be built and tested right in the browser, greatly increasing development and testing speed. + +## Photo Gallery + +There are three tabs. Click on the "Tab2" tab. It’s a blank canvas, aka the perfect spot to transform into a Photo Gallery. The Ionic CLI features Live Reload, so when you make changes and save them, the app is updated immediately! + +![Animated GIF showing the live reload feature in an Ionic app, with changes in code immediately updating the app in a web browser.](/img/guides/first-app-cap-ng/email-photogallery.gif 'Live Reload Feature in Ionic App') + +Open `/src/app/tab2/tab2.page.html`. It contains: + +```html + + + Tab 2 + + + + + + + Tab 2 + + + + + +``` + +`ion-header` represents the top navigation and toolbar, with "Tab 2" as the title (there are two of them due to iOS [Collapsible Large Title](../api/title.md#collapsible-large-titles) support). Rename both `ion-title` elements to: + +```html + + + + Photo Gallery + + + + + + + + Photo Gallery + + + + + +``` + +We put the visual aspects of our app into ``. In this case, it’s where we’ll add a button that opens the device’s camera as well as displays the image captured by the camera. Start by adding a [floating action button](../api/fab.md) (FAB) to the bottom of the page and set the camera image as the icon. + +```html + + + Photo Gallery + + + + + + + Photo Gallery + + + + + + + + + + + + + +``` + +Next, open `src/app/tabs/tabs.page.html`. Change the label to "Photos" and the `ellipse` icon to `images` for the middle tab button. + +```html + + + + + Tab 1 + + + + + + + Photos + + + + + Tab 3 + + + +``` + +That’s just the start of all the cool things we can do with Ionic. Up next, implement camera taking functionality on the web, then build it for iOS and Android. diff --git a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md new file mode 100644 index 00000000000..5d3b3dec862 --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.md @@ -0,0 +1,236 @@ +--- +title: Taking Photos with the Camera +sidebar_label: Taking Photos +--- + + + Take Photos with Camera API for iOS, Android & Web with Angular | Ionic Capacitor Camera + + + +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.md). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). + +## Photo Service + +All Capacitor logic (Camera usage and other native features) will be encapsulated in a service class. Create `PhotoService` using the `ionic generate` command: + +```shell +ionic g service services/photo.service +``` + +Open the new `services/photo.service.ts` file, and let’s add the logic that will power the camera functionality. First, import Capacitor dependencies and get references to the `Camera`, `Filesystem`, and `Storage` plugins: + +```ts +import { Injectable } from '@angular/core'; +// CHANGE: Add the following import +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService {} +``` + +Next, define a new class method, `addNewToGallery()`, that will contain the core logic to take a device photo and save it to the filesystem. Let’s start by opening the device camera. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + // CHANGE: Add the gallery method + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + } +} +``` + +Notice the magic here: there's no platform-specific code (web, iOS, or Android)! The Capacitor Camera plugin abstracts that away for us, leaving just one method call - `Camera.getPhoto()` - that will open up the device's camera and allow us to take photos. + +Next, in `tab2.page.ts`, import the `PhotoService` class and add a method to call its `addNewToGallery` method. + +```ts +import { Component } from '@angular/core'; +// CHANGE: Import the PhotoService +import { PhotoService } from '../services/photo.service'; + +@Component({ + selector: 'app-tab2', + templateUrl: 'tab2.page.html', + styleUrls: ['tab2.page.scss'], + standalone: false, +}) +export class Tab2Page { + // CHANGE: Update constructor to include `photoService` + constructor(public photoService: PhotoService) {} + + // CHANGE: Add `addNewToGallery()` method + addPhotoToGallery() { + this.photoService.addNewToGallery(); + } +} +``` + +Then, open `tab2.page.html` and call the `addPhotoToGallery()` method when the FAB is tapped/clicked: + +```html + + + Photo Gallery + + + + + + + Photo Gallery + + + + + + + + + + +``` + +If it's not running already, restart the development server in your browser by running `ionic serve`. On the Photo Gallery tab, click the Camera button. If your computer has a webcam of any sort, a modal window appears. Take a selfie! + +![A photo gallery app displaying a webcam selfie.](/img/guides/first-app-cap-ng/camera-web.png 'Webcam Selfie in Photo Gallery') + +_(Your selfie is probably much better than mine)_ + +After taking a photo, it disappears right away. We need to display it within our app and save it for future access. + +## Displaying Photos + +To define the data structure for our photo metadata, create a new interface named `UserPhoto`. Add this interface at the very bottom of the `photo.service.ts` file, immediately after the `PhotoService` class definition: + +```ts +export class PhotoService { + // ...existing code... +} + +// CHANGE: Add the `UserPhoto` interface +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Above the `addNewToGallery()` method, define an array of `UserPhoto`, which will contain a reference to each photo captured with the Camera. + +```ts +export class PhotoService { + // CHANGE: Add the `photos` array + public photos: UserPhoto[] = []; + + public async addNewToGallery() { + // ...existing code... + } +} +``` + +Over in the `addNewToGallery` method, add the newly captured photo to the beginning of the `photos` array. + +```ts +// CHANGE: Update `addNewToGallery()` method +public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100 + }); + + // CHANGE: Add the new photo to the photos array + this.photos.unshift({ + filepath: "soon...", + webviewPath: capturedPhoto.webPath! + }); +} +``` + +`photo.service.ts` should now look like this: + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + this.photos.unshift({ + filepath: 'soon...', + webviewPath: capturedPhoto.webPath!, + }); + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Next, switch to `tab2.page.html` to display the images. We'll add a [Grid component](../../api/grid.md) to ensure the photos display neatly as they're added to the gallery. Inside the grid, loop through each photo in the `PhotoService`'s `photos` array. For each item, add an [Image component](../../api/img.md) and set its `src` property to the photo's path. + +```html + + + Photo Gallery + + + + + + + Photo Gallery + + + + + + + + + + + + + + + + + + + +``` + +Within the web browser, click the camera button and take another photo. This time, the photo is displayed in the Photo Gallery! + +Up next, we’ll add support for saving the photos to the filesystem, so they can be retrieved and displayed in our app at a later time. diff --git a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md new file mode 100644 index 00000000000..4212757730d --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.md @@ -0,0 +1,220 @@ +--- +title: Saving Photos to the Filesystem +sidebar_label: Saving Photos +--- + + + Saving Photos to the Filesystem with Angular | Ionic Capacitor Camera + + + +We’re now able to take multiple photos and display them in a photo gallery on the second tab of our app. These photos, however, are not currently being stored permanently, so when the app is closed, they will be deleted. + +## Filesystem API + +Fortunately, saving them to the filesystem only takes a few steps. Begin by creating a new class method, `savePicture()`, in the `PhotoService` class. We pass in the `photo` object, which represents the newly captured device photo: + +```ts +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +// CHANGE: Add import +import type { Photo } from '@capacitor/camera'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + // ...existing code... + + // CHANGE: Add the `savePicture()` method + private async savePicture(photo: Photo) { + return { + filepath: 'soon...', + webviewPath: 'soon...', + }; + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +We can use this new method immediately in `addNewToGallery()`. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource, Photo } from '@capacitor/camera'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + // CHANGE: Update the `addNewToGallery()` method + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + // CHANGE: Add `savedImageFile` + // Save the picture and add it to photo collection + const savedImageFile = await this.savePicture(capturedPhoto); + + // CHANGE: Update argument to unshift array method + this.photos.unshift(savedImageFile); + } + + private async savePicture(photo: Photo) { + return { + filepath: 'soon...', + webviewPath: 'soon...', + }; + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +We'll use the Capacitor [Filesystem API](../../native/filesystem.md) to save the photo. First, convert the photo to base64 format. + +Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. + +For now, create a new helper method, `convertBlobToBase64()`, to implement the necessary logic for running on the web. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +// CHANGE: Add import +import { Filesystem, Directory } from '@capacitor/filesystem'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + // ...existing code... + + // CHANGE: Update the `savePicture()` method + private async savePicture(photo: Photo) { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + const base64Data = (await this.convertBlobToBase64(blob)) as string; + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data, + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; + } + + // CHANGE: Add the `convertBlobToBase64` method + private convertBlobToBase64(blob: Blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); + }); + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +`photo.service.ts` should now look like this: + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + // Save the picture and add it to photo collection + const savedImageFile = await this.savePicture(capturedPhoto); + + this.photos.unshift(savedImageFile); + } + + private async savePicture(photo: Photo) { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + const base64Data = (await this.convertBlobToBase64(blob)) as string; + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data, + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; + } + + private convertBlobToBase64(blob: Blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); + }); + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Obtaining the camera photo as base64 format on the web appears to be a bit trickier than on mobile. In reality, we’re just using built-in web APIs: [fetch()](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) as a neat way to read the file into blob format, then FileReader’s [readAsDataURL()](https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL) to convert the photo blob to base64. + +There we go! Each time a new photo is taken, it’s now automatically saved to the filesystem. Next up, we'll load and display our saved images. diff --git a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.md b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.md new file mode 100644 index 00000000000..d8c58c39f7d --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.md @@ -0,0 +1,247 @@ +--- +title: Loading Photos from the Filesystem +sidebar_label: Loading Photos +--- + + + Loading Photos from the Filesystem with Angular | Ionic Capacitor Camera + + + +We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. + +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.md) to store our array of Photos in a key-value store. + +## Preferences API + +Open `photo.service.ts` and begin by defining a new property in the `PhotoService` class that will act as the key for the store. + +```ts +export class PhotoService { + public photos: UserPhoto[] = []; + + // CHANGE: Add a key for photo storage + private PHOTO_STORAGE: string = 'photos'; + + // ...existing code... +} +``` + +Next, at the end of the `addNewToGallery()` method, add a call to `Preferences.set()` to save the `photos` array. By adding it here, the `photos` array is stored each time a new photo is taken. This way, it doesn’t matter when the app user closes or switches to a different app - all photo data is saved. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +// CHANGE: Add import +import { Preferences } from '@capacitor/preferences'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + // ...existing code... + + // CHANGE: Update `addNewToGallery()` method + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + const savedImageFile = await this.savePicture(capturedPhoto); + + this.photos.unshift(savedImageFile); + + // CHANGE: Add method to cache all photo data for future retrieval + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), + }); + } + + // ...existing code... +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +With the photo array data saved, create a new public method in the `PhotoService` class called `loadSaved()` that can retrieve the photo data. We use the same key to retrieve the `photos` array in JSON format, then parse it into an array: + +```ts +export class PhotoService { + // ...existing code... + + // CHANGE: Add the method to load the photo data + public async loadSaved() { + // Retrieve cached photo array data + const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + } +} +``` + +On mobile (coming up next!), we can directly set the source of an image tag - `` - to each photo file on the `Filesystem`, displaying them automatically. On the web, however, we must read each image from the `Filesystem` into base64 format, using a new `base64` property on the `Photo` object. This is because the `Filesystem` API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Add the following code to complete the `loadSaved()` method: + +```ts +export class PhotoService { + // ...existing code... + + // CHANGE: Update the `loadSaved()` method + public async loadSaved() { + // Retrieve cached photo array data + const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + + // CHANGE: Display the photo by reading into base64 format + for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data, + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } +} +``` + +`photo.service.ts` should now look like this: + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + private PHOTO_STORAGE: string = 'photos'; + + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + // Save the picture and add it to photo collection + const savedImageFile = await this.savePicture(capturedPhoto); + + this.photos.unshift(savedImageFile); + + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), + }); + } + + private async savePicture(photo: Photo) { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + const base64Data = (await this.convertBlobToBase64(blob)) as string; + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data, + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; + } + + private convertBlobToBase64(blob: Blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); + }); + } + + public async loadSaved() { + // Retrieve cached photo array data + const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + + for (let photo of this.photos) { + // Read each saved photo's data from the Filesystem + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data, + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Our `PhotoService` can now load the saved images, but we'll need to update `tab2.page.ts` to put that new code to work. We'll call `loadSaved()` within the [ngOnInit](https://angular.dev/guide/components/lifecycle#ngoninit) lifecycle method so that when the user first navigates to the Photo Gallery, all photos are loaded and displayed on the screen. + +Update `tab2.page.ts` to look like the following: + +```ts +import { Component } from '@angular/core'; +import { PhotoService } from '../services/photo.service'; + +@Component({ + selector: 'app-tab2', + templateUrl: 'tab2.page.html', + styleUrls: ['tab2.page.scss'], + standalone: false, +}) +export class Tab2Page { + constructor(public photoService: PhotoService) {} + + // CHANGE: Add call to `loadSaved()` when navigating to the Photos tab + async ngOnInit() { + await this.photoService.loadSaved(); + } + + addPhotoToGallery() { + this.photoService.addNewToGallery(); + } +} +``` + +:::note +If you encounter broken image links or missing photos after following these steps, you may need to open your browser's dev tools and clear both [localStorage](https://developer.chrome.com/docs/devtools/storage/localstorage) and [IndexedDB](https://developer.chrome.com/docs/devtools/storage/indexeddb). + +In localStorage, look for domain `http://localhost:8100` and key `CapacitorStorage.photos`. In IndexedDB, find a store called "FileStorage". Your photos will have a key like `/DATA/123456789012.jpeg`. +::: + +That’s it! We’ve built a complete Photo Gallery feature in our Ionic app that works on the web. Next up, we’ll transform it into a mobile app for iOS and Android! diff --git a/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md b/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md new file mode 100644 index 00000000000..aee2ab86be9 --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/5-adding-mobile.md @@ -0,0 +1,304 @@ +--- +title: Adding Mobile +strip_number_prefixes: false +--- + + + Adding Mobile Support with Angular | Ionic Capacitor Camera + + + +Our photo gallery app won’t be complete until it runs on iOS, Android, and the web - all using one codebase. All it takes is some small logic changes to support mobile platforms, installing some native tooling, then running the app on a device. Let’s go! + +## Import Platform API + +Let’s start with making some small code changes - then our app will “just work” when we deploy it to a device. + +Import the Ionic [Platform API](../platform.md) into `photo.service.ts`, which is used to retrieve information about the current device. In this case, it’s useful for selecting which code to execute based on the platform the app is running on (web or mobile). + +Add `Platform` to the imports at the top of the file and a new property `platform` to the `PhotoService` class. We'll also need to update the constructor to set the user's platform. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +// CHANGE: Add import +import { Platform } from '@ionic/angular'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + private PHOTO_STORAGE: string = 'photos'; + + // CHANGE: Add a property to track the app's running platform + private platform: Platform; + + // CHANGE: Update constructor to set `platform` + constructor(platform: Platform) { + this.platform = platform; + } + + // ...existing code... +} +``` + +## Platform-specific Logic + +First, we’ll update the photo saving functionality to support mobile. In the `savePicture()` method, check which platform the app is running on. If it’s “hybrid” (Capacitor, the native runtime), then read the photo file into base64 format using the `Filesystem.readFile()` method. Otherwise, use the same logic as before when running the app on the web. + +Update `savePicture()` to look like the following: + +```ts +// CHANGE: Update the `savePicture()` method +private async savePicture(photo: Photo) { + let base64Data: string | Blob; + + // CHANGE: Add platform check + // "hybrid" will detect Cordova or Capacitor + if (this.platform.is('hybrid')) { + // Read the file into base64 format + const file = await Filesystem.readFile({ + path: photo.path! + }); + base64Data = file.data; + } else { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + base64Data = await this.convertBlobToBase64(blob) as string; + } + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data + }); + + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; +} +``` + +When running on mobile, set `filepath` to the result of the `writeFile()` operation - `savedFile.uri`. When setting the `webviewPath`, use the special `Capacitor.convertFileSrc()` method ([details on the File Protocol](../../core-concepts/webview.md#file-protocol)). To use this method, we'll need to import Capacitor into `photo.service.ts`. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +import { Platform } from '@ionic/angular'; +// Change: Add import +import { Capacitor } from '@capacitor/core'; + +// ...existing code... +``` + +Then update `savePicture()` to look like the following: + +```ts +// CHANGE: Update `savePicture()` method +private async savePicture(photo: Photo) { + let base64Data: string | Blob; + // "hybrid" will detect mobile - iOS or Android + if (this.platform.is('hybrid')) { + const file = await Filesystem.readFile({ + path: photo.path!, + }); + base64Data = file.data; + } else { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + base64Data = await this.convertBlobToBase64(blob) as string; + } + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data, + }); + + // CHANGE: Add platform check + if (this.platform.is('hybrid')) { + // Display the new image by rewriting the 'file://' path to HTTP + return { + filepath: savedFile.uri, + webviewPath: Capacitor.convertFileSrc(savedFile.uri), + }; + } else { + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; + } +} +``` + +Next, add a new bit of logic in the `loadSaved()` method. On mobile, we can directly point to each photo file on the Filesystem and display them automatically. On the web, however, we must read each image from the Filesystem into base64 format. This is because the Filesystem API uses [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) under the hood. Update the `loadSaved()` method: + +```ts +// CHANGE: Update `loadSaved()` method +public async loadSaved() { + const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + + // CHANGE: Add platform check + // If running on the web... + if (!this.platform.is('hybrid')) { + for (let photo of this.photos) { + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data + }); + + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } +} +``` + +Our Photo Gallery now consists of one codebase that runs on the web, Android, and iOS. + +`photos.service.ts` should now look like this: + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +import { Platform } from '@ionic/angular'; +import { Capacitor } from '@capacitor/core'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + public photos: UserPhoto[] = []; + + private PHOTO_STORAGE: string = 'photos'; + + private platform: Platform; + + constructor(platform: Platform) { + this.platform = platform; + } + + public async addNewToGallery() { + // Take a photo + const capturedPhoto = await Camera.getPhoto({ + resultType: CameraResultType.Uri, + source: CameraSource.Camera, + quality: 100, + }); + + const savedImageFile = await this.savePicture(capturedPhoto); + + this.photos.unshift(savedImageFile); + + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), + }); + } + + private async savePicture(photo: Photo) { + let base64Data: string | Blob; + + // "hybrid" will detect Cordova or Capacitor + if (this.platform.is('hybrid')) { + // Read the file into base64 format + const file = await Filesystem.readFile({ + path: photo.path!, + }); + + base64Data = file.data; + } else { + // Fetch the photo, read as a blob, then convert to base64 format + const response = await fetch(photo.webPath!); + const blob = await response.blob(); + + base64Data = (await this.convertBlobToBase64(blob)) as string; + } + + // Write the file to the data directory + const fileName = Date.now() + '.jpeg'; + const savedFile = await Filesystem.writeFile({ + path: fileName, + data: base64Data, + directory: Directory.Data, + }); + + if (this.platform.is('hybrid')) { + // Display the new image by rewriting the 'file://' path to HTTP + return { + filepath: savedFile.uri, + webviewPath: Capacitor.convertFileSrc(savedFile.uri), + }; + } else { + // Use webPath to display the new image instead of base64 since it's + // already loaded into memory + return { + filepath: fileName, + webviewPath: photo.webPath, + }; + } + } + + private convertBlobToBase64(blob: Blob) { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onerror = reject; + reader.onload = () => { + resolve(reader.result); + }; + reader.readAsDataURL(blob); + }); + } + + public async loadSaved() { + // Retrieve cached photo array data + const { value: photoList } = await Preferences.get({ key: this.PHOTO_STORAGE }); + this.photos = (photoList ? JSON.parse(photoList) : []) as UserPhoto[]; + + // If running on the web... + if (!this.platform.is('hybrid')) { + for (let photo of this.photos) { + const readFile = await Filesystem.readFile({ + path: photo.filepath, + directory: Directory.Data, + }); + // Web platform only: Load the photo as base64 data + photo.webviewPath = `data:image/jpeg;base64,${readFile.data}`; + } + } + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Next up, the part you’ve been waiting for - deploying the app to a device. diff --git a/versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.md b/versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.md new file mode 100644 index 00000000000..11bf04154b0 --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/6-deploying-mobile.md @@ -0,0 +1,114 @@ +--- +title: Deploying to iOS and Android +sidebar_label: Deploying Mobile +--- + + + Adding Mobile Support with Angular | Ionic Capacitor Camera + + + +Since we added Capacitor to our project when it was first created, there’s only a handful of steps remaining until the Photo Gallery app is on our device! + +## Capacitor Setup + +Capacitor is Ionic’s official app runtime that makes it easy to deploy web apps to native platforms like iOS, Android, and more. If you’ve used Cordova in the past, consider reading more about the [differences between Capacitor and Cordova](https://capacitorjs.com/docs/cordova#differences-between-capacitor-and-cordova). + +If you’re still running `ionic serve` in the terminal, cancel it. Complete a fresh build of the Ionic project, fixing any errors that it reports: + +```shell +ionic build +``` + +Next, create both the iOS and Android projects: + +```shell +ionic cap add ios +ionic cap add android +``` + +Both android and ios folders at the root of the project are created. These are entirely standalone native projects that should be considered part of your Ionic app (i.e., check them into source control, edit them using their native tooling, etc.). + +Every time you perform a build (e.g. `ionic build`) that updates your web directory (default: `www`), you'll need to copy those changes into your native projects: + +```shell +ionic cap copy +``` + +Note: After making updates to the native portion of the code (such as adding a new plugin), use the `sync` command: + +```shell +ionic cap sync +``` + +## iOS Deployment + +:::important +To build an iOS app, you’ll need a Mac computer. +::: + +Capacitor iOS apps are configured and managed through Xcode (Apple’s iOS/Mac IDE), with dependencies managed by [CocoaPods](https://cocoapods.org/). Before running this app on an iOS device, there's a couple of steps to complete. + +First, run the Capacitor `open` command, which opens the native iOS project in Xcode: + +```shell +ionic cap open ios +``` + +In order for some native plugins to work, user permissions must be configured. In our photo gallery app, this includes the Camera plugin: iOS displays a modal dialog automatically after the first time that `Camera.getPhoto()` is called, prompting the user to allow the app to use the Camera. The permission that drives this is labeled "Privacy - Camera Usage." To set it, the `Info.plist` file must be modified ([more details on iOS configuration](https://capacitorjs.com/docs/ios/configuration)). To access it, click "Info," then expand "Custom iOS Target Properties." + +![The Info.plist file in Xcode showing the NSCameraUsageDescription key added for camera access.](/img/guides/first-app-cap-ng/xcode-info-plist.png 'Xcode Info.plist Configuration') + +Each setting in `Info.plist` has a low-level parameter name and a high-level name. By default, the property list editor shows the high-level names, but it's often useful to switch to showing the raw, low-level names. To do this, right-click anywhere in the property list editor and toggle "Raw Keys/Values." + +Add the `NSCameraUsageDescription` Key and set the Value to something that describes why the app needs to use the camera, such as "To Take Photos." The Value field is displayed to the app user when the permission prompt opens. + +Follow the same process to add the other two Keys required of the Camera plugin: `NSPhotoLibraryAddUsageDescription` and `NSPhotoLibraryUsageDescription`. + +Next, click on `App` in the Project Navigator on the left-hand side, then within the `Signing & Capabilities` section, select your Development Team. + +![The Xcode interface displaying the Signing and Capabilities tab for an iOS app project.](/img/guides/first-app-cap-ng/xcode-signing.png 'Xcode Signing & Capabilities') + +With permissions in place and Development Team selected, we are ready to try out the app on a real device! Connect an iOS device to your Mac computer, select it (`App -> Matthew’s iPhone` for me) then click the "Build" button to build, install, and launch the app on your device: + +![Xcode toolbar highlighting the Build button used to compile and run an iOS app.](/img/guides/first-app-cap-ng/xcode-build-button.png 'Xcode Build Button') + +Upon tapping the Camera button on the Photo Gallery tab, the permission prompt will display. Tap OK, then take a picture with the Camera. Afterward, the photo shows in the app! + +![Two iPhones side by side, one showing the camera permission prompt and the other displaying a photo taken with the app.](/img/guides/first-app-cap-ng/ios-permissions-photo.png 'iOS Camera Permission Prompt and Photo Result') + +## Android Deployment + +Capacitor Android apps are configured and managed through Android Studio. Before running this app on an Android device, there's a couple of steps to complete. + +First, run the Capacitor `open` command, which opens the native Android project in Android Studio: + +```shell +ionic cap open android +``` + +Similar to iOS, we must enable the correct permissions to use the Camera. Configure these in the `AndroidManifest.xml` file. Android Studio will likely open this file automatically, but in case it doesn't, locate it under `android/app/src/main/`. + +![Android Studio editor showing the AndroidManifest.xml file with camera permissions.](/img/guides/first-app-cap-ng/android-manifest.png 'Android Manifest Permissions') + +Scroll to the `Permissions` section and ensure these entries are included: + +```xml + + +``` + +Save the file. With permissions in place, we are ready to try out the app on a real device! Connect an Android device to your computer. Within Android Studio, click the "Run" button, select the attached Android device, then click OK to build, install, and launch the app on your device. + +![The Android Studio interface with arrows pointing to the Run button and the connected device.](/img/guides/first-app-cap-ng/android-device.png 'Android Studio Run Configuration') + +Once again, upon tapping the Camera button on the Photo Gallery tab, the permission prompt should be displayed. Tap OK, then take a picture with the Camera. Afterward, the photo should appear in the app. + +![Two Android phones side by side, one showing the camera permission prompt and the other displaying a photo taken with the app.](/img/guides/first-app-cap-ng/android-permissions-photo.png 'Android Permissions and Photo Capture') + +Our Photo Gallery app has just been deployed to Android and iOS devices. 🎉 + +In the final portion of this tutorial, we’ll use the Ionic CLI’s Live Reload functionality to quickly implement photo deletion - thus completing our Photo Gallery feature. diff --git a/versioned_docs/version-v8/angular/your-first-app/7-live-reload.md b/versioned_docs/version-v8/angular/your-first-app/7-live-reload.md new file mode 100644 index 00000000000..1d24eecd741 --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/7-live-reload.md @@ -0,0 +1,171 @@ +--- +title: Rapid App Development with Live Reload +sidebar_label: Live Reload +--- + + + Rapid App Development with Live Reload with Angular | Ionic Capacitor Camera + + + +So far, we’ve learned how easy it is to develop a cross-platform app that works everywhere. The development experience is pretty quick, but what if I told you there was a way to go faster? + +We can use the Ionic CLI’s [Live Reload functionality](../../cli/livereload.md) to boost our productivity when building Ionic apps. When active, Live Reload will reload the browser and/or WebView when changes in the app are detected. + +## Live Reload + +Remember `ionic serve`? That was Live Reload working in the browser, allowing us to iterate quickly. + +We can also use it when developing on iOS and Android devices. This is particularly useful when writing code that interacts with native plugins - we must run it on a device to verify that it works. Therefore, being able to quickly write, build, test, and deploy code is crucial to keeping up our development speed. + +Let’s use Live Reload to implement photo deletion, the missing piece of our Photo Gallery feature. Select your platform of choice (iOS or Android) and connect a device to your computer. Next, run either command in a terminal, based on your chosen platform: + +```shell +ionic cap run ios -l --external + +ionic cap run android -l --external +``` + +The Live Reload server will start up, and the native IDE of choice will open if not opened already. Within the IDE, click the Play button to launch the app onto your device. + +## Deleting Photos + +With Live Reload running and the app open on your device, let’s implement photo deletion functionality. + +In `photo.service.ts`, add the `deletePhoto()` method. The selected photo is removed from the `photos` array first. Then, we use the Capacitor Preferences API to update the cached version of the `photos` array. Finally, we delete the actual photo file itself using the Filesystem API. + +```ts +import { Injectable } from '@angular/core'; +import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'; +import type { Photo } from '@capacitor/camera'; +import { Filesystem, Directory } from '@capacitor/filesystem'; +import { Preferences } from '@capacitor/preferences'; +import { Platform } from '@ionic/angular'; +import { Capacitor } from '@capacitor/core'; + +@Injectable({ + providedIn: 'root', +}) +export class PhotoService { + // ...existing code... + + // CHANGE: Add `deletePhoto()` method + public async deletePhoto(photo: UserPhoto, position: number) { + // Remove this photo from the Photos reference data array + this.photos.splice(position, 1); + + // Update photos array cache by overwriting the existing photo array + Preferences.set({ + key: this.PHOTO_STORAGE, + value: JSON.stringify(this.photos), + }); + + // Delete photo file from filesystem + const filename = photo.filepath.slice(photo.filepath.lastIndexOf('/') + 1); + + await Filesystem.deleteFile({ + path: filename, + directory: Directory.Data, + }); + } +} + +export interface UserPhoto { + filepath: string; + webviewPath?: string; +} +``` + +Next, in `tab2.page.ts`, implement the `showActionSheet()` method. We're adding two options: "Delete", which calls `PhotoService.deletePhoto()`, and "Cancel". The cancel button will automatically close the action sheet when assigned the "cancel" role. + +```ts +import { Component } from '@angular/core'; +// Change: Add import +import type { UserPhoto } from '../services/photo.service'; +import { PhotoService } from '../services/photo.service'; +// CHANGE: Add import +import { ActionSheetController } from '@ionic/angular'; + +@Component({ + selector: 'app-tab2', + templateUrl: 'tab2.page.html', + styleUrls: ['tab2.page.scss'], + standalone: false, +}) +export class Tab2Page { + // CHANGE: Update constructor + constructor(public photoService: PhotoService, public actionSheetController: ActionSheetController) {} + + // ...existing code... + + // CHANGE: Add `showActionSheet()` method + public async showActionSheet(photo: UserPhoto, position: number) { + const actionSheet = await this.actionSheetController.create({ + header: 'Photos', + buttons: [ + { + text: 'Delete', + role: 'destructive', + icon: 'trash', + handler: () => { + this.photoService.deletePhoto(photo, position); + }, + }, + { + text: 'Cancel', + icon: 'close', + role: 'cancel', + handler: () => { + // Nothing to do, action sheet is automatically closed + }, + }, + ], + }); + await actionSheet.present(); + } +} +``` + +Open `tab2.page.html` and add a new click handler to each `` element. When the app user taps on a photo in our gallery, we’ll display an [Action Sheet](../../api/action-sheet.md) dialog with the option to either delete the selected photo or cancel (close) the dialog. + +```html + + + Photo Gallery + + + + + + + Photo Gallery + + + + + + + + + + + + + + + + + + +``` + +Tap on a photo again and choose the “Delete” option. The photo is deleted! Implemented much faster using Live Reload. 💪 + +:::note +Remember, you can find the [complete source code for this app](https://github.com/ionic-team/photo-gallery-capacitor-ng) on GitHub. +::: + +In the final portion of this tutorial, we’ll walk you through the basics of the Appflow product used to build and deploy your application to users' devices. diff --git a/versioned_docs/version-v8/angular/your-first-app/8-distribute.md b/versioned_docs/version-v8/angular/your-first-app/8-distribute.md new file mode 100644 index 00000000000..6c221cc4b42 --- /dev/null +++ b/versioned_docs/version-v8/angular/your-first-app/8-distribute.md @@ -0,0 +1,107 @@ +--- +title: Build and Distribute your App +sidebar_label: Distribute +--- + + + Build and Deploy your App with Angular | Ionic Capacitor Camera + + + +Now that you have built your first app, you are going to want to get it distributed so everyone can start using it. The mechanics of building and deploying your application can be quite cumbersome. That is where [Appflow](https://ionic.io/docs/appflow/) comes into play. Appflow allows you to effectively generate web and native builds, push out live app updates, publish your app to the app stores, and automate the whole process. Refer to the [Appflow Quickstart guide](https://ionic.io/docs/appflow/quickstart). + +Below we will run through an overview of the steps. + +## Connect Your Repo + +Appflow works directly with Git version control and uses your existing code base as the source of truth for Deploy and Package builds. You will first need to integrate with your hosting service, such as GitHub or Bitbucket, or you can push your code directly to Appflow. Once this is completed, Appflow will have access to your code. + +For more on connecting your code repository to Appflow, checkout the [Connect your Repo](https://ionic.io/docs/appflow/quickstart/connect) section inside the Appflow docs. + +## Install the Appflow SDK + +The Appflow SDK (also known as Ionic Deploy plugin) will allow you to take advantage of arguably two of the best Appflow features: deploying live updates to your app and bypassing the app stores. Ionic Appflow's Live Update feature is shipped with Appflow SDK and features the capabilities of detecting and syncing the updates for your app that you have pushed to your identified channels within the dashboard. + +To get the Appflow SDK plugin added to your project, you can follow the install instructions within the Appflow Dashboard by clicking on "Install Instructions" inside of the `Deploy > Destinations` section. Alternatively, you can install the plugin manually by executing the following command in your app's root directory: + +```shell +ionic deploy add \ + --app-id="YOUR_APP_ID" \ + --channel-name="YOUR_CHANNEL_NAME" \ + --update-method="background|auto|none" \ +``` + +For prerequisite and additional instructions on installing the Appflow SDK, visit the [Install the Appflow SDK](https://ionic.io/docs/appflow/quickstart/installation) section inside the Appflow docs. + +## Push a Commit + +In order for Appflow to access the latest and greatest changes to your code, you will need to push a commit via the version control integration of your choosing. For those that use GitHub or Bitbucket, this would look as follows: + +```shell +git add . # stage any changes +git commit -m "added appflow sdk" # commit staged changes +git push origin main # push the changes from the main branch to your git host +``` + +After the push is made, your commit appears under the `Commits` tab of the Appflow Dashboard. For more information, refer to the [Push a Commit](https://ionic.io/docs/appflow/quickstart/push) section inside the Appflow docs. + +## Deploy a Live Update + +With the Appflow SDK installed and your commit pushed up to the Dashboard, you are ready to deploy a live update to a device. The Live Update feature uses the installed Appflow SDK with your native application to listen to a particular Deploy Channel Destination. When a live update is assigned to a Channel Destination, that update will be deployed to user devices running binaries that are configured to listen to that specific Channel Destination. + +To get the live update deployed, a Web build will need to be created. This can be done through the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right corner of the `Build > Builds` tab. After selecting the correct commit to deploy, select the `Web` target platform and the `Latest` build stack. Depending on your Appflow plan, you will then be able to include custom environments, if any are configured. Finally, you can enable `Live Update` and pick the Channel to automatically assign the build to once it successfully completes. + +Upon completion of the Web Build, additional versioning options are available to you. After completing this section and you have a successful Deploy build, you can then assign it to the same Channel you configured the Appflow SDK to listen to when you installed it by clicking the `Deploy live updates` button in the build detail page. The same can be done by clicking the `Deploy live updates` icon on the build in the `Build > Builds` tab and select the Channel from the dropdown. + +To receive this live update, you will need to run the app on a device or an emulator. The quickest and easiest way to do this is through the following command: + +```shell +ionic cap run [ios | android] [options] +``` + +Assuming the app is configured correctly to listen to the channel you deployed to, the app should immediately update on startup if you have chosen the auto update method during setup. If the background update method was chosen, be sure to stay in the app for about 30 seconds to ensure the update was downloaded. Then, close the application, reopen it, and the updates are applied! + +To dive into more details on the steps to deploy a live update, as well as additional information such as disabling deploy for development, check out the [Deploy a Live Update](https://ionic.io/docs/appflow/quickstart/deploy) section inside the Appflow docs. + +## Build a Native Binary + +Next up is a native binary for your app build and deploy process. This is done via the [Ionic Package](https://ionic.io/docs/appflow/package/intro) service. First things first, you will need to create a [Package build](https://ionic.io/docs/appflow/package/builds). This can be done by clicking the `Start build` icon from the `Commits` tab or by clicking the `New build` button in the top right from the `Build > Builds` tab. Then you will select the proper commit for your build and fill in all of the several required fields and any optional fields that you want to specify. After filling in all of the information and the build begins, you can check out it's progress and review the logs if you encounter any errors. + +Given a successful Package build, an iOS binary (`.ipa` or IPA) or/and an Android binary (`.apk` or APK) file becomes available to you. The file can subsequently be downloaded so you can install it on a device by clicking the file name in the `Artifacts` section in the right of the build detail page or clicking the `Download IPA/APK` icon on the build in the `Build > Builds` tab. + +Further information regarding building native binaries can be found inside of the [Build a Native Binary](https://ionic.io/docs/appflow/quickstart/package) section inside the Appflow docs. + +## Create an Automation + +[Automations](https://ionic.io/docs/appflow/automation/intro) enable you and your team to utilize the full CI/CD powers of Appflow. You can create automations that trigger [Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) every time your team commits new code to a given branch. The automations can also be configured to use different environments and native configurations for building different versions of your app for development, staging, QA and production. + +For more information, visit the [Create an Automation](https://ionic.io/docs/appflow/quickstart/automation) section within the Appflow docs. That section covers creating a single automation. However, you can create multiple automations for different branches or workflows and customize them to fit your needs. An important note is that the ability to create an automation is available for those on our [Basic plans](https://ionic.io/pricing) and above. + +## Create an Environment + +[Package builds](https://ionic.io/docs/appflow/package/builds) and [Deploy builds](https://ionic.io/docs/appflow/deploy/builds) can be further customized via [Environments](https://ionic.io/docs/appflow/automation/environments). This powerful feature allows you to create different configurations based on the environment variables passed in at build time. When combined with the [Automation](https://ionic.io/docs/appflow/automation/intro) feature, development teams can easily configure development, staging, and production build configurations, allowing them to embrace DevOps best practices and ship better quality updates faster than ever. + +Creating an Environment is available for those on our [Basic plans](https://ionic.io/pricing) and above. More information on this can be found in the [Create an Environment](https://ionic.io/docs/appflow/quickstart/environment) section within the Appflow docs. + +## Create a Native Configuration + +[Native Configurations](https://ionic.io/docs/appflow/package/native-configs) allow you to easily modify common configuration values that can change between different environments (development, production, staging, etc.) so you do not need to use extra logic or manually commit them to version control. Native configurations can be attached to any [Package build](https://ionic.io/docs/appflow/package/intro) or [Automation](https://ionic.io/docs/appflow/automation/intro). + +Native configs can be used to: + +- Overwrite the unique bundle identifier or [id attribute](https://cordova.apache.org/docs/en/latest/config_ref/#widget) in `config.xml` +- Overwrite the App Name as it will appear on the home screen of a device +- Overwrite the [Appflow SDK (Deploy Plugin) variables and preferences](https://ionic.io/docs/appflow/deploy/api#plugin-variables) + +For access to the ability to create a Native Configuration, you will need to be on our [Basic plans](https://ionic.io/pricing) and above. Additional details of this feature can be found in the [Create a Native Configuration](https://ionic.io/docs/appflow/quickstart/native-config) section within the Appflow docs. + +## What’s Next? + +Congratulations! You developed a complete cross-platform Photo Gallery app that runs on the web, iOS, and Android. Not only that, you have also then built the app and deployed it to your users' devices! + +There are many paths to follow from here. Try adding another [Ionic UI component](../../components.md) to the app, or more [native functionality](https://capacitorjs.com/docs/apis). The sky’s the limit. Once you have added another feature, run the build and deploy process again through Appflow to get it out to your users. + +Happy app building! 💙 diff --git a/versioned_docs/version-v8/api.md b/versioned_docs/version-v8/api.md new file mode 100644 index 00000000000..45e4c1d8d19 --- /dev/null +++ b/versioned_docs/version-v8/api.md @@ -0,0 +1,17 @@ +--- +title: API Index +--- + +import APIList from '@components/page/api/APIList'; + + + API Index | Ionic Docs API Index for all API Custom Elements + + + +Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. + + diff --git a/versioned_docs/version-v8/api/accordion-group.md b/versioned_docs/version-v8/api/accordion-group.md new file mode 100644 index 00000000000..5feec320a8e --- /dev/null +++ b/versioned_docs/version-v8/api/accordion-group.md @@ -0,0 +1,63 @@ +--- +title: 'ion-accordion-group' +--- + +import Props from '@ionic-internal/component-api/v8/accordion-group/props.md'; +import Events from '@ionic-internal/component-api/v8/accordion-group/events.md'; +import Methods from '@ionic-internal/component-api/v8/accordion-group/methods.md'; +import Parts from '@ionic-internal/component-api/v8/accordion-group/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/accordion-group/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/accordion-group/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Accordion group is a container for accordion instances. It manages the state of the accordions and provides keyboard navigation. + +Refer to the [Accordion](./accordion) documentation for more information. + +## Interfaces + +### AccordionGroupChangeEventDetail + +```typescript +interface AccordionGroupChangeEventDetail { + value: T; +} +``` + +### AccordionGroupCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. + +```typescript +interface AccordionGroupCustomEvent extends CustomEvent { + detail: AccordionGroupChangeEventDetail; + target: HTMLIonAccordionGroupElement; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/accordion.md b/versioned_docs/version-v8/api/accordion.md new file mode 100644 index 00000000000..492f7e41654 --- /dev/null +++ b/versioned_docs/version-v8/api/accordion.md @@ -0,0 +1,226 @@ +--- +title: 'ion-accordion' +--- + +import Props from '@ionic-internal/component-api/v8/accordion/props.md'; +import Events from '@ionic-internal/component-api/v8/accordion/events.md'; +import Methods from '@ionic-internal/component-api/v8/accordion/methods.md'; +import Parts from '@ionic-internal/component-api/v8/accordion/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/accordion/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/accordion/slots.md'; + + + ion-accordion: Accordion Components: How to Build & Examples + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information. All `ion-accordion` components should be grouped inside `ion-accordion-group` components. + +## Basic Usage + +import Basic from '@site/static/usage/v8/accordion/basic/index.md'; + + + +## Toggle Accordions + +Which accordion is open is controlled by setting the `value` property on `ion-accordion-group`. Setting this property allows developers to programmatically expand or collapse certain accordions. + +import Toggle from '@site/static/usage/v8/accordion/toggle/index.md'; + + + +## Listen for Accordion State Changes + +:::caution +Most `ionChange` events emitted by other components such as [Input](./input) and [Textarea](./textarea) bubble. As a result, these events will bubble up and cause your `ionChange` listener on the Accordion Group to fire if the associated components are used inside of an Accordion. + +When using other components that emit `ionChange` inside of Accordion it is recommended to have the `ionChange` callback on Accordion Group check the `target` key on the event passed to the callback to verify that `ionChange` is coming from the Accordion Group and not any descendants. +::: + +Developers can listen for the `ionChange` event to be notified when accordions expand or collapse. + +import ListenChanges from '@site/static/usage/v8/accordion/listen-changes/index.md'; + + + +## Multiple Accordions + +Developers can allow multiple accordions to be open at once with the `multiple` property. + +import Multiple from '@site/static/usage/v8/accordion/multiple/index.md'; + + + +## Disabling Accordions + +### Individual Accordion + +Individual accordions can be disabled with the `disabled` property on `ion-accordion`. + +import DisableIndividual from '@site/static/usage/v8/accordion/disable/individual/index.md'; + + + +### Accordion Group + +The accordion group can be disabled with the `disabled` property on `ion-accordion-group`. + +import DisableGroup from '@site/static/usage/v8/accordion/disable/group/index.md'; + + + +## Readonly Accordions + +### Individual Accordion + +Individual accordions can be disabled with the `readonly` property on `ion-accordion`. + +import ReadonlyIndividual from '@site/static/usage/v8/accordion/readonly/individual/index.md'; + + + +### Accordion Group + +The accordion group can be disabled with the `readonly` property on `ion-accordion-group`. + +import ReadonlyGroup from '@site/static/usage/v8/accordion/readonly/group/index.md'; + + + +## Anatomy + +### Header + +The `header` slot is used as the toggle that will expand or collapse your accordion. We recommend you use an `ion-item` here to take advantage of the accessibility and theming functionalities. + +When using `ion-item` in the `header` slot, the `ion-item`'s `button` prop is set to `true` and the `detail` prop is set to `false`. In addition, we will also automatically add a toggle icon to the `ion-item`. This icon will automatically be rotated when you expand or collapse the accordion. Refer to [Customizing Icons](#icons) for more information. + +### Content + +The `content` slot is used as the part of the accordion that is revealed or hidden depending on the state of your accordion. You can place anything here except for another `ion-content` instance as only one instance of `ion-content` should be added per page. + +## Customization + +### Expansion Styles + +There are two built in expansion styles: `compact` and `inset`. This expansion style is set via the `expand` property on `ion-accordion-group`. + +When `expand="inset"`, the accordion group is given a border radius. On `md` mode, the entire accordion will shift down when it is opened. + +import ExpansionStyles from '@site/static/usage/v8/accordion/customization/expansion-styles/index.md'; + + + +### Advanced Expansion Styles + +You can customize the expansion behavior by styling based on the accordion's state. There are four state classes applied to `ion-accordion`. Styling using these classes can allow you to create advanced state transitions: + +| Class Name | Description | +| ----------------------- | ------------------------------------------------- | +| `.accordion-expanding` | Applied when the accordion is actively expanding | +| `.accordion-expanded` | Applied when the accordion is fully expanded | +| `.accordion-collapsing` | Applied when the accordion is actively collapsing | +| `.accordion-collapsed` | Applied when the accordion is fully collapsed | + +If you need to target specific pieces of the accordion, we recommend targeting the element directly. For example, if you want to customize the ion-item in your header slot when the accordion is expanded, you can use the following selector: + +```css +ion-accordion.accordion-expanding ion-item[slot='header'], +ion-accordion.accordion-expanded ion-item[slot='header'] { + --color: red; +} +``` + +import AdvancedExpansionStyles from '@site/static/usage/v8/accordion/customization/advanced-expansion-styles/index.md'; + + + +### Icons + +When using an `ion-item` in the `header` slot, we automatically add an `ion-icon`. The type of icon used can be controlled by the `toggleIcon` property, and the slot it is added to can be controlled with the `toggleIconSlot` property. + +If you would like to manage the icon yourself or use an icon that is not an `ion-icon`, you can add the `ion-accordion-toggle-icon` class to the icon element. + +Regardless of which option you choose, the icon will automatically be rotated when you expand or collapse the accordion. + +import Icons from '@site/static/usage/v8/accordion/customization/icons/index.md'; + + + +### Theming + +Since `ion-accordion` acts as a shell around the header and content elements, you can easily theme the accordion however you would like. You can theme the header by targeting the slotted `ion-item`. Since you are using `ion-item`, you also have access to all of the [ion-item CSS Variables](./item#css-custom-properties) and [ion-item Shadow Parts](./item#css-shadow-parts). Theming the content is also easily achieved by targeting the element that is in the `content` slot. + +import Theming from '@site/static/usage/v8/accordion/customization/theming/index.md'; + + + +## Accessibility + +### Animations + +By default, animations are enabled when expanding or collapsing an accordion item. Animations will be automatically disabled when the `prefers-reduced-motion` media query is supported and set to `reduce`. For browsers that do not support this, animations can be disabled by setting the `animated` config in your Ionic Framework app. + +import AccessibilityAnimations from '@site/static/usage/v8/accordion/accessibility/animations/index.md'; + + + +### Keyboard Interactions + +When used inside an `ion-accordion-group`, `ion-accordion` has full keyboard support for interacting with the component. The following table details what each key does: + +| Key | Description | +| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| Space or Enter | When focus is on the accordion header, the accordion will collapse or expand depending on the state of the component. | +| Tab | Moves focus to the next focusable element. | +| Shift + Tab | Moves focus to the previous focusable element. | +| Down Arrow | - When focus is on an accordion header, moves focus to the next accordion header.
- When focus is on the last accordion header, moves focus to the first accordion header. | +| Up Arrow | - When focus is on an accordion header, moves focus to the previous accordion header.
- When focus is on the first accordion header, moves focus to the last accordion header. | +| Home | When focus is on an accordion header, moves focus to the first accordion header. | +| End | When focus is on an accordion header, moves focus to the last accordion header. | + +## Performance + +### Animations + +The accordion animation works by knowing the height of the `content` slot when the animation starts. The accordion expects that this height will remain consistent throughout the animation. As a result, developers should avoid performing any operation that may change the height of the content during the animation. + +For example, using [ion-img](./img) may cause layout shifts as it lazily loads images. This means that as the animation plays, `ion-img` will load the image data, and the dimensions of `ion-img` will change to account for the loaded image data. This can result in the height of the `content` slot changing. Developers have a few options for avoiding this: + +1. Use an `img` element without any lazy loading. `ion-img` always uses lazy loading, but `img` does not use lazy loading by default. This is the simplest option and works well if you have small images that do not significantly benefit from lazy loading. + +2. Set a minimum width and height on `ion-img`. If you need to use lazy loading and know the dimensions of the images ahead of time (such as if you are loading icons of the same size), you can set the `ion-img` to have a minimum width or height using CSS. This gives developers the benefit of lazy loading while avoiding layout shifts. This works when using an `img` element with `loading="lazy"` too! + +3. If neither of these options are applicable, developers may want to consider disabling animations altogether by using the `animated` property on [ion-accordion-group](./accordion-group). + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/action-sheet.md b/versioned_docs/version-v8/api/action-sheet.md new file mode 100644 index 00000000000..e1a0fac49a1 --- /dev/null +++ b/versioned_docs/version-v8/api/action-sheet.md @@ -0,0 +1,307 @@ +--- +title: 'ion-action-sheet' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import Props from '@ionic-internal/component-api/v8/action-sheet/props.md'; +import Events from '@ionic-internal/component-api/v8/action-sheet/events.md'; +import Methods from '@ionic-internal/component-api/v8/action-sheet/methods.md'; +import Parts from '@ionic-internal/component-api/v8/action-sheet/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/action-sheet/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/action-sheet/slots.md'; + + + ion-action-sheet: Action Sheet Dialog for iOS and Android + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +An Action Sheet is a dialog that displays a set of options. It appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. Destructive options are made obvious in `ios` mode. There are multiple ways to dismiss the action sheet, including tapping the backdrop or hitting the escape key on desktop. + +## Inline Action Sheets (Recommended) + +`ion-action-sheet` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Action Sheet. + +import Trigger from '@site/static/usage/v8/action-sheet/inline/trigger/index.md'; + + + +### Using `isOpen` + +The `isOpen` property on `ion-action-sheet` allows developers to control the presentation state of the Action Sheet from their application state. This means when `isOpen` is set to `true` the Action Sheet will be presented, and when `isOpen` is set to `false` the Action Sheet will be dismissed. + +`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Action Sheet is dismissed. Developers should listen for the `ionActionSheetDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-action-sheet` from being tightly coupled with the state of the application. With a one way data binding, the Action Sheet only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Action Sheet needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. + +import IsOpen from '@site/static/usage/v8/action-sheet/inline/isOpen/index.md'; + + + +## Controller Action Sheets + +The `actionSheetController` can be used in situations where more control is needed over when the Action Sheet is presented and dismissed. + +import Controller from '@site/static/usage/v8/action-sheet/controller/index.md'; + + + +## Buttons + +A button's `role` property can either be `destructive` or `cancel`. Buttons without a role property will have the default look for the platform. Buttons with the `cancel` role will always load as the bottom button, no matter where they are in the array. All other buttons will be displayed in the order they have been added to the `buttons` array. Note: We recommend that `destructive` buttons are always the first button in the array, making them the top button. Additionally, if the action sheet is dismissed by tapping the backdrop, then it will fire the handler from the button with the cancel role. + +A button can also be passed data via the `data` property on `ActionSheetButton`. This will populate the `data` field in the return value of the `onDidDismiss` method. + +## Collecting Role Information on Dismiss + +When the `didDismiss` event is fired, the `data` and `role` fields of the event detail can be used to gather information about how the Action Sheet was dismissed. + +import RoleInfo from '@site/static/usage/v8/action-sheet/role-info-on-dismiss/index.md'; + + + +## Theming + +Action Sheet uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +### Styling + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. + +```css +/* DOES NOT WORK - not specific enough */ +.action-sheet-group { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .action-sheet-group { + background: #e5e5e5; +} +``` + +import Styling from '@site/static/usage/v8/action-sheet/theming/styling/index.md'; + + + +### CSS Custom Properties + +Any of the defined [CSS Custom Properties](#css-custom-properties-1) can be used to style the Action Sheet without needing to target individual elements. + +import CssCustomProperties from '@site/static/usage/v8/action-sheet/theming/css-properties/index.md'; + + + +## Accessibility + +### Screen Readers + +Action Sheets set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the action sheet is being used in an app. + +#### Role + +Action Sheets are given a `role` of [`dialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role). In order to align with the ARIA spec, either the `aria-label` or `aria-labelledby` attribute must be set. + +#### Action Sheet Description + +It is strongly recommended that every Action Sheet have the `header` property defined, as Ionic will automatically set `aria-labelledby` to point to the header element. However, if you choose not to include a `header`, an alternative is to use the `htmlAttributes` property to provide a descriptive `aria-label` or set a custom `aria-labelledby` value. + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +useIonActionSheet({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +```javascript +const actionSheet = await actionSheetController.create({ + htmlAttributes: { + 'aria-label': 'action sheet dialog', + }, +}); +``` + + + + + +#### Action Sheet Buttons Description + +Buttons containing text will be read by a screen reader. If a button contains only an icon, or a description other than the existing text is desired, a label should be assigned to the button by passing `aria-label` to the `htmlAttributes` property on the button. + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const actionSheet = await this.actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +useIonActionSheet({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const actionSheet = await actionSheetController.create({ + header: 'Header', + buttons: [ + { + icon: 'close', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +## Interfaces + +### ActionSheetButton + +```typescript +interface ActionSheetButton { + text?: string; + role?: 'cancel' | 'destructive' | 'selected' | string; + icon?: string; + cssClass?: string | string[]; + id?: string; + htmlAttributes?: { [key: string]: any }; + handler?: () => boolean | void | Promise; + data?: T; +} +``` + +### ActionSheetOptions + +```typescript +interface ActionSheetOptions { + header?: string; + subHeader?: string; + cssClass?: string | string[]; + buttons: (ActionSheetButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + mode?: Mode; + keyboardClose?: boolean; + id?: string; + htmlAttributes?: { [key: string]: any }; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/alert.md b/versioned_docs/version-v8/api/alert.md new file mode 100644 index 00000000000..40b277674e8 --- /dev/null +++ b/versioned_docs/version-v8/api/alert.md @@ -0,0 +1,356 @@ +--- +title: 'ion-alert' +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import Props from '@ionic-internal/component-api/v8/alert/props.md'; +import Events from '@ionic-internal/component-api/v8/alert/events.md'; +import Methods from '@ionic-internal/component-api/v8/alert/methods.md'; +import Parts from '@ionic-internal/component-api/v8/alert/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/alert/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/alert/slots.md'; + + + ion-alert: Ionic Alert Buttons with Custom Message Prompts + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +An Alert is a dialog that presents users with information or collects information from the user using inputs. An alert appears on top of the app's content, and must be manually dismissed by the user before they can resume interaction with the app. It can also optionally have a `header`, `subHeader` and `message`. + +## Inline Alerts (Recommended) + +`ion-alert` can be used by writing the component directly in your template. This reduces the number of handlers you need to wire up in order to present the Alert. + +import Trigger from '@site/static/usage/v8/alert/presenting/trigger/index.md'; + + + +### Using `isOpen` + +The `isOpen` property on `ion-alert` allows developers to control the presentation state of the Alert from their application state. This means when `isOpen` is set to `true` the Alert will be presented, and when `isOpen` is set to `false` the Alert will be dismissed. + +`isOpen` uses a one-way data binding, meaning it will not automatically be set to `false` when the Alert is dismissed. Developers should listen for the `ionAlertDidDismiss` or `didDismiss` event and set `isOpen` to `false`. The reason for this is it prevents the internals of `ion-alert` from being tightly coupled with the state of the application. With a one way data binding, the Alert only needs to concern itself with the boolean value that the reactive variable provides. With a two way data binding, the Alert needs to concern itself with both the boolean value as well as the existence of the reactive variable itself. This can lead to non-deterministic behaviors and make applications harder to debug. + +import IsOpen from '@site/static/usage/v8/alert/presenting/isOpen/index.md'; + + + +## Controller Alerts + +The `alertController` can be used in situations where more control is needed over when the Alert is presented and dismissed. + +import Controller from '@site/static/usage/v8/alert/presenting/controller/index.md'; + + + +## Buttons + +In the array of `buttons`, each button includes properties for its `text`, and optionally a `handler`. If a handler returns `false` then the alert will not automatically be dismissed when the button is clicked. All buttons will show up in the order they have been added to the `buttons` array from left to right. Note: The right most button (the last one in the array) is the main button. + +Optionally, a `role` property can be added to a button, such as `cancel`. If a `cancel` role is on one of the buttons, then if the alert is dismissed by tapping the backdrop, then it will fire the handler from the button with a cancel role. + +import Buttons from '@site/static/usage/v8/alert/buttons/index.md'; + + + +## Inputs + +Alerts can also include several different inputs whose data can be passed back to the app. Inputs can be used as a simple way to prompt users for information. Radios, checkboxes and text inputs are all accepted, but they cannot be mixed. For example, an alert could have all radio button inputs, or all checkbox inputs, but the same alert cannot mix radio and checkbox inputs. Do note however, different types of "text" inputs can be mixed, such as `url`, `email`, `text`, `textarea` etc. If you require a complex form UI which doesn't fit within the guidelines of an alert then we recommend building the form within a modal instead. + +### Text Inputs Example + +import TextInputs from '@site/static/usage/v8/alert/inputs/text-inputs/index.md'; + + + +### Radio Example + +import Radios from '@site/static/usage/v8/alert/inputs/radios/index.md'; + + + +## Customization + +Alert uses scoped encapsulation, which means it will automatically scope its CSS by appending each of the styles with an additional class at runtime. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. + +We recommend passing a custom class to `cssClass` in the `create` method and using that to add custom styles to the host and inner elements. This property can also accept multiple classes separated by spaces. + +```css +/* DOES NOT WORK - not specific enough */ +.alert-wrapper { + background: #e5e5e5; +} + +/* Works - pass "my-custom-class" in cssClass to increase specificity */ +.my-custom-class .alert-wrapper { + background: #e5e5e5; +} +``` + +Any of the defined [CSS Custom Properties](#css-custom-properties) can be used to style the Alert without needing to target individual elements: + +```css +.my-custom-class { + --background: #e5e5e5; +} +``` + +import Customization from '@site/static/usage/v8/alert/customization/index.md'; + + + +:::note +If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. +::: + +## Accessibility + +### Screen Readers + +Alerts set aria properties in order to be [accessible](../reference/glossary#a11y) to screen readers, but these properties can be overridden if they aren't descriptive enough or don't align with how the alert is being used in an app. + +#### Role + +Ionic automatically sets the Alert's `role` to either [`alertdialog`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alertdialog_role) if there are any inputs or buttons included, or [`alert`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) if there are none. + +#### Alert Description + +If the `header` property is defined for the Alert, the `aria-labelledby` attribute will be automatically set to the header's ID. The `subHeader` element will be used as a fallback if `header` is not defined. Similarly, the `aria-describedby` attribute will be automatically set to the ID of the `message` element if that property is defined. + +It is strongly recommended that your Alert have a `message`, as well as either a `header` or `subHeader`, in order to align with the ARIA spec. If you choose not to include a `header` or `subHeader`, an alternative is to provide a descriptive `aria-label` using the `htmlAttributes` property. + + + + + +```javascript +const alert = await this.alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +const alert = await this.alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +useIonAlert({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +```javascript +const alert = await alertController.create({ + message: 'This is an alert with custom aria attributes.', + htmlAttributes: { + 'aria-label': 'alert dialog', + }, +}); +``` + + + + + +All ARIA attributes can be manually overwritten by defining custom values in the `htmlAttributes` property of the Alert. + +#### Alert Buttons Description + +Buttons containing text will be read by a screen reader. If a description other than the existing text is desired, a label can be set on the button by passing `aria-label` to the `htmlAttributes` property on the button. + + + + + +```javascript +const alert = await this.alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const alert = await this.alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +useIonAlert({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +```javascript +const alert = await alertController.create({ + header: 'Header', + buttons: [ + { + text: 'Exit', + htmlAttributes: { + 'aria-label': 'close', + }, + }, + ], +}); +``` + + + + + +## Interfaces + +### AlertButton + +```typescript +type AlertButtonOverlayHandler = boolean | void | { [key: string]: any }; + +interface AlertButton { + text: string; + role?: 'cancel' | 'destructive' | string; + cssClass?: string | string[]; + id?: string; + htmlAttributes?: { [key: string]: any }; + handler?: (value: any) => AlertButtonOverlayHandler | Promise; +} +``` + +### AlertInput + +```typescript +interface AlertInput { + type?: TextFieldTypes | 'checkbox' | 'radio' | 'textarea'; + name?: string; + placeholder?: string; + value?: any; + /** + * The label text to display next to the input, if the input type is `radio` or `checkbox`. + */ + label?: string; + checked?: boolean; + disabled?: boolean; + id?: string; + handler?: (input: AlertInput) => void; + min?: string | number; + max?: string | number; + cssClass?: string | string[]; + attributes?: { [key: string]: any }; + tabindex?: number; +} +``` + +### AlertOptions + +```typescript +interface AlertOptions { + header?: string; + subHeader?: string; + message?: string | IonicSafeString; + cssClass?: string | string[]; + inputs?: AlertInput[]; + buttons?: (AlertButton | string)[]; + backdropDismiss?: boolean; + translucent?: boolean; + animated?: boolean; + htmlAttributes?: { [key: string]: any }; + + mode?: Mode; + keyboardClose?: boolean; + id?: string; + + enterAnimation?: AnimationBuilder; + leaveAnimation?: AnimationBuilder; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/app.md b/versioned_docs/version-v8/api/app.md new file mode 100644 index 00000000000..773abf04b4e --- /dev/null +++ b/versioned_docs/version-v8/api/app.md @@ -0,0 +1,63 @@ +--- +title: 'ion-app' +--- + +import Props from '@ionic-internal/component-api/v8/app/props.md'; +import Events from '@ionic-internal/component-api/v8/app/events.md'; +import Methods from '@ionic-internal/component-api/v8/app/methods.md'; +import Parts from '@ionic-internal/component-api/v8/app/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/app/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/app/slots.md'; + + + ion-app: Container Element for an Ionic Application + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +App is a container element for an Ionic application. There should only be one `` element per project. An app can have many Ionic components including menus, headers, content, and footers. The overlay components get appended to the `` when they are presented. + +Using `ion-app` enables the following behaviors: + +- [Keyboard Lifecycle Events](../developing/keyboard#keyboard-lifecycle-events) without the need for any native plugins +- [Hardware Back Button Listeners](../developing/hardware-back-button) for customizing the hardware back button behavior on Android devices +- Status bar support in Capacitor or Cordova which allows users to scroll to the top of the view by tapping the status bar +- Scroll assist utilities which scroll the content so focused text inputs are not covered by the on-screen keyboard +- [Ripple effect](./ripple-effect) when activating buttons on Material Design mode +- Other tap and focus utilities which make the experience of using an Ionic app feel more native + +## Programmatic Focus + +Ionic offers focus utilities for components with the `ion-focusable` class. These utilities automatically manage focus for components when certain keyboard keys, like Tab, are pressed. Components can also be programmatically focused in response to user actions using the `setFocus` method from `ion-app`. + +import SetFocus from '@site/static/usage/v8/app/set-focus/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/avatar.md b/versioned_docs/version-v8/api/avatar.md new file mode 100644 index 00000000000..35c09f9603b --- /dev/null +++ b/versioned_docs/version-v8/api/avatar.md @@ -0,0 +1,76 @@ +--- +title: 'ion-avatar' +--- + +import Props from '@ionic-internal/component-api/v8/avatar/props.md'; +import Events from '@ionic-internal/component-api/v8/avatar/events.md'; +import Methods from '@ionic-internal/component-api/v8/avatar/methods.md'; +import Parts from '@ionic-internal/component-api/v8/avatar/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/avatar/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/avatar/slots.md'; + + + ion-avatar: Circular Application Avatar Icon Component + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object. + +Avatars can be used by themselves or inside of any element. If placed inside of an `ion-chip` or `ion-item`, the avatar will resize to fit the parent component. To position an avatar on the left or right side of an item, set the slot to `start` or `end`, respectively. + +## Basic Usage + +import Basic from '@site/static/usage/v8/avatar/basic/index.md'; + + + +## Chip Avatar + +import Chip from '@site/static/usage/v8/avatar/chip/index.md'; + + + +## Item Avatar + +import Item from '@site/static/usage/v8/avatar/item/index.md'; + + + +## Theming + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/avatar/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/back-button.md b/versioned_docs/version-v8/api/back-button.md new file mode 100644 index 00000000000..0a144cf1bf3 --- /dev/null +++ b/versioned_docs/version-v8/api/back-button.md @@ -0,0 +1,66 @@ +--- +title: 'ion-back-button' +--- + +import Props from '@ionic-internal/component-api/v8/back-button/props.md'; +import Events from '@ionic-internal/component-api/v8/back-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/back-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/back-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/back-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/back-button/slots.md'; + + + ion-back-button: Custom Menu Back Button for Applications + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The back button navigates back in the app's history when clicked. It is only displayed when there is history in the navigation stack, unless [`defaultHref`](#default-back-history) is set. The back button displays different text and icon based on the mode, but this can be customized. + +## Basic Usage + +import Basic from '@site/static/usage/v8/back-button/basic/index.md'; + + + +## Custom Back Button + +By default, the back button will display the text `"Back"` with a `"chevron-back"` icon on `ios`, and an `"arrow-back-sharp"` icon on `md`. This can be customized per back button component by setting the `icon` or `text` properties. Alternatively, it can be set globally using the `backButtonIcon` or `backButtonText` properties in the global config. Refer to the [Config docs](../developing/config) for more information. + +import Custom from '@site/static/usage/v8/back-button/custom/index.md'; + + + +## Default Back History + +Occasionally an app may need to show the back button and navigate back when there is no history. This can be done by setting the `defaultHref` on the back button to a path. In order to use `defaultHref`, the app must contain a router with paths set. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/backdrop.md b/versioned_docs/version-v8/api/backdrop.md new file mode 100644 index 00000000000..462da52a180 --- /dev/null +++ b/versioned_docs/version-v8/api/backdrop.md @@ -0,0 +1,58 @@ +--- +title: 'ion-backdrop' +--- + +import Props from '@ionic-internal/component-api/v8/backdrop/props.md'; +import Events from '@ionic-internal/component-api/v8/backdrop/events.md'; +import Methods from '@ionic-internal/component-api/v8/backdrop/methods.md'; +import Parts from '@ionic-internal/component-api/v8/backdrop/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/backdrop/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/backdrop/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Backdrops are full screen components that overlay other components. They are useful behind components that transition in on top of other content and can be used to dismiss that component. + +## Basic Usage + +The backdrop prevents clicking or tapping on the content behind it. It is transparent by default, so the below demo includes CSS to make it visible. + +import Basic from '@site/static/usage/v8/backdrop/basic/index.md'; + + + +## Styling + +The backdrop can be customized by assigning CSS properties directly to the backdrop element. Common properties include `background-color`, `background` and `opacity`. + +Content can be displayed above the backdrop by setting a `z-index` on the content, higher than the backdrop (defaults to `2`). + +import Styling from '@site/static/usage/v8/backdrop/styling/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/badge.md b/versioned_docs/version-v8/api/badge.md new file mode 100644 index 00000000000..7904dc127e7 --- /dev/null +++ b/versioned_docs/version-v8/api/badge.md @@ -0,0 +1,80 @@ +--- +title: 'ion-badge' +--- + +import Props from '@ionic-internal/component-api/v8/badge/props.md'; +import Events from '@ionic-internal/component-api/v8/badge/events.md'; +import Methods from '@ionic-internal/component-api/v8/badge/methods.md'; +import Parts from '@ionic-internal/component-api/v8/badge/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/badge/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/badge/slots.md'; + + + ion-badge: iOS & Android App Notification Badge Icons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Badges are inline block elements that usually appear near another element. Typically they contain a number or other characters. They can be used as a notification that there are additional items associated with an element and indicate how many items there are. Badges are hidden if no content is passed in. + +## Basic Usage + +import Basic from '@site/static/usage/v8/badge/basic/index.md'; + + + +## Badges in Tab Buttons + +Badges can be added inside a tab button, often used to indicate notifications or highlight additional items associated with the element. + +:::info +Empty badges are only available for `md` mode. +::: + +import InsideTabBar from '@site/static/usage/v8/badge/inside-tab-bar/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/badge/theming/colors/index.md'; + + + +### CSS Properties + +import CSSProps from '@site/static/usage/v8/badge/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/breadcrumb.md b/versioned_docs/version-v8/api/breadcrumb.md new file mode 100644 index 00000000000..92891a3d56e --- /dev/null +++ b/versioned_docs/version-v8/api/breadcrumb.md @@ -0,0 +1,63 @@ +--- +title: 'ion-breadcrumb' +--- + +import Props from '@ionic-internal/component-api/v8/breadcrumb/props.md'; +import Events from '@ionic-internal/component-api/v8/breadcrumb/events.md'; +import Methods from '@ionic-internal/component-api/v8/breadcrumb/methods.md'; +import Parts from '@ionic-internal/component-api/v8/breadcrumb/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/breadcrumb/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/breadcrumb/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +A Breadcrumb is a single navigation item that is a child of the Breadcrumbs component. A breadcrumb can link elsewhere in an app or it can be plain text. Each breadcrumb has a separator between it and the next breadcrumb and can optionally contain an icon. + +Refer to the [Breadcrumbs](./breadcrumbs) documentation for more information. + +## Interfaces + +### BreadcrumbCollapsedClickEventDetail + +```typescript +interface BreadcrumbCollapsedClickEventDetail { + collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[]; +} +``` + +### BreadcrumbCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing . + +```typescript +interface BreadcrumbCustomEvent extends CustomEvent { + detail: BreadcrumbCollapsedClickEventDetail; + target: HTMLIonBreadcrumbElement; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/breadcrumbs.md b/versioned_docs/version-v8/api/breadcrumbs.md new file mode 100644 index 00000000000..f3396c2770b --- /dev/null +++ b/versioned_docs/version-v8/api/breadcrumbs.md @@ -0,0 +1,108 @@ +--- +title: 'ion-breadcrumbs' +--- + +import Props from '@ionic-internal/component-api/v8/breadcrumbs/props.md'; +import Events from '@ionic-internal/component-api/v8/breadcrumbs/events.md'; +import Methods from '@ionic-internal/component-api/v8/breadcrumbs/methods.md'; +import Parts from '@ionic-internal/component-api/v8/breadcrumbs/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/breadcrumbs/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/breadcrumbs/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Breadcrumbs are navigation items that are used to indicate where a user is on an app or site. They should be used for large sites and apps with hierarchically arranged pages. Breadcrumbs can be collapsed based on the maximum number that can show, and the collapsed indicator can be clicked on to present a popover with more information or expand the collapsed breadcrumbs. + +## Basic Usage + +import Basic from '@site/static/usage/v8/breadcrumbs/basic/index.md'; + + + +## Using Icons + +### Icons on Items + +import IconsOnItems from '@site/static/usage/v8/breadcrumbs/icons/icons-on-items/index.md'; + + + +### Custom Separators + +import CustomSeparators from '@site/static/usage/v8/breadcrumbs/icons/custom-separators/index.md'; + + + +## Collapsing Items + +### Max Items + +If there are more items than the value of `maxItems`, the breadcrumbs will be collapsed. By default, only the first and last items will be shown. + +import MaxItems from '@site/static/usage/v8/breadcrumbs/collapsing-items/max-items/index.md'; + + + +### Items Before or After Collapse + +Once the items are collapsed, the number of items to show can be controlled by the `itemsBeforeCollapse` and `itemsAfterCollapse` properties. + +import ItemsBeforeAfter from '@site/static/usage/v8/breadcrumbs/collapsing-items/items-before-after/index.md'; + + + +### Collapsed Indicator Click -- Expand Breadcrumbs + +Clicking the collapsed indicator will fire the `ionCollapsedClick` event. This can be used to, for example, expand the breadcrumbs. + +import ExpandOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/expand-on-click/index.md'; + + + +### Collapsed Indicator Click -- Present Popover + +The `ionCollapsedClick` event can also be used to present an overlay (in this case, an `ion-popover`) showing the hidden breadcrumbs. + +import PopoverOnClick from '@site/static/usage/v8/breadcrumbs/collapsing-items/popover-on-click/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/breadcrumbs/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/breadcrumbs/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/button.md b/versioned_docs/version-v8/api/button.md new file mode 100644 index 00000000000..2c69abac06f --- /dev/null +++ b/versioned_docs/version-v8/api/button.md @@ -0,0 +1,124 @@ +--- +title: 'ion-button' +--- + +import Props from '@ionic-internal/component-api/v8/button/props.md'; +import Events from '@ionic-internal/component-api/v8/button/events.md'; +import Methods from '@ionic-internal/component-api/v8/button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/button/slots.md'; + + + ion-button: Style Buttons with Custom CSS Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way. + +## Basic Usage + +import Basic from '@site/static/usage/v8/button/basic/index.md'; + + + +## Expand + +This property lets you specify how wide the button should be. By default, buttons have `display: inline-block`, but setting this property will change the button to a full-width element with `display: block`. + +import Expand from '@site/static/usage/v8/button/expand/index.md'; + + + +## Shape + +This property lets you specify the shape of the button. By default, buttons are rectangular with a small border radius, but setting this to `"round"` will change the button to a rounded element. + +import Shape from '@site/static/usage/v8/button/shape/index.md'; + + + +## Fill + +This property determines the background and border color of the button. By default, buttons have a solid background unless the button is inside of a toolbar, in which case it has a transparent background. + +import Fill from '@site/static/usage/v8/button/fill/index.md'; + + + +## Size + +This property specifies the size of the button. Setting this property will change the height and padding of a button. + +import Size from '@site/static/usage/v8/button/size/index.md'; + + + +## Icons + +import Icons from '@site/static/usage/v8/button/icons/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/button/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/button/theming/css-properties/index.md'; + + + +## Accessibility + +Buttons are built to be accessible, but may need some adjustments depending on their content. The button component renders a native [button element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) which allows it to take advantage of the functionality that a native button provides. + +### Overflowing Text Content + +There are many cases where a button's text content may overflow the container. It is recommended to wrap the text inside of the button when this happens so that all of the text can still be read. The button component will automatically adjust its height to accommodate the extra lines of text. + +The button text does not automatically wrap to the next line when the text is too long to fit. In order to make the text wrap, the `ion-text-wrap` class can be added, which will set the `white-space` property to `"normal"`. This will become the default in a future major release. + +:::info +The `max-width` style is set on the button below for demo purposes only. Text wrapping will work with a dynamic button width. +::: + +import TextWrapping from '@site/static/usage/v8/button/text-wrapping/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/buttons.md b/versioned_docs/version-v8/api/buttons.md new file mode 100644 index 00000000000..ff9a077a1eb --- /dev/null +++ b/versioned_docs/version-v8/api/buttons.md @@ -0,0 +1,92 @@ +--- +title: 'ion-buttons' +--- + +import Props from '@ionic-internal/component-api/v8/buttons/props.md'; +import Events from '@ionic-internal/component-api/v8/buttons/events.md'; +import Methods from '@ionic-internal/component-api/v8/buttons/methods.md'; +import Parts from '@ionic-internal/component-api/v8/buttons/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/buttons/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/buttons/slots.md'; + + + ion-buttons: Toolbar Element with Named Slots for Buttons + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The Buttons component is a container element. It should be used inside of a [toolbar](./toolbar) and can contain several types of buttons, including standard [buttons](./button), [menu buttons](./menu-button), and [back buttons](./back-button). + +## Basic Usage + +import Basic from '@site/static/usage/v8/buttons/basic/index.md'; + + + +## Buttons Placement + +Buttons can be positioned inside of the toolbar using a named slot. The below chart has a description of each slot. + +| Slot | Description | +| ----------- | ------------------------------------------------------------------------------------------------------- | +| `start` | Positions to the `left` of the content in LTR, and to the `right` in RTL. | +| `end` | Positions to the `right` of the content in LTR, and to the `left` in RTL. | +| `secondary` | Positions element to the `left` of the content in `ios` mode, and directly to the `right` in `md` mode. | +| `primary` | Positions element to the `right` of the content in `ios` mode, and to the far `right` in `md` mode. | + +import Placement from '@site/static/usage/v8/buttons/placement/index.md'; + + + +## Types of Buttons + +A button in a toolbar is styled to be clear by default, but this can be changed using the [`fill`](./button#fill) property on the button. The properties included on [back button](./back-button) and [menu button](./menu-button) in this example are for display purposes; refer to their respective documentation for proper usage. + +import Types from '@site/static/usage/v8/buttons/types/index.md'; + + + +## Collapsible Buttons + +The `collapse` property can be set on the buttons to collapse them when the header collapses. This is typically used with [collapsible large titles](./title#collapsible-large-titles). + +:::info + +This feature is only available for iOS. + +::: + +{/* Reuse the playground from the Title directory */} +import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/card-content.md b/versioned_docs/version-v8/api/card-content.md new file mode 100644 index 00000000000..509cb0bb0c3 --- /dev/null +++ b/versioned_docs/version-v8/api/card-content.md @@ -0,0 +1,40 @@ +--- +title: 'ion-card-content' +--- + +import Props from '@ionic-internal/component-api/v8/card-content/props.md'; +import Events from '@ionic-internal/component-api/v8/card-content/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/card-content/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + +Card content is a child component of card that adds padding around its contents. It is recommended that any text content for a card should be placed inside of card content. + +Refer to the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/card-header.md b/versioned_docs/version-v8/api/card-header.md new file mode 100644 index 00000000000..17b6fcfceec --- /dev/null +++ b/versioned_docs/version-v8/api/card-header.md @@ -0,0 +1,42 @@ +--- +title: 'ion-card-header' +--- + +import Props from '@ionic-internal/component-api/v8/card-header/props.md'; +import Events from '@ionic-internal/component-api/v8/card-header/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-header/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-header/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-header/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/card-header/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Card header is a child component of card that should be placed before the card content. It can contain a [card title](./card-title) and a [card subtitle](./card-subtitle). + +Refer to the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/card-subtitle.md b/versioned_docs/version-v8/api/card-subtitle.md new file mode 100644 index 00000000000..46d626ab211 --- /dev/null +++ b/versioned_docs/version-v8/api/card-subtitle.md @@ -0,0 +1,42 @@ +--- +title: 'ion-card-subtitle' +--- + +import Props from '@ionic-internal/component-api/v8/card-subtitle/props.md'; +import Events from '@ionic-internal/component-api/v8/card-subtitle/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-subtitle/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-subtitle/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-subtitle/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/card-subtitle/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Card subtitle is a child component of card that should be placed inside of a [card header](./card-header). + +Refer to the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/card-title.md b/versioned_docs/version-v8/api/card-title.md new file mode 100644 index 00000000000..b3a0d6cef6b --- /dev/null +++ b/versioned_docs/version-v8/api/card-title.md @@ -0,0 +1,50 @@ +--- +title: 'ion-card-title' +--- + +import Props from '@ionic-internal/component-api/v8/card-title/props.md'; +import Events from '@ionic-internal/component-api/v8/card-title/events.md'; +import Methods from '@ionic-internal/component-api/v8/card-title/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card-title/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card-title/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/card-title/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + ion-card-title: Ionic App Card Title Component + + + + + +Card title is a child component of card that should be placed inside of a [card header](./card-header). + +Refer to the [Card](./card) documentation for more information. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/card.md b/versioned_docs/version-v8/api/card.md new file mode 100644 index 00000000000..04f95e08906 --- /dev/null +++ b/versioned_docs/version-v8/api/card.md @@ -0,0 +1,90 @@ +--- +title: 'ion-card' +--- + +import Props from '@ionic-internal/component-api/v8/card/props.md'; +import Events from '@ionic-internal/component-api/v8/card/events.md'; +import Methods from '@ionic-internal/component-api/v8/card/methods.md'; +import Parts from '@ionic-internal/component-api/v8/card/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/card/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/card/slots.md'; + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + ion-card: Card UI Components for Ionic Framework API + + + + + +Cards are containers that display content such as text, images, buttons, and lists. +A card can be a single component, but is often made up of a header, title, subtitle, +and content. Cards are broken up into several components to accommodate this structure: +[card header](./card-header), [card title](./card-title), [card subtitle](./card-subtitle), +and [card content](./card-content). + +## Basic Usage + +import Basic from '@site/static/usage/v8/card/basic/index.md'; + + + +## Media Cards + +import Media from '@site/static/usage/v8/card/media/index.md'; + + + +## Card Buttons + +import Buttons from '@site/static/usage/v8/card/buttons/index.md'; + + + +## List Card + +import List from '@site/static/usage/v8/card/list/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/card/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/card/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/checkbox.md b/versioned_docs/version-v8/api/checkbox.md new file mode 100644 index 00000000000..9549e84616d --- /dev/null +++ b/versioned_docs/version-v8/api/checkbox.md @@ -0,0 +1,140 @@ +--- +title: 'ion-checkbox' +--- + +import Props from '@ionic-internal/component-api/v8/checkbox/props.md'; +import Events from '@ionic-internal/component-api/v8/checkbox/events.md'; +import Methods from '@ionic-internal/component-api/v8/checkbox/methods.md'; +import Parts from '@ionic-internal/component-api/v8/checkbox/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/checkbox/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/checkbox/slots.md'; + + + ion-checkbox: Ionic App Checkbox to Select Multiple Options + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Checkboxes allow the selection of multiple options from a set of options. They appear as checked (ticked) when activated. Clicking on a checkbox will toggle the `checked` property. They can also be checked programmatically by setting the `checked` property. + +## Basic Usage + +import Basic from '@site/static/usage/v8/checkbox/basic/index.md'; + + + +## Label Placement + +Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property. + +import LabelPlacement from '@site/static/usage/v8/checkbox/label-placement/index.md'; + + + +## Alignment + +Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property. + +:::note +Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally. +::: + +import Alignment from '@site/static/usage/v8/checkbox/alignment/index.md'; + + + +## Justification + +Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property. + +import Justify from '@site/static/usage/v8/checkbox/justify/index.md'; + + + +:::note +`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly. +::: + +## Indeterminate Checkboxes + +import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md'; + + + +## Links inside of Labels + +Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable. + +import LabelLink from '@site/static/usage/v8/checkbox/label-link/index.md'; + + + +## Helper & Error Text + +Helper and error text can be used inside of a checkbox with the `helperText` and `errorText` property. The error text will not be displayed unless the `ion-invalid` and `ion-touched` classes are added to the `ion-checkbox`. This ensures errors are not shown before the user has a chance to enter data. + +In Angular, this is done automatically through form validation. In JavaScript, React and Vue, the class needs to be manually added based on your own validation. + +import HelperError from '@site/static/usage/v8/checkbox/helper-error/index.md'; + + + +## Theming + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/checkbox/theming/css-properties/index.md'; + + + +## Interfaces + +### CheckboxChangeEventDetail + +```typescript +interface CheckboxChangeEventDetail { + value: T; + checked: boolean; +} +``` + +### CheckboxCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component. + +```typescript +interface CheckboxCustomEvent extends CustomEvent { + detail: CheckboxChangeEventDetail; + target: HTMLIonCheckboxElement; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/chip.md b/versioned_docs/version-v8/api/chip.md new file mode 100644 index 00000000000..04bc0f72ec7 --- /dev/null +++ b/versioned_docs/version-v8/api/chip.md @@ -0,0 +1,74 @@ +--- +title: 'ion-chip' +--- + +import Props from '@ionic-internal/component-api/v8/chip/props.md'; +import Events from '@ionic-internal/component-api/v8/chip/events.md'; +import Methods from '@ionic-internal/component-api/v8/chip/methods.md'; +import Parts from '@ionic-internal/component-api/v8/chip/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/chip/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/chip/slots.md'; + + + ion-chip: Text, Icon and Avatar for Ionic Framework Apps + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Chips represent complex entities in small blocks, such as a contact. A chip can contain several different elements such as avatars, text, and icons. + +## Basic Usage + +import Basic from '@site/static/usage/v8/chip/basic/index.md'; + + + +## Slotting Components and Icons + +import SlotExample from '@site/static/usage/v8/chip/slots/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/chip/theming/colors/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/chip/theming/css-properties/index.md'; + + + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/col.md b/versioned_docs/version-v8/api/col.md new file mode 100644 index 00000000000..dc649edf729 --- /dev/null +++ b/versioned_docs/version-v8/api/col.md @@ -0,0 +1,54 @@ +--- +title: 'ion-col' +--- + +import Props from '@ionic-internal/component-api/v8/col/props.md'; +import Events from '@ionic-internal/component-api/v8/col/events.md'; +import Methods from '@ionic-internal/component-api/v8/col/methods.md'; +import Parts from '@ionic-internal/component-api/v8/col/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/col/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/col/slots.md'; + + + ion-col: Column Component Padding and Other Properties + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Columns are cellular components of the [grid](./grid) system and go inside of a [row](./row). They will expand to fill the row. All content within a grid should go inside of a column. + +Refer to the [grid](./grid) documentation for more information. + +## Column Alignment + +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/content.md b/versioned_docs/version-v8/api/content.md new file mode 100644 index 00000000000..a6407ea905c --- /dev/null +++ b/versioned_docs/version-v8/api/content.md @@ -0,0 +1,184 @@ +--- +title: 'ion-content' +--- + +import Props from '@ionic-internal/component-api/v8/content/props.md'; +import Events from '@ionic-internal/component-api/v8/content/events.md'; +import Methods from '@ionic-internal/component-api/v8/content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/content/slots.md'; + + + ion-content: Scrollable Component for Ionic App Content + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +The content component provides an easy to use content area with some useful methods +to control the scrollable area. There should only be one content in a single +view. + +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). + +## Basic Usage + +import Basic from '@site/static/usage/v8/content/basic/index.md'; + + + +## Header & Footer + +Content can be the only top-level component in a page, or it can be used alongside a [header](./header), [footer](./footer), or both. When used with a header or footer, it will adjust its size to fill the remaining height. + +import HeaderFooter from '@site/static/usage/v8/content/header-footer/index.md'; + + + +## Fullscreen Content + +By default, content fills the space between a [header](./header) and [footer](./footer) but does not go behind them. In certain cases, it may be desired to have the content scroll behind the header and footer, such as when the `translucent` property is set on either of them, or `opacity` is set on the toolbar. This can be achieved by setting the `fullscreen` property on the content to `true`. + +import Fullscreen from '@site/static/usage/v8/content/fullscreen/index.md'; + + + +## Fixed Content + +To place elements outside of the scrollable area, assign them to the `fixed` slot. Doing so will [absolutely position](https://developer.mozilla.org/en-US/docs/Web/CSS/position#absolute_positioning) the element to the top left of the content. In order to change the position of the element, it can be styled using the [top, right, bottom, and left](https://developer.mozilla.org/en-US/docs/Web/CSS/position) CSS properties. + +The `fixedSlotPlacement` property is used to determine if content in the `fixed` slot is placed before or after the main content in the DOM. When set to `before`, fixed slot content will be placed before the main content and will therefore receive keyboard focus before the main content receives keyboard focus. This can be useful when the main content contains an infinitely-scrolling list, preventing a [FAB](./fab) or other fixed content from being reachable by pressing the tab key. + +import Fixed from '@site/static/usage/v8/content/fixed/index.md'; + + + +## Scroll Methods + +Content provides [methods](#methods) that can be called to scroll the content to the bottom, top, or to a specific point. They can be passed a `duration` in order to smoothly transition instead of instantly changing the position. + +import ScrollMethods from '@site/static/usage/v8/content/scroll-methods/index.md'; + + + +## Scroll Events + +Scroll events are disabled by default for content due to performance. However, they can be enabled by setting `scrollEvents` to `true`. This is necessary before listening to any of the scroll [events](#events). + +import ScrollEvents from '@site/static/usage/v8/content/scroll-events/index.md'; + + + +## Theming + +### Colors + +import Colors from '@site/static/usage/v8/content/theming/colors/index.md'; + + + +### CSS Shadow Parts + +import CSSParts from '@site/static/usage/v8/content/theming/css-shadow-parts/index.md'; + + + +### CSS Custom Properties + +import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index.md'; + + + +### Safe Area Padding + +The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.md#application-variables). + +The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. + +```css +ion-content::part(scroll) { + padding-top: var(--ion-safe-area-top, 0); +} +``` + +Another common use case is to apply padding to the left side of the content to account for the notch when the device is in landscape mode and the notch is on the left side. This can be done by setting the `padding-left` property to the value of the `--ion-safe-area-left` variable. + +```css +ion-content::part(scroll) { + padding-left: var(--ion-safe-area-left, 0); +} +``` + +import SafeArea from '@site/static/usage/v8/content/theming/safe-area/index.md'; + + + +## Interfaces + +### ScrollBaseDetail + +```typescript +interface ScrollBaseDetail { + isScrolling: boolean; +} +``` + +### ScrollDetail + +```typescript +interface ScrollDetail extends GestureDetail, ScrollBaseDetail { + scrollTop: number; + scrollLeft: number; +} +``` + +### ScrollBaseCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScrollStart` and `ionScrollEnd` events. + +```typescript +interface ScrollBaseCustomEvent extends CustomEvent { + detail: ScrollBaseDetail; + target: HTMLIonContentElement; +} +``` + +### ScrollCustomEvent + +While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing on the `ionScroll` event. + +```typescript +interface ScrollCustomEvent extends ScrollBaseCustomEvent { + detail: ScrollDetail; +} +``` + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/datetime-button.md b/versioned_docs/version-v8/api/datetime-button.md new file mode 100644 index 00000000000..1070a1e1ee4 --- /dev/null +++ b/versioned_docs/version-v8/api/datetime-button.md @@ -0,0 +1,76 @@ +--- +title: 'ion-datetime-button' +--- + +import Props from '@ionic-internal/component-api/v8/datetime-button/props.md'; +import Events from '@ionic-internal/component-api/v8/datetime-button/events.md'; +import Methods from '@ionic-internal/component-api/v8/datetime-button/methods.md'; +import Parts from '@ionic-internal/component-api/v8/datetime-button/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/datetime-button/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/datetime-button/slots.md'; + + + ion-datetime-button: Ionic Input for Datetime Picker + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Datetime Button links with a [Datetime](./datetime) component to display the formatted date and time. It also provides buttons to present the datetime in a modal, popover, and more. + +## Overview + +Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. + +When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](./popover#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. + +## Basic Usage + +import Basic from '@site/static/usage/v8/datetime-button/basic/index.md'; + + + +## Localization + +The localized text on `ion-datetime-button` is determined by the `locale` property on the associated `ion-datetime` instance. Refer to [Datetime Localization](./datetime#localization) for more details. + +## Format Options + +You can customize the format of the date and time in a Datetime Button by providing `formatOptions` on the associated Datetime instance. Refer to [Datetime Format Options](./datetime#format-options) for more details. + +import FormatOptions from '@site/static/usage/v8/datetime-button/format-options/index.md'; + + + +## Usage with Modals and Popovers + +`ion-datetime-button` must be associated with a mounted `ion-datetime` instance. As a result, [Inline Modals](./modal#inline-modals-recommended) and [Inline Popovers](./popover#inline-popovers) with the `keepContentsMounted` property set to `true` must be used. + +## Properties + + + +## Events + + + +## Methods + + + +## CSS Shadow Parts + + + +## CSS Custom Properties + + + +## Slots + + diff --git a/versioned_docs/version-v8/api/datetime.md b/versioned_docs/version-v8/api/datetime.md new file mode 100644 index 00000000000..227411cc66d --- /dev/null +++ b/versioned_docs/version-v8/api/datetime.md @@ -0,0 +1,527 @@ +--- +title: 'ion-datetime' +--- + +import Props from '@ionic-internal/component-api/v8/datetime/props.md'; +import Events from '@ionic-internal/component-api/v8/datetime/events.md'; +import Methods from '@ionic-internal/component-api/v8/datetime/methods.md'; +import Parts from '@ionic-internal/component-api/v8/datetime/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/datetime/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/datetime/slots.md'; + +import Basic from '@site/static/usage/v8/datetime/basic/index.md'; + +import MaxMin from '@site/static/usage/v8/datetime/date-constraints/max-min/index.md'; +import Values from '@site/static/usage/v8/datetime/date-constraints/values/index.md'; +import Advanced from '@site/static/usage/v8/datetime/date-constraints/advanced/index.md'; + +import FormatOptions from '@site/static/usage/v8/datetime/format-options/index.md'; + +import CustomLocale from '@site/static/usage/v8/datetime/localization/custom-locale/index.md'; +import HourCycle from '@site/static/usage/v8/datetime/localization/hour-cycle/index.md'; +import FirstDayOfWeek from '@site/static/usage/v8/datetime/localization/first-day-of-week/index.md'; +import LocaleExtensionTags from '@site/static/usage/v8/datetime/localization/locale-extension-tags/index.md'; +import TimeLabel from '@site/static/usage/v8/datetime/localization/time-label/index.md'; + +import MonthAndYear from '@site/static/usage/v8/datetime/presentation/month-and-year/index.md'; +import Time from '@site/static/usage/v8/datetime/presentation/time/index.md'; +import Date from '@site/static/usage/v8/datetime/presentation/date/index.md'; + +import ShowingDefaultTitle from '@site/static/usage/v8/datetime/title/showing-default-title/index.md'; +import CustomizingTitle from '@site/static/usage/v8/datetime/title/customizing-title/index.md'; + +import ShowingConfirmationButtons from '@site/static/usage/v8/datetime/buttons/showing-confirmation-buttons/index.md'; +import CustomizingButtons from '@site/static/usage/v8/datetime/buttons/customizing-buttons/index.md'; +import CustomizingButtonTexts from '@site/static/usage/v8/datetime/buttons/customizing-button-texts/index.md'; + +import HighlightedDatesArray from '@site/static/usage/v8/datetime/highlightedDates/array/index.md'; +import HighlightedDatesCallback from '@site/static/usage/v8/datetime/highlightedDates/callback/index.md'; + +import ShowAdjacentDays from '@site/static/usage/v8/datetime/show-adjacent-days/index.md'; + +import MultipleDateSelection from '@site/static/usage/v8/datetime/multiple/index.md'; + +import GlobalTheming from '@site/static/usage/v8/datetime/styling/global-theming/index.md'; +import CalendarHeaderStyling from '@site/static/usage/v8/datetime/styling/calendar-header/index.md'; +import CalendarDaysStyling from '@site/static/usage/v8/datetime/styling/calendar-days/index.md'; +import DatetimeHeaderStyling from '@site/static/usage/v8/datetime/styling/datetime-header/index.md'; +import WheelStyling from '@site/static/usage/v8/datetime/styling/wheel-styling/index.md'; + + + ion-datetime: Ionic API Input for Datetime Format Picker + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +Datetimes present a calendar interface and time wheel, making it easy for users to select dates and times. Datetimes are similar to the native `input` elements of `datetime-local`, however, Ionic Framework's Datetime component makes it easy to display the date and time in the preferred format, and manage the datetime values. + +## Overview + +Historically, handling datetime values within JavaScript, or even within HTML +inputs, has always been a challenge. Specifically, JavaScript's `Date` object is +notoriously difficult to correctly parse apart datetime strings or to format +datetime values. Even worse is how different browsers and JavaScript versions +parse various datetime strings differently, especially per locale. + +Fortunately, Ionic Framework's datetime input has been designed so developers can avoid +the common pitfalls, allowing developers to easily manipulate datetime values and give the user a simple datetime picker for a great user experience. + +### ISO 8601 Datetime Format: `YYYY-MM-DDTHH:mmZ` + +Ionic Framework uses the [ISO 8601 datetime format](https://www.w3.org/TR/NOTE-datetime) +for its value. The value is simply a string, rather than using JavaScript's +`Date` object. Using the ISO datetime format makes it easy to serialize +and parse within JSON objects and databases. + +Below are some examples of ISO 8601 formats that can be used with `ion-datetime`: + +| Description | Format | Datetime Value Example | +| --------------- | ------------------------ | --------------------------- | +| Year | `YYYY` | `1994` | +| Year and Month | `YYYY-MM` | `1994-12` | +| Complete Date | `YYYY-MM-DD` | `1994-12-15` | +| Date and Time | `YYYY-MM-DDTHH:mm` | `1994-12-15T13:47` | +| UTC Timezone | `YYYY-MM-DDTHH:mm:ssZ` | `1994-12-15T13:47:20Z` | +| Timezone Offset | `YYYY-MM-DDTHH:mm:ssTZD` | `1994-12-15T13:47:20+05:00` | +| Hour and Minute | `HH:mm` | `13:47` | + +Note that the year is always four-digits, milliseconds (if it's added) is always +three-digits, and all others are always two-digits. So the number representing +January always has a leading zero, such as `01`. Additionally, the hour is +always in the 24-hour format, so `00` is `12am` on a 12-hour clock, `13` means +`1pm`, and `23` means `11pm`. + +:::note +While seconds, milliseconds, and time zone can be specified using the ISO 8601 datetime format, `ion-datetime` does not provide an interface for second, millisecond, and time zone selection. Any second, millisecond, or time zone values provided will be ignored. +::: + +## Basic Usage + + + +## Usage with Datetime Button + +If you need to present a datetime in an overlay such as a modal or a popover, we recommend using [ion-datetime-button](./datetime-button). `ion-datetime-button` should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. + +## Setting Values Asynchronously + +If its `value` is updated programmatically after a datetime has already been created, the datetime will automatically jump to the new date. However, it is recommended to avoid updating the `value` in this way when users are able to interact with the datetime, as this could be disorienting for those currently trying to select a date. For example, if a datetime's `value` is loaded by an asynchronous process, it is recommended to hide the datetime with CSS until the value has finished updating. + +## Date Constraints + +### Max and Min Dates + +To customize the minimum and maximum datetime values, the `min` and `max` component properties can be provided which may make more sense for the app's use-case. Following the same IS0 8601 format listed in the table above, each component can restrict which dates can be selected by the user. + +The following example restricts date selection to March 2022 through May 2022 only. + + + +### Selecting Specific Values + +While the `min` and `max` properties allow you to restrict date selection to a certain range, the `monthValues`, `dayValues`, `yearValues`, `hourValues`, and `minuteValues` properties allow you choose specific days and times that users can select. + +The following example allows minutes to be selected in increments of 15. It also allows for days to be selected in increments of 5. + + + +### Advanced Date Constraints + +With the `isDateEnabled` property, developers can customize the `ion-datetime` to disable a specific day, range of dates, weekends or any custom rule using an ISO 8601 date string. +The `isDateEnabled` property accepts a function returning a boolean, indicating if a date is enabled. The function is called for each rendered calendar day, for the previous, current and next month. Custom implementations should be optimized for performance to avoid jank. + +The following example shows how to disable all weekend dates. For more advanced date manipulation, we recommend using a date utility such as `date-fns`. + + + +## Localization + +Ionic Framework makes use of the [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) Web API which allows us to automatically localize the month and day names according to the language and region set on the user's device. + +### Custom Locale + +For instances where you need a specific locale, you can use the `locale` property to set it. The locale controls both the language and the date and time formats that are displayed. + +The following example shows how to set the locale to Spanish (Spain). + + + +:::note +The time label is not automatically localized. Refer to [Time Label](#time-label) for more information. +::: + +### Hour Cycle + +`ion-datetime` will use the hour cycle that is specified by the `locale` property by default. For example, if `locale` is set to `en-US`, then `ion-datetime` will use a 12 hour cycle. + +There are 4 primary hour cycle types: + +| Hour cycle type | Description | +| --------------- | -------------------------------------------------------------------------------------------------------------- | +| `'h12'` | Hour system using 1–12; corresponds to 'h' in patterns. The 12 hour clock, with midnight starting at 12:00 am. | +| `'h23'` | Hour system using 0–23; corresponds to 'H' in patterns. The 24 hour clock, with midnight starting at 0:00. | +| `'h11'` | Hour system using 0–11; corresponds to 'K' in patterns. The 12 hour clock, with midnight starting at 0:00 am. | +| `'h24'` | Hour system using 1–24; corresponds to 'k' in pattern. The 24 hour clock, with midnight starting at 24:00. | + +:::note +Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale/hourCycle +::: + +There may be scenarios where you need to have more control over which hour cycle is used. This is where the `hourCycle` property can help. + +In the following example, we can use the `hourCycle` property to force `ion-datetime` to use the 12 hour cycle even though the locale is `en-GB`, which uses a 24 hour cycle by default: + + + +### First Day of the Week + +For `ion-datetime`, the default first day of the week is Sunday. As of 2022, there is no browser API that lets Ionic automatically determine the first day of the week based on a device's locale, though there is on-going work regarding this (refer to [TC39 GitHub](https://github.com/tc39/ecma402/issues/6)). + + + +### Time Label + +The time label is not automatically localized. Fortunately, Ionic makes it easy to provide custom localizations with the `time-label` slot. + + + +### Locale Extension Tags + +`ion-datetime` also supports [locale extension tags](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) as part of the `Intl.Locale` API. These tags let you encode information about the locale in the locale string itself. Developers may prefer to use the extension tag approach if they are using the [Intl.Locale API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale) in their apps. + +For example, if you wanted to use a 12 hour cycle with the `en-GB` locale, you could provide extension tags instead of using both the `locale` and `hourCycle` properties: + + + +:::note +Be sure to check the [Browser Compatibility Chart](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Locale#browser_compatibility) for `Intl.Locale` before using it in your app. +::: + +## Presentation + +By default, `ion-datetime` allows users to select both date and time. In addition, users have access to selecting the specific month, year, hour, and minute. + +Some use cases may call for only date selection or only time selection. The `presentation` property allows you to specify which pickers to show and the order to show them in. For example, setting `date-time` will have the calendar picker appear before the time picker. Setting `time-date` will have the calendar picker appear after the time picker. + +### Month and Year Selection + +Month and year selection is available by passing `month-year`, `month`, or `year` to the `presentation` property. + +This example shows a datetime with the `month-year` configuration. + + + +### Time Selection + +Time selection is available by passing `date-time`, `time-date`, or `time` to the `presentation` property. + +This example shows a datetime with the `time` configuration. + +