@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

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

@@ -5,72 +5,30 @@ import { Host, h, readTask, writeTask } from "@stencil/core";
 import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from "../../utils/content/index";
 import { getIonMode } from "../../global/ionic-global";
 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.isLoading = false;
-        /**
-         * The threshold distance from the bottom
-         * of the content to call the `infinite` output event when scrolled.
-         * The threshold value can be either a percent, or
-         * in pixels. For example, use the value of `10%` for the `infinite`
-         * output event to get called when the user has scrolled 10%
-         * from the bottom of the page. Use the value `100px` when the
-         * scroll is within 100 pixels from the bottom of the page.
-         */
-        this.threshold = '15%';
-        /**
-         * If `true`, the infinite scroll will be hidden and scroll event listeners
-         * will be removed.
-         *
-         * Set this to true to disable the infinite scroll from actively
-         * trying to receive new data while scrolling. This is useful
-         * when it is known that there is no more data that can be added, and
-         * the infinite scroll is no longer needed.
-         */
-        this.disabled = false;
-        /**
-         * The position of the infinite scroll element.
-         * The value can be either `top` or `bottom`.
-         */
-        this.position = 'bottom';
-        this.onScroll = () => {
-            const scrollEl = this.scrollEl;
-            if (!scrollEl || !this.canStart()) {
-                return 1;
-            }
-            const infiniteHeight = this.el.offsetHeight;
-            if (infiniteHeight === 0) {
-                // if there is no height of this element then do nothing
-                return 2;
-            }
-            const scrollTop = scrollEl.scrollTop;
-            const scrollHeight = scrollEl.scrollHeight;
-            const height = scrollEl.offsetHeight;
-            const threshold = this.thrPc !== 0 ? height * this.thrPc : this.thrPx;
-            const distanceFromInfinite = this.position === 'bottom'
-                ? scrollHeight - infiniteHeight - scrollTop - threshold - height
-                : scrollTop - infiniteHeight - threshold;
-            if (distanceFromInfinite < 0) {
-                if (!this.didFire) {
-                    this.isLoading = true;
-                    this.didFire = true;
-                    this.ionInfinite.emit();
-                    return 3;
-                }
-            }
-            return 4;
-        };
-    }
+    thrPx = 0;
+    thrPc = 0;
+    scrollEl;
+    /**
+     * didFire exists so that ionInfinite
+     * does not fire multiple times if
+     * users continue to scroll after
+     * scrolling into the infinite
+     * scroll threshold.
+     */
+    didFire = false;
+    isBusy = false;
+    el;
+    isLoading = false;
+    /**
+     * The threshold distance from the bottom
+     * of the content to call the `infinite` output event when scrolled.
+     * The threshold value can be either a percent, or
+     * in pixels. For example, use the value of `10%` for the `infinite`
+     * output event to get called when the user has scrolled 10%
+     * from the bottom of the page. Use the value `100px` when the
+     * scroll is within 100 pixels from the bottom of the page.
+     */
+    threshold = '15%';
     thresholdChanged() {
         const val = this.threshold;
         if (val.lastIndexOf('%') > -1) {
@@ -82,6 +40,16 @@ export class InfiniteScroll {
             this.thrPc = 0;
         }
     }
+    /**
+     * If `true`, the infinite scroll will be hidden and scroll event listeners
+     * will be removed.
+     *
+     * Set this to true to disable the infinite scroll from actively
+     * trying to receive new data while scrolling. This is useful
+     * when it is known that there is no more data that can be added, and
+     * the infinite scroll is no longer needed.
+     */
+    disabled = false;
     disabledChanged() {
         const disabled = this.disabled;
         if (disabled) {
@@ -90,6 +58,18 @@ export class InfiniteScroll {
         }
         this.enableScrollEvents(!disabled);
     }
+    /**
+     * The position of the infinite scroll element.
+     * The value can be either `top` or `bottom`.
+     */
+    position = 'bottom';
+    /**
+     * Emitted when the scroll reaches
+     * the threshold distance. From within your infinite handler,
+     * you must call the infinite scroll's `complete()` method when
+     * your async operation has completed.
+     */
+    ionInfinite;
     async connectedCallback() {
         const contentEl = findClosestIonContent(this.el);
         if (!contentEl) {
@@ -111,6 +91,33 @@ export class InfiniteScroll {
         this.enableScrollEvents(false);
         this.scrollEl = undefined;
     }
+    onScroll = () => {
+        const scrollEl = this.scrollEl;
+        if (!scrollEl || !this.canStart()) {
+            return 1;
+        }
+        const infiniteHeight = this.el.offsetHeight;
+        if (infiniteHeight === 0) {
+            // if there is no height of this element then do nothing
+            return 2;
+        }
+        const scrollTop = scrollEl.scrollTop;
+        const scrollHeight = scrollEl.scrollHeight;
+        const height = scrollEl.offsetHeight;
+        const threshold = this.thrPc !== 0 ? height * this.thrPc : this.thrPx;
+        const distanceFromInfinite = this.position === 'bottom'
+            ? scrollHeight - infiniteHeight - scrollTop - threshold - height
+            : scrollTop - infiniteHeight - threshold;
+        if (distanceFromInfinite < 0) {
+            if (!this.didFire) {
+                this.isLoading = true;
+                this.didFire = true;
+                this.ionInfinite.emit();
+                return 3;
+            }
+        }
+        return 4;
+    };
     /**
      * Call `complete()` within the `ionInfinite` output event handler when
      * your async operation has completed. For example, the `loading`

package/dist/collection/components/infinite-scroll-content/infinite-scroll-content.js

@@ -7,9 +7,26 @@ import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { config } from "../../global/config";
 import { getIonMode } from "../../global/ionic-global";
 export class InfiniteScrollContent {
-    constructor() {
-        this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-    }
+    customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
+    /**
+     * An animated SVG spinner that shows while loading.
+     */
+    loadingSpinner;
+    /**
+     * Optional text to display while loading.
+     * `loadingText` can accept either plaintext or HTML as a string.
+     * To display characters normally reserved for HTML, they
+     * must be escaped. For example `<Ionic>` would become
+     * `&lt;Ionic&gt;`
+     *
+     * For more information: [Security Documentation](https://ionicframework.com/docs/faq/security)
+     *
+     * This property accepts custom HTML as a string.
+     * Content is parsed as plaintext by default.
+     * `innerHTMLTemplatesEnabled` must be set to `true` in the Ionic config
+     * before custom HTML can be used.
+     */
+    loadingText;
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {
             const mode = getIonMode(this);

package/dist/collection/components/input/input.ios.css

@@ -206,12 +206,6 @@
 }
 
 .input-clear-icon {
-  -webkit-margin-start: auto;
-  margin-inline-start: auto;
-  -webkit-margin-end: auto;
-  margin-inline-end: auto;
-  margin-top: auto;
-  margin-bottom: auto;
   padding-left: 0;
   padding-right: 0;
   padding-top: 0;
@@ -269,14 +263,47 @@
   line-height: normal;
 }
 
+.input-control {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  /**
+  * Allows the control to shrink below the label and input's intrinsic
+  * width, preventing the start and end slots from being pushed outside
+  * the wrapper. The label and input truncate independently, so it can
+  * use whatever space remains after accounting for the slots.
+  */
+  min-width: 0;
+}
+
 .native-wrapper {
   display: flex;
   position: relative;
   flex-grow: 1;
-  align-items: center;
   width: 100%;
 }
 
+/**
+ * When the label sits beside the input, the label should size to its content
+ * and the input should take the remaining space. A zero flex basis prevents
+ * the input from requesting its full width and forcing the label to shrink.
+ * Stacked and floating placements use a column layout, so their flex basis
+ * controls height instead and does not need to be overridden.
+ */
+:host(.input-label-placement-start) .native-wrapper,
+:host(.input-label-placement-end) .native-wrapper,
+:host(.input-label-placement-fixed) .native-wrapper {
+  flex: 1 1 0;
+}
+
+.input-start,
+.input-end {
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  align-items: center;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -377,6 +404,12 @@
    */
   display: flex;
   align-items: center;
+  /**
+  * Allows the label to shrink below its intrinsic content width.
+  * Without this the label keeps its full width and can push the
+  * input and end slot outside the wrapper.
+  */
+  min-width: 0;
   /**
    * Label text should not extend
    * beyond the bounds of the input.
@@ -395,6 +428,18 @@
   pointer-events: none;
 }
 
+/**
+ * When start/end slots are added or removed, we temporarily
+ * disable the label transition to prevent the floating label
+ * from animating as its position is adjusted.
+ *
+ * This class is applied by the start container controller, so
+ * renaming it here requires renaming it there too.
+ */
+:host(.skip-label-transition) .label-text-wrapper {
+  transition: none;
+}
+
 /**
  * We need to use two elements instead of
  * one. The .label-text-wrapper is responsible
@@ -438,7 +483,7 @@
  * Label is on the left of the input in LTR and
  * on the right in RTL.
  */
-:host(.input-label-placement-start) .input-wrapper {
+:host(.input-label-placement-start) .input-control {
   flex-direction: row;
 }
 
@@ -460,7 +505,7 @@
  * Label is on the right of the input in LTR and
  * on the left in RTL.
  */
-:host(.input-label-placement-end) .input-wrapper {
+:host(.input-label-placement-end) .input-control {
   flex-direction: row-reverse;
 }
 
@@ -508,10 +553,9 @@
  * Floating: Label sits over the input when the input has no
  * value and is blurred. Label sits above the input and is scaled
  * down when the input is focused or has a value.
- *
  */
-:host(.input-label-placement-stacked) .input-wrapper,
-:host(.input-label-placement-floating) .input-wrapper {
+:host(.input-label-placement-stacked) .input-control,
+:host(.input-label-placement-floating) .input-control {
   flex-direction: column;
   align-items: start;
 }
@@ -542,18 +586,6 @@
   }
 }
 
-/**
- * Ensures the input does not
- * overlap the label.
- */
-:host(.input-label-placement-stacked) input,
-:host(.input-label-placement-floating) input {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
 /**
  * This makes the label sit over the input
  * when the input is blurred and has no value.
@@ -725,8 +757,7 @@
 }
 
 .input-clear-icon ion-icon {
-  width: 18px;
-  height: 18px;
+  font-size: 18px;
 }
 
 :host(.input-disabled) {