@ionic/core 8.4.2-dev.11736277041.14f34ba1 → 8.4.2-dev.11736797843.16cc5058

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

@@ -5,21 +5,21 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-73f75efb.js');
-const focusVisible = require('./focus-visible-8657bbbf.js');
+const index$1 = require('./index-2e7a27db.js');
+const focusVisible = require('./focus-visible-7a0ce04f.js');
 const helpers = require('./helpers-afaa9001.js');
 const index = require('./index-5915f9b3.js');
 const dir = require('./dir-94c21456.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-073c7cdc.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 const data = require('./data-21dc0f81.js');
 const lockController = require('./lock-controller-6585a42a.js');
-const overlays = require('./overlays-aa669eb8.js');
+const overlays = require('./overlays-56fecd6c.js');
 const animation = require('./animation-b4fdf128.js');
 const haptic = require('./haptic-f6b37aa3.js');
 require('./index-c8d52405.js');
-require('./hardware-back-button-9e8a2c4f.js');
+require('./hardware-back-button-f0972dab.js');
 require('./framework-delegate-55f5683a.js');
 require('./gesture-controller-9436f482.js');
 require('./capacitor-c04564bf.js');
@@ -251,6 +251,123 @@ const Datetime = class {
         this.ionRender = index$1.createEvent(this, "ionRender", 7);
         this.inputId = `ion-dt-${datetimeIds++}`;
         this.prevPresentation = null;
+        this.showMonthAndYear = false;
+        this.activeParts = [];
+        this.workingParts = {
+            month: 5,
+            day: 28,
+            year: 2021,
+            hour: 13,
+            minute: 52,
+            ampm: 'pm',
+        };
+        this.isTimePopoverOpen = 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';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot interact with the datetime.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the datetime appears normal but the selected date cannot be changed.
+         */
+        this.readonly = false;
+        /**
+         * Which values you want to select. `"date"` will show
+         * a calendar picker to select the month, day, and year. `"time"`
+         * will show a time picker to select the hour, minute, and (optionally)
+         * AM/PM. `"date-time"` will show the date picker first and time picker second.
+         * `"time-date"` will show the time picker first and date picker second.
+         */
+        this.presentation = 'date-time';
+        /**
+         * The text to display on the picker's cancel button.
+         */
+        this.cancelText = 'Cancel';
+        /**
+         * The text to display on the picker's "Done" button.
+         */
+        this.doneText = 'Done';
+        /**
+         * The text to display on the picker's "Clear" button.
+         */
+        this.clearText = 'Clear';
+        /**
+         * The locale to use for `ion-datetime`. This
+         * impacts month and day name formatting.
+         * The `"default"` value refers to the default
+         * locale set by your device.
+         */
+        this.locale = 'default';
+        /**
+         * The first day of the week to use for `ion-datetime`. The
+         * default value is `0` and represents Sunday.
+         */
+        this.firstDayOfWeek = 0;
+        /**
+         * If `true`, multiple dates can be selected at once. Only
+         * applies to `presentation="date"` and `preferWheel="false"`.
+         */
+        this.multiple = false;
+        /**
+         * If `true`, a header will be shown above the calendar
+         * picker. This will include both the slotted title, and
+         * the selected date.
+         */
+        this.showDefaultTitle = false;
+        /**
+         * If `true`, the default "Cancel" and "OK" buttons
+         * will be rendered at the bottom of the `ion-datetime`
+         * component. Developers can also use the `button` slot
+         * if they want to customize these buttons. If custom
+         * buttons are set in the `button` slot then the
+         * default buttons will not be rendered.
+         */
+        this.showDefaultButtons = false;
+        /**
+         * If `true`, a "Clear" button will be rendered alongside
+         * the default "Cancel" and "OK" buttons at the bottom of the `ion-datetime`
+         * component. Developers can also use the `button` slot
+         * if they want to customize these buttons. If custom
+         * buttons are set in the `button` slot then the
+         * default buttons will not be rendered.
+         */
+        this.showClearButton = false;
+        /**
+         * If `true`, the default "Time" label will be rendered
+         * for the time selector of the `ion-datetime` component.
+         * Developers can also use the `time-label` slot
+         * if they want to customize this label. If a custom
+         * label is set in the `time-label` slot then the
+         * default label will not be rendered.
+         */
+        this.showDefaultTimeLabel = true;
+        /**
+         * If `cover`, the `ion-datetime` will expand to cover the full width of its container.
+         * If `fixed`, the `ion-datetime` will have a fixed width.
+         */
+        this.size = 'fixed';
+        /**
+         * If `true`, a wheel picker will be rendered instead of a calendar grid
+         * where possible. If `false`, a calendar grid will be rendered instead of
+         * a wheel picker where possible.
+         *
+         * A wheel picker can be rendered instead of a grid when `presentation` is
+         * one of the following values: `"date"`, `"date-time"`, or `"time-date"`.
+         *
+         * A wheel picker will always be rendered regardless of
+         * the `preferWheel` value when `presentation` is one of the following values:
+         * `"time"`, `"month"`, `"month-year"`, or `"year"`.
+         */
+        this.preferWheel = false;
         this.warnIfIncorrectValueUsage = () => {
             const { multiple, value } = this;
             if (!multiple && Array.isArray(value)) {
@@ -843,48 +960,6 @@ const Datetime = class {
         this.toggleMonthAndYearView = () => {
             this.showMonthAndYear = !this.showMonthAndYear;
         };
-        this.showMonthAndYear = false;
-        this.activeParts = [];
-        this.workingParts = {
-            month: 5,
-            day: 28,
-            year: 2021,
-            hour: 13,
-            minute: 52,
-            ampm: 'pm',
-        };
-        this.isTimePopoverOpen = false;
-        this.forceRenderDate = undefined;
-        this.color = 'primary';
-        this.name = this.inputId;
-        this.disabled = false;
-        this.formatOptions = undefined;
-        this.readonly = false;
-        this.isDateEnabled = undefined;
-        this.min = undefined;
-        this.max = undefined;
-        this.presentation = 'date-time';
-        this.cancelText = 'Cancel';
-        this.doneText = 'Done';
-        this.clearText = 'Clear';
-        this.yearValues = undefined;
-        this.monthValues = undefined;
-        this.dayValues = undefined;
-        this.hourValues = undefined;
-        this.minuteValues = undefined;
-        this.locale = 'default';
-        this.firstDayOfWeek = 0;
-        this.titleSelectedDatesFormatter = undefined;
-        this.multiple = false;
-        this.highlightedDates = undefined;
-        this.value = undefined;
-        this.showDefaultTitle = false;
-        this.showDefaultButtons = false;
-        this.showClearButton = false;
-        this.showDefaultTimeLabel = true;
-        this.hourCycle = undefined;
-        this.size = 'fixed';
-        this.preferWheel = false;
     }
     formatOptionsChanged() {
         const { el, formatOptions, presentation } = this;
@@ -1864,33 +1939,55 @@ const Picker = class {
         this.delegateController = overlays.createDelegateController(this);
         this.lockController = lockController.createLockController();
         this.triggerController = overlays.createTriggerController();
-        this.onBackdropTap = () => {
-            this.dismiss(undefined, overlays.BACKDROP);
-        };
-        this.dispatchCancelHandler = (ev) => {
-            const role = ev.detail.role;
-            if (overlays.isCancel(role)) {
-                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
-                this.callButtonHandler(cancelButton);
-            }
-        };
         this.presented = false;
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
+        /** @internal */
         this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
         this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
+        /**
+         * Array of buttons to be displayed at the top of the picker.
+         */
         this.buttons = [];
+        /**
+         * Array of columns to be displayed in the picker.
+         */
         this.columns = [];
-        this.cssClass = undefined;
+        /**
+         * Number of milliseconds to wait before dismissing the picker.
+         */
         this.duration = 0;
+        /**
+         * If `true`, a backdrop will be displayed behind the picker.
+         */
         this.showBackdrop = true;
+        /**
+         * If `true`, the picker will be dismissed when the backdrop is clicked.
+         */
         this.backdropDismiss = true;
+        /**
+         * If `true`, the picker will animate.
+         */
         this.animated = true;
-        this.htmlAttributes = undefined;
+        /**
+         * If `true`, the picker will open. If `false`, the picker will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the pickerController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the picker dismisses. You will need to do that in your code.
+         */
         this.isOpen = false;
-        this.trigger = undefined;
+        this.onBackdropTap = () => {
+            this.dismiss(undefined, overlays.BACKDROP);
+        };
+        this.dispatchCancelHandler = (ev) => {
+            const role = ev.detail.role;
+            if (overlays.isCancel(role)) {
+                const cancelButton = this.buttons.find((b) => b.role === 'cancel');
+                this.callButtonHandler(cancelButton);
+            }
+        };
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {
@@ -2080,7 +2177,6 @@ const PickerColumnCmp = class {
         // Ex: column is created with 3 options. User updates the column data
         // to have 5 options. The column will still think it only has 3 options.
         this.colDidChange = false;
-        this.col = undefined;
     }
     colChanged() {
         this.colDidChange = true;

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

@@ -5,8 +5,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-73f75efb.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const index = require('./index-2e7a27db.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 const helpers = require('./helpers-afaa9001.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
@@ -17,9 +17,16 @@ const IonFabStyle0 = fabCss;
 const Fab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        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() {
@@ -86,6 +93,39 @@ const FabButton = class {
         this.ionBlur = index.createEvent(this, "ionBlur", 7);
         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 = index$1.close;
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -99,20 +139,6 @@ const FabButton = class {
             }
             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 = index$1.close;
     }
     connectedCallback() {
         this.fab = this.el.closest('ion-fab');
@@ -159,7 +185,13 @@ const IonFabListStyle0 = fabListCss;
 const FabList = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * 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) {

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

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-73f75efb.js');
+const index = require('./index-2e7a27db.js');
 const helpers = require('./helpers-afaa9001.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 
 const imgCss = ":host{display:block;-o-object-fit:contain;object-fit:contain}img{display:block;width:100%;height:100%;-o-object-fit:inherit;object-fit:inherit;-o-object-position:inherit;object-position:inherit}";
 const IonImgStyle0 = imgCss;
@@ -25,10 +25,6 @@ const Img = class {
         this.onError = () => {
             this.ionError.emit();
         };
-        this.loadSrc = undefined;
-        this.loadError = undefined;
-        this.alt = undefined;
-        this.src = undefined;
     }
     srcChanged() {
         this.addIO();

package/dist/cjs/ion-infinite-scroll_2.cjs.entry.js

@@ -5,9 +5,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-73f75efb.js');
+const index = require('./index-2e7a27db.js');
 const index$1 = require('./index-5b6a7459.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 const config = require('./config-4f60b98a.js');
 require('./helpers-afaa9001.js');
 require('./index-5915f9b3.js');
@@ -30,6 +30,32 @@ const InfiniteScroll = class {
          */
         this.didFire = false;
         this.isBusy = false;
+        this.isLoading = false;
+        /**
+         * The threshold distance from the bottom
+         * of the content to call the `infinite` output event when scrolled.
+         * The threshold value can be either a percent, or
+         * in pixels. For example, use the value of `10%` for the `infinite`
+         * output event to get called when the user has scrolled 10%
+         * from the bottom of the page. Use the value `100px` when the
+         * scroll is within 100 pixels from the bottom of the page.
+         */
+        this.threshold = '15%';
+        /**
+         * If `true`, the infinite scroll will be hidden and scroll event listeners
+         * will be removed.
+         *
+         * Set this to true to disable the infinite scroll from actively
+         * trying to receive new data while scrolling. This is useful
+         * when it is known that there is no more data that can be added, and
+         * the infinite scroll is no longer needed.
+         */
+        this.disabled = false;
+        /**
+         * The position of the infinite scroll element.
+         * The value can be either `top` or `bottom`.
+         */
+        this.position = 'bottom';
         this.onScroll = () => {
             const scrollEl = this.scrollEl;
             if (!scrollEl || !this.canStart()) {
@@ -57,10 +83,6 @@ const InfiniteScroll = class {
             }
             return 4;
         };
-        this.isLoading = false;
-        this.threshold = '15%';
-        this.disabled = false;
-        this.position = 'bottom';
     }
     thresholdChanged() {
         const val = this.threshold;
@@ -204,8 +226,6 @@ const InfiniteScrollContent = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.customHTMLEnabled = ionicGlobal.config.get('innerHTMLTemplatesEnabled', config.ENABLE_HTML_CONTENT_DEFAULT);
-        this.loadingSpinner = undefined;
-        this.loadingText = undefined;
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {

package/dist/cjs/ion-input-password-toggle.cjs.entry.js

@@ -5,11 +5,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-73f75efb.js');
+const index = require('./index-2e7a27db.js');
 const index$1 = require('./index-5915f9b3.js');
 const theme = require('./theme-d1c573d2.js');
 const index$2 = require('./index-073c7cdc.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 
 const iosInputPasswordToggleCss = "";
 const IonInputPasswordToggleIosStyle0 = iosInputPasswordToggleCss;
@@ -20,6 +20,10 @@ const IonInputPasswordToggleMdStyle0 = mdInputPasswordToggleCss;
 const InputPasswordToggle = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * @internal
+         */
+        this.type = 'password';
         this.togglePasswordVisibility = () => {
             const { inputElRef } = this;
             if (!inputElRef) {
@@ -27,10 +31,6 @@ const InputPasswordToggle = class {
             }
             inputElRef.type = inputElRef.type === 'text' ? 'password' : 'text';
         };
-        this.color = undefined;
-        this.showIcon = undefined;
-        this.hideIcon = undefined;
-        this.type = 'password';
     }
     /**
      * Whenever the input type changes we need to re-run validation to ensure the password

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

@@ -5,13 +5,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-73f75efb.js');
+const index = require('./index-2e7a27db.js');
 const notchController = require('./notch-controller-d69150f5.js');
 const helpers = require('./helpers-afaa9001.js');
 const input_utils = require('./input.utils-611cde0b.js');
 const theme = require('./theme-d1c573d2.js');
 const index$1 = require('./index-073c7cdc.js');
-const ionicGlobal = require('./ionic-global-d9a8bb5b.js');
+const ionicGlobal = require('./ionic-global-3c758a1a.js');
 require('./index-c8d52405.js');
 require('./index-5915f9b3.js');
 
@@ -40,6 +40,71 @@ const Input = class {
          * Resets when the input loses focus.
          */
         this.didInputClearOnEdit = false;
+        this.hasFocus = false;
+        /**
+         * Indicates whether and how the text value should be automatically capitalized as it is entered/edited by the user.
+         * Available options: `"off"`, `"none"`, `"on"`, `"sentences"`, `"words"`, `"characters"`.
+         */
+        this.autocapitalize = 'off';
+        /**
+         * Indicates whether the value of the control can be automatically completed by the browser.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Whether auto correction should be enabled when the user is entering/editing the text value.
+         */
+        this.autocorrect = 'off';
+        /**
+         * Sets the [`autofocus` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus) on the native input element.
+         *
+         * This may not be sufficient for the element to be focused on page load. See [managing focus](/docs/developing/managing-focus) for more information.
+         */
+        this.autofocus = false;
+        /**
+         * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
+         */
+        this.clearInput = false;
+        /**
+         * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        this.counter = false;
+        /**
+         * If `true`, the user cannot interact with the input.
+         */
+        this.disabled = false;
+        /**
+         * Where to place the label relative to the input.
+         * `"start"`: The label will appear to the left of the input in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the input in LTR and to the left in RTL.
+         * `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input.
+         * `"stacked"`: The label will appear smaller and above the input regardless even when the input is blurred or has no value.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        this.labelPlacement = 'start';
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the user cannot modify the value.
+         */
+        this.readonly = false;
+        /**
+         * If `true`, the user must fill in a value before submitting a form.
+         */
+        this.required = false;
+        /**
+         * If `true`, the element will have its spelling and grammar checked.
+         */
+        this.spellcheck = false;
+        /**
+         * The type of control to display. The default type is text.
+         */
+        this.type = 'text';
+        /**
+         * The value of the input.
+         */
+        this.value = '';
         this.onInput = (ev) => {
             const input = ev.target;
             if (input) {
@@ -86,41 +151,6 @@ const Input = class {
             this.value = '';
             this.emitInputChange(ev);
         };
-        this.hasFocus = false;
-        this.color = undefined;
-        this.autocapitalize = 'off';
-        this.autocomplete = 'off';
-        this.autocorrect = 'off';
-        this.autofocus = false;
-        this.clearInput = false;
-        this.clearInputIcon = undefined;
-        this.clearOnEdit = undefined;
-        this.counter = false;
-        this.counterFormatter = undefined;
-        this.debounce = undefined;
-        this.disabled = false;
-        this.enterkeyhint = undefined;
-        this.errorText = undefined;
-        this.fill = undefined;
-        this.inputmode = undefined;
-        this.helperText = undefined;
-        this.label = undefined;
-        this.labelPlacement = 'start';
-        this.max = undefined;
-        this.maxlength = undefined;
-        this.min = undefined;
-        this.minlength = undefined;
-        this.multiple = undefined;
-        this.name = this.inputId;
-        this.pattern = undefined;
-        this.placeholder = undefined;
-        this.readonly = false;
-        this.required = false;
-        this.shape = undefined;
-        this.spellcheck = false;
-        this.step = undefined;
-        this.type = 'text';
-        this.value = '';
     }
     debounceChanged() {
         const { ionInput, debounce, originalIonInput } = this;