voyager-ionic-core 8.5.7 → 8.6.1

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

@@ -371,7 +371,7 @@
   opacity: 0.4;
 }
 
-.calendar-day:focus {
+.calendar-day:not(.calendar-day-adjacent-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,15 +652,21 @@ 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-active,
+:host .calendar-day.calendar-day-adjacent-day.calendar-day-active {
   color: var(--ion-color-contrast);
 }
 
-.calendar-day.calendar-day-active {
+.calendar-day.calendar-day-active,
+.calendar-day.calendar-day-active:focus {
   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,8 +78,17 @@ export const getDaysOfWeek = (locale, mode, firstDayOfWeek = 0) => {
  * the firstDayOfWeek value (Sunday by default)
  * using null values.
  */
-export const getDaysOfMonth = (month, year, firstDayOfWeek) => {
+export const getDaysOfMonth = (month, year, firstDayOfWeek, showAdjacentDays = false) => {
     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
@@ -103,10 +112,26 @@ export const getDaysOfMonth = (month, year, firstDayOfWeek) => {
     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 });
+        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 });
+        }
     }
-    for (let i = 0; i <= offset; i++) {
-        days = [{ day: null, dayOfWeek: null }, ...days];
+    else {
+        for (let i = 0; i <= offset; i++) {
+            days = [{ day: null, dayOfWeek: null, isAdjacentDay: false }, ...days];
+        }
     }
     return days;
 };

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

@@ -22,6 +22,18 @@ 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
@@ -237,14 +249,6 @@ 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;
@@ -361,6 +365,7 @@ export class DatetimeButton {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -379,12 +384,14 @@ 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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "'primary'"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -397,12 +404,14 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the button."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
             },
             "datetime": {
                 "type": "string",
+                "attribute": "datetime",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -415,7 +424,8 @@ export class DatetimeButton {
                     "tags": [],
                     "text": "The ID of the `ion-datetime` instance\nassociated with the datetime button."
                 },
-                "attribute": "datetime",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             }
         };

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

@@ -5,9 +5,16 @@ import { Host, h } from "@stencil/core";
 import { getIonMode } from "../../global/ionic-global";
 export class Fab {
     constructor() {
-        this.horizontal = undefined;
-        this.vertical = undefined;
+        /**
+         * 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;
     }
     activatedChanged() {
@@ -70,6 +77,7 @@ export class Fab {
         return {
             "horizontal": {
                 "type": "string",
+                "attribute": "horizontal",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'center'",
@@ -82,11 +90,13 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab horizontally in the viewport."
                 },
-                "attribute": "horizontal",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "vertical": {
                 "type": "string",
+                "attribute": "vertical",
                 "mutable": false,
                 "complexType": {
                     "original": "'top' | 'bottom' | 'center'",
@@ -99,11 +109,13 @@ export class Fab {
                     "tags": [],
                     "text": "Where to align the fab vertically in the viewport."
                 },
-                "attribute": "vertical",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "edge": {
                 "type": "boolean",
+                "attribute": "edge",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -116,12 +128,14 @@ 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."
                 },
-                "attribute": "edge",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "activated": {
                 "type": "boolean",
+                "attribute": "activated",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -134,7 +148,8 @@ 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."
                 },
-                "attribute": "activated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -16,6 +16,39 @@ 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();
         };
@@ -29,20 +62,6 @@ 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');
@@ -94,6 +113,7 @@ export class FabButton {
         return {
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "Color",
@@ -112,11 +132,13 @@ 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)."
                 },
-                "attribute": "color",
+                "getter": false,
+                "setter": false,
                 "reflect": true
             },
             "activated": {
                 "type": "boolean",
+                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -129,12 +151,14 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will be show a close icon."
                 },
-                "attribute": "activated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
+                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -147,12 +171,14 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the user cannot interact with the fab button."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "download": {
                 "type": "string",
+                "attribute": "download",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -165,11 +191,13 @@ 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)."
                 },
-                "attribute": "download",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "href": {
                 "type": "string",
+                "attribute": "href",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -182,11 +210,13 @@ 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."
                 },
-                "attribute": "href",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "rel": {
                 "type": "string",
+                "attribute": "rel",
                 "mutable": false,
                 "complexType": {
                     "original": "string | undefined",
@@ -199,11 +229,13 @@ 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)."
                 },
-                "attribute": "rel",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "routerDirection": {
                 "type": "string",
+                "attribute": "router-direction",
                 "mutable": false,
                 "complexType": {
                     "original": "RouterDirection",
@@ -222,12 +254,14 @@ export class FabButton {
                     "tags": [],
                     "text": "When using a router, it specifies the transition direction when navigating to\nanother page using `href`."
                 },
-                "attribute": "router-direction",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'forward'"
             },
             "routerAnimation": {
                 "type": "unknown",
+                "attribute": "router-animation",
                 "mutable": false,
                 "complexType": {
                     "original": "AnimationBuilder | undefined",
@@ -245,10 +279,13 @@ 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",
@@ -261,11 +298,13 @@ 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\"`."
                 },
-                "attribute": "target",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "show": {
                 "type": "boolean",
+                "attribute": "show",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -278,12 +317,14 @@ export class FabButton {
                     "tags": [],
                     "text": "If `true`, the fab button will show when in a fab-list."
                 },
-                "attribute": "show",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "translucent": {
                 "type": "boolean",
+                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -296,12 +337,14 @@ 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)."
                 },
-                "attribute": "translucent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "type": {
                 "type": "string",
+                "attribute": "type",
                 "mutable": false,
                 "complexType": {
                     "original": "'submit' | 'reset' | 'button'",
@@ -314,12 +357,14 @@ export class FabButton {
                     "tags": [],
                     "text": "The type of the button."
                 },
-                "attribute": "type",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'button'"
             },
             "size": {
                 "type": "string",
+                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'small'",
@@ -332,11 +377,13 @@ export class FabButton {
                     "tags": [],
                     "text": "The size of the button. Set this to `small` in order to have a mini fab button."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "closeIcon": {
                 "type": "string",
+                "attribute": "close-icon",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -349,7 +396,8 @@ 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."
                 },
-                "attribute": "close-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "close"
             }

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

@@ -5,7 +5,13 @@ 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) {
@@ -40,6 +46,7 @@ export class FabList {
         return {
             "activated": {
                 "type": "boolean",
+                "attribute": "activated",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -52,12 +59,14 @@ export class FabList {
                     "tags": [],
                     "text": "If `true`, the fab list will show all fab buttons in the list."
                 },
-                "attribute": "activated",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             },
             "side": {
                 "type": "string",
+                "attribute": "side",
                 "mutable": false,
                 "complexType": {
                     "original": "'start' | 'end' | 'top' | 'bottom'",
@@ -70,7 +79,8 @@ export class FabList {
                     "tags": [],
                     "text": "The side the fab list will show on relative to the main fab button."
                 },
-                "attribute": "side",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "'bottom'"
             }

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

@@ -12,6 +12,16 @@ 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') {
@@ -41,9 +51,6 @@ export class Footer {
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleFooterFade(scrollEl, this.el);
         };
-        this.keyboardVisible = false;
-        this.collapse = undefined;
-        this.translucent = false;
     }
     componentDidLoad() {
         this.checkCollapsibleFooter();
@@ -107,6 +114,7 @@ export class Footer {
         return {
             "collapse": {
                 "type": "string",
+                "attribute": "collapse",
                 "mutable": false,
                 "complexType": {
                     "original": "'fade'",
@@ -119,11 +127,13 @@ export class Footer {
                     "tags": [],
                     "text": "Describes the scroll effect that will be applied to the footer.\nOnly applies in iOS mode."
                 },
-                "attribute": "collapse",
+                "getter": false,
+                "setter": false,
                 "reflect": false
             },
             "translucent": {
                 "type": "boolean",
+                "attribute": "translucent",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -136,7 +146,8 @@ 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."
                 },
-                "attribute": "translucent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -5,6 +5,9 @@ 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() {
@@ -30,6 +33,7 @@ export class Grid {
         return {
             "fixed": {
                 "type": "boolean",
+                "attribute": "fixed",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -42,7 +46,8 @@ export class Grid {
                     "tags": [],
                     "text": "If `true`, the grid will have a fixed width based on the screen size."
                 },
-                "attribute": "fixed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
                 "defaultValue": "false"
             }