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

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

@@ -1,92 +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
- * 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;
- *   }
- * }
- */
-/**
- * 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;
- *   }
- * }
- */
-/**
- * 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
@@ -170,6 +81,7 @@
   --padding-bottom: 0px;
   --padding-start: 0px;
   --placeholder-color: currentColor;
+  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
   --background: transparent;
   --border-style: solid;
   --highlight-color-focused: var(--ion-color-primary, #0054e9);
@@ -186,8 +98,20 @@
   position: relative;
   width: 100%;
   min-height: 44px;
+  font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
+  z-index: 2;
+}
+
+/**
+ * Since the label sits on top of the element,
+ * the component needs to be taller otherwise the
+ * label will appear too close to the select text.
+ */
+:host(.select-label-placement-floating),
+:host(.select-label-placement-stacked) {
+  min-height: 56px;
 }
 
 :host(.ion-color) {
@@ -226,23 +150,30 @@
 button {
   position: absolute;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
+  clip: rect(0 0 0 0);
   opacity: 0;
   overflow: hidden;
-  clip: rect(0 0 0 0);
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
 .select-icon {
+  -webkit-margin-start: 4px;
+  margin-inline-start: 4px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  position: relative;
   /**
    * Prevent the icon from shrinking when the label and/or
    * selected item text is long enough to fill the rest of
@@ -260,6 +191,17 @@ button {
   color: inherit;
 }
 
+/**
+ * The select icon should be centered with
+ * the entire container not just the control
+ * with floating/stacked labels.
+ */
+:host(.select-label-placement-stacked) .select-icon,
+:host(.select-label-placement-floating) .select-icon {
+  position: absolute;
+  height: 100%;
+}
+
 /**
  * This positions the icon at the correct
  * edge of the component with LTR and RTL
@@ -286,6 +228,13 @@ button {
 }
 
 .select-wrapper {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
   display: flex;
   position: relative;
   flex-grow: 1;
@@ -321,6 +270,17 @@ button {
   overflow: hidden;
 }
 
+:host(.select-label-placement-stacked) .select-wrapper-inner,
+:host(.select-label-placement-floating) .select-wrapper-inner {
+  /**
+   * When using a stacked/floating label, the inner wrapper is
+   * stacked vertically under the label container. This line
+   * ensures that the inner wrapper fills all the remaining height
+   * of the component.
+   */
+  flex-grow: 1;
+}
+
 :host(.ion-touched.ion-invalid) {
   --highlight-color: var(--highlight-color-invalid);
 }
@@ -340,9 +300,21 @@ button {
 }
 
 .select-bottom {
+  /**
+   * The bottom content should take on the start and end
+   * padding so it is always aligned with either the label
+   * or the start of the text select.
+   */
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: 5px;
+  padding-bottom: 0;
   display: flex;
   justify-content: space-between;
   border-top: var(--border-width) var(--border-style) var(--border-color);
+  font-size: 0.75rem;
   white-space: normal;
 }
 
@@ -373,6 +345,7 @@ button {
 
 .select-bottom .helper-text {
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
 }
 
 :host(.ion-touched.ion-invalid) .select-bottom .error-text {
@@ -476,6 +449,20 @@ button {
   flex-direction: row;
 }
 
+:host(.select-label-placement-start) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Label is on the right of the select in LTR and
  * on the left in RTL.
@@ -484,6 +471,34 @@ button {
   flex-direction: row-reverse;
 }
 
+/**
+ * The margin between the label and
+ * the select should be on the start
+ * when the label sits at the end.
+ */
+:host(.select-label-placement-end) .label-text-wrapper {
+  -webkit-margin-start: 16px;
+  margin-inline-start: 16px;
+  -webkit-margin-end: 0;
+  margin-inline-end: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+:host(.select-label-placement-fixed) .label-text-wrapper {
+  /**
+   * The margin between the label and
+   * the select should be on the end
+   * when the label sits at the start.
+   */
+  -webkit-margin-start: 0;
+  margin-inline-start: 0;
+  -webkit-margin-end: 16px;
+  margin-inline-end: 16px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 /**
  * Label is on the left of the select in LTR and
  * on the right in RTL. Label also has a fixed width.
@@ -536,10 +551,29 @@ button {
  */
 :host(.select-label-placement-stacked) .native-wrapper,
 :host(.select-label-placement-floating) .native-wrapper {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 1px;
+  margin-bottom: 0;
   flex-grow: 1;
   width: 100%;
 }
 
+/**
+ * This makes the label sit over the select
+ * when the select is blurred and has no value.
+ * The label should not sit over the select if the
+ * select has a placeholder.
+ * Note: This is different from what ion-input does
+ * because the activating the select causes an overlay
+ * to appear. This makes it hard to read the placeholder.
+ * With ion-input, the input just focuses and the placeholder
+ * is still easy to read.
+ */
+:host(.select-label-placement-floating) .label-text-wrapper {
+  transform: translateY(100%) scale(1);
+}
+
 /**
  * The placeholder should be hidden when the label
  * is on top of the select. This prevents the label
@@ -567,151 +601,6 @@ button {
   opacity: 1;
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
-  /**
-   * Prevent the slots from shrinking when the label and/or
-   * selected item text is long enough to fill the rest of
-   * the container.
-   */
-  flex-shrink: 0;
-}
-
-::slotted([slot=start]:last-of-type) {
-  margin-inline-start: 0;
-}
-
-::slotted([slot=end]:first-of-type) {
-  margin-inline-end: 0;
-}
-
-:host {
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
-  font-family: var(--ion-font-family, inherit);
-  z-index: 2;
-}
-
-.select-icon {
-  -webkit-margin-start: 4px;
-  margin-inline-start: 4px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-  position: relative;
-}
-
-/**
- * The select icon should be centered with
- * the entire container not just the control
- * with floating/stacked labels.
- */
-:host(.select-label-placement-stacked) .select-icon,
-:host(.select-label-placement-floating) .select-icon {
-  position: absolute;
-  height: 100%;
-}
-
-.select-wrapper {
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: var(--padding-top);
-  padding-bottom: var(--padding-bottom);
-  border-radius: var(--border-radius);
-}
-
-.select-bottom {
-  /**
-   * The bottom content should take on the start and end
-   * padding so it is always aligned with either the label
-   * or the start of the text select.
-   */
-  -webkit-padding-start: var(--padding-start);
-  padding-inline-start: var(--padding-start);
-  -webkit-padding-end: var(--padding-end);
-  padding-inline-end: var(--padding-end);
-  padding-top: 5px;
-  padding-bottom: 0;
-  font-size: 0.75rem;
-}
-
-.select-bottom .helper-text {
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-}
-
-:host(.select-label-placement-start) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * The margin between the label and
- * the select should be on the start
- * when the label sits at the end.
- */
-:host(.select-label-placement-end) .label-text-wrapper {
-  -webkit-margin-start: 16px;
-  margin-inline-start: 16px;
-  -webkit-margin-end: 0;
-  margin-inline-end: 0;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-:host(.select-label-placement-fixed) .label-text-wrapper {
-  /**
-   * The margin between the label and
-   * the select should be on the end
-   * when the label sits at the start.
-   */
-  -webkit-margin-start: 0;
-  margin-inline-start: 0;
-  -webkit-margin-end: 16px;
-  margin-inline-end: 16px;
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/**
- * Ensures the select does not
- * overlap the label.
- * Also ensure that the native wrapper
- * takes up the remaining available height and width.
- */
-:host(.select-label-placement-stacked) .native-wrapper,
-:host(.select-label-placement-floating) .native-wrapper {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 1px;
-  margin-bottom: 0;
-}
-
-/**
- * This makes the label sit over the select
- * when the select is blurred and has no value.
- * The label should not sit over the select if the
- * select has a placeholder.
- * Note: This is different from what ion-input does
- * because the activating the select causes an overlay
- * to appear. This makes it hard to read the placeholder.
- * With ion-input, the input just focuses and the placeholder
- * is still easy to read.
- */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  transform: translateY(100%) scale(1);
-}
-
 /**
  * This makes the label sit above the input.
  */
@@ -724,41 +613,25 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * Since the label sits on top of the element,
- * the component needs to be taller otherwise the
- * label will appear too close to the select text.
- */
-:host(.select-label-placement-floating),
-:host(.select-label-placement-stacked) {
-  min-height: 56px;
-}
-
-/**
- * When using a stacked/floating label, the inner wrapper is
- * stacked vertically under the label container. This line
- * ensures that the inner wrapper fills all the remaining height
- * of the component.
- */
-:host(.select-label-placement-stacked) .select-wrapper-inner,
-:host(.select-label-placement-floating) .select-wrapper-inner {
-  flex-grow: 1;
+::slotted([slot=start]), ::slotted([slot=end]) {
+  /**
+   * Prevent the slots from shrinking when the label and/or
+   * selected item text is long enough to fill the rest of
+   * the container.
+   */
+  flex-shrink: 0;
 }
 
 ::slotted([slot=start]:last-of-type) {
   margin-inline-end: 16px;
+  margin-inline-start: 0;
 }
 
 ::slotted([slot=end]:first-of-type) {
   margin-inline-start: 16px;
+  margin-inline-end: 0;
 }
 
-/**
- * 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
@@ -814,12 +687,6 @@ button {
  *   }
  * }
  */
-/**
- * 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
@@ -875,12 +742,6 @@ button {
  *   }
  * }
  */
-/**
- * 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
@@ -1011,12 +872,6 @@ button {
   max-width: calc(100% / 0.75);
 }
 
-/**
- * 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
@@ -1175,9 +1030,7 @@ button {
    * Label text should not extend
    * beyond the bounds of the select.
    */
-  max-width: calc(
-    (100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75
-  );
+  max-width: calc((100% - var(--padding-start) - var(--padding-end) - 8px) / 0.75);
 }
 
 /**
@@ -1194,8 +1047,8 @@ button {
 }
 
 :host(.select-fill-outline) .select-outline-container {
-  right: 0;
   left: 0;
+  right: 0;
   top: 0;
   bottom: 0;
   display: flex;

package/dist/collection/components/select-modal/select-modal.ios.css

@@ -2,12 +2,6 @@
   height: 100%;
 }
 
-/**
- * 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
@@ -63,12 +57,6 @@
  *   }
  * }
  */
-/**
- * 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
@@ -124,12 +112,6 @@
  *   }
  * }
  */
-/**
- * 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/select-modal/select-modal.js

@@ -77,7 +77,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: '730c44ceba585ce77926121f13d961d8020d7bd2', class: getIonMode(this) }, h("ion-header", { key: '4cf46de557baa1187dc998718004c0344b67d39b' }, h("ion-toolbar", { key: 'df46d6d17351b702ca7e031a1313c17d19d24485' }, this.header !== undefined && h("ion-title", { key: '9561527c557ae5ea6a04367ba52a57a656fd1aaa' }, this.header), h("ion-buttons", { key: 'f9f6efbf7c4f7cd9712c5e2fc89926ad2e374c9f', slot: "end" }, h("ion-button", { key: '70136cb4d64e2b04821d0e81a3671c55f45399fb', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '53d4cdf5cfd9c5c3121f4ce5c23c4b940052554a' }, h("ion-list", { key: 'e022b85e7e6e9d2d90b1dd4435d922cfc8390ec5' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: '885198a9f21884e3bfb9bf0af53e0ee3ae37b231', class: getIonMode(this) }, h("ion-header", { key: 'd8b63726869747ac711e4fda78a50ce46f72970c' }, h("ion-toolbar", { key: '9ab2a4c1480dd74eeae38d7b580a2e87fb71270e' }, this.header !== undefined && h("ion-title", { key: '87a7034385ef57f55cefdd0371dbb66a64827290' }, this.header), h("ion-buttons", { key: '0a35424ea13ca002abc9a43b6138730254f187d0', slot: "end" }, h("ion-button", { key: '238bf40b47128d9aa995d14d9ff9ebcae4f79492', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '4a256f3381f8cabbc7194337b8ae4aa1c3ab1066' }, h("ion-list", { key: 'acd38fc52024632176467ed6a84106a454021544' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
     }
     static get is() { return "ion-select-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -85,14 +85,14 @@ export class SelectModal {
         return {
             "ios": ["select-modal.ios.scss"],
             "md": ["select-modal.md.scss"],
-            "ionic": ["select-modal.ionic.scss"]
+            "ionic": ["select-modal.md.scss"]
         };
     }
     static get styleUrls() {
         return {
             "ios": ["select-modal.ios.css"],
             "md": ["select-modal.md.css"],
-            "ionic": ["select-modal.ionic.css"]
+            "ionic": ["select-modal.md.css"]
         };
     }
     static get properties() {

package/dist/collection/components/select-modal/select-modal.md.css

@@ -1,6 +1,8 @@
 :host {
   height: 100%;
-} /**
+}
+
+/**
  * A heuristic that applies CSS to tablet
  * viewports.
  *
@@ -22,12 +24,6 @@
  *   }
  * }
  */
-/**
- * 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/select-option/select-option.js

@@ -2,11 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
-/**
- * @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.
- */
+import { getIonMode } from "../../global/ionic-global";
 export class SelectOption {
     constructor() {
         this.inputId = `ion-selopt-${selectOptionIds++}`;
@@ -14,10 +10,7 @@ export class SelectOption {
         this.value = undefined;
     }
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '9ff7cf41a31fdf64730f6fe3708bb1f3677b76a4', class: {
-                [theme]: true,
-            }, role: "option", id: this.inputId }));
+        return h(Host, { key: '8c96c199ce3a3065de3fe446500f567236e0610a', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }