@ionic/core 8.5.4-dev.11744646756.1244bf71 → 8.5.4-dev.11744657992.1bb14c4f

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

@@ -371,7 +371,7 @@
   opacity: 0.4;
 }
 
-.calendar-day:not(.calendar-day-adjacent-day):focus {
+.calendar-day:focus {
   background: rgba(var(--ion-color-base-rgb), 0.2);
   box-shadow: 0px 0px 0px 4px rgba(var(--ion-color-base-rgb), 0.2);
 }
@@ -652,21 +652,15 @@ ion-picker {
  * is selected should have ion-color for
  * text color and be bolder.
  */
-:host .calendar-day.calendar-day-active,
-:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
+:host .calendar-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-active,
-.calendar-day.calendar-day-active:focus {
+.calendar-day.calendar-day-active {
   border: 1px solid var(--ion-color-base);
   background: var(--ion-color-base);
 }
 
-:host .calendar-day.calendar-day-adjacent-day {
-  color: var(--ion-color-step-500, var(--ion-text-color-step-500, gray));
-}
-
 :host .datetime-time {
   -webkit-padding-start: 16px;
   padding-inline-start: 16px;

package/dist/collection/components/datetime/utils/data.js

@@ -78,17 +78,8 @@ export const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
+export const getDaysOfMonth = (month, year, firstDayOfWeek) => {
     const numDays = getNumDaysInMonth(month, year);
-    let previousNumDays; //previous month number of days
-    if (month === 1) {
-        // If the current month is January, the previous month should be December of the previous year.
-        previousNumDays = getNumDaysInMonth(12, year - 1);
-    }
-    else {
-        // Otherwise, the previous month should be the current month - 1 of the same year.
-        previousNumDays = getNumDaysInMonth(month - 1, year);
-    }
     const firstOfMonth = new Date(`${month}/1/${year}`).getDay();
     /**
      * To get the first day of the month aligned on the correct
@@ -112,26 +103,10 @@ export const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = f
     const offset = firstOfMonth >= firstDayOfWeek ? firstOfMonth - (firstDayOfWeek + 1) : 6 - (firstDayOfWeek - firstOfMonth);
     let days = [];
     for (let i = 1; i <= numDays; i++) {
-        days.push({ day: i, dayOfWeek: (offset + i) % 7, isAdjacentDay: false });
-    }
-    if (showAdjacentDays) {
-        for (let i = 0; i <= offset; i++) {
-            // Using offset create previous month adjacent day, starting from last day
-            days = [{ day: previousNumDays - i, dayOfWeek: (previousNumDays - i) % 7, isAdjacentDay: true }, ...days];
-        }
-        // Calculate positiveOffset
-        // The calendar will display 42 days (6 rows of 7 columns)
-        // Knowing this the offset is 41 (we start at index 0)
-        // minus (the previous offset + the current month days)
-        const positiveOffset = 41 - (numDays + offset);
-        for (let i = 0; i < positiveOffset; i++) {
-            days.push({ day: i + 1, dayOfWeek: (numDays + offset + i) % 7, isAdjacentDay: true });
-        }
+        days.push({ day: i, dayOfWeek: (offset + i) % 7 });
     }
-    else {
-        for (let i = 0; i <= offset; i++) {
-            days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
-        }
+    for (let i = 0; i <= offset; i++) {
+        days = [{ day: null, dayOfWeek: null }, ...days];
     }
     return days;
 };

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

@@ -22,18 +22,6 @@ 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
@@ -249,6 +237,14 @@ export class DatetimeButton {
                 overlayEl.present();
             }
         };
+        this.datetimePresentation = 'date-time';
+        this.dateText = undefined;
+        this.timeText = undefined;
+        this.datetimeActive = false;
+        this.selectedButton = undefined;
+        this.color = 'primary';
+        this.disabled = false;
+        this.datetime = undefined;
     }
     async componentWillLoad() {
         const { datetime } = this;
@@ -365,7 +361,6 @@ export class DatetimeButton {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -384,14 +379,12 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -404,14 +397,12 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "datetime": {
                 "type": "string",
-                "attribute": "datetime",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -424,8 +415,7 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "The ID of the `ion-datetime` instance\nassociated with the datetime button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "datetime",
                 "reflect": false
             }
         };

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

@@ -5,16 +5,9 @@ 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.horizontal = undefined;
+        this.vertical = undefined;
         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;
     }
     activatedChanged() {
@@ -77,7 +70,6 @@ export class Fab {
         return {
             "horizontal": {
                 "type": "string",
-                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'center'",
@@ -90,13 +82,11 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab horizontally in the viewport."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "horizontal",
                 "reflect": false
             },
             "vertical": {
                 "type": "string",
-                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'center'",
@@ -109,13 +99,11 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab vertically in the viewport."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "vertical",
                 "reflect": false
             },
             "edge": {
                 "type": "boolean",
-                "attribute": "edge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -128,14 +116,12 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, the fab will display on the edge of the header if\n`vertical` is `\"top\"`, and on the edge of the footer if\nit is `\"bottom\"`. Should be used with a `fixed` slot."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "edge",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -148,8 +134,7 @@ export class Fab {
                     "tags": [],
                     "text": "If `true`, both the `ion-fab-button` and all `ion-fab-list` inside `ion-fab` will become active.\nThat means `ion-fab-button` will become a `close` icon and `ion-fab-list` will become visible."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -16,39 +16,6 @@ export class FabButton {
     constructor() {
         this.fab = null;
         this.inheritedAttributes = {};
-        /**
-         * If `true`, the fab button will be show a close icon.
-         */
-        this.activated = false;
-        /**
-         * If `true`, the user cannot interact with the fab button.
-         */
-        this.disabled = false;
-        /**
-         * When using a router, it specifies the transition direction when navigating to
-         * another page using `href`.
-         */
-        this.routerDirection = 'forward';
-        /**
-         * If `true`, the fab button will show when in a fab-list.
-         */
-        this.show = false;
-        /**
-         * If `true`, the fab button will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         */
-        this.translucent = false;
-        /**
-         * The type of the button.
-         */
-        this.type = 'button';
-        /**
-         * The icon name to use for the close icon. This will appear when the fab button
-         * is pressed. Only applies if it is the main button inside of a fab containing a
-         * fab list.
-         */
-        this.closeIcon = close;
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -62,6 +29,20 @@ export class FabButton {
             }
             fab.toggle();
         };
+        this.color = undefined;
+        this.activated = false;
+        this.disabled = false;
+        this.download = undefined;
+        this.href = undefined;
+        this.rel = undefined;
+        this.routerDirection = 'forward';
+        this.routerAnimation = undefined;
+        this.target = undefined;
+        this.show = false;
+        this.translucent = false;
+        this.type = 'button';
+        this.size = undefined;
+        this.closeIcon = close;
     }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
@@ -113,7 +94,6 @@ export class FabButton {
         return {
             "color": {
                 "type": "string",
-                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -132,13 +112,11 @@ export class FabButton {
                     "tags": [],
                     "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "color",
                 "reflect": true
             },
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -151,14 +129,12 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be show a close icon."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -171,14 +147,12 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the fab button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "download": {
                 "type": "string",
-                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -191,13 +165,11 @@ export class FabButton {
                     "tags": [],
                     "text": "This attribute instructs browsers to download a URL instead of navigating to\nit, so the user will be prompted to save it as a local file. If the attribute\nhas a value, it is used as the pre-filled file name in the Save prompt\n(the user can still change the file name if they want)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "download",
                 "reflect": false
             },
             "href": {
                 "type": "string",
-                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -210,13 +182,11 @@ export class FabButton {
                     "tags": [],
                     "text": "Contains a URL or a URL fragment that the hyperlink points to.\nIf this property is set, an anchor tag will be rendered."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "href",
                 "reflect": false
             },
             "rel": {
                 "type": "string",
-                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -229,13 +199,11 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies the relationship of the target object to the link object.\nThe value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "rel",
                 "reflect": false
             },
             "routerDirection": {
                 "type": "string",
-                "attribute": "router-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "RouterDirection",
@@ -254,14 +222,12 @@ export class FabButton {
                     "tags": [],
                     "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "router-direction",
                 "reflect": false,
                 "defaultValue": "'forward'"
             },
             "routerAnimation": {
                 "type": "unknown",
-                "attribute": "router-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder | undefined",
@@ -279,13 +245,10 @@ export class FabButton {
                 "docs": {
                     "tags": [],
                     "text": "When using a router, it specifies the transition animation when navigating to\nanother page using `href`."
-                },
-                "getter": false,
-                "setter": false
+                }
             },
             "target": {
                 "type": "string",
-                "attribute": "target",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -298,13 +261,11 @@ export class FabButton {
                     "tags": [],
                     "text": "Specifies where to display the linked URL.\nOnly applies when an `href` is provided.\nSpecial keywords: `\"_blank\"`, `\"_self\"`, `\"_parent\"`, `\"_top\"`."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "target",
                 "reflect": false
             },
             "show": {
                 "type": "boolean",
-                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -317,14 +278,12 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will show when in a fab-list."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "show",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -337,14 +296,12 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility)."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
-                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'submit' | 'reset' | 'button'",
@@ -357,14 +314,12 @@ export class FabButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small'",
@@ -377,13 +332,11 @@ export class FabButton {
                     "tags": [],
                     "text": "The size of the button. Set this to `small` in order to have a mini fab button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false
             },
             "closeIcon": {
                 "type": "string",
-                "attribute": "close-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -396,8 +349,7 @@ export class FabButton {
                     "tags": [],
                     "text": "The icon name to use for the close icon. This will appear when the fab button\nis pressed. Only applies if it is the main button inside of a fab containing a\nfab list."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "close-icon",
                 "reflect": false,
                 "defaultValue": "close"
             }

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

@@ -5,13 +5,7 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class FabList {
     constructor() {
-        /**
-         * If `true`, the fab list will show all fab buttons in the list.
-         */
         this.activated = false;
-        /**
-         * The side the fab list will show on relative to the main fab button.
-         */
         this.side = 'bottom';
     }
     activatedChanged(activated) {
@@ -46,7 +40,6 @@ export class FabList {
         return {
             "activated": {
                 "type": "boolean",
-                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -59,14 +52,12 @@ export class FabList {
                     "tags": [],
                     "text": "If `true`, the fab list will show all fab buttons in the list."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "activated",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "side": {
                 "type": "string",
-                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'top' | 'bottom'",
@@ -79,8 +70,7 @@ export class FabList {
                     "tags": [],
                     "text": "The side the fab list will show on relative to the main fab button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "side",
                 "reflect": false,
                 "defaultValue": "'bottom'"
             }

package/dist/collection/components/footer/footer.js

@@ -12,16 +12,6 @@ import { handleFooterFade } from "./footer.utils";
 export class Footer {
     constructor() {
         this.keyboardCtrl = null;
-        this.keyboardVisible = false;
-        /**
-         * If `true`, the footer will be translucent.
-         * Only applies when the mode is `"ios"` and the device supports
-         * [`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).
-         *
-         * Note: In order to scroll content behind the footer, the `fullscreen`
-         * attribute needs to be set on the content.
-         */
-        this.translucent = false;
         this.checkCollapsibleFooter = () => {
             const mode = getIonMode(this);
             if (mode !== 'ios') {
@@ -51,6 +41,9 @@ export class Footer {
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleFooterFade(scrollEl, this.el);
         };
+        this.keyboardVisible = false;
+        this.collapse = undefined;
+        this.translucent = false;
     }
     componentDidLoad() {
         this.checkCollapsibleFooter();
@@ -114,7 +107,6 @@ export class Footer {
         return {
             "collapse": {
                 "type": "string",
-                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'fade'",
@@ -127,13 +119,11 @@ export class Footer {
                     "tags": [],
                     "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "collapse",
                 "reflect": false
             },
             "translucent": {
                 "type": "boolean",
-                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -146,8 +136,7 @@ export class Footer {
                     "tags": [],
                     "text": "If `true`, the footer will be translucent.\nOnly applies when the mode is `\"ios\"` and the device supports\n[`backdrop-filter`](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter#Browser_compatibility).\n\nNote: In order to scroll content behind the footer, the `fullscreen`\nattribute needs to be set on the content."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "translucent",
                 "reflect": false,
                 "defaultValue": "false"
             }

package/dist/collection/components/grid/grid.js

@@ -5,9 +5,6 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Grid {
     constructor() {
-        /**
-         * If `true`, the grid will have a fixed width based on the screen size.
-         */
         this.fixed = false;
     }
     render() {
@@ -33,7 +30,6 @@ export class Grid {
         return {
             "fixed": {
                 "type": "boolean",
-                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -46,8 +42,7 @@ export class Grid {
                     "tags": [],
                     "text": "If `true`, the grid will have a fixed width based on the screen size."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "fixed",
                 "reflect": false,
                 "defaultValue": "false"
             }