@ionic/core 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb

package/dist/collection/components/picker-column-option/picker-column-option.js

@@ -6,36 +6,33 @@ import { inheritAttributes } from "../../utils/helpers";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 export class PickerColumnOption {
-    /**
-     * We keep track of the parent picker column
-     * so we can update the value of it when
-     * clicking an enable option.
-     */
-    pickerColumn = null;
-    el;
-    /**
-     * The aria-label of the option.
-     *
-     * If the value changes, then it will trigger a
-     * re-render of the picker since it's a @State variable.
-     * Otherwise, the `aria-label` attribute cannot be updated
-     * after the component is loaded.
-     */
-    ariaLabel = null;
-    /**
-     * If `true`, the user cannot interact with the picker column option.
-     */
-    disabled = false;
-    /**
-     * The text value of the option.
-     */
-    value;
-    /**
-     * The color to use from your application's color palette.
-     * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
-     * For more information on colors, see [theming](/docs/theming/basics).
-     */
-    color;
+    constructor() {
+        /**
+         * We keep track of the parent picker column
+         * so we can update the value of it when
+         * clicking an enable option.
+         */
+        this.pickerColumn = null;
+        /**
+         * The aria-label of the option.
+         *
+         * If the value changes, then it will trigger a
+         * re-render of the picker since it's a @State variable.
+         * Otherwise, the `aria-label` attribute cannot be updated
+         * after the component is loaded.
+         */
+        this.ariaLabel = null;
+        /**
+         * If `true`, the user cannot interact with the picker column option.
+         */
+        this.disabled = false;
+        /**
+         * The color to use from your application's color palette.
+         * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
+         * For more information on colors, see [theming](/docs/theming/basics).
+         */
+        this.color = 'primary';
+    }
     /**
      * The aria-label of the option has changed after the
      * first render and needs to be updated within the component.
@@ -94,10 +91,10 @@ export class PickerColumnOption {
     render() {
         const { color, disabled, ariaLabel } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '98109dc9aeced749a3e879394d9a24de24204433', class: createColorClasses(color, {
+        return (h(Host, { key: 'c45a1c14a351bf57d7113671164852349be5aa8a', class: createColorClasses(color, {
                 [mode]: true,
                 ['option-disabled']: disabled,
-            }) }, h("div", { key: '42cb75738ea6925a7780b3ec9c1ff6823e340a24', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '1f1b3862cdfb2b432016014e2e56330c0247d0b5' }))));
+            }) }, h("div", { key: '824930b658c6e3fb493ac4c6c2451d38c6bc4829', class: 'picker-column-option-button', role: "button", "aria-label": ariaLabel, onClick: () => this.onClick() }, h("slot", { key: '019df4dcf46e629bdbebcd46ed3ab29669feab27' }))));
     }
     static get is() { return "ion-picker-column-option"; }
     static get encapsulation() { return "shadow"; }
@@ -178,7 +175,8 @@ export class PickerColumnOption {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color"
+                "attribute": "color",
+                "defaultValue": "'primary'"
             }
         };
     }

package/dist/collection/components/picker-column-option/picker-column-option.md.css

@@ -93,16 +93,11 @@
  * - datetime sets `part="... active"` on the option. This is the reliable
  *   value-based source of truth and keeps the option colored when the column
  *   lives inside datetime's shadow DOM, where the class can be missed
- *   (WebKit's elementsFromPoint is unreliable in a shadow root).
+ *   (WebKit's elementsFromPoint is unreliable in a shadow root). 
  *   TODO(FW-6594): Determine if this workaround can be removed when iOS 16 is
  *   no longer supported.
  */
 :host(.option-active),
 :host([part~=active]) {
-  color: var(--ion-color-primary, #0054e9);
-}
-
-:host(.ion-color.option-active),
-:host(.ion-color[part~=active]) {
   color: var(--ion-color-base);
 }

package/dist/collection/components/picker-legacy/animations/ios.enter.js

@@ -0,0 +1,27 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+/**
+ * iOS Picker Enter Animation
+ */
+export const iosEnterAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 0.01, 'var(--backdrop-opacity)')
+        .beforeStyles({
+        'pointer-events': 'none',
+    })
+        .afterClearStyles(['pointer-events']);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(100%)', 'translateY(0%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};

package/dist/collection/components/picker-legacy/animations/ios.leave.js

@@ -0,0 +1,23 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { createAnimation } from "../../../utils/animation/animation";
+/**
+ * iOS Picker Leave Animation
+ */
+export const iosLeaveAnimation = (baseEl) => {
+    const baseAnimation = createAnimation();
+    const backdropAnimation = createAnimation();
+    const wrapperAnimation = createAnimation();
+    backdropAnimation
+        .addElement(baseEl.querySelector('ion-backdrop'))
+        .fromTo('opacity', 'var(--backdrop-opacity)', 0.01);
+    wrapperAnimation
+        .addElement(baseEl.querySelector('.picker-wrapper'))
+        .fromTo('transform', 'translateY(0%)', 'translateY(100%)');
+    return baseAnimation
+        .addElement(baseEl)
+        .easing('cubic-bezier(.36,.66,.04,1)')
+        .duration(400)
+        .addAnimation([backdropAnimation, wrapperAnimation]);
+};

package/dist/collection/components/picker-legacy/picker-interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/picker-legacy/picker.ios.css

@@ -0,0 +1,300 @@
+/**
+ * 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 {
+  /**
+   * @prop --background: Background of the picker
+   * @prop --background-rgb: Background of the picker in rgb format
+   *
+   * @prop --border-radius: Border radius of the picker
+   * @prop --border-color: Border color of the picker
+   * @prop --border-width: Border width of the picker
+   * @prop --border-style: Border style of the picker
+   *
+   * @prop --min-width: Minimum width of the picker
+   * @prop --width: Width of the picker
+   * @prop --max-width: Maximum width of the picker
+   *
+   * @prop --min-height: Minimum height of the picker
+   * @prop --height: Height of the picker
+   * @prop --max-height: Maximum height of the picker
+   *
+   * @prop --backdrop-opacity: Opacity of the backdrop
+   */
+  --border-radius: 0;
+  --border-style: solid;
+  --min-width: auto;
+  --width: 100%;
+  --max-width: 500px;
+  --min-height: auto;
+  --max-height: auto;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  top: 0;
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  outline: none;
+  font-family: var(--ion-font-family, inherit);
+  contain: strict;
+  user-select: none;
+  z-index: 1001;
+}
+:host {
+  inset-inline-start: 0;
+}
+
+:host(.overlay-hidden) {
+  display: none;
+}
+
+.picker-wrapper {
+  border-radius: var(--border-radius);
+  left: 0;
+  right: 0;
+  bottom: 0;
+  -webkit-margin-start: auto;
+  margin-inline-start: auto;
+  -webkit-margin-end: auto;
+  margin-inline-end: auto;
+  margin-top: auto;
+  margin-bottom: auto;
+  transform: translate3d(0,  100%,  0);
+  display: flex;
+  position: absolute;
+  flex-direction: column;
+  width: var(--width);
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  height: var(--height);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+  border-width: var(--border-width);
+  border-style: var(--border-style);
+  border-color: var(--border-color);
+  background: var(--background);
+  contain: strict;
+  overflow: hidden;
+  z-index: 10;
+}
+
+.picker-toolbar {
+  width: 100%;
+  background: transparent;
+  contain: strict;
+  z-index: 1;
+}
+
+.picker-button {
+  border: 0;
+  font-family: inherit;
+}
+
+.picker-button:active, .picker-button:focus {
+  outline: none;
+}
+
+.picker-columns {
+  display: flex;
+  position: relative;
+  justify-content: center;
+  margin-bottom: var(--ion-safe-area-bottom, 0);
+  contain: strict;
+  overflow: hidden;
+}
+
+.picker-above-highlight,
+.picker-below-highlight {
+  display: none;
+  pointer-events: none;
+}
+
+/**
+ * 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 {
+  --background: var(--ion-background-color, #fff);
+  --border-width: 1px 0 0;
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --height: 260px;
+  --backdrop-opacity: var(--ion-backdrop-opacity, 0.26);
+  color: var(--ion-item-color, var(--ion-text-color, #000));
+}
+
+.picker-toolbar {
+  display: flex;
+  height: 44px;
+  border-bottom: 0.55px solid var(--border-color);
+}
+
+.picker-toolbar-button {
+  flex: 1;
+  text-align: end;
+}
+
+.picker-toolbar-button:last-child .picker-button {
+  font-weight: 600;
+}
+
+.picker-toolbar-button:first-child {
+  font-weight: normal;
+  text-align: start;
+}
+
+.picker-button,
+.picker-button.ion-activated {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  -webkit-padding-start: 1em;
+  padding-inline-start: 1em;
+  -webkit-padding-end: 1em;
+  padding-inline-end: 1em;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 44px;
+  background: transparent;
+  color: var(--ion-color-primary, #0054e9);
+  font-size: 16px;
+}
+
+.picker-columns {
+  height: 215px;
+  perspective: 1000px;
+}
+
+.picker-above-highlight {
+  top: 0;
+  transform: translate3d(0,  0,  90px);
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 81px;
+  border-bottom: 1px solid var(--border-color);
+  background: linear-gradient(to bottom, var(--background, var(--ion-background-color, #fff)) 20%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
+  z-index: 10;
+}
+.picker-above-highlight {
+  inset-inline-start: 0;
+}
+
+.picker-below-highlight {
+  top: 115px;
+  transform: translate3d(0,  0,  90px);
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 119px;
+  border-top: 1px solid var(--border-color);
+  background: linear-gradient(to top, var(--background, var(--ion-background-color, #fff)) 30%, rgba(var(--background-rgb, var(--ion-background-color-rgb, 255, 255, 255)), 0.8) 100%);
+  z-index: 11;
+}
+.picker-below-highlight {
+  inset-inline-start: 0;
+}