npm - @ionic/core - Versions diffs - 7.5.4-dev.11700602203.1e7155a1 → 7.5.4-dev.11702935369.11a4baba - Mend

@ionic/core 7.5.4-dev.11700602203.1e7155a1 → 7.5.4-dev.11702935369.11a4baba

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (496) hide show

package/dist/collection/components/infinite-scroll/infinite-scroll.js CHANGED Viewed

@@ -8,13 +8,6 @@ export class InfiniteScroll {
   constructor() {
     this.thrPx = 0;
     this.thrPc = 0;
-    /**
-     * didFire exists so that ionInfinite
-     * does not fire multiple times if
-     * users continue to scroll after
-     * scrolling into the infinite
-     * scroll threshold.
-     */
     this.didFire = false;
     this.isBusy = false;
     this.onScroll = () => {
@@ -42,6 +35,9 @@ export class InfiniteScroll {
           return 3;
         }
       }
+      else {
+        this.didFire = false;
+      }
       return 4;
     };
     this.isLoading = false;
@@ -141,15 +137,11 @@ export class InfiniteScroll {
             writeTask(() => {
               scrollEl.scrollTop = newScrollTop;
               this.isBusy = false;
-              this.didFire = false;
             });
           });
         });
       });
     }
-    else {
-      this.didFire = false;
-    }
   }
   canStart() {
     return !this.disabled && !this.isBusy && !!this.scrollEl && !this.isLoading;

package/dist/collection/components/input/input.js CHANGED Viewed

@@ -256,8 +256,6 @@ export class Input {
         'has-value': this.hasValue(),
         'has-focus': this.hasFocus,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2764): remove this
-        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/components/item/item.ios.css CHANGED Viewed

@@ -188,6 +188,10 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   font-family: inherit;
@@ -202,13 +206,8 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  /* stylelint-disable */
-  padding-right: var(--padding-end);
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  /* stylelint-enable */
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -220,28 +219,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
-}
-:host-context([dir=rtl]) .item-native {
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--padding-end);
-}
-[dir=rtl] .item-native {
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--padding-end);
-}
-@supports selector(:dir(rtl)) {
-  .item-native:dir(rtl) {
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-    padding-left: var(--padding-end);
-  }
-}
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
+  z-index: 1;
 }
 .item-native::-moz-focus-inner {
@@ -271,20 +250,18 @@ button, a {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: var(--inner-padding-start);
+  padding-inline-start: var(--inner-padding-start);
+  -webkit-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
   padding-top: var(--inner-padding-top);
   padding-bottom: var(--inner-padding-bottom);
-  /* stylelint-disable */
-  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-  padding-left: var(--inner-padding-start);
-  /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -293,59 +270,21 @@ button, a {
   overflow: inherit;
   box-sizing: border-box;
 }
-:host-context([dir=rtl]) .item-inner {
-  padding-right: var(--inner-padding-start);
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-}
-[dir=rtl] .item-inner {
-  padding-right: var(--inner-padding-start);
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-}
-@supports selector(:dir(rtl)) {
-  .item-inner:dir(rtl) {
-    padding-right: var(--inner-padding-start);
-    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-  }
-}
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  -webkit-padding-end: var(--inner-padding-end);
+  padding-inline-end: var(--inner-padding-end);
   padding-top: 0;
   padding-bottom: 0;
-  /* stylelint-disable */
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
-  /* stylelint-enable */
   display: flex;
   justify-content: space-between;
 }
-:host-context([dir=rtl]) .item-bottom {
-  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-}
-[dir=rtl] .item-bottom {
-  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-}
-@supports selector(:dir(rtl)) {
-  .item-bottom:dir(rtl) {
-    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  }
-}
 .item-detail-icon {
   /**
@@ -379,7 +318,6 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 :host(.item-input) {
@@ -388,23 +326,15 @@ button, a {
 .input-wrapper {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

package/dist/collection/components/item/item.md.css CHANGED Viewed

@@ -188,6 +188,10 @@
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
   padding-top: var(--padding-top);
   padding-bottom: var(--padding-bottom);
   font-family: inherit;
@@ -202,13 +206,8 @@
   text-align: inherit;
   white-space: inherit;
   color: inherit;
-  /* stylelint-disable */
-  padding-right: var(--padding-end);
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  /* stylelint-enable */
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -220,28 +219,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
-}
-:host-context([dir=rtl]) .item-native {
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--padding-end);
-}
-[dir=rtl] .item-native {
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  padding-left: var(--padding-end);
-}
-@supports selector(:dir(rtl)) {
-  .item-native:dir(rtl) {
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-    padding-left: var(--padding-end);
-  }
-}
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
+  z-index: 1;
 }
 .item-native::-moz-focus-inner {
@@ -271,20 +250,18 @@ button, a {
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: var(--inner-padding-start);
+  padding-inline-start: var(--inner-padding-start);
+  -webkit-padding-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
+  padding-inline-end: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
   padding-top: var(--inner-padding-top);
   padding-bottom: var(--inner-padding-bottom);
-  /* stylelint-disable */
-  padding-right: calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end));
-  padding-left: var(--inner-padding-start);
-  /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -293,59 +270,21 @@ button, a {
   overflow: inherit;
   box-sizing: border-box;
 }
-:host-context([dir=rtl]) .item-inner {
-  padding-right: var(--inner-padding-start);
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-}
-[dir=rtl] .item-inner {
-  padding-right: var(--inner-padding-start);
-  padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-}
-@supports selector(:dir(rtl)) {
-  .item-inner:dir(rtl) {
-    padding-right: var(--inner-padding-start);
-    padding-left: calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-end));
-  }
-}
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
   margin-top: 0;
   margin-bottom: 0;
+  -webkit-padding-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  padding-inline-start: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
+  -webkit-padding-end: var(--inner-padding-end);
+  padding-inline-end: var(--inner-padding-end);
   padding-top: 0;
   padding-bottom: 0;
-  /* stylelint-disable */
-  padding-left: calc(var(--padding-start) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--inner-padding-end) + var(--ion-safe-area-right, 0px));
-  /* stylelint-enable */
   display: flex;
   justify-content: space-between;
 }
-:host-context([dir=rtl]) .item-bottom {
-  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-}
-[dir=rtl] .item-bottom {
-  padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-  padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-}
-@supports selector(:dir(rtl)) {
-  .item-bottom:dir(rtl) {
-    padding-left: calc(var(--inner-padding-end) + var(--ion-safe-area-left, 0px));
-    padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
-  }
-}
 .item-detail-icon {
   /**
@@ -379,7 +318,6 @@ button, a {
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 :host(.item-input) {
@@ -388,23 +326,15 @@ button, a {
 .input-wrapper {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

package/dist/collection/components/item/test/basic/item.e2e.js CHANGED Viewed

@@ -10,31 +10,5 @@ configs().forEach(({ title, screenshot, config }) => {
       await page.setIonViewport();
       await expect(page).toHaveScreenshot(screenshot(`item-diff`));
     });
-    /**
-     * This behavior needs to be tested for all modes & directions
-     * Safe padding should stay on the same side when the direction changes
-     */
-    test('should have safe area padding', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          :root {
-            --ion-safe-area-left: 40px;
-            --ion-safe-area-right: 20px;
-          }
-        </style>
-        <ion-list>
-          <ion-item>
-            <ion-label>Item with helper</ion-label>
-            <div slot="helper">Helper</div>
-          </ion-item>
-          <ion-item>
-            <ion-label class="ion-text-nowrap"> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot('item-safe-area'));
-    });
   });
 });

package/dist/collection/components/item/test/disabled/item.e2e.js CHANGED Viewed

@@ -11,6 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item/test/disabled`, config);
       await page.setIonViewport();
+      // TODO: FW-4037 - Fix label color inconsistency between disabled controls
       await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
     });
   });

package/dist/collection/components/item/test/icons/heart-broken.svg CHANGED Viewed

File without changes

package/dist/collection/components/item/test/text/item.e2e.js ADDED Viewed

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: text'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item/test/text`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`item-text-diff`));
+    });
+  });
+});

package/dist/collection/components/label/label.ios.css CHANGED Viewed

@@ -41,24 +41,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -77,10 +70,6 @@
   align-self: baseline;
 }
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/label/label.md.css CHANGED Viewed

@@ -41,24 +41,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -77,10 +70,6 @@
   align-self: baseline;
 }
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/modal/gestures/swipe-to-close.js CHANGED Viewed

@@ -5,7 +5,6 @@ import { getTimeGivenProgression } from "../../../utils/animation/cubic-bezier";
 import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
 import { clamp, getElementRoot } from "../../../utils/helpers";
-import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
 // Defaults for the card swipe animation
@@ -251,7 +250,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
   const gesture = createGesture({
     el,
     gestureName: 'modalSwipeToClose',
-    gesturePriority: OVERLAY_GESTURE_PRIORITY,
+    gesturePriority: 39,
     direction: 'y',
     threshold: 10,
     canStart,

package/dist/collection/components/note/test/a11y/note.e2e.js CHANGED Viewed

@@ -48,48 +48,5 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const note = page.locator('ion-note');
       await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
     });
-    test('should wrap label to the next line without truncating', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-        <ion-list>
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Label</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-          <ion-item>
-            <ion-note slot="start">Note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Note</ion-note>
-          </ion-item>
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
-    });
   });
 });

package/dist/collection/components/radio/radio.js CHANGED Viewed

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createLegacyFormController, isOptionSelected } from "../../utils/forms/index";
+import { createLegacyFormController } from "../../utils/forms/index";
 import { addEventListener, getAriaLabel, removeEventListener } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -23,8 +23,7 @@ export class Radio {
     this.hasLoggedDeprecationWarning = false;
     this.updateState = () => {
       if (this.radioGroup) {
-        const { compareWith, value: radioGroupValue } = this.radioGroup;
-        this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
+        this.checked = this.radioGroup.value === this.value;
       }
     };
     this.onClick = () => {
@@ -121,8 +120,6 @@ export class Radio {
   emitStyle() {
     const style = {
       'interactive-disabled': this.disabled,
-      // TODO(FW-3125): remove this
-      legacy: !!this.legacy,
     };
     if (this.legacyFormController.hasLegacyControl()) {
       style['radio-checked'] = this.checked;

package/dist/collection/components/radio-group/radio-group.js CHANGED Viewed

@@ -47,7 +47,6 @@ export class RadioGroup {
       }
     };
     this.allowEmptySelection = false;
-    this.compareWith = undefined;
     this.name = this.inputId;
     this.value = undefined;
   }
@@ -159,29 +158,6 @@ export class RadioGroup {
         "reflect": false,
         "defaultValue": "false"
       },
-      "compareWith": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | RadioGroupCompareFn | null",
-          "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
-          "references": {
-            "RadioGroupCompareFn": {
-              "location": "import",
-              "path": "./radio-group-interface",
-              "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-radio-group. When not specified, the default behavior will use strict\nequality (===) for comparison."
-        },
-        "attribute": "compare-with",
-        "reflect": false
-      },
       "name": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/range/range.js CHANGED Viewed

@@ -226,8 +226,6 @@ export class Range {
       this.ionStyle.emit({
         interactive: true,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2997): remove this
-        legacy: !!this.legacy,
       });
     }
   }

package/dist/collection/components/select/select.ios.css CHANGED Viewed

@@ -110,11 +110,6 @@
   overflow: hidden;
 }
-:host(.in-item:not(.legacy-select)) {
-  flex: 1 1 0;
-  width: 0;
-}
 :host(.in-item.legacy-select) {
   position: static;
   max-width: 45%;