@ionic/core 9.0.11-dev.11793889755.165fa328 → 9.0.11-dev.11793900758.1bf6a6e5

package/dist/cjs/ion-accordion_2.cjs.entry.js

@@ -12,7 +12,7 @@ require('./index-DkNv4J_i.js');
 require('./focus-visible-DGPRKkcx.js');
 require('./dir-Bma_9Lqh.js');
 
-const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled) ::slotted(ion-item[slot=header]){--color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}:host(.accordion-disabled) #content-wrapper{color:var(--token-text-disabled, var(--token-primitives-neutral-500, #9fa5ad))}`;
+const accordionIonicCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{position:relative}:host::after{-webkit-margin-start:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-margin-end:var(--token-space-400, var(--token-scale-400, 16px));margin-inline-end:var(--token-space-400, var(--token-scale-400, 16px));right:0;left:0;bottom:0;display:block;position:absolute;height:var(--token-border-size-025, var(--token-scale-025, 1px));background-color:var(--token-border-default, var(--token-primitives-neutral-400, #d0d7df));content:"";z-index:3}:host(.accordion-last)::after{display:none}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}::slotted(ion-item[slot=header]){--border-radius:inherit;--color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528));--border-width:var(--token-border-size-0, var(--token-scale-0, 0px));--inner-border-width:var(--token-scale-0, 0px);--min-height:var(--token-scale-700, 28px);--padding-top:var(--token-space-300, var(--token-scale-300, 12px));--padding-end:var(--token-space-400, var(--token-scale-400, 16px));--padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));--padding-start:var(--token-space-400, var(--token-scale-400, 16px));--background-activated:var(--token-bg-neutral-subtlest-press, var(--token-primitives-neutral-200, #ebeef2));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-450, 1.125rem);font-weight:var(--token-font-weight-medium, 500);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.555556}#content-wrapper{-webkit-padding-start:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-start:var(--token-space-400, var(--token-scale-400, 16px));-webkit-padding-end:var(--token-space-400, var(--token-scale-400, 16px));padding-inline-end:var(--token-space-400, var(--token-scale-400, 16px));padding-top:var(--token-space-300, var(--token-scale-300, 12px));padding-bottom:var(--token-space-300, var(--token-scale-300, 12px));font-family:var(--token-font-family, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--token-font-size-350, 0.875rem);font-weight:var(--token-font-weight-regular, 400);letter-spacing:var(--token-font-letter-spacing-0, 0);line-height:1.714286;color:var(--token-text-default, var(--token-primitives-neutral-1200, #242528))}:host(.accordion-disabled)::before{border-radius:inherit;right:0;left:0;top:0;bottom:0;position:absolute;background-color:var(--token-state-disabled, rgba(255, 255, 255, 0.6));content:"";pointer-events:none;z-index:2}`;
 
 const accordionIosCss = () => `:host{display:block;position:relative;width:100%;overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-expanding) #content-wrapper{overflow:auto}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}@media (prefers-reduced-motion: reduce){:host,#content{-webkit-transition:none !important;transition:none !important}}:host{background-color:var(--ion-background-color, #ffffff)}:host(.accordion-animated){-webkit-transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{-webkit-transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1);transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}`;
 

package/dist/cjs/ion-datetime-button.cjs.entry.js

@@ -54,7 +54,7 @@ const DatetimeButton = class {
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, selectionMode, titleSelectedDatesFormatter, } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default to today's date and
@@ -66,6 +66,8 @@ const DatetimeButton = class {
             if (!parsedDatetimes) {
                 return;
             }
+            const isRangeMode = selectionMode === 'range';
+            const isMultipleMode = selectionMode === 'multiple' || (selectionMode === undefined && multiple);
             /**
              * If developers incorrectly use multiple="true"
              * with non "date" datetimes, then just select
@@ -75,11 +77,12 @@ const DatetimeButton = class {
              */
             const firstParsedDatetime = parsedDatetimes[0];
             const computedHourCycle = format.getHourCycle(locale, hourCycle);
+            const dateFormatOptions = formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' };
             this.dateText = this.timeText = undefined;
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                    const dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     const timeText = format.getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions?.time);
                     if (preferWheel) {
                         this.dateText = `${dateText} ${timeText}`;
@@ -90,7 +93,31 @@ const DatetimeButton = class {
                     }
                     break;
                 case 'date':
-                    if (multiple && parsedValues.length !== 1) {
+                    if (isRangeMode && parsedValues.length >= 2) {
+                        /**
+                         * Use the first and last entries in date order, matching
+                         * how ion-datetime reads a range value.
+                         */
+                        let startIndex = 0;
+                        let endIndex = parsedValues.length - 1;
+                        if (format.isAfter(parsedDatetimes[startIndex], parsedDatetimes[endIndex])) {
+                            [startIndex, endIndex] = [endIndex, startIndex];
+                        }
+                        const rangeValues = [parsedValues[startIndex], parsedValues[endIndex]];
+                        const startDate = format.getLocalizedDateTime(locale, parsedDatetimes[startIndex], dateFormatOptions);
+                        const endDate = format.getLocalizedDateTime(locale, parsedDatetimes[endIndex], dateFormatOptions);
+                        let rangeText = `${startDate} - ${endDate}`;
+                        if (titleSelectedDatesFormatter !== undefined) {
+                            try {
+                                rangeText = titleSelectedDatesFormatter(rangeValues);
+                            }
+                            catch (e) {
+                                index.printIonError('[ion-datetime-button] - Exception in provided `titleSelectedDatesFormatter`:', e);
+                            }
+                        }
+                        this.dateText = rangeText;
+                    }
+                    else if (isMultipleMode && parsedValues.length !== 1) {
                         let headerText = `${parsedValues.length} days`; // default/fallback for multiple selection
                         if (titleSelectedDatesFormatter !== undefined) {
                             try {
@@ -103,7 +130,7 @@ const DatetimeButton = class {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, formatOptions?.date ?? { month: 'short', day: 'numeric', year: 'numeric' });
+                        this.dateText = format.getLocalizedDateTime(locale, firstParsedDatetime, dateFormatOptions);
                     }
                     break;
                 case 'time':
@@ -340,11 +367,11 @@ const DatetimeButton = class {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const theme$1 = ionicGlobal.getIonTheme(this);
-        return (index.h(index.Host, { key: '73ba9456313d46e63db37c48b23b38e8e1f88ec6', class: theme.createColorClasses(color, {
+        return (index.h(index.Host, { key: 'e022c5c280d4f889c1ba7ca3e96b38063c5add30', class: theme.createColorClasses(color, {
                 [theme$1]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,
-            }) }, dateText && (index.h("button", { key: '51f70f2d08823ccd399976c09152c278e0ef108e', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { key: '8422d6ca39d3bdecbefe6686afb9c2bcdb271a54', name: "date-target" }, dateText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'f4c1c9c6bcdf772eb326371b9ab3795f7fbc0848' }))), timeText && (index.h("button", { key: '709a8bc9d0231bfc3c580bcca9065ccc66f4b7da', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { key: '2860f54f5a73aa3a42397a1a72619d6369a79025', name: "time-target" }, timeText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '306f594bffa84fea1f5e2528cab5ee56c0364e34' })))));
+            }) }, dateText && (index.h("button", { key: 'b1267d98cefbce7666b0cafa083c42f3116e2398', class: "ion-activatable", id: "date-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleDateClick, disabled: disabled, part: "native", ref: (el) => (this.dateTargetEl = el) }, index.h("slot", { key: '3fdfa6adf73ee1e35cdb7f318f1d1ddcf4ab4d7b', name: "date-target" }, dateText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: 'a832d63c77fffe8d7e0d28827bbb469726373d1e' }))), timeText && (index.h("button", { key: 'c589bdf2b8221609713f0d3554494dd08a1f2e5b', class: "ion-activatable", id: "time-button", "aria-expanded": datetimeActive ? 'true' : 'false', onClick: this.handleTimeClick, disabled: disabled, part: "native", ref: (el) => (this.timeTargetEl = el) }, index.h("slot", { key: '10769ddadf7933d78744facaaa153bb413ff484a', name: "time-target" }, timeText), theme$1 === 'md' && index.h("ion-ripple-effect", { key: '7832de031919ddfb312528b45a3dc8e1c20edea6' })))));
     }
     get el() { return index.getElement(this); }
 };