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

package/dist/collection/components/datetime-button/datetime-button.js

@@ -18,239 +18,31 @@ import { parseDate } from "../datetime/utils/parse";
  * @part native - The native HTML button that wraps the slotted text.
  */
 export class DatetimeButton {
-    constructor() {
-        this.datetimeEl = null;
-        this.overlayEl = null;
-        this.datetimePresentation = 'date-time';
-        this.datetimeActive = 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';
-        /**
-         * If `true`, the user cannot interact with the button.
-         */
-        this.disabled = false;
-        /**
-         * Accepts one or more string values and converts
-         * them to DatetimeParts. This is done so datetime-button
-         * can work with an array internally and not need
-         * to keep checking if the datetime value is `string` or `string[]`.
-         */
-        this.getParsedDateValues = (value) => {
-            if (value === undefined || value === null) {
-                return [];
-            }
-            if (Array.isArray(value)) {
-                return value;
-            }
-            return [value];
-        };
-        /**
-         * Check the value property on the linked
-         * ion-datetime and then format it according
-         * to the locale specified on ion-datetime.
-         */
-        this.setDateTimeText = async () => {
-            var _a, _b, _c, _d, _e;
-            const { datetimeEl, datetimePresentation } = this;
-            if (!datetimeEl) {
-                return;
-            }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
-            const parsedValues = this.getParsedDateValues(value);
-            /**
-             * Both ion-datetime and ion-datetime-button default to today's date and
-             * time if no value is set. We read the datetime's computed default so the
-             * button respects the same constraints (min, max, minuteValues, etc.) that
-             * the datetime applies to its own fallback, instead of using a raw "now".
-             */
-            const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
-            if (!parsedDatetimes) {
-                return;
-            }
-            /**
-             * If developers incorrectly use multiple="true"
-             * with non "date" datetimes, then just select
-             * the first value so the interface does
-             * not appear broken. Datetime will provide a
-             * warning in the console.
-             */
-            const firstParsedDatetime = parsedDatetimes[0];
-            const computedHourCycle = getHourCycle(locale, hourCycle);
-            this.dateText = this.timeText = undefined;
-            switch (datetimePresentation) {
-                case 'date-time':
-                case 'time-date':
-                    const dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _a !== void 0 ? _a : { month: 'short', day: 'numeric', year: 'numeric' });
-                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
-                    if (preferWheel) {
-                        this.dateText = `${dateText} ${timeText}`;
-                    }
-                    else {
-                        this.dateText = dateText;
-                        this.timeText = timeText;
-                    }
-                    break;
-                case 'date':
-                    if (multiple && parsedValues.length !== 1) {
-                        let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
-                        if (titleSelectedDatesFormatter !== undefined) {
-                            try {
-                                headerText = titleSelectedDatesFormatter(parsedValues);
-                            }
-                            catch (e) {
-                                printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
-                            }
-                        }
-                        this.dateText = headerText;
-                    }
-                    else {
-                        this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _b !== void 0 ? _b : { month: 'short', day: 'numeric', year: 'numeric' });
-                    }
-                    break;
-                case 'time':
-                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
-                    break;
-                case 'month-year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) !== null && _c !== void 0 ? _c : { month: 'long', year: 'numeric' });
-                    break;
-                case 'month':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _d !== void 0 ? _d : { month: 'long' });
-                    break;
-                case 'year':
-                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
-                    break;
-            }
-        };
-        /**
-         * Waits for the ion-datetime to re-render.
-         * This is needed in order to correctly position
-         * a popover relative to the trigger element.
-         */
-        this.waitForDatetimeChanges = async () => {
-            const { datetimeEl } = this;
-            if (!datetimeEl) {
-                return Promise.resolve();
-            }
-            return new Promise((resolve) => {
-                addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
-            });
-        };
-        this.handleDateClick = async (ev) => {
-            const { datetimeEl, datetimePresentation } = this;
-            if (!datetimeEl) {
-                return;
-            }
-            let needsPresentationChange = false;
-            /**
-             * When clicking the date button,
-             * we need to make sure that only a date
-             * picker is displayed. For presentation styles
-             * that display content other than a date picker,
-             * we need to update the presentation style.
-             */
-            switch (datetimePresentation) {
-                case 'date-time':
-                case 'time-date':
-                    const needsChange = datetimeEl.presentation !== 'date';
-                    /**
-                     * The date+time wheel picker
-                     * shows date and time together,
-                     * so do not adjust the presentation
-                     * in that case.
-                     */
-                    if (!datetimeEl.preferWheel && needsChange) {
-                        datetimeEl.presentation = 'date';
-                        needsPresentationChange = true;
-                    }
-                    break;
-            }
-            /**
-             * Track which button was clicked
-             * so that it can have the correct
-             * activated styles applied when
-             * the modal/popover containing
-             * the datetime is opened.
-             */
-            this.selectedButton = 'date';
-            this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
-        };
-        this.handleTimeClick = (ev) => {
-            const { datetimeEl, datetimePresentation } = this;
-            if (!datetimeEl) {
-                return;
-            }
-            let needsPresentationChange = false;
-            /**
-             * When clicking the time button,
-             * we need to make sure that only a time
-             * picker is displayed. For presentation styles
-             * that display content other than a time picker,
-             * we need to update the presentation style.
-             */
-            switch (datetimePresentation) {
-                case 'date-time':
-                case 'time-date':
-                    const needsChange = datetimeEl.presentation !== 'time';
-                    if (needsChange) {
-                        datetimeEl.presentation = 'time';
-                        needsPresentationChange = true;
-                    }
-                    break;
-            }
-            /**
-             * Track which button was clicked
-             * so that it can have the correct
-             * activated styles applied when
-             * the modal/popover containing
-             * the datetime is opened.
-             */
-            this.selectedButton = 'time';
-            this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
-        };
-        /**
-         * If the datetime is presented in an
-         * overlay, the datetime and overlay
-         * should be appropriately sized.
-         * These classes provide default sizing values
-         * that developers can customize.
-         * The goal is to provide an overlay that is
-         * reasonably sized with a datetime that
-         * fills the entire container.
-         */
-        this.presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
-            const { overlayEl } = this;
-            if (!overlayEl) {
-                return;
-            }
-            if (overlayEl.tagName === 'ION-POPOVER') {
-                /**
-                 * When the presentation on datetime changes,
-                 * we need to wait for the component to re-render
-                 * otherwise the computed width/height of the
-                 * popover content will be wrong, causing
-                 * the popover to not align with the trigger element.
-                 */
-                if (needsPresentationChange) {
-                    await this.waitForDatetimeChanges();
-                }
-                /**
-                 * We pass the trigger button element
-                 * so that the popover aligns with the individual
-                 * button that was clicked, not the component container.
-                 */
-                overlayEl.present(Object.assign(Object.assign({}, ev), { detail: {
-                        ionShadowTarget: triggerEl,
-                    } }));
-            }
-            else {
-                overlayEl.present();
-            }
-        };
-    }
+    datetimeEl = null;
+    overlayEl = null;
+    dateTargetEl;
+    timeTargetEl;
+    el;
+    datetimePresentation = 'date-time';
+    dateText;
+    timeText;
+    datetimeActive = false;
+    selectedButton;
+    /**
+     * 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;
+    /**
+     * If `true`, the user cannot interact with the button.
+     */
+    disabled = false;
+    /**
+     * The ID of the `ion-datetime` instance
+     * associated with the datetime button.
+     */
+    datetime;
     async componentWillLoad() {
         const { datetime } = this;
         if (!datetime) {
@@ -339,14 +131,233 @@ export class DatetimeButton {
             }
         });
     }
+    /**
+     * Accepts one or more string values and converts
+     * them to DatetimeParts. This is done so datetime-button
+     * can work with an array internally and not need
+     * to keep checking if the datetime value is `string` or `string[]`.
+     */
+    getParsedDateValues = (value) => {
+        if (value === undefined || value === null) {
+            return [];
+        }
+        if (Array.isArray(value)) {
+            return value;
+        }
+        return [value];
+    };
+    /**
+     * Check the value property on the linked
+     * ion-datetime and then format it according
+     * to the locale specified on ion-datetime.
+     */
+    setDateTimeText = async () => {
+        const { datetimeEl, datetimePresentation } = this;
+        if (!datetimeEl) {
+            return;
+        }
+        const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+        const parsedValues = this.getParsedDateValues(value);
+        /**
+         * Both ion-datetime and ion-datetime-button default to today's date and
+         * time if no value is set. We read the datetime's computed default so the
+         * button respects the same constraints (min, max, minuteValues, etc.) that
+         * the datetime applies to its own fallback, instead of using a raw "now".
+         */
+        const parsedDatetimes = parsedValues.length > 0 ? parseDate(parsedValues) : [await datetimeEl.getDefaultPart()];
+        if (!parsedDatetimes) {
+            return;
+        }
+        /**
+         * If developers incorrectly use multiple="true"
+         * with non "date" datetimes, then just select
+         * the first value so the interface does
+         * not appear broken. Datetime will provide a
+         * warning in the console.
+         */
+        const firstParsedDatetime = parsedDatetimes[0];
+        const computedHourCycle = getHourCycle(locale, hourCycle);
+        this.dateText = this.timeText = undefined;
+        switch (datetimePresentation) {
+            case 'date-time':
+            case 'time-date':
+                const dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
+                if (preferWheel) {
+                    this.dateText = `${dateText} ${timeText}`;
+                }
+                else {
+                    this.dateText = dateText;
+                    this.timeText = timeText;
+                }
+                break;
+            case 'date':
+                if (multiple && parsedValues.length !== 1) {
+                    let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
+                    if (titleSelectedDatesFormatter !== undefined) {
+                        try {
+                            headerText = titleSelectedDatesFormatter(parsedValues);
+                        }
+                        catch (e) {
+                            printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                        }
+                    }
+                    this.dateText = headerText;
+                }
+                else {
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                }
+                break;
+            case 'time':
+                this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
+                break;
+            case 'month-year':
+                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'long', year: 'numeric' });
+                break;
+            case 'month':
+                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { month: 'long' });
+                break;
+            case 'year':
+                this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.time ?? { year: 'numeric' });
+                break;
+        }
+    };
+    /**
+     * Waits for the ion-datetime to re-render.
+     * This is needed in order to correctly position
+     * a popover relative to the trigger element.
+     */
+    waitForDatetimeChanges = async () => {
+        const { datetimeEl } = this;
+        if (!datetimeEl) {
+            return Promise.resolve();
+        }
+        return new Promise((resolve) => {
+            addEventListener(datetimeEl, 'ionRender', resolve, { once: true });
+        });
+    };
+    handleDateClick = async (ev) => {
+        const { datetimeEl, datetimePresentation } = this;
+        if (!datetimeEl) {
+            return;
+        }
+        let needsPresentationChange = false;
+        /**
+         * When clicking the date button,
+         * we need to make sure that only a date
+         * picker is displayed. For presentation styles
+         * that display content other than a date picker,
+         * we need to update the presentation style.
+         */
+        switch (datetimePresentation) {
+            case 'date-time':
+            case 'time-date':
+                const needsChange = datetimeEl.presentation !== 'date';
+                /**
+                 * The date+time wheel picker
+                 * shows date and time together,
+                 * so do not adjust the presentation
+                 * in that case.
+                 */
+                if (!datetimeEl.preferWheel && needsChange) {
+                    datetimeEl.presentation = 'date';
+                    needsPresentationChange = true;
+                }
+                break;
+        }
+        /**
+         * Track which button was clicked
+         * so that it can have the correct
+         * activated styles applied when
+         * the modal/popover containing
+         * the datetime is opened.
+         */
+        this.selectedButton = 'date';
+        this.presentOverlay(ev, needsPresentationChange, this.dateTargetEl);
+    };
+    handleTimeClick = (ev) => {
+        const { datetimeEl, datetimePresentation } = this;
+        if (!datetimeEl) {
+            return;
+        }
+        let needsPresentationChange = false;
+        /**
+         * When clicking the time button,
+         * we need to make sure that only a time
+         * picker is displayed. For presentation styles
+         * that display content other than a time picker,
+         * we need to update the presentation style.
+         */
+        switch (datetimePresentation) {
+            case 'date-time':
+            case 'time-date':
+                const needsChange = datetimeEl.presentation !== 'time';
+                if (needsChange) {
+                    datetimeEl.presentation = 'time';
+                    needsPresentationChange = true;
+                }
+                break;
+        }
+        /**
+         * Track which button was clicked
+         * so that it can have the correct
+         * activated styles applied when
+         * the modal/popover containing
+         * the datetime is opened.
+         */
+        this.selectedButton = 'time';
+        this.presentOverlay(ev, needsPresentationChange, this.timeTargetEl);
+    };
+    /**
+     * If the datetime is presented in an
+     * overlay, the datetime and overlay
+     * should be appropriately sized.
+     * These classes provide default sizing values
+     * that developers can customize.
+     * The goal is to provide an overlay that is
+     * reasonably sized with a datetime that
+     * fills the entire container.
+     */
+    presentOverlay = async (ev, needsPresentationChange, triggerEl) => {
+        const { overlayEl } = this;
+        if (!overlayEl) {
+            return;
+        }
+        if (overlayEl.tagName === 'ION-POPOVER') {
+            /**
+             * When the presentation on datetime changes,
+             * we need to wait for the component to re-render
+             * otherwise the computed width/height of the
+             * popover content will be wrong, causing
+             * the popover to not align with the trigger element.
+             */
+            if (needsPresentationChange) {
+                await this.waitForDatetimeChanges();
+            }
+            /**
+             * We pass the trigger button element
+             * so that the popover aligns with the individual
+             * button that was clicked, not the component container.
+             */
+            overlayEl.present({
+                ...ev,
+                detail: {
+                    ionShadowTarget: triggerEl,
+                },
+            });
+        }
+        else {
+            overlayEl.present();
+        }
+    };
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: 'c28e5e428111f18eaceb030dca8aba5579867eaa', class: createColorClasses(color, {
+        return (h(Host, { key: '2aaa284fe9b53b6347fcb5a1d325fbab1a6f38bd', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (h("button", { key: 'a08f41b3150ef7171d0f1d9b3d69b51be67b7b84', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: '35ee68ca1cea59f03e1b59b72606e618141c8e1f', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '4be53227aaf0acd20e8ebbff9f645140e8a96f33' }))), timeText && (h("button", { key: 'ab500f9b78f8c194180073eaf7325041adbd02f7', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5822486dfdedba6c071a0f5233cc06f8321a1f5d', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '054a4acb811a98cc6d9bb6a3cf51232a1f09b0ea' })))));
+            }) }, dateText && (h("button", { key: 'd9698471fa5d5c834ca73db57f9ed98dfc705b4c', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, h("slot", { key: 'c8761a7f25ae5b93c953b3486dd6335f5ad4fd53', name: "date-target" }, dateText), mode === 'md' && h("ion-ripple-effect", { key: '3dd5e97af8d35a2b008de4ab01f690b3c2223135' }))), timeText && (h("button", { key: '1107ca2382940b642b551f885f7ca763012c236c', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, h("slot", { key: '5cff53e486923b03715b9ab4dc0947e26f4ea1d9', name: "time-target" }, timeText), mode === 'md' && h("ion-ripple-effect", { key: '5aac1facb6fc7457307c4f59a241e3a5b31facc8' })))));
     }
     static get is() { return "ion-datetime-button"; }
     static get encapsulation() { return "shadow"; }
@@ -388,8 +399,7 @@ export class DatetimeButton {
                 "getter": false,
                 "setter": false,
                 "reflect": true,
-                "attribute": "color",
-                "defaultValue": "'primary'"
+                "attribute": "color"
             },
             "disabled": {
                 "type": "boolean",

package/dist/collection/components/datetime-button/datetime-button.md.css

@@ -82,6 +82,11 @@
 
 :host(.time-active) #time-button,
 :host(.date-active) #date-button {
+  color: var(--ion-color-primary, #0054e9);
+}
+
+:host(.ion-color.time-active) #time-button,
+:host(.ion-color.date-active) #date-button {
   color: var(--ion-color-base);
 }
 

package/dist/collection/components/fab/fab.js

@@ -4,19 +4,26 @@
 import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Fab {
-    constructor() {
-        /**
-         * If `true`, the fab will display on the edge of the header if
-         * `vertical` is `"top"`, and on the edge of the footer if
-         * it is `"bottom"`. Should be used with a `fixed` slot.
-         */
-        this.edge = false;
-        /**
-         * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
-         * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
-         */
-        this.activated = false;
-    }
+    el;
+    /**
+     * Where to align the fab horizontally in the viewport.
+     */
+    horizontal;
+    /**
+     * Where to align the fab vertically in the viewport.
+     */
+    vertical;
+    /**
+     * If `true`, the fab will display on the edge of the header if
+     * `vertical` is `"top"`, and on the edge of the footer if
+     * it is `"bottom"`. Should be used with a `fixed` slot.
+     */
+    edge = false;
+    /**
+     * If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.
+     * That means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible.
+     */
+    activated = false;
     activatedChanged() {
         const activated = this.activated;
         const fab = this.getFab();