@ionic/core 8.7.6-dev.11759412372.1f332f62 → 8.7.6-dev.11759493293.13f81b9f

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

@@ -1,36 +1,3 @@
-/**
- * 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.
@@ -67,14 +34,11 @@
    * @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) {
@@ -85,10 +49,6 @@
   flex: initial;
 }
 
-::slotted(ion-icon[slot]) {
-  font-size: 24px;
-}
-
 .range-slider {
   position: relative;
   flex: 1;
@@ -105,8 +65,8 @@
 
 .range-pin {
   position: absolute;
-  background: var(--ion-color-base);
-  color: var(--ion-color-contrast);
+  background: current-color(base);
+  color: current-color(contrast);
   text-align: center;
   box-sizing: border-box;
 }
@@ -255,7 +215,6 @@
    * 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;
@@ -284,6 +243,121 @@
   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
@@ -298,20 +372,12 @@
   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;
@@ -334,27 +400,7 @@
   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
@@ -370,15 +416,6 @@
    */
   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;
@@ -389,6 +426,12 @@
   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,11 +7,12 @@ 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 { getIonMode } from "../../global/ionic-global";
+import { getIonTheme } from "../../global/ionic-global";
 import { roundToMaxDecimalPlaces } from "../../utils/floating-point";
 // TODO(FW-2832): types
 /**
- * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ * @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.
  *
  * @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.
@@ -679,10 +680,10 @@ export class Range {
          */
         const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent;
         const needsEndAdjustment = inItem && !hasEndContent;
-        const mode = getIonMode(this);
+        const theme = getIonTheme(this);
         renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled);
-        return (h(Host, { key: 'ef7b01f80515bcaeb2983934ad7f10a6bd5d13ec', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
-                [mode]: true,
+        return (h(Host, { key: 'abffed8811679954ae1ccded14b09c1070aec868', onFocusin: this.onFocus, onFocusout: this.onBlur, id: rangeId, class: createColorClasses(this.color, {
+                [theme]: true,
                 'in-item': inItem,
                 'range-disabled': disabled,
                 'range-pressed': pressedKnob !== undefined,
@@ -690,30 +691,31 @@ export class Range {
                 [`range-label-placement-${labelPlacement}`]: true,
                 'range-item-start-adjustment': needsStartAdjustment,
                 'range-item-end-adjustment': needsEndAdjustment,
-            }) }, h("label", { key: 'fd8aa90a9d52be9da024b907e68858dae424449d', class: "range-wrapper", id: "range-label" }, h("div", { key: '2172b4f329c22017dd23475c80aac25ba6e753eb', class: {
+            }) }, h("label", { key: '4296d7310d335ba9783d96e982159e8563a3ea35', class: "range-wrapper", id: "range-label" }, h("div", { key: '8087acc009ee1287f0ddd483669cd6284ff84004', 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: '3c318bf2ea0576646d4c010bf44573fd0f483186', class: "native-wrapper" }, h("slot", { key: '6586fd6fc96271e73f8a86c202d1913ad1a26f96', name: "start" }), this.renderRangeSlider(), h("slot", { key: '74ac0bc2d2cb66ef708bb729f88b6ecbc1b2155d', name: "end" })))));
+            }, part: "label" }, label !== undefined ? h("div", { class: "label-text" }, label) : h("slot", { name: "label" })), h("div", { key: 'fa1207cbb99ccb9a9cc60c2409977c1b925476b0', class: "native-wrapper" }, h("slot", { key: 'fdbe6f0c142f3511e1b526f6d4df195c105660c5', name: "start" }), this.renderRangeSlider(), h("slot", { key: '3f03f148fbd461a7a87c8f2da5e5cba37213ef30', 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"]
+            "md": ["range.md.scss"],
+            "ionic": ["range.ionic.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["range.ios.css"],
-            "md": ["range.md.css"]
+            "md": ["range.md.css"],
+            "ionic": ["range.ionic.css"]
         };
     }
     static get properties() {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -734,11 +736,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": true
+                "reflect": true,
+                "attribute": "color"
             },
             "debounce": {
                 "type": "number",
-                "attribute": "debounce",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -753,11 +755,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "debounce"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -773,11 +775,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "this.rangeId"
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -792,11 +794,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "label"
             },
             "dualKnobs": {
                 "type": "boolean",
-                "attribute": "dual-knobs",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -812,11 +814,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "dual-knobs",
                 "defaultValue": "false"
             },
             "min": {
                 "type": "number",
-                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -832,11 +834,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "0"
             },
             "max": {
                 "type": "number",
-                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -852,11 +854,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "100"
             },
             "pin": {
                 "type": "boolean",
-                "attribute": "pin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -872,11 +874,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "pin",
                 "defaultValue": "false"
             },
             "pinFormatter": {
                 "type": "unknown",
-                "attribute": "pin-formatter",
                 "mutable": false,
                 "complexType": {
                     "original": "PinFormatter",
@@ -901,7 +903,6 @@ export class Range {
             },
             "snaps": {
                 "type": "boolean",
-                "attribute": "snaps",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -917,11 +918,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "snaps",
                 "defaultValue": "false"
             },
             "step": {
                 "type": "number",
-                "attribute": "step",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -937,11 +938,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "step",
                 "defaultValue": "1"
             },
             "ticks": {
                 "type": "boolean",
-                "attribute": "ticks",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -957,11 +958,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "ticks",
                 "defaultValue": "true"
             },
             "activeBarStart": {
                 "type": "number",
-                "attribute": "active-bar-start",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -976,11 +977,11 @@ export class Range {
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "active-bar-start"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -996,11 +997,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "value": {
                 "type": "number",
-                "attribute": "value",
                 "mutable": true,
                 "complexType": {
                     "original": "RangeValue",
@@ -1022,11 +1023,11 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "0"
             },
             "labelPlacement": {
                 "type": "string",
-                "attribute": "label-placement",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'fixed' | 'stacked'",
@@ -1042,6 +1043,7 @@ export class Range {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "label-placement",
                 "defaultValue": "'start'"
             }
         };