@ionic/core 7.7.3-dev.11707927732.13defc00 → 7.7.3-dev.11709159644.114cd8b1

package/dist/collection/components/datetime/test/basic/datetime.e2e.js

@@ -402,3 +402,80 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
         });
     });
 });
+/**
+ * This behavior does not differ across
+ * directions.
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions'), () => {
+        test('should format header and time button', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            time: { hour: '2-digit', minute: '2-digit' },
+            date: { day: '2-digit', month: 'long', era: 'short' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            const headerDate = page.locator('ion-datetime .datetime-selected-date');
+            await expect(headerDate).toHaveText('February 01 AD');
+            const timeBody = page.locator('ion-datetime .time-body');
+            await expect(timeBody).toHaveText('04:30 PM');
+        });
+    });
+});
+/**
+ * This behavior does not differ across
+ * modes/directions.
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('datetime: formatOptions misconfiguration errors'), () => {
+        test('should log a warning if time zone is provided', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00" presentation="date">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: { timeZone: 'UTC' },
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain('[Ionic Warning]: Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".');
+        });
+        test('should log a warning if the required formatOptions are not provided for a presentation', async ({ page }) => {
+            const logs = [];
+            page.on('console', (msg) => {
+                if (msg.type() === 'warning') {
+                    logs.push(msg.text());
+                }
+            });
+            await page.setContent(`
+        <ion-datetime value="2022-02-01T16:30:00">
+          <span slot="title">Select Date</span>
+        </ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {}
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            expect(logs.length).toBe(1);
+            expect(logs[0]).toContain("[Ionic Warning]: Datetime: The 'date-time' presentation requires either a date or time object (or both) in formatOptions.");
+        });
+    });
+});

package/dist/collection/components/datetime/test/format.spec.js

@@ -1,7 +1,7 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { generateDayAriaLabel, getMonthAndDay, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, } from "../utils/format";
+import { generateDayAriaLabel, getFormattedHour, addTimePadding, getMonthAndYear, getLocalizedDayPeriod, getLocalizedTime, stripTimeZone, } from "../utils/format";
 describe('generateDayAriaLabel()', () => {
     it('should return Wednesday, May 12', () => {
         const reference = { month: 5, day: 12, year: 2021 };
@@ -24,20 +24,6 @@ describe('generateDayAriaLabel()', () => {
         expect(generateDayAriaLabel('en-US', false, reference)).toEqual('Saturday, April 1');
     });
 });
-describe('getMonthAndDay()', () => {
-    it('should return Tue, May 11', () => {
-        expect(getMonthAndDay('en-US', { month: 5, day: 11, year: 2021 })).toEqual('Tue, May 11');
-    });
-    it('should return mar, 11 may', () => {
-        expect(getMonthAndDay('es-ES', { month: 5, day: 11, year: 2021 })).toEqual('mar, 11 may');
-    });
-    it('should return Sat, Apr 1', () => {
-        expect(getMonthAndDay('en-US', { month: 4, day: 1, year: 2006 })).toEqual('Sat, Apr 1');
-    });
-    it('should return sáb, 1 abr', () => {
-        expect(getMonthAndDay('es-ES', { month: 4, day: 1, year: 2006 })).toEqual('sáb, 1 abr');
-    });
-});
 describe('getFormattedHour()', () => {
     it('should only add padding if using 24 hour time', () => {
         expect(getFormattedHour(1, 'h11')).toEqual('1');
@@ -121,4 +107,68 @@ describe('getLocalizedTime', () => {
         expect(getLocalizedTime('en-US', datetimeParts, 'h12')).toEqual('10:40 PM');
         expect(getLocalizedTime('en-US', datetimeParts, 'h23')).toEqual('22:40');
     });
+    it('should use formatOptions', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            hour: '2-digit',
+            minute: '2-digit',
+            dayPeriod: 'short',
+            day: '2-digit',
+        };
+        // Even though this method is intended to be used for time, the date may be displayed as well when passing formatOptions
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('01, 09:40 in the morning');
+    });
+    it('should override provided time zone with UTC', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'Australia/Sydney',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+    it('should not include time zone name', () => {
+        const datetimeParts = {
+            day: 1,
+            month: 1,
+            year: 2022,
+            hour: 9,
+            minute: 40,
+        };
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(getLocalizedTime('en-US', datetimeParts, 'h12', formatOptions)).toEqual('9:40 AM');
+    });
+});
+describe('stripTimeZone', () => {
+    it('should remove the time zone name from the options and set the time zone to UTC', () => {
+        const formatOptions = {
+            timeZone: 'America/Los_Angeles',
+            timeZoneName: 'long',
+            hour: 'numeric',
+            minute: 'numeric',
+        };
+        expect(stripTimeZone(formatOptions)).toEqual({
+            timeZone: 'UTC',
+            hour: 'numeric',
+            minute: 'numeric',
+        });
+    });
 });

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

@@ -9,7 +9,26 @@ const getFormattedDayPeriod = (dayPeriod) => {
     }
     return dayPeriod.toUpperCase();
 };
-export const getLocalizedTime = (locale, refParts, hourCycle) => {
+/**
+ * Including time zone options may lead to the rendered text showing a
+ * different time from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const stripTimeZone = (formatOptions) => {
+    return Object.assign(Object.assign({}, formatOptions), {
+        /**
+         * Setting the time zone to UTC ensures that the value shown is always the
+         * same as what was selected and safeguards against older Safari bugs with
+         * Intl.DateTimeFormat.
+         */
+        timeZone: 'UTC',
+        /**
+         * We do not want to display the time zone name
+         */
+        timeZoneName: undefined
+    });
+};
+export const getLocalizedTime = (locale, refParts, hourCycle, formatOptions = { hour: 'numeric', minute: 'numeric' }) => {
     const timeParts = {
         hour: refParts.hour,
         minute: refParts.minute,
@@ -17,28 +36,13 @@ export const getLocalizedTime = (locale, refParts, hourCycle) => {
     if (timeParts.hour === undefined || timeParts.minute === undefined) {
         return 'Invalid Time';
     }
-    return new Intl.DateTimeFormat(locale, {
-        hour: 'numeric',
-        minute: 'numeric',
-        /**
-         * Setting the timeZone to UTC prevents
-         * new Intl.DatetimeFormat from subtracting
-         * the user's current timezone offset
-         * when formatting the time.
-         */
-        timeZone: 'UTC',
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, stripTimeZone(formatOptions)), {
         /**
          * We use hourCycle here instead of hour12 due to:
          * https://bugs.chromium.org/p/chromium/issues/detail?id=1347316&q=hour12&can=2
          */
-        hourCycle,
-        /**
-         * Setting Z at the end indicates that this
-         * date string is in the UTC time zone. This
-         * prevents new Date from adding the time zone
-         * offset when getting the ISO string.
-         */
-    }).format(new Date(convertDataToISO(Object.assign({
+        hourCycle
+    })).format(new Date(convertDataToISO(Object.assign({
         /**
          * JS uses a simplified ISO 8601 format which allows for
          * date-only formats and date-time formats, but not
@@ -125,14 +129,6 @@ export const generateDayAriaLabel = (locale, today, refParts) => {
      */
     return today ? `Today, ${labelString}` : labelString;
 };
-/**
- * Gets the day of the week, month, and day
- * Used for the header in MD mode.
- */
-export const getMonthAndDay = (locale, refParts) => {
-    const date = getNormalizedDate(refParts);
-    return new Intl.DateTimeFormat(locale, { weekday: 'short', month: 'short', day: 'numeric', timeZone: 'UTC' }).format(date);
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -143,15 +139,6 @@ export const getMonthAndYear = (locale, refParts) => {
     const date = getNormalizedDate(refParts);
     return new Intl.DateTimeFormat(locale, { month: 'long', year: 'numeric', timeZone: 'UTC' }).format(date);
 };
-/**
- * Given a locale and a date object,
- * return a formatted string that includes
- * the short month, numeric day, and full year.
- * Example: Apr 22, 2021
- */
-export const getMonthDayAndYear = (locale, refParts) => {
-    return getLocalizedDateTime(locale, refParts, { month: 'short', day: 'numeric', year: 'numeric' });
-};
 /**
  * Given a locale and a date object,
  * return a formatted string that includes
@@ -201,7 +188,7 @@ export const getNormalizedDate = (refParts) => {
  */
 export const getLocalizedDateTime = (locale, refParts, options) => {
     const date = getNormalizedDate(refParts);
-    return getDateTimeFormat(locale, options).format(date);
+    return getDateTimeFormat(locale, stripTimeZone(options)).format(date);
 };
 /**
  * Given a locale, DatetimeParts, and options

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

@@ -0,0 +1,45 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { printIonWarning } from "../../../utils/logging/index";
+/**
+ * If a time zone is provided in the format options, the rendered text could
+ * differ from what was selected in the Datetime, which could cause
+ * confusion.
+ */
+export const warnIfTimeZoneProvided = (el, formatOptions) => {
+    var _a, _b, _c, _d;
+    if (((_a = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _a === void 0 ? void 0 : _a.timeZone) ||
+        ((_b = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.date) === null || _b === void 0 ? void 0 : _b.timeZoneName) ||
+        ((_c = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _c === void 0 ? void 0 : _c.timeZone) ||
+        ((_d = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) === null || _d === void 0 ? void 0 : _d.timeZoneName)) {
+        printIonWarning('Datetime: "timeZone" and "timeZoneName" are not supported in "formatOptions".', el);
+    }
+};
+export const checkForPresentationFormatMismatch = (el, presentation, formatOptions) => {
+    // formatOptions is not required
+    if (!formatOptions)
+        return;
+    // If formatOptions is provided, the date and/or time objects are required, depending on the presentation
+    switch (presentation) {
+        case 'date':
+        case 'month-year':
+        case 'month':
+        case 'year':
+            if (formatOptions.date === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires a date object in formatOptions.`, el);
+            }
+            break;
+        case 'time':
+            if (formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The 'time' presentation requires a time object in formatOptions.`, el);
+            }
+            break;
+        case 'date-time':
+        case 'time-date':
+            if (formatOptions.date === undefined && formatOptions.time === undefined) {
+                printIonWarning(`Datetime: The '${presentation}' presentation requires either a date or time object (or both) in formatOptions.`, el);
+            }
+            break;
+    }
+};

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

@@ -7,7 +7,7 @@ import { printIonError } from "../../utils/logging/index";
 import { createColorClasses } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
 import { getToday } from "../datetime/utils/data";
-import { getMonthAndYear, getMonthDayAndYear, getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
+import { getLocalizedDateTime, getLocalizedTime } from "../datetime/utils/format";
 import { getHourCycle } from "../datetime/utils/helpers";
 import { parseDate } from "../datetime/utils/parse";
 /**
@@ -43,11 +43,12 @@ export class DatetimeButton {
          * to the locale specified on ion-datetime.
          */
         this.setDateTimeText = () => {
+            var _a, _b, _c, _d, _e;
             const { datetimeEl, datetimePresentation } = this;
             if (!datetimeEl) {
                 return;
             }
-            const { value, locale, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
+            const { value, locale, formatOptions, hourCycle, preferWheel, multiple, titleSelectedDatesFormatter } = datetimeEl;
             const parsedValues = this.getParsedDateValues(value);
             /**
              * Both ion-datetime and ion-datetime-button default
@@ -70,8 +71,8 @@ export class DatetimeButton {
             switch (datetimePresentation) {
                 case 'date-time':
                 case 'time-date':
-                    const dateText = getMonthDayAndYear(locale, firstParsedDatetime);
-                    const timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle);
+                    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}`;
                     }
@@ -94,20 +95,20 @@ export class DatetimeButton {
                         this.dateText = headerText;
                     }
                     else {
-                        this.dateText = getMonthDayAndYear(locale, firstParsedDatetime);
+                        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);
+                    this.timeText = getLocalizedTime(locale, firstParsedDatetime, computedHourCycle, formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time);
                     break;
                 case 'month-year':
-                    this.dateText = getMonthAndYear(locale, firstParsedDatetime);
+                    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, { month: 'long' });
+                    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, { year: 'numeric' });
+                    this.dateText = getLocalizedDateTime(locale, firstParsedDatetime, (_e = formatOptions === null || formatOptions === void 0 ? void 0 : formatOptions.time) !== null && _e !== void 0 ? _e : { year: 'numeric' });
                     break;
             }
         };
@@ -336,7 +337,7 @@ export class DatetimeButton {
     render() {
         const { color, dateText, timeText, selectedButton, datetimeActive, disabled } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '36fe34d4225940611d74bdef5b954d54749d2dca', class: createColorClasses(color, {
+        return (h(Host, { key: '861a08f4a239de771875aee9b505e06ac7064b32', class: createColorClasses(color, {
                 [mode]: true,
                 [`${selectedButton}-active`]: datetimeActive,
                 ['datetime-button-disabled']: disabled,

package/dist/collection/components/datetime-button/test/basic/datetime-button.e2e.js

@@ -174,4 +174,69 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config }) => {
             await expect(page.locator('#time-button')).not.toBeVisible();
         });
     });
+    test.describe(title('datetime-button: formatOptions'), () => {
+        test('should include date and time for presentation date-time', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            },
+            time: {
+              hour: "2-digit",
+              minute: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+            await expect(page.locator('#time-button')).toContainText('01:22 AM');
+        });
+        test('should include date for presentation date', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date" value="2023-11-02" locale="en-US"></ion-datetime>
+        <script>
+          const datetime = document.querySelector('ion-datetime');
+          datetime.formatOptions = {
+            date: {
+              weekday: "short",
+              month: "long",
+              day: "2-digit"
+            }
+          }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('#date-button')).toContainText('Thu, November 02');
+        });
+        test('should include date and time in same button for preferWheel', async ({ page }) => {
+            await page.setContent(`
+        <ion-datetime-button datetime="datetime"></ion-datetime-button>
+        <ion-datetime id="datetime" presentation="date-time" value="2023-11-02T01:22:00" locale="en-US" prefer-wheel="true"></ion-datetime>
+        <script>
+        const datetime = document.querySelector('ion-datetime');
+        datetime.formatOptions = {
+          date: {
+            weekday: "short",
+            month: "long",
+            day: "2-digit"
+          },
+          time: {
+            hour: "2-digit",
+            minute: "2-digit"
+          }
+        }
+        </script>
+      `, config);
+            await page.locator('.datetime-ready').waitFor();
+            await expect(page.locator('ion-datetime-button')).toContainText('Thu, November 02 01:22 AM');
+        });
+    });
 });

package/dist/collection/components/searchbar/searchbar.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, forceUpdate, h } from "@stencil/core";
-import { debounceEvent, raf, componentOnReady } from "../../utils/helpers";
+import { debounceEvent, raf, componentOnReady, inheritAttributes } from "../../utils/helpers";
 import { isRTL } from "../../utils/rtl/index";
 import { createColorClasses } from "../../utils/theme";
 import { arrowBackSharp, closeCircle, closeSharp, searchOutline, searchSharp } from "ionicons/icons";
@@ -16,6 +16,7 @@ export class Searchbar {
         this.isCancelVisible = false;
         this.shouldAlignLeft = true;
         this.inputId = `ion-searchbar-${searchbarIds++}`;
+        this.inheritedAttributes = {};
         /**
          * Clears the input field and triggers the control change.
          */
@@ -116,6 +117,7 @@ export class Searchbar {
         this.noAnimate = true;
         this.color = undefined;
         this.animated = false;
+        this.autocapitalize = undefined;
         this.autocomplete = 'off';
         this.autocorrect = 'off';
         this.cancelButtonIcon = config.get('backButtonIcon', arrowBackSharp);
@@ -125,6 +127,8 @@ export class Searchbar {
         this.disabled = false;
         this.inputmode = undefined;
         this.enterkeyhint = undefined;
+        this.maxlength = undefined;
+        this.minlength = undefined;
         this.name = this.inputId;
         this.placeholder = 'Search';
         this.searchIcon = undefined;
@@ -134,6 +138,21 @@ export class Searchbar {
         this.type = 'search';
         this.value = '';
     }
+    /**
+     * lang and dir are globally enumerated attributes.
+     * As a result, creating these as properties
+     * can have unintended side effects. Instead, we
+     * listen for attribute changes and inherit them
+     * to the inner `<input>` element.
+     */
+    onLangChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { lang: newValue });
+        forceUpdate(this);
+    }
+    onDirChanged(newValue) {
+        this.inheritedAttributes = Object.assign(Object.assign({}, this.inheritedAttributes), { dir: newValue });
+        forceUpdate(this);
+    }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;
         /**
@@ -158,6 +177,9 @@ export class Searchbar {
     connectedCallback() {
         this.emitStyle();
     }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['lang', 'dir']));
+    }
     componentDidLoad() {
         this.originalIonInput = this.ionInput;
         this.positionElements();
@@ -356,8 +378,8 @@ export class Searchbar {
         const clearIcon = this.clearIcon || (mode === 'ios' ? closeCircle : closeSharp);
         const searchIcon = this.searchIcon || (mode === 'ios' ? searchOutline : searchSharp);
         const shouldShowCancelButton = this.shouldShowCancelButton();
-        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '1de9b9bc6bad708bafcf4d31fa82838355120486', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: 'e5178016e17104a80732edbae73c0dfc264bfe52', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
-        return (h(Host, { key: '2c88a7b6ec7f33ada7dae560881210d7a8800f76', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        const cancelButton = this.showCancelButton !== 'never' && (h("button", { key: '1a68689b5c14cde6e071c4095457146b9ac2e7ab', "aria-label": cancelButtonText, "aria-hidden": shouldShowCancelButton ? undefined : 'true', type: "button", tabIndex: mode === 'ios' && !shouldShowCancelButton ? -1 : undefined, onMouseDown: this.onCancelSearchbar, onTouchStart: this.onCancelSearchbar, class: "searchbar-cancel-button" }, h("div", { key: '25ae47914baa4b7e0281efb2b296d1799a56c764', "aria-hidden": "true" }, mode === 'md' ? (h("ion-icon", { "aria-hidden": "true", mode: mode, icon: this.cancelButtonIcon, lazy: false })) : (cancelButtonText))));
+        return (h(Host, { key: '2cf545c40874bc4a19b6af022f5ec41b3a913495', role: "search", "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
                 [mode]: true,
                 'searchbar-animated': animated,
                 'searchbar-disabled': this.disabled,
@@ -367,14 +389,14 @@ export class Searchbar {
                 'searchbar-has-focus': this.focused,
                 'searchbar-should-show-clear': this.shouldShowClearButton(),
                 'searchbar-should-show-cancel': this.shouldShowCancelButton(),
-            }) }, h("div", { key: '8e914264a99453748a2bf370943e4047a0a587fb', class: "searchbar-input-container" }, h("input", { key: 'd772f3e8d42301e50fbd6c9deb332fbdf3c435ac', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }), mode === 'md' && cancelButton, h("ion-icon", { key: '8d9b461c2c34729b1bb562c227868cf817a353bc', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: 'bcc39be721f4b825af31aae4dfb3058722d889a8', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
+            }) }, h("div", { key: '9cf49297278839bbe6e2ef9936de337daa53c08d', class: "searchbar-input-container" }, h("input", Object.assign({ key: 'bae5db413a302e116012251746d599030f7158ce', "aria-label": "search text", disabled: this.disabled, ref: (el) => (this.nativeInput = el), class: "searchbar-input", inputMode: this.inputmode, enterKeyHint: this.enterkeyhint, name: this.name, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, minLength: this.minlength, maxLength: this.maxlength, placeholder: this.placeholder, type: this.type, value: this.getValue(), autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect, spellcheck: this.spellcheck }, this.inheritedAttributes)), mode === 'md' && cancelButton, h("ion-icon", { key: '67c593ca842551d9e99e8239115cc7b43261b542', "aria-hidden": "true", mode: mode, icon: searchIcon, lazy: false, class: "searchbar-search-icon" }), h("button", { key: '6901c3f6c74cce2d3b7e46fbff85ee6e6399bdb1', "aria-label": "reset", type: "button", "no-blur": true, class: "searchbar-clear-button", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: '9a6478e1f1482aa6e62c88bd96cd19cacbfb8d60', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
+            }, onClick: () => this.onClearInput(true) }, h("ion-icon", { key: 'abd45fb79ee807cf8352aa7bf5b0342f2d686227', "aria-hidden": "true", mode: mode, icon: clearIcon, lazy: false, class: "searchbar-clear-icon" }))), mode === 'ios' && cancelButton));
     }
     static get is() { return "ion-searchbar"; }
     static get encapsulation() { return "scoped"; }
@@ -433,6 +455,23 @@ export class Searchbar {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "autocapitalize": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.\nAvailable options: `\"off\"`, `\"none\"`, `\"on\"`, `\"sentences\"`, `\"words\"`, `\"characters\"`."
+                },
+                "attribute": "autocapitalize",
+                "reflect": false
+            },
             "autocomplete": {
                 "type": "string",
                 "mutable": false,
@@ -597,6 +636,40 @@ export class Searchbar {
                 "attribute": "enterkeyhint",
                 "reflect": false
             },
+            "maxlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This attribute specifies the maximum number of characters that the user can enter."
+                },
+                "attribute": "maxlength",
+                "reflect": false
+            },
+            "minlength": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "This attribute specifies the minimum number of characters that the user can enter."
+                },
+                "attribute": "minlength",
+                "reflect": false
+            },
             "name": {
                 "type": "string",
                 "mutable": false,
@@ -922,6 +995,12 @@ export class Searchbar {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "lang",
+                "methodName": "onLangChanged"
+            }, {
+                "propName": "dir",
+                "methodName": "onDirChanged"
+            }, {
                 "propName": "debounce",
                 "methodName": "debounceChanged"
             }, {