@ionic/core 8.8.19-dev.11786610762.137bbb21 → 8.8.19-dev.11786730389.1a1927bf

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

@@ -1,181 +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 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.
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
-/**
- * Cap slotted children so they can't stretch the option
- * row out of proportion, keeping rows visually uniform
- * regardless of the content.
- */
-.select-option-start > ion-avatar,
-.select-option-end > ion-avatar {
-  width: 40px;
-  height: 40px;
-}
-
-.select-option-start > ion-icon,
-.select-option-end > ion-icon {
-  font-size: 24px;
-}
-
-.select-option-start > ion-img,
-.select-option-start > img,
-.select-option-start > svg,
-.select-option-start > ion-thumbnail,
-.select-option-end > ion-img,
-.select-option-end > img,
-.select-option-end > svg,
-.select-option-end > ion-thumbnail {
-  width: 56px;
-  height: 56px;
-}
-
-.select-option-start > video,
-.select-option-end > video {
-  width: 114px;
-  height: 56px;
-}
-
 /**
  * A heuristic that applies CSS to tablet
  * viewports.
@@ -231,101 +53,13 @@
  * @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 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;
- *   }
- * }
- */
-.action-sheet-button-label-has-rich-content,
-.alert-radio-label-has-rich-content,
-.alert-checkbox-label-has-rich-content,
-.select-option-label-has-rich-content {
-  gap: 16px;
-}
-
-.action-sheet-button-label-text,
-.alert-checkbox-label-text,
-.alert-radio-label-text,
-.select-option-label-text {
-  gap: 12px;
-}
-
-.select-option-start,
-.select-option-end {
-  gap: 8px;
-}
-
-.select-option-description {
-  padding-left: 0;
-  padding-right: 0;
-  padding-top: 5px;
-  padding-bottom: 0;
-  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
-  font-size: 0.75rem;
-}
-
 .action-sheet-button-label-has-rich-content,
 .alert-radio-label-has-rich-content,
 .alert-checkbox-label-has-rich-content,
 .select-option-label-has-rich-content {
   display: flex;
   align-items: center;
+  gap: 16px;
 }
 
 /**
@@ -346,16 +80,24 @@
 .select-option-label-text {
   display: flex;
   align-items: center;
+  gap: 12px;
 }
 
 .select-option-start,
 .select-option-end {
   display: flex;
   align-items: center;
+  gap: 8px;
 }
 
 .select-option-description {
+  padding-left: 0;
+  padding-right: 0;
+  padding-top: 5px;
+  padding-bottom: 0;
   display: block;
+  color: var(--ion-color-step-700, var(--ion-text-color-step-300, #4d4d4d));
+  font-size: 0.75rem;
 }
 
 /**
@@ -386,6 +128,40 @@ ion-checkbox.select-option-has-rich-content::part(label),
   white-space: normal;
 }
 
+/**
+ * Cap slotted children so they can't stretch the option
+ * row out of proportion, keeping rows visually uniform
+ * regardless of the content.
+ */
+.select-option-start > ion-avatar,
+.select-option-end > ion-avatar {
+  width: 40px;
+  height: 40px;
+}
+
+.select-option-start > ion-icon,
+.select-option-end > ion-icon {
+  font-size: 24px;
+}
+
+.select-option-start > ion-img,
+.select-option-start > img,
+.select-option-start > svg,
+.select-option-start > ion-thumbnail,
+.select-option-end > ion-img,
+.select-option-end > img,
+.select-option-end > svg,
+.select-option-end > ion-thumbnail {
+  width: 56px;
+  height: 56px;
+}
+
+.select-option-start > video,
+.select-option-end > video {
+  width: 114px;
+  height: 56px;
+}
+
 :host {
   height: 100%;
 }
@@ -412,12 +188,6 @@ ion-checkbox.select-option-has-rich-content::part(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

package/dist/collection/components/select-modal/test/fixtures.js

@@ -3,8 +3,15 @@
  */
 import { expect } from "@playwright/test";
 export class SelectModalPage {
+    page;
+    multiple;
+    options = [];
+    // Locators
+    modal;
+    selectModal;
+    // Event spies
+    ionModalDidDismiss;
     constructor(page) {
-        this.options = [];
         this.page = page;
     }
     async setup(config, options, multiple = false) {

package/dist/collection/components/select-option/select-option.js

@@ -2,28 +2,61 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { getIonTheme } from "../../global/ionic-global";
+import { getIonMode } 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.
  *
  * @slot - Content is placed between the named slots if provided without a slot.
  * @slot start - Content is placed to the left of the select option text in LTR, and to the right in RTL.
  * @slot end - Content is placed to the right of the select option text in LTR, and to the left in RTL.
  */
 export class SelectOption {
-    constructor() {
-        this.inputId = `ion-selopt-${selectOptionIds++}`;
-        /**
-         * If `true`, the user cannot interact with the select option.
-         */
-        this.disabled = false;
-    }
+    inputId = `ion-selopt-${selectOptionIds++}`;
+    el;
+    /**
+     * If `true`, the user cannot interact with the select option.
+     */
+    disabled = false;
+    /**
+     * The text value of the option.
+     */
+    value;
+    /**
+     * Text that is placed underneath the option text to provide additional details about the option.
+     */
+    description;
+    /**
+     * Where the label is placed relative to the option's selection control
+     * (radio circle or checkbox box) when the option is rendered in an
+     * `alert`, `popover`, or `modal` interface.
+     * `"start"`: The label will appear to the left of the radio in LTR and to the right in RTL.
+     * `"end"`: The label will appear to the right of the radio in LTR and to the left in RTL.
+     *
+     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
+     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     *
+     * When unset, the interface picks a default based on mode and control
+     * type.
+     */
+    labelPlacement;
+    /**
+     * How to pack the label and the option's selection control within a line.
+     * `"start"`: The label and radio will appear on the left in LTR and
+     * on the right in RTL.
+     * `"end"`: The label and radio will appear on the right in LTR and
+     * on the left in RTL.
+     * `"space-between"`: The label and radio will appear on opposite
+     * ends of the line with space between the two elements.
+     *
+     * Applies to the `alert`, `popover`, and `modal` interfaces, but has no
+     * visible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).
+     *
+     * When unset, the interface picks a default based on mode and control
+     * type.
+     */
+    justify;
     render() {
-        const theme = getIonTheme(this);
-        return (h(Host, { key: '059d2198c422852c16aba1c7523ac6e9e586006f', class: {
-                [theme]: true,
-            }, role: "option", id: this.inputId }));
+        return h(Host, { key: '8b8bef0f5a55f18048708c34d3ea3ff0ff2f1d47', role: "option", id: this.inputId, class: getIonMode(this) });
     }
     static get is() { return "ion-select-option"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +142,7 @@ export class SelectOption {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Where the label is placed relative to the option's selection control\n(radio circle or checkbox box) when the option is rendered in an\n`alert`, `popover`, or `modal` interface.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype."
+                    "text": "Where the label is placed relative to the option's selection control\n(radio circle or checkbox box) when the option is rendered in an\n`alert`, `popover`, or `modal` interface.\n`\"start\"`: The label will appear to the left of the radio in LTR and to the right in RTL.\n`\"end\"`: The label will appear to the right of the radio in LTR and to the left in RTL.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on mode and control\ntype."
                 },
                 "getter": false,
                 "setter": false,
@@ -128,7 +161,7 @@ export class SelectOption {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "How to pack the label and the option's selection control within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on the `md`\nand `ionic` themes (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on theme and control\ntype."
+                    "text": "How to pack the label and the option's selection control within a line.\n`\"start\"`: The label and radio will appear on the left in LTR and\non the right in RTL.\n`\"end\"`: The label and radio will appear on the right in LTR and\non the left in RTL.\n`\"space-between\"`: The label and radio will appear on opposite\nends of the line with space between the two elements.\n\nApplies to the `alert`, `popover`, and `modal` interfaces, but has no\nvisible effect on radio options in `popover` or `modal` on `md` (the radio control is hidden there).\n\nWhen unset, the interface picks a default based on mode and control\ntype."
                 },
                 "getter": false,
                 "setter": false,