@ionic/core 8.5.2-dev.11743410780.1c74dd00 → 8.5.2-dev.11743531350.19e040aa

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

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -34,11 +67,14 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
+  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
+  font-family: var(--ion-font-family, inherit);
   user-select: none;
+  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -49,6 +85,10 @@
   flex: initial;
 }
 
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
 .range-slider {
   position: relative;
   flex: 1;
@@ -65,8 +105,8 @@
 
 .range-pin {
   position: absolute;
-  background: current-color(base);
-  color: current-color(contrast);
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -215,6 +255,7 @@
    * only the label would show and users
    * would not be able to see the range.
    */
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -243,121 +284,6 @@
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --knob-handle-size: calc(var(--knob-size) * 2);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
-::slotted([slot=label]) {
-  max-width: 200px;
-}
-
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -372,12 +298,20 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the range should be on the start
+ * when the label sits at the end.
+ */
 :host(.range-label-placement-end) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the range should be on the start
-   * when the label sits at the end.
-   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -400,7 +334,27 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -416,6 +370,15 @@
    */
   max-width: calc(100% / 0.75);
 }
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -426,12 +389,6 @@
   margin-bottom: 0px;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -7,12 +7,11 @@ import { inheritAriaAttributes, clamp, debounceEvent, renderHiddenInput, isSafeN
 import { printIonWarning } from "../../utils/logging/index";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines the platform behaviors of the component.
- * @virtualProp {"ios" | "md" | "ionic"} theme - The theme determines the visual appearance of the component.
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  *
  * @slot label - The label text to associate with the range. Use the "labelPlacement" property to control where the label is placed relative to the range.
  * @slot start - Content is placed to the left of the range slider in LTR, and to the right in RTL.
@@ -35,6 +34,19 @@ export class Range {
         this.inheritedAttributes = {};
         this.contentEl = null;
         this.initialContentScrollY = true;
+        /**
+         * Compares two RangeValue inputs to determine if they are different.
+         *
+         * @param newVal - The new value.
+         * @param oldVal - The old value.
+         * @returns `true` if the values are different, `false` otherwise.
+         */
+        this.compareValues = (newVal, oldVal) => {
+            if (typeof newVal === 'object' && typeof oldVal === 'object') {
+                return newVal.lower !== oldVal.lower || newVal.upper !== oldVal.upper;
+            }
+            return newVal !== oldVal;
+        };
         this.clampBounds = (value) => {
             return clamp(this.min, value, this.max);
         };
@@ -168,7 +180,11 @@ export class Range {
             this.gesture.enable(!this.disabled);
         }
     }
-    valueChanged() {
+    valueChanged(newValue, oldValue) {
+        const valuesChanged = this.compareValues(newValue, oldValue);
+        if (valuesChanged) {
+            this.ionInput.emit({ value: this.value });
+        }
         if (!this.noUpdate) {
             this.updateRatio();
         }
@@ -413,7 +429,6 @@ export class Range {
                 lower: Math.min(valA, valB),
                 upper: Math.max(valA, valB),
             };
-        this.ionInput.emit({ value: this.value });
         this.noUpdate = false;
     }
     setFocus(knob) {
@@ -579,10 +594,10 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const theme = getIonTheme(this);
+        const mode = getIonMode(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: '21ef803dca0d40bf14edabd21788a9bb0407b1d2', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [theme]: true,
+        return (h(Host, { key: 'e97cb7eab877eb1624429b4a79107130c6809cf5', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [mode]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
@@ -590,25 +605,23 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: '30949972ae80d7765daa1ddda0b49bc6286478dc', class: "range-wrapper", id: "range-label" }, h("div", { key: 'd6acc945ec6cb0dd130fcd545bfc9b1aa609a80c', class: {
+            }) }, h("label", { key: 'a43e9859f74f83460439efefccb5fbb9f387c9ee', class: "range-wrapper", id: "range-label" }, h("div", { key: '75352a30f30dbd0228c6138eb4324a5c021dbb48', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !hasLabel,
-            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '23d180cd9c0903ec325702e5244d09c5484821d3', class: "native-wrapper" }, h("slot", { key: '52ccc7d6d05d79ec4bc5698aefed5af8c2b3a53d', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3b7696579f1a81d9472aa1f13671c00971334c59', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: '6a3e147c3e5d938bb2b50522a290f6fdfcf40f05', class: "native-wrapper" }, h("slot", { key: '6627236eac9f711fa9c27879a017dd994e65811e', name: "start" }), this.renderRangeSlider(), h("slot", { key: '6af3bbadacd036bc7cd30732227f76d7c64117fb', name: "end" })))));
     }
     static get is() { return "ion-range"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "ios": ["range.ios.scss"],
-            "md": ["range.md.scss"],
-            "ionic": ["range.ionic.scss"]
+            "md": ["range.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"],
-            "ionic": ["range.ionic.css"]
+            "md": ["range.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/range/range.md.css

@@ -1,3 +1,36 @@
+/**
+ * Convert a font size to a dynamic font size.
+ * Fonts that participate in Dynamic Type should use
+ * dynamic font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param unit (optional) - The unit to convert to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a maximum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * a minimum font size.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
+/**
+ * Convert a font size to a dynamic font size but impose
+ * maximum and minimum font sizes.
+ * @param size - The initial font size including the unit (i.e. px or pt)
+ * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
+ * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
+ * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
+ * convert to a unit other than $baselineUnit.
+ */
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -34,11 +67,14 @@
    * @prop --pin-background: Background of the range pin (only available in MD mode)
    * @prop --pin-color: Color of the range pin (only available in MD mode)
    */
+  --knob-handle-size: calc(var(--knob-size) * 2);
   display: flex;
   position: relative;
   flex: 3;
   align-items: center;
+  font-family: var(--ion-font-family, inherit);
   user-select: none;
+  z-index: 2;
 }
 
 :host(.range-disabled) {
@@ -49,6 +85,10 @@
   flex: initial;
 }
 
+::slotted(ion-icon[slot]) {
+  font-size: 24px;
+}
+
 .range-slider {
   position: relative;
   flex: 1;
@@ -65,8 +105,8 @@
 
 .range-pin {
   position: absolute;
-  background: current-color(base);
-  color: current-color(contrast);
+  background: var(--ion-color-base);
+  color: var(--ion-color-contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -215,6 +255,7 @@
    * only the label would show and users
    * would not be able to see the range.
    */
+  max-width: 200px;
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
@@ -243,121 +284,6 @@
   flex-direction: row;
 }
 
-/**
- * Label is on the right of the range in LTR and
- * on the left in RTL.
- */
-:host(.range-label-placement-end) .range-wrapper {
-  flex-direction: row-reverse;
-}
-
-/**
- * Label is on the left of the range in LTR and
- * on the right in RTL. Label also has a fixed width.
- */
-:host(.range-label-placement-fixed) .label-text-wrapper {
-  flex: 0 0 100px;
-  width: 100px;
-  min-width: 100px;
-  max-width: 200px;
-}
-
-/**
- * Label is on top of the range.
- */
-:host(.range-label-placement-stacked) .range-wrapper {
-  flex-direction: column;
-  align-items: stretch;
-}
-
-:host(.range-label-placement-stacked) .label-text-wrapper {
-  transform-origin: left top;
-}
-:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
-  transform-origin: right top;
-}
-
-@supports selector(:dir(rtl)) {
-  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
-    transform-origin: right top;
-  }
-}
-
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
-/**
- * Convert a font size to a dynamic font size.
- * Fonts that participate in Dynamic Type should use
- * dynamic font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param unit (optional) - The unit to convert to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a maximum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * a minimum font size.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * Convert a font size to a dynamic font size but impose
- * maximum and minimum font sizes.
- * @param size - The initial font size including the unit (i.e. px or pt)
- * @param minScale - The minimum scale of the font (i.e. 0.8 for a minimum 80% scale).
- * @param maxScale - The maximum scale of the font (i.e. 2.5 for a maximum 250% scale).
- * @param unit (optional) - The unit to convert the initial font size to. Use this if you want to
- * convert to a unit other than $baselineUnit.
- */
-/**
- * A heuristic that applies CSS to tablet
- * viewports.
- *
- * Usage:
- * @include tablet-viewport() {
- *   :host {
- *     background-color: green;
- *   }
- * }
- */
-/**
- * A heuristic that applies CSS to mobile
- * viewports (i.e. phones, not tablets).
- *
- * Usage:
- * @include mobile-viewport() {
- *   :host {
- *     background-color: blue;
- *   }
- * }
- */
-:host {
-  --knob-handle-size: calc(var(--knob-size) * 2);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
-::slotted([slot=label]) {
-  max-width: 200px;
-}
-
 :host(.range-label-placement-start) .label-text-wrapper {
   /**
    * The margin between the label and
@@ -372,12 +298,20 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the right of the range in LTR and
+ * on the left in RTL.
+ */
+:host(.range-label-placement-end) .range-wrapper {
+  flex-direction: row-reverse;
+}
+
+/**
+ * The margin between the label and
+ * the range should be on the start
+ * when the label sits at the end.
+ */
 :host(.range-label-placement-end) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the range should be on the start
-   * when the label sits at the end.
-   */
   -webkit-margin-start: 16px;
   margin-inline-start: 16px;
   -webkit-margin-end: 0;
@@ -400,7 +334,27 @@
   margin-bottom: 0;
 }
 
+/**
+ * Label is on the left of the range in LTR and
+ * on the right in RTL. Label also has a fixed width.
+ */
+:host(.range-label-placement-fixed) .label-text-wrapper {
+  flex: 0 0 100px;
+  width: 100px;
+  min-width: 100px;
+  max-width: 200px;
+}
+
+/**
+ * Label is on top of the range.
+ */
+:host(.range-label-placement-stacked) .range-wrapper {
+  flex-direction: column;
+  align-items: stretch;
+}
+
 :host(.range-label-placement-stacked) .label-text-wrapper {
+  transform-origin: left top;
   transform: scale(0.75);
   /**
   * The margin between the label and
@@ -416,6 +370,15 @@
    */
   max-width: calc(100% / 0.75);
 }
+:host-context([dir=rtl]):host(.range-label-placement-stacked) .label-text-wrapper, :host-context([dir=rtl]).range-label-placement-stacked .label-text-wrapper {
+  transform-origin: right top;
+}
+
+@supports selector(:dir(rtl)) {
+  :host(.range-label-placement-stacked:dir(rtl)) .label-text-wrapper {
+    transform-origin: right top;
+  }
+}
 
 :host(.in-item.range-label-placement-stacked) .label-text-wrapper {
   margin-top: 10px;
@@ -426,12 +389,6 @@
   margin-bottom: 0px;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use

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

@@ -1,9 +1,3 @@
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use
@@ -149,17 +143,10 @@ ion-refresher-content .arrow-container {
   transform: scale(0);
 }
 
-.refresher-native .refresher-pulling-text,
-.refresher-native .refresher-refreshing-text {
+.refresher-native .refresher-pulling-text, .refresher-native .refresher-refreshing-text {
   display: none;
 }
 
-/**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
- */
 /**
  * Convert a font size to a dynamic font size.
  * Fonts that participate in Dynamic Type should use