@ionic/core 8.8.19 → 8.8.20-dev.11787158518.168a2fea

package/dist/cjs/notch-controller-aiy8aQb-.js

@@ -1,155 +0,0 @@
-/*!
- * (C) Ionic http://ionicframework.com - MIT License
- */
-'use strict';
-
-var index = require('./index-DkNv4J_i.js');
-var helpers = require('./helpers-DdZyl6WL.js');
-
-/**
- * A utility to calculate the size of an outline notch
- * width relative to the content passed. This is used in
- * components such as `ion-select` with `fill="outline"`
- * where we need to pass slotted HTML content. This is not
- * needed when rendering plaintext content because we can
- * render the plaintext again hidden with `opacity: 0` inside
- * of the notch. As a result we can rely on the intrinsic size
- * of the element to correctly compute the notch width. We
- * cannot do this with slotted content because we cannot project
- * it into 2 places at once.
- *
- * @internal
- * @param el: The host element
- * @param getNotchSpacerEl: A function that returns a reference to the notch spacer element inside of the component template.
- * @param getLabelSlot: A function that returns a reference to the slotted content.
- */
-const createNotchController = (el, getNotchSpacerEl, getLabelSlot) => {
-    let notchVisibilityIO;
-    const needsExplicitNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (
-        /**
-         * If the notch is not being used
-         * then we do not need to set the notch width.
-         */
-        notchSpacerEl === undefined ||
-            /**
-             * If either the label property is being
-             * used or the label slot is not defined,
-             * then we do not need to estimate the notch width.
-             */
-            el.label !== undefined ||
-            getLabelSlot() === null) {
-            return false;
-        }
-        return true;
-    };
-    const calculateNotchWidth = () => {
-        if (needsExplicitNotchWidth()) {
-            /**
-             * Run this the frame after
-             * the browser has re-painted the host element.
-             * Otherwise, the label element may have a width
-             * of 0 and the IntersectionObserver will be used.
-             */
-            helpers.raf(() => {
-                setNotchWidth();
-            });
-        }
-    };
-    /**
-     * When using a label prop we can render
-     * the label value inside of the notch and
-     * let the browser calculate the size of the notch.
-     * However, we cannot render the label slot in multiple
-     * places so we need to manually calculate the notch dimension
-     * based on the size of the slotted content.
-     *
-     * This function should only be used to set the notch width
-     * on slotted label content. The notch width for label prop
-     * content is automatically calculated based on the
-     * intrinsic size of the label text.
-     */
-    const setNotchWidth = () => {
-        const notchSpacerEl = getNotchSpacerEl();
-        if (notchSpacerEl === undefined) {
-            return;
-        }
-        if (!needsExplicitNotchWidth()) {
-            notchSpacerEl.style.removeProperty('width');
-            return;
-        }
-        const width = getLabelSlot().scrollWidth;
-        if (
-        /**
-         * If the computed width of the label is 0
-         * and notchSpacerEl's offsetParent is null
-         * then that means the element is hidden.
-         * As a result, we need to wait for the element
-         * to become visible before setting the notch width.
-         *
-         * We do not check el.offsetParent because
-         * that can be null if the host element has
-         * position: fixed applied to it.
-         * notchSpacerEl does not have position: fixed.
-         */
-        width === 0 &&
-            notchSpacerEl.offsetParent === null &&
-            index.win !== undefined &&
-            'IntersectionObserver' in index.win) {
-            /**
-             * If there is an IO already attached
-             * then that will update the notch
-             * once the element becomes visible.
-             * As a result, there is no need to create
-             * another one.
-             */
-            if (notchVisibilityIO !== undefined) {
-                return;
-            }
-            const io = (notchVisibilityIO = new IntersectionObserver((ev) => {
-                /**
-                 * If the element is visible then we
-                 * can try setting the notch width again.
-                 */
-                if (ev[0].intersectionRatio === 1) {
-                    setNotchWidth();
-                    io.disconnect();
-                    notchVisibilityIO = undefined;
-                }
-            }, 
-            /**
-             * Set the root to be the host element
-             * This causes the IO callback
-             * to be fired in WebKit as soon as the element
-             * is visible. If we used the default root value
-             * then WebKit would only fire the IO callback
-             * after any animations (such as a modal transition)
-             * finished, and there would potentially be a flicker.
-             */
-            { threshold: 0.01, root: el }));
-            io.observe(notchSpacerEl);
-            return;
-        }
-        /**
-         * If the element is visible then we can set the notch width.
-         * The notch is only visible when the label is scaled,
-         * which is why we multiply the width by 0.75 as this is
-         * the same amount the label element is scaled by in the host CSS.
-         * (See $form-control-label-stacked-scale in ionic.globals.scss).
-         */
-        notchSpacerEl.style.setProperty('width', `${width * 0.75}px`);
-    };
-    const destroy = () => {
-        if (notchVisibilityIO) {
-            notchVisibilityIO.disconnect();
-            notchVisibilityIO = undefined;
-        }
-    };
-    return {
-        calculateNotchWidth,
-        destroy,
-    };
-};
-
-exports.createNotchController = createNotchController;

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

@@ -1,27 +0,0 @@
-/*!
- * (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

@@ -1,23 +0,0 @@
-/*!
- * (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

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

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

@@ -1,300 +0,0 @@
-/**
- * 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;
-}