Compare commits

..

9 Commits

Author SHA1 Message Date
Liam DeBeasi
b8ee3efb76 fix(footer, tab-bar): do not hide when webview resizing disabled 2023-10-09 09:59:48 -04:00
Liam DeBeasi
3259da0de1 fix(header): collapsible large title main header does not flicker on load (#28277)
Issue number: resolves #27060

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The main header is controlled by the header with `collapse="condense"`
set:
a04a11be35/core/src/components/header/header.tsx (L144)

The collapse header will hide the main header and then show it once the
user has scrolled enough. However, if the main header is rendered before
the collapse header is rendered, then the main header will be visible
for a brief moment before being hidden by the collapse header. This
gives the perception of flicker that is reported on the linked issue.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The main header will be hidden on load if it loads before the collapse
header

The selector was written in a way such that once the collapse header
loads, this CSS no longer applies (since the collapse header will add
`.header-collapse-main` to the main header)

| `main` | branch |
| - | - |
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/3cb11a57-e084-435a-89c2-e1c2afba04b1"></video>
| <video
src="https://github.com/ionic-team/ionic-framework/assets/2721089/c5caeb5e-3b33-4598-986f-bf097c46251c"></video>
|

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Note: `:has` browser compat is still fairly new. However, it is
available on both Chromium and WebKit browsers (and has been for at
least a year): https://caniuse.com/?search=%3Ahas

Given that this bug is a fairly minor UI glitch (as opposed to something
that would cause an app to crash or otherwise malfunction), I think this
is an acceptable tradeoff. As time goes on this will become less of a
concern as more users update their devices.

Dev build: `7.4.3-dev.11696365694.156f41d3`
2023-10-05 18:27:44 +00:00
dependabot[bot]
470c119a05 chore(deps-dev): Bump @capacitor/core from 5.4.1 to 5.4.2 in /core (#28285)
Bumps [@capacitor/core](https://github.com/ionic-team/capacitor) from
5.4.1 to 5.4.2.
<details>
<summary>Release notes</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor/releases"><code>@​capacitor/core</code>'s
releases</a>.</em></p>
<blockquote>
<h2>5.4.2</h2>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.4.1...5.4.2">5.4.2</a>
(2023-10-04)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>android:</strong> make local urls use unpatched fetch (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6954">#6954</a>)
(<a
href="56fb8536af">56fb853</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Changelog</summary>
<p><em>Sourced from <a
href="https://github.com/ionic-team/capacitor/blob/5.4.2/CHANGELOG.md"><code>@​capacitor/core</code>'s
changelog</a>.</em></p>
<blockquote>
<h2><a
href="https://github.com/ionic-team/capacitor/compare/5.4.1...5.4.2">5.4.2</a>
(2023-10-04)</h2>
<h3>Bug Fixes</h3>
<ul>
<li><strong>android:</strong> make local urls use unpatched fetch (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6954">#6954</a>)
(<a
href="56fb8536af">56fb853</a>)</li>
</ul>
</blockquote>
</details>
<details>
<summary>Commits</summary>
<ul>
<li><a
href="5b437986db"><code>5b43798</code></a>
Release 5.4.2</li>
<li><a
href="56fb8536af"><code>56fb853</code></a>
fix(android): make local urls use unpatched fetch (<a
href="https://redirect.github.com/ionic-team/capacitor/issues/6954">#6954</a>)</li>
<li>See full diff in <a
href="https://github.com/ionic-team/capacitor/compare/5.4.1...5.4.2">compare
view</a></li>
</ul>
</details>
<br />


[![Dependabot compatibility
score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=@capacitor/core&package-manager=npm_and_yarn&previous-version=5.4.1&new-version=5.4.2)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)

Dependabot will resolve any conflicts with this PR as long as you don't
alter it yourself. You can also trigger a rebase manually by commenting
`@dependabot rebase`.

[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)

---

<details>
<summary>Dependabot commands and options</summary>
<br />

You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits
that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after
your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge
and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating
it. You can achieve the same result by closing it manually
- `@dependabot show <dependency name> ignore conditions` will show all
of the ignore conditions of the specified dependency
- `@dependabot ignore this major version` will close this PR and stop
Dependabot creating any more for this major version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop
Dependabot creating any more for this minor version (unless you reopen
the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop
Dependabot creating any more for this dependency (unless you reopen the
PR or upgrade to it yourself)


</details>

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2023-10-05 13:19:07 +00:00
Liam DeBeasi
b297529afc fix(core): allow fullscreen scroll content to flow outside container for translucent tab bar (#28246)
Issue number: resolves #17676

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

The IonNav, IonRouterOutlet, and .ion-page elements have `overflow:
hidden` which prevent content from spilling out of it. This was likely
done to prevent these elements from having overflow scroll (since the
inner IonContent should be scrollable). However, this breaks the
translucency effect on IonTabBar because the content in IonContent can
not scroll under the IonTabBar.

```html
<ion-tabs>
  <ion-router-outlet> <!-- this has overflow: hidden -->
    ...
    <ion-content fullscreen="true">...</ion-content>
  </ion-router-outlet>
  <ion-tab-bar translucent="true">...</ion-tab-bar>
</ion-tabs>
```

In Ionic v3 components such as IonTabs and IonNav did have `overflow:
hidden`:
cf35d5eb7f/src/components/app/app.scss (L241-L246)

However, components like IonNav were not used inside of tabs at the
time, so the reported bug was not a problem then.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Removed `overflow: hidden` from IonNav, IonRouterOutlet, and
.ion-page. This change seems safe to make because the `position:
absolute` and top/right/bottom/left values should ensure that these
elements take up the available screen space and avoid having overflow
scrolling.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.2-dev.11695832397.13fa6703`

Note: Fixing this reveals
https://github.com/ionic-team/ionic-framework/issues/21130 which is why
this fix is dependent on the linked issue getting fixed first.

---------

Co-authored-by: ionitron <hi@ionicframework.com>
2023-10-04 19:18:48 +00:00
Liam DeBeasi
7375dd6aba fix(content): fullscreen offset is computed correctly with tab bar (#28245)
Issue number: resolves #21130

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

IonContent sets `--offset-top` and `--offset-bottom` variables to allow
the content to scroll under headers, footers, and tab bars. This is
essential to creating the translucency effect on these components.

IonContent does this by computing its offsetHeight and offsetTop
coordinates which take into account the dimensions of headers, footers,
and tab bars. Occasionally, this code will run before the IonTabBar has
been hydrated which means that the offset will be wrong because the
IonTabBar will have a dimension of 0x0 prior to hydration.

This impacts Ionic Angular devs who are using the lazy loaded build of
Ionic. React and Vue devs are not impacted because they are using the
dist-custom-elements build of Ionic which does not have hydration.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- IonContent will re-run the offset computation code whenever the
`ionTabBarLoaded` event is emitted. This event is emitted at most once
per IonTabBar instance.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.4.2-dev.11695831341.191bdf12`

Note: I did not write a test since this is fixing a race condition. I
wasn't able to find a non-flaky way of testing this. You can test this
in an Ionic Angular Tabs starter application with the dev build. The
`--offset-bottom` variable on `ion-content` should be large enough such
that the content will scroll under the tab bar. The translucency effect
won't work just yet, but that is being fixed in
https://github.com/ionic-team/ionic-framework/pull/28246.
2023-10-04 18:31:11 +00:00
Amanda Johnston
1167a9325f fix(segment): scroll to active segment-button on first load (#28276)
Issue number: resolves #28096

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When a segment button is clicked, the segment will auto-scroll to
position the newly active button fully in view. However, this behavior
does not occur on first load. This means that when a segment is
initialized with a `value` corresponding to an off-screen button, the
button will remain off-screen.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

The same auto-scroll behavior from button click now also occurs on
component load.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-10-04 17:11:32 +00:00
Shawn Taylor
dc75392e9d refactor(router-outlet): reuse lock controller (#28273)
Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Code is duplicated between the router outlet and the overlays

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Code is reused between the router outlet and the overlays

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
2023-10-04 14:15:18 +00:00
Liam DeBeasi
865bd2a004 merge release-7.4.3
Release 7.4.3
2023-10-04 09:52:45 -04:00
ionitron
2429caa168 chore(): update package lock files 2023-10-04 13:26:49 +00:00
23 changed files with 367 additions and 180 deletions

14
core/package-lock.json generated
View File

@@ -15,7 +15,7 @@
},
"devDependencies": {
"@axe-core/playwright": "^4.7.3",
"@capacitor/core": "^5.4.1",
"@capacitor/core": "^5.4.2",
"@capacitor/haptics": "^5.0.6",
"@capacitor/keyboard": "^5.0.6",
"@capacitor/status-bar": "^5.0.6",
@@ -607,9 +607,9 @@
"dev": true
},
"node_modules/@capacitor/core": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
"integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.2.tgz",
"integrity": "sha512-XbR1vldJFzBWHeoGPpgfNy3Zhjf0NxXdHEaGNANWVBg0ZWG2gwFr1dcRALUUQtbwrEEkCCNiLYg4YiQPRk7SEQ==",
"dev": true,
"dependencies": {
"tslib": "^2.1.0"
@@ -10802,9 +10802,9 @@
"dev": true
},
"@capacitor/core": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.1.tgz",
"integrity": "sha512-QG9gORuxw2WNcVpLHT1W3LzACOJvFWRuHcz4b9edzxehSELqiSQ4DoGWLp4PuNBBp2oV/fGA4FMNmfZ1jIAAWg==",
"version": "5.4.2",
"resolved": "https://registry.npmjs.org/@capacitor/core/-/core-5.4.2.tgz",
"integrity": "sha512-XbR1vldJFzBWHeoGPpgfNy3Zhjf0NxXdHEaGNANWVBg0ZWG2gwFr1dcRALUUQtbwrEEkCCNiLYg4YiQPRk7SEQ==",
"dev": true,
"requires": {
"tslib": "^2.1.0"

View File

@@ -37,7 +37,7 @@
},
"devDependencies": {
"@axe-core/playwright": "^4.7.3",
"@capacitor/core": "^5.4.1",
"@capacitor/core": "^5.4.2",
"@capacitor/haptics": "^5.0.6",
"@capacitor/keyboard": "^5.0.6",
"@capacitor/status-bar": "^5.0.6",

View File

@@ -6976,6 +6976,7 @@ declare namespace LocalJSX {
*/
"mode"?: "ios" | "md";
"onIonTabBarChanged"?: (event: IonTabBarCustomEvent<TabBarChangedEventDetail>) => void;
"onIonTabBarLoaded"?: (event: IonTabBarCustomEvent<void>) => void;
/**
* The selected tab component
*/

View File

@@ -1,6 +1,6 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Build, Component, Element, Event, Host, Listen, Method, Prop, forceUpdate, h, readTask } from '@stencil/core';
import { componentOnReady } from '@utils/helpers';
import { componentOnReady, hasLazyBuild } from '@utils/helpers';
import { isPlatform } from '@utils/platform';
import { isRTL } from '@utils/rtl';
import { createColorClasses, hostContext } from '@utils/theme';
@@ -34,6 +34,9 @@ export class Content implements ComponentInterface {
private isMainContent = true;
private resizeTimeout: ReturnType<typeof setTimeout> | null = null;
private tabsElement: HTMLElement | null = null;
private tabsLoadCallback?: () => void;
// Detail is used in a hot loop in the scroll event, by allocating it here
// V8 will be able to inline any read/write to it since it's a monomorphic class.
// https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
@@ -115,15 +118,61 @@ export class Content implements ComponentInterface {
connectedCallback() {
this.isMainContent = this.el.closest('ion-menu, ion-popover, ion-modal') === null;
/**
* The fullscreen content offsets need to be
* computed after the tab bar has loaded. Since
* lazy evaluation means components are not hydrated
* at the same time, we need to wait for the ionTabBarLoaded
* event to fire. This does not impact dist-custom-elements
* because there is no hydration there.
*/
if (hasLazyBuild(this.el)) {
/**
* We need to cache the reference to the tabs.
* If just the content is unmounted then we won't
* be able to query for the closest tabs on disconnectedCallback
* since the content has been removed from the DOM tree.
*/
const closestTabs = (this.tabsElement = this.el.closest('ion-tabs'));
if (closestTabs !== null) {
/**
* When adding and removing the event listener
* we need to make sure we pass the same function reference
* otherwise the event listener will not be removed properly.
* We can't only pass `this.resize` because "this" in the function
* context becomes a reference to IonTabs instead of IonContent.
*
* Additionally, we listen for ionTabBarLoaded on the IonTabs
* instance rather than the IonTabBar instance. It's possible for
* a tab bar to be conditionally rendered/mounted. Since ionTabBarLoaded
* bubbles, we can catch any instances of child tab bars loading by listening
* on IonTabs.
*/
this.tabsLoadCallback = () => this.resize();
closestTabs.addEventListener('ionTabBarLoaded', this.tabsLoadCallback);
}
}
}
disconnectedCallback() {
this.onScrollEnd();
}
@Listen('appload', { target: 'window' })
onAppLoad() {
this.resize();
if (hasLazyBuild(this.el)) {
/**
* The event listener and tabs caches need to
* be cleared otherwise this will create a memory
* leak where the IonTabs instance can never be
* garbage collected.
*/
const { tabsElement, tabsLoadCallback } = this;
if (tabsElement !== null && tabsLoadCallback !== undefined) {
tabsElement.removeEventListener('ionTabBarLoaded', tabsLoadCallback);
}
this.tabsElement = null;
this.tabsLoadCallback = undefined;
}
}
/**

View File

@@ -3,6 +3,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core';
import { findIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
import { getIonMode } from '../../global/ionic-global';
@@ -52,18 +53,28 @@ export class Footer implements ComponentInterface {
}
async connectedCallback() {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the footer
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
const resizeMode = await Keyboard.getResizeMode();
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
/**
* If the resize mode is set to None then we don't want to
* hide the tab bar here since it will never sit on top
* of the keyboard. Hiding the tab bar will cause a layout shift
* in apps that have resize set to None.
*/
if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the footer
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
}
}
disconnectedCallback() {

View File

@@ -107,3 +107,28 @@
.header-collapse-condense-inactive.header-collapse-condense ion-toolbar.in-toolbar ion-buttons.buttons-collapse {
visibility: hidden;
}
/**
* The main header is only hidden once the collapsible large
* title is configured. As a result, if the main header loads
* before the collapsible large title is configured then the
* main header will be visible briefly before being hidden
* by the collapsible large title.
*
* The following selector ensures that any main header
* on a page with a collapsible large title is hidden
* before the collapsible large title is configured.
* Once the collapsible large title is configured the main
* header will have the ".header-collapse-main" class, and
* this selector will no longer apply.
*
* The :has(...) part of the selector ensures a couple things:
* 1. This will only apply within a page view since the content
* must be a subsequent-sibling of the header (~ ion-content).
* 2. This will only apply when that content has a collapse header (ion-header[collapse="condense"])
*
* We use opacity: 0 to avoid a layout shift.
*/
ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"]) {
opacity: 0;
}

View File

@@ -6,6 +6,5 @@
position: absolute;
contain: layout size style;
overflow: hidden;
z-index: $z-index-page-container;
}

View File

@@ -6,6 +6,5 @@
position: absolute;
contain: layout size style;
overflow: hidden;
z-index: $z-index-page-container;
}

View File

@@ -3,6 +3,7 @@ import { Component, Element, Event, Method, Prop, Watch, h } from '@stencil/core
import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
import { attachComponent, detachComponent } from '@utils/framework-delegate';
import { shallowEqualStringMap, hasLazyBuild } from '@utils/helpers';
import { createLockController } from '@utils/lock-controller';
import { transition } from '@utils/transition';
import { config } from '../../global/config';
@@ -24,11 +25,11 @@ import type { RouteID, RouterDirection, RouteWrite, NavOutlet } from '../router/
shadow: true,
})
export class RouterOutlet implements ComponentInterface, NavOutlet {
private readonly lockController = createLockController();
private activeEl: HTMLElement | undefined;
// TODO(FW-2832): types
private activeComponent: any;
private activeParams: any;
private waitPromise?: Promise<void>;
private gesture?: Gesture;
private ani?: Animation;
private gestureOrAnimationInProgress = false;
@@ -140,7 +141,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
leavingEl: HTMLElement | undefined,
opts?: RouterOutletOptions
): Promise<boolean> {
const unlock = await this.lock();
const unlock = await this.lockController.lock();
let changed = false;
try {
changed = await this.transition(enteringEl, leavingEl, opts);
@@ -285,18 +286,6 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
return true;
}
// TODO: FW-5048 - Remove this code in favor of using lock controller from utils
private async lock() {
const p = this.waitPromise;
let resolve!: () => void;
this.waitPromise = new Promise((r) => (resolve = r));
if (p !== undefined) {
await p;
}
return resolve;
}
render() {
return <slot></slot>;
}

View File

@@ -1,6 +1,7 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
import type { Gesture, GestureDetail } from '@utils/gesture';
import { raf } from '@utils/helpers';
import { isRTL } from '@utils/rtl';
import { createColorClasses, hostContext } from '@utils/theme';
@@ -83,31 +84,7 @@ export class Segment implements ComponentInterface {
* Used by `ion-segment-button` to determine if the button should be checked.
*/
this.ionSelect.emit({ value });
if (this.scrollable) {
const buttons = this.getButtons();
const activeButton = buttons.find((button) => button.value === value);
if (activeButton !== undefined) {
/**
* Scrollable segment buttons should be
* centered within the view including
* buttons that are partially offscreen.
*/
activeButton.scrollIntoView({
behavior: 'smooth',
inline: 'center',
/**
* Segment should scroll on the
* horizontal axis. `block: 'nearest'`
* ensures that the vertical axis
* does not scroll if the segment
* as a whole is already in view.
*/
block: 'nearest',
});
}
}
this.scrollActiveButtonIntoView();
}
/**
@@ -163,6 +140,14 @@ export class Segment implements ComponentInterface {
async componentDidLoad() {
this.setCheckedClasses();
/**
* We need to wait for the buttons to all be rendered
* before we can scroll.
*/
raf(() => {
this.scrollActiveButtonIntoView();
});
this.gesture = (await import('../../utils/gesture')).createGesture({
el: this.el,
gestureName: 'segment',
@@ -320,6 +305,35 @@ export class Segment implements ComponentInterface {
}
}
private scrollActiveButtonIntoView() {
const { scrollable, value } = this;
if (scrollable) {
const buttons = this.getButtons();
const activeButton = buttons.find((button) => button.value === value);
if (activeButton !== undefined) {
/**
* Scrollable segment buttons should be
* centered within the view including
* buttons that are partially offscreen.
*/
activeButton.scrollIntoView({
behavior: 'smooth',
inline: 'center',
/**
* Segment should scroll on the
* horizontal axis. `block: 'nearest'`
* ensures that the vertical axis
* does not scroll if the segment
* as a whole is already in view.
*/
block: 'nearest',
});
}
}
}
private setNextIndex(detail: GestureDetail, isEnd = false) {
const rtl = isRTL(this.el);
const activated = this.activated;

View File

@@ -2,7 +2,7 @@ import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';
configs().forEach(({ title, screenshot, config }) => {
test.describe(title('segment: scrollable'), () => {
test.describe(title('segment: scrollable (rendering)'), () => {
test('should not have visual regressions', async ({ page }) => {
await page.setContent(
`
@@ -45,3 +45,47 @@ configs().forEach(({ title, screenshot, config }) => {
});
});
});
configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
test.describe(title('segment: scrollable (functionality)'), () => {
test('should scroll active button into view when value is already set', async ({ page }) => {
await page.setContent(
`
<ion-segment scrollable="true" value="8">
<ion-segment-button value="1">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="2">
<ion-label>Second</ion-label>
</ion-segment-button>
<ion-segment-button value="3">
<ion-label>Third</ion-label>
</ion-segment-button>
<ion-segment-button value="4">
<ion-label>Fourth</ion-label>
</ion-segment-button>
<ion-segment-button value="5">
<ion-label>Fifth</ion-label>
</ion-segment-button>
<ion-segment-button value="6">
<ion-label>Sixth</ion-label>
</ion-segment-button>
<ion-segment-button value="7">
<ion-label>Seventh</ion-label>
</ion-segment-button>
<ion-segment-button id="activeButton" value="8">
<ion-label>Eighth</ion-label>
</ion-segment-button>
<ion-segment-button value="9">
<ion-label>Ninth</ion-label>
</ion-segment-button>
</ion-segment>
`,
config
);
const activeButton = page.locator('#activeButton');
await expect(activeButton).toBeInViewport();
});
});
});

View File

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core';
import type { KeyboardController } from '@utils/keyboard/keyboard-controller';
import { createKeyboardController } from '@utils/keyboard/keyboard-controller';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
import { createColorClasses } from '@utils/theme';
import { getIonMode } from '../../global/ionic-global';
@@ -57,23 +58,41 @@ export class TabBar implements ComponentInterface {
/** @internal */
@Event() ionTabBarChanged!: EventEmitter<TabBarChangedEventDetail>;
/**
* @internal
* This event is used in IonContent to correctly
* calculate the fullscreen content offsets
* when IonTabBar is used.
*/
@Event() ionTabBarLoaded!: EventEmitter<void>;
componentWillLoad() {
this.selectedTabChanged();
}
async connectedCallback() {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the tab bar
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
const resizeMode = await Keyboard.getResizeMode();
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
/**
* If the resize mode is set to None then we don't want to
* hide the tab bar here since it will never sit on top
* of the keyboard. Hiding the tab bar will cause a layout shift
* in apps that have resize set to None.
*/
if (resizeMode === undefined || resizeMode.mode !== KeyboardResize.None) {
this.keyboardCtrl = await createKeyboardController(async (keyboardOpen, waitForResize) => {
/**
* If the keyboard is hiding, then we need to wait
* for the webview to resize. Otherwise, the tab bar
* will flicker before the webview resizes.
*/
if (keyboardOpen === false && waitForResize !== undefined) {
await waitForResize;
}
this.keyboardVisible = keyboardOpen; // trigger re-render by updating state
});
}
}
disconnectedCallback() {
@@ -82,6 +101,10 @@ export class TabBar implements ComponentInterface {
}
}
componentDidLoad() {
this.ionTabBarLoaded.emit();
}
render() {
const { color, translucent, keyboardVisible } = this;
const mode = getIonMode(this);

View File

@@ -39,5 +39,40 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent`));
});
test('should render translucent tab bar even when wrapped in a page container', async ({ page }) => {
await page.setContent(
`
<style>
ion-content {
--background: linear-gradient(to right, orange, yellow, green, cyan, blue, violet);
}
</style>
<ion-tabs>
<div class="ion-page">
<ion-content fullscreen="true">My Content</ion-content>
</div>
<ion-tab-bar slot="bottom" translucent="true" selected-tab="1">
<ion-tab-button tab="1">
<ion-label>Recents</ion-label>
</ion-tab-button>
<ion-tab-button tab="2">
<ion-label>Favorites</ion-label>
<ion-badge>23</ion-badge>
</ion-tab-button>
<ion-tab-button tab="3">
<ion-label>Settings</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
`,
config
);
const tabBar = page.locator('ion-tab-bar');
await expect(tabBar).toHaveScreenshot(screenshot(`tab-bar-translucent-container`));
});
});
});

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@@ -156,7 +156,6 @@ html.ios ion-modal.modal-card .ion-page {
justify-content: space-between;
contain: layout size style;
overflow: hidden;
z-index: $z-index-page-container;
}

View File

@@ -1,6 +1,5 @@
import { doc, win } from '@utils/browser';
import { Keyboard, KeyboardResize } from '../native/keyboard';
import { Keyboard, KeyboardResize } from '@utils/native/keyboard';
/**
* The element that resizes when the keyboard opens

View File

@@ -1060,19 +1060,19 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
},
"node_modules/@ionic/core/node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -7342,19 +7342,19 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
"dependencies": {
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
}
}
},

View File

@@ -1227,19 +1227,19 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
},
"node_modules/@ionic/core/node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -8104,19 +8104,19 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
"dependencies": {
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
}
}
},

View File

@@ -205,11 +205,11 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
@@ -401,11 +401,11 @@
}
},
"node_modules/@ionic/react": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.2.tgz",
"integrity": "sha512-lU6rVunrEQhpgC4ftEzqNC30c8U2PQTQivzwDSkd2y/WsJSCzYyG/+ZHhACSWfa4dbGZizOHdFCWsnAjZjDJFw==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.3.tgz",
"integrity": "sha512-j33s8CFe3Cu3AQtIlZdI/W4+e5hDzjRcX6uwqRrizcMQS66Sj9Ik9RN5v3jV/9R8MHLElXZof/AhofNEhe7BTw==",
"dependencies": {
"@ionic/core": "7.4.2",
"@ionic/core": "7.4.3",
"ionicons": "^7.0.0",
"tslib": "*"
},
@@ -486,9 +486,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -3663,11 +3663,11 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
@@ -3786,11 +3786,11 @@
"requires": {}
},
"@ionic/react": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.2.tgz",
"integrity": "sha512-lU6rVunrEQhpgC4ftEzqNC30c8U2PQTQivzwDSkd2y/WsJSCzYyG/+ZHhACSWfa4dbGZizOHdFCWsnAjZjDJFw==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/react/-/react-7.4.3.tgz",
"integrity": "sha512-j33s8CFe3Cu3AQtIlZdI/W4+e5hDzjRcX6uwqRrizcMQS66Sj9Ik9RN5v3jV/9R8MHLElXZof/AhofNEhe7BTw==",
"requires": {
"@ionic/core": "7.4.2",
"@ionic/core": "7.4.3",
"ionicons": "^7.0.0",
"tslib": "*"
}
@@ -3844,9 +3844,9 @@
}
},
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
},
"@types/estree": {
"version": "0.0.39",

View File

@@ -697,19 +697,19 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
},
"node_modules/@ionic/core/node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -11778,19 +11778,19 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
"dependencies": {
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
}
}
},

View File

@@ -660,11 +660,11 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
@@ -871,11 +871,11 @@
}
},
"node_modules/@ionic/vue": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.2.tgz",
"integrity": "sha512-zNYq40mJV2Gp0MBtllgEJXPxdvY9F3JYEhyfH6cn8xPOfhBz0pcSa5cMb8UcBql/Ut4LEEv0zaPLJ5KrP0hYiw==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.3.tgz",
"integrity": "sha512-DV/SExC/e3rcLoowuYb5bwo4N/oP5fWHQo1xLP654I/879hlwPJlCxdWFtaE2OlT3aEix9ssLYeNiWaxuK+9dQ==",
"dependencies": {
"@ionic/core": "7.4.2",
"@ionic/core": "7.4.3",
"ionicons": "^7.0.0"
}
},
@@ -1323,9 +1323,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -7697,11 +7697,11 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
@@ -7829,11 +7829,11 @@
"requires": {}
},
"@ionic/vue": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.2.tgz",
"integrity": "sha512-zNYq40mJV2Gp0MBtllgEJXPxdvY9F3JYEhyfH6cn8xPOfhBz0pcSa5cMb8UcBql/Ut4LEEv0zaPLJ5KrP0hYiw==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-7.4.3.tgz",
"integrity": "sha512-DV/SExC/e3rcLoowuYb5bwo4N/oP5fWHQo1xLP654I/879hlwPJlCxdWFtaE2OlT3aEix9ssLYeNiWaxuK+9dQ==",
"requires": {
"@ionic/core": "7.4.2",
"@ionic/core": "7.4.3",
"ionicons": "^7.0.0"
}
},
@@ -8192,9 +8192,9 @@
}
},
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
},
"@tootallnate/once": {
"version": "2.0.0",

View File

@@ -207,11 +207,11 @@
"dev": true
},
"node_modules/@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"dependencies": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
}
@@ -423,9 +423,9 @@
}
},
"node_modules/@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A==",
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg==",
"bin": {
"stencil": "bin/stencil"
},
@@ -3746,11 +3746,11 @@
"dev": true
},
"@ionic/core": {
"version": "7.4.2",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.2.tgz",
"integrity": "sha512-ePuP+SxS6HY/nos267dBdAvL0kth1FYUWs8Y+DSM+FFTeRdEbvOsa2JeQCY7gCt/Ep9e7lSND95qfkX23pGNDA==",
"version": "7.4.3",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-7.4.3.tgz",
"integrity": "sha512-JPQLGojKnI/L0UBVshRv86DOSDj61rJRFYQImU4IcgP/rw5ckxwt3iZ5NtdJl0eEDwu91n68aGJdU+TFJjMJgQ==",
"requires": {
"@stencil/core": "^4.3.0",
"@stencil/core": "^4.4.0",
"ionicons": "7.1.0",
"tslib": "^2.1.0"
},
@@ -3885,9 +3885,9 @@
}
},
"@stencil/core": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.3.0.tgz",
"integrity": "sha512-WYjftKg5fuqO7mf3nTl1aCRurkeMmfEF38WcBG4VLF6UPQ+MA76/koedGR2LGhATGByx+pbxR4iRxAr2Bspc9A=="
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.4.0.tgz",
"integrity": "sha512-YlLyCqGBsMEuZb3XTO/STT0TX9eSwjoVhCJgtjVfQOF+ebIMVlojTh40CmDveWiWbth687cbr6S2heeussV8Sg=="
},
"@types/json-schema": {
"version": "7.0.11",