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

package/components/ion-chip.js

@@ -17,8 +17,13 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
+        /**
+         * Display an outline style button.
+         */
         this.outline = false;
+        /**
+         * If `true`, the user cannot interact with the chip.
+         */
         this.disabled = false;
     }
     render() {

package/components/ion-col.js

@@ -37,30 +37,6 @@ const Col = /*@__PURE__*/ proxyCustomElement(class Col extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.offset = undefined;
-        this.offsetXs = undefined;
-        this.offsetSm = undefined;
-        this.offsetMd = undefined;
-        this.offsetLg = undefined;
-        this.offsetXl = undefined;
-        this.pull = undefined;
-        this.pullXs = undefined;
-        this.pullSm = undefined;
-        this.pullMd = undefined;
-        this.pullLg = undefined;
-        this.pullXl = undefined;
-        this.push = undefined;
-        this.pushXs = undefined;
-        this.pushSm = undefined;
-        this.pushMd = undefined;
-        this.pushLg = undefined;
-        this.pushXl = undefined;
-        this.size = undefined;
-        this.sizeXs = undefined;
-        this.sizeSm = undefined;
-        this.sizeMd = undefined;
-        this.sizeLg = undefined;
-        this.sizeXl = undefined;
     }
     onResize() {
         forceUpdate(this);

package/components/ion-datetime-button.js

@@ -22,6 +22,18 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
         this.__attachShadow();
         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 @@ const DatetimeButton = /*@__PURE__*/ proxyCustomElement(class DatetimeButton ext
                 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;

package/components/ion-datetime.js

@@ -249,6 +249,123 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         this.ionRender = 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)) {
@@ -841,48 +958,6 @@ const Datetime = /*@__PURE__*/ proxyCustomElement(class Datetime extends HTMLEle
         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;

package/components/ion-fab-button.js

@@ -24,6 +24,39 @@ const FabButton = /*@__PURE__*/ proxyCustomElement(class FabButton extends HTMLE
         this.ionBlur = 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 = close;
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -37,20 +70,6 @@ const FabButton = /*@__PURE__*/ proxyCustomElement(class FabButton extends HTMLE
             }
             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');

package/components/ion-fab-list.js

@@ -12,7 +12,13 @@ const FabList = /*@__PURE__*/ proxyCustomElement(class FabList extends HTMLEleme
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * 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/components/ion-fab.js

@@ -12,9 +12,16 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        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() {

package/components/ion-footer.js

@@ -47,6 +47,16 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         super();
         this.__registerHost();
         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') {
@@ -76,9 +86,6 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleFooterFade(scrollEl, this.el);
         };
-        this.keyboardVisible = false;
-        this.collapse = undefined;
-        this.translucent = false;
     }
     componentDidLoad() {
         this.checkCollapsibleFooter();

package/components/ion-grid.js

@@ -12,6 +12,9 @@ const Grid = /*@__PURE__*/ proxyCustomElement(class Grid extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * If `true`, the grid will have a fixed width based on the screen size.
+         */
         this.fixed = false;
     }
     render() {

package/components/ion-img.js

@@ -23,10 +23,6 @@ const Img = /*@__PURE__*/ proxyCustomElement(class Img extends HTMLElement {
         this.onError = () => {
             this.ionError.emit();
         };
-        this.loadSrc = undefined;
-        this.loadError = undefined;
-        this.alt = undefined;
-        this.src = undefined;
     }
     srcChanged() {
         this.addIO();

package/components/ion-infinite-scroll-content.js

@@ -17,8 +17,6 @@ const InfiniteScrollContent = /*@__PURE__*/ proxyCustomElement(class InfiniteScr
         super();
         this.__registerHost();
         this.customHTMLEnabled = config.get('innerHTMLTemplatesEnabled', ENABLE_HTML_CONTENT_DEFAULT);
-        this.loadingSpinner = undefined;
-        this.loadingText = undefined;
     }
     componentDidLoad() {
         if (this.loadingSpinner === undefined) {

package/components/ion-infinite-scroll.js

@@ -24,6 +24,32 @@ const InfiniteScroll = /*@__PURE__*/ proxyCustomElement(class InfiniteScroll ext
          */
         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()) {
@@ -51,10 +77,6 @@ const InfiniteScroll = /*@__PURE__*/ proxyCustomElement(class InfiniteScroll ext
             }
             return 4;
         };
-        this.isLoading = false;
-        this.threshold = '15%';
-        this.disabled = false;
-        this.position = 'bottom';
     }
     thresholdChanged() {
         const val = this.threshold;

package/components/ion-input-password-toggle.js

@@ -21,6 +21,10 @@ const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPassword
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * @internal
+         */
+        this.type = 'password';
         this.togglePasswordVisibility = () => {
             const { inputElRef } = this;
             if (!inputElRef) {
@@ -28,10 +32,6 @@ const InputPasswordToggle = /*@__PURE__*/ proxyCustomElement(class InputPassword
             }
             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/components/ion-input.js

@@ -36,6 +36,71 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
          * 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) {
@@ -82,41 +147,6 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
             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;

package/components/ion-item-divider.js

@@ -16,7 +16,13 @@ const ItemDivider = /*@__PURE__*/ proxyCustomElement(class ItemDivider extends H
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
+        /**
+         * When it's set to `true`, the item-divider will stay visible when it reaches the top
+         * of the viewport until the next `ion-item-divider` replaces it.
+         *
+         * This feature relies in `position:sticky`:
+         * https://caniuse.com/#feat=css-sticky
+         */
         this.sticky = false;
     }
     render() {

package/components/ion-item-option.js

@@ -17,20 +17,24 @@ const ItemOption = /*@__PURE__*/ proxyCustomElement(class ItemOption extends HTM
         super();
         this.__registerHost();
         this.__attachShadow();
+        /**
+         * If `true`, the user cannot interact with the item option.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the option will expand to take up the available width and cover any other options.
+         */
+        this.expandable = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
         this.onClick = (ev) => {
             const el = ev.target.closest('ion-item-option');
             if (el) {
                 ev.preventDefault();
             }
         };
-        this.color = undefined;
-        this.disabled = false;
-        this.download = undefined;
-        this.expandable = false;
-        this.href = undefined;
-        this.rel = undefined;
-        this.target = undefined;
-        this.type = 'button';
     }
     render() {
         const { disabled, expandable, href } = this;

package/components/ion-item-options.js

@@ -16,6 +16,10 @@ const ItemOptions = /*@__PURE__*/ proxyCustomElement(class ItemOptions extends H
         super();
         this.__registerHost();
         this.ionSwipe = createEvent(this, "ionSwipe", 7);
+        /**
+         * The side the option button should be on. Possible values: `"start"` and `"end"`. If you have multiple `ion-item-options`, a side must be provided for each.
+         *
+         */
         this.side = 'end';
     }
     /** @internal */

package/components/ion-item-sliding.js

@@ -28,6 +28,9 @@ const ItemSliding = /*@__PURE__*/ proxyCustomElement(class ItemSliding extends H
         this.contentEl = null;
         this.initialContentScrollY = true;
         this.state = 2 /* SlidingState.Disabled */;
+        /**
+         * If `true`, the user cannot interact with the sliding item.
+         */
         this.disabled = false;
     }
     disabledChanged() {