@ionic/core 8.4.2-dev.11734347773.16e58dbd → 8.4.2-dev.11736265112.120bf7af

package/dist/collection/components/select/select.md.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
@@ -59,28 +53,6 @@
  *   }
  * }
  */
-/**
- * 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 {
   /**
    * @prop --background: Background of the select
@@ -109,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);
@@ -125,8 +98,10 @@
   position: relative;
   width: 100%;
   min-height: 44px;
+  font-family: var(--ion-font-family, inherit);
   white-space: nowrap;
   cursor: pointer;
+  z-index: 2;
 }
 
 /**
@@ -175,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
@@ -209,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
@@ -235,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;
@@ -392,6 +392,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.
@@ -400,6 +414,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.
@@ -452,10 +494,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
@@ -483,8 +544,19 @@ button {
   opacity: 1;
 }
 
-::slotted([slot=start]),
-::slotted([slot=end]) {
+/**
+ * This makes the label sit above the input.
+ */
+:host(.label-floating) .label-text-wrapper {
+  transform: translateY(50%) scale(0.75);
+  /**
+   * Label text should not extend
+   * beyond the bounds of the input.
+   */
+  max-width: calc(100% / 0.75);
+}
+
+::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
@@ -494,146 +566,69 @@ button {
 }
 
 ::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;
 }
 
-: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.
+ * 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.
  */
-: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);
-}
-
-: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.
+ * 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.
  */
-: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.
+ * 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.
  */
-: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.
+ * 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.
  */
-:host(.select-label-placement-floating) .label-text-wrapper {
-  transform: translateY(100%) scale(1);
-}
-
 /**
- * This makes the label sit above the input.
+ * A heuristic that applies CSS to tablet
+ * viewports.
+ *
+ * Usage:
+ * @include tablet-viewport() {
+ *   :host {
+ *     background-color: green;
+ *   }
+ * }
  */
-:host(.label-floating) .label-text-wrapper {
-  transform: translateY(50%) scale(0.75);
-  /**
-   * Label text should not extend
-   * beyond the bounds of the input.
-   */
-  max-width: calc(100% / 0.75);
-}
-
-::slotted([slot=start]:last-of-type) {
-  margin-inline-end: 16px;
-}
-
-::slotted([slot=end]:first-of-type) {
-  margin-inline-start: 16px;
-}
-
 /**
- * Convert a pixels given value into rem
- * 
- * @param pixels - Value in pixels to be converted (i.e. px)
- * @param context (optional) - Baseline value
+ * A heuristic that applies CSS to mobile
+ * viewports (i.e. phones, not tablets).
+ *
+ * Usage:
+ * @include mobile-viewport() {
+ *   :host {
+ *     background-color: blue;
+ *   }
+ * }
  */
 /**
  * Convert a font size to a dynamic font size.
@@ -690,12 +685,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
@@ -822,6 +811,61 @@ button {
   max-width: calc(100% / 0.75);
 }
 
+/**
+ * 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(.select-fill-outline) {
   --border-color: var(--ion-color-step-300, var(--ion-background-color-step-300, #b3b3b3));
   --border-radius: 4px;
@@ -925,9 +969,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);
 }
 
 /**
@@ -944,8 +986,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.js

@@ -77,7 +77,7 @@ export class SelectModal {
             } }, option.text))));
     }
     render() {
-        return (h(Host, { key: 'fd5b1e78d540c7ae6d0fca737a6fc1d983a8c19b', class: getIonMode(this) }, h("ion-header", { key: '7eec49fcb0a0f0b1e20f3a1f92d28cd15924d265' }, h("ion-toolbar", { key: 'aea8148d3207089db6475579479cb64c16594985' }, this.header !== undefined && h("ion-title", { key: 'f2e6d4ae608dfa5fdba9ed466e078545b55fc7df' }, this.header), h("ion-buttons", { key: 'bea2a3f2448e1907eee3a4e46a2d5e3b99b62763', slot: "end" }, h("ion-button", { key: 'd7db36683d5cff25c3084dccecb736cc55d94965', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '18749c394b34c8f568a1e280e1a19f3a46545a61' }, h("ion-list", { key: '8f84ca4450d196bcd000eecb532d0766a840755d' }, this.multiple === true ? this.renderCheckboxOptions() : this.renderRadioOptions()))));
+        return (h(Host, { key: 'f4b92f4fc3d646f9a327e43a9622abaf69659c28', class: getIonMode(this) }, h("ion-header", { key: '11232ef496e7abd69e55cef988963a4869a7b01e' }, h("ion-toolbar", { key: 'e7c41878691a504d44c658db02807867df542588' }, this.header !== undefined && h("ion-title", { key: 'fcf9d33e0f3e0076ff14805de68848f9ef199cca' }, this.header), h("ion-buttons", { key: '748a967ae0ce68bc2fd018a6b9ebe0e4b810f6ac', slot: "end" }, h("ion-button", { key: 'f5e60791870b5085a31b7af70ed4bb3fb83eb185', onClick: () => this.closeModal() }, "Close")))), h("ion-content", { key: '159797957b6f788a9b393d91864c18db34481c68' }, h("ion-list", { key: '4124554fe8b2411637cbf02f08e50e0d8f804175' }, 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() {
@@ -111,6 +111,8 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "header",
                 "reflect": false
             },
@@ -128,6 +130,8 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false
             },
@@ -151,6 +155,8 @@ export class SelectModal {
                     "tags": [],
                     "text": ""
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "[]"
             }
         };

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: 'ac13bcd1ee8b4ffd1d7ce80be242881cc126cb7a', class: {
-                [theme]: true,
-            }, role: "option", id: this.inputId }));
+        return h(Host, { key: '2e6fa159464f04f6d8720f960141f67918bc7534', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }
@@ -47,6 +40,8 @@ export class SelectOption {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the select option. This property does not apply when `interface=\"action-sheet\"` as `ion-action-sheet` does not allow for disabled buttons."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
@@ -65,6 +60,8 @@ export class SelectOption {
                     "tags": [],
                     "text": "The text value of the option."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             }

package/dist/collection/components/select-popover/select-popover.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
@@ -84,12 +78,6 @@ ion-label {
   overflow-y: auto;
 }
 
-/**
- * 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
@@ -145,12 +133,6 @@ ion-label {
  *   }
  * }
  */
-/**
- * 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