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

package/components/action-sheet.js

@@ -119,6 +119,38 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
         this.lockController = createLockController();
         this.triggerController = createTriggerController();
         this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * An array of buttons for the action sheet.
+         */
+        this.buttons = [];
+        /**
+         * If `true`, the action sheet will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, the action sheet 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;
+        /**
+         * If `true`, the action sheet will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the action sheet will open. If `false`, the action sheet will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the actionSheetController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the action sheet dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
         this.onBackdropTap = () => {
             this.dismiss(undefined, BACKDROP);
         };
@@ -129,22 +161,6 @@ const ActionSheet = /*@__PURE__*/ proxyCustomElement(class ActionSheet extends H
                 this.callButtonHandler(cancelButton);
             }
         };
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.buttons = [];
-        this.cssClass = undefined;
-        this.backdropDismiss = true;
-        this.header = undefined;
-        this.subHeader = undefined;
-        this.translucent = false;
-        this.animated = true;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {

package/components/alert.js

@@ -123,6 +123,42 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
         this.processedInputs = [];
         this.processedButtons = [];
         this.presented = false;
+        /** @internal */
+        this.hasController = false;
+        /**
+         * If `true`, the keyboard will be automatically dismissed when the overlay is presented.
+         */
+        this.keyboardClose = true;
+        /**
+         * Array of buttons to be added to the alert.
+         */
+        this.buttons = [];
+        /**
+         * Array of input to show in the alert.
+         */
+        this.inputs = [];
+        /**
+         * If `true`, the alert will be dismissed when the backdrop is clicked.
+         */
+        this.backdropDismiss = true;
+        /**
+         * If `true`, the alert 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;
+        /**
+         * If `true`, the alert will animate.
+         */
+        this.animated = true;
+        /**
+         * If `true`, the alert will open. If `false`, the alert will close.
+         * Use this if you need finer grained control over presentation, otherwise
+         * just use the alertController or the `trigger` property.
+         * Note: `isOpen` will not automatically be set back to `false` when
+         * the alert dismisses. You will need to do that in your code.
+         */
+        this.isOpen = false;
         this.onBackdropTap = () => {
             this.dismiss(undefined, BACKDROP);
         };
@@ -133,24 +169,6 @@ const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends HTMLElement {
                 this.callButtonHandler(cancelButton);
             }
         };
-        this.overlayIndex = undefined;
-        this.delegate = undefined;
-        this.hasController = false;
-        this.keyboardClose = true;
-        this.enterAnimation = undefined;
-        this.leaveAnimation = undefined;
-        this.cssClass = undefined;
-        this.header = undefined;
-        this.subHeader = undefined;
-        this.message = undefined;
-        this.buttons = [];
-        this.inputs = [];
-        this.backdropDismiss = true;
-        this.translucent = false;
-        this.animated = true;
-        this.htmlAttributes = undefined;
-        this.isOpen = false;
-        this.trigger = undefined;
     }
     onIsOpenChange(newValue, oldValue) {
         if (newValue === true && oldValue === false) {

package/components/backdrop.js

@@ -16,8 +16,17 @@ const Backdrop = /*@__PURE__*/ proxyCustomElement(class Backdrop extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.ionBackdropTap = createEvent(this, "ionBackdropTap", 7);
+        /**
+         * If `true`, the backdrop will be visible.
+         */
         this.visible = true;
+        /**
+         * If `true`, the backdrop will can be clicked and will emit the `ionBackdropTap` event.
+         */
         this.tappable = true;
+        /**
+         * If `true`, the backdrop will stop propagation on tap.
+         */
         this.stopPropagation = true;
     }
     onMouseDown(ev) {

package/components/button.js

@@ -27,6 +27,31 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
         this.formButtonEl = null;
         this.formEl = null;
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the button only has an icon.
+         */
+        this.isCircle = false;
+        /**
+         * The type of button.
+         */
+        this.buttonType = 'button';
+        /**
+         * If `true`, the user cannot interact with the 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`, activates a button with a heavier font weight.
+         */
+        this.strong = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
         this.handleClick = (ev) => {
             const { el } = this;
             if (this.type === 'button') {
@@ -53,23 +78,6 @@ const Button = /*@__PURE__*/ proxyCustomElement(class Button extends HTMLElement
              */
             this.isCircle = this.hasIconOnly;
         };
-        this.isCircle = false;
-        this.color = undefined;
-        this.buttonType = 'button';
-        this.disabled = false;
-        this.expand = undefined;
-        this.fill = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.shape = undefined;
-        this.size = undefined;
-        this.strong = false;
-        this.target = undefined;
-        this.type = 'button';
-        this.form = undefined;
     }
     disabledChanged() {
         const { disabled } = this;

package/components/buttons.js

@@ -14,6 +14,18 @@ const Buttons = /*@__PURE__*/ proxyCustomElement(class Buttons extends HTMLEleme
     constructor() {
         super();
         this.__registerHost();
+        /**
+         * If true, buttons will disappear when its
+         * parent toolbar has fully collapsed if the toolbar
+         * is not the first toolbar. If the toolbar is the
+         * first toolbar, the buttons will be hidden and will
+         * only be shown once all toolbars have fully collapsed.
+         *
+         * Only applies in `ios` mode with `collapse` set to
+         * `true` on `ion-header`.
+         *
+         * Typically used for [Collapsible Large Titles](https://ionicframework.com/docs/api/title#collapsible-large-titles)
+         */
         this.collapse = false;
     }
     render() {

package/components/checkbox.js

@@ -22,6 +22,38 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.inputId = `ion-cb-${checkboxIds++}`;
         this.inheritedAttributes = {};
+        /**
+         * The name of the control, which is submitted with the form data.
+         */
+        this.name = this.inputId;
+        /**
+         * If `true`, the checkbox is selected.
+         */
+        this.checked = false;
+        /**
+         * If `true`, the checkbox will visually appear as indeterminate.
+         */
+        this.indeterminate = false;
+        /**
+         * If `true`, the user cannot interact with the checkbox.
+         */
+        this.disabled = false;
+        /**
+         * The value of the checkbox does not mean if it's checked or not, use the `checked`
+         * property for that.
+         *
+         * The value of a checkbox is analogous to the value of an `<input type="checkbox">`,
+         * it's only used when the checkbox participates in a native `<form>`.
+         */
+        this.value = 'on';
+        /**
+         * Where to place the label relative to the checkbox.
+         * `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
+         * `"end"`: The label will appear to the right of the checkbox in LTR and to the left in RTL.
+         * `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         * `"stacked"`: The label will appear above the checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
+         */
+        this.labelPlacement = 'start';
         /**
          * Sets the checked property and emits
          * the ionChange event. Use this to update the
@@ -53,15 +85,6 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
             }
             this.toggleChecked(ev);
         };
-        this.color = undefined;
-        this.name = this.inputId;
-        this.checked = false;
-        this.indeterminate = false;
-        this.disabled = false;
-        this.value = 'on';
-        this.labelPlacement = 'start';
-        this.justify = undefined;
-        this.alignment = undefined;
     }
     componentWillLoad() {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));

package/components/content.js

@@ -49,12 +49,32 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends HTMLEleme
             data: undefined,
             isScrolling: true,
         };
-        this.color = undefined;
+        /**
+         * If `true`, the content will scroll behind the headers
+         * and footers. This effect can easily be seen by setting the toolbar
+         * to transparent.
+         */
         this.fullscreen = false;
+        /**
+         * Controls where the fixed content is placed relative to the main content
+         * in the DOM. This can be used to control the order in which fixed elements
+         * receive keyboard focus.
+         * For example, if a FAB in the fixed slot should receive keyboard focus before
+         * the main page content, set this property to `'before'`.
+         */
         this.fixedSlotPlacement = 'after';
-        this.forceOverscroll = undefined;
+        /**
+         * If you want to enable the content scrolling in the X axis, set this property to `true`.
+         */
         this.scrollX = false;
+        /**
+         * If you want to disable the content scrolling in the Y axis, set this property to `false`.
+         */
         this.scrollY = true;
+        /**
+         * Because of performance reasons, ionScroll events are disabled by default, in order to enable them
+         * and start listening from (ionScroll), set this property to `true`.
+         */
         this.scrollEvents = false;
     }
     componentWillLoad() {

package/components/focus-visible.js

@@ -3,8 +3,23 @@
  */
 const ION_FOCUSED = 'ion-focused';
 const ION_FOCUSABLE = 'ion-focusable';
+const FOCUS_KEYS = [
+    'Tab',
+    'ArrowDown',
+    'Space',
+    'Escape',
+    ' ',
+    'Shift',
+    'Enter',
+    'ArrowLeft',
+    'ArrowRight',
+    'ArrowUp',
+    'Home',
+    'End',
+];
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
+    let keyboardMode = true;
     const ref = rootEl ? rootEl.shadowRoot : document;
     const root = rootEl ? rootEl : document.body;
     const setFocus = (elements) => {
@@ -13,24 +28,39 @@ const startFocusVisible = (rootEl) => {
         currentFocus = elements;
     };
     const pointerDown = () => {
+        keyboardMode = false;
         setFocus([]);
     };
+    const onKeydown = (ev) => {
+        keyboardMode = FOCUS_KEYS.includes(ev.key);
+        if (!keyboardMode) {
+            setFocus([]);
+        }
+    };
     const onFocusin = (ev) => {
-        const toFocus = ev.composedPath().filter((el) => {
-            return el instanceof HTMLElement && el.classList.contains(ION_FOCUSABLE);
-        });
-        setFocus(toFocus);
+        if (keyboardMode && ev.composedPath !== undefined) {
+            const toFocus = ev.composedPath().filter((el) => {
+                // TODO(FW-2832): type
+                if (el.classList) {
+                    return el.classList.contains(ION_FOCUSABLE);
+                }
+                return false;
+            });
+            setFocus(toFocus);
+        }
     };
     const onFocusout = () => {
         if (ref.activeElement === root) {
             setFocus([]);
         }
     };
+    ref.addEventListener('keydown', onKeydown);
     ref.addEventListener('focusin', onFocusin);
     ref.addEventListener('focusout', onFocusout);
     ref.addEventListener('touchstart', pointerDown, { passive: true });
     ref.addEventListener('mousedown', pointerDown);
     const destroy = () => {
+        ref.removeEventListener('keydown', onKeydown);
         ref.removeEventListener('focusin', onFocusin);
         ref.removeEventListener('focusout', onFocusout);
         ref.removeEventListener('touchstart', pointerDown);

package/components/header.js

@@ -213,6 +213,15 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
         super();
         this.__registerHost();
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the header 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 header, the `fullscreen`
+         * attribute needs to be set on the content.
+         */
+        this.translucent = false;
         this.setupFadeHeader = async (contentEl, condenseHeader) => {
             const scrollEl = (this.scrollEl = await getScrollElement(contentEl));
             /**
@@ -224,8 +233,6 @@ const Header = /*@__PURE__*/ proxyCustomElement(class Header extends HTMLElement
             scrollEl.addEventListener('scroll', this.contentScrollCallback);
             handleHeaderFade(this.scrollEl, this.el, condenseHeader);
         };
-        this.collapse = undefined;
-        this.translucent = false;
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);

package/components/ion-accordion-group.js

@@ -18,11 +18,26 @@ const AccordionGroup = /*@__PURE__*/ proxyCustomElement(class AccordionGroup ext
         this.__attachShadow();
         this.ionChange = createEvent(this, "ionChange", 7);
         this.ionValueChange = createEvent(this, "ionValueChange", 7);
+        /**
+         * If `true`, all accordions inside of the
+         * accordion group will animate when expanding
+         * or collapsing.
+         */
         this.animated = true;
-        this.multiple = undefined;
-        this.value = undefined;
+        /**
+         * If `true`, the accordion group cannot be interacted with.
+         */
         this.disabled = false;
+        /**
+         * If `true`, the accordion group cannot be interacted with,
+         * but does not alter the opacity.
+         */
         this.readonly = false;
+        /**
+         * Describes the expansion behavior for each accordion.
+         * Possible values are `"compact"` and `"inset"`.
+         * Defaults to `"compact"`.
+         */
         this.expand = 'compact';
     }
     valueChanged() {

package/components/ion-accordion.js

@@ -19,6 +19,34 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.updateListener = () => this.updateState(false);
+        this.state = 1 /* AccordionState.Collapsed */;
+        this.isNext = false;
+        this.isPrevious = false;
+        /**
+         * The value of the accordion. Defaults to an autogenerated
+         * value.
+         */
+        this.value = `ion-accordion-${accordionIds++}`;
+        /**
+         * If `true`, the accordion cannot be interacted with.
+         */
+        this.disabled = false;
+        /**
+         * If `true`, the accordion cannot be interacted with,
+         * but does not alter the opacity.
+         */
+        this.readonly = false;
+        /**
+         * The toggle icon to use. This icon will be
+         * rotated when the accordion is expanded
+         * or collapsed.
+         */
+        this.toggleIcon = chevronDown;
+        /**
+         * The slot inside of `ion-item` to
+         * place the toggle icon. Defaults to `"end"`.
+         */
+        this.toggleIconSlot = 'end';
         this.setItemDefaults = () => {
             const ionItem = this.getSlottedHeaderIonItem();
             if (!ionItem) {
@@ -233,14 +261,6 @@ const Accordion = /*@__PURE__*/ proxyCustomElement(class Accordion extends HTMLE
             }
             return previousSibling;
         };
-        this.state = 1 /* AccordionState.Collapsed */;
-        this.isNext = false;
-        this.isPrevious = false;
-        this.value = `ion-accordion-${accordionIds++}`;
-        this.disabled = false;
-        this.readonly = false;
-        this.toggleIcon = chevronDown;
-        this.toggleIconSlot = 'end';
     }
     valueChanged() {
         this.updateState();

package/components/ion-back-button.js

@@ -21,6 +21,14 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
         this.__registerHost();
         this.__attachShadow();
         this.inheritedAttributes = {};
+        /**
+         * If `true`, the user cannot interact with the button.
+         */
+        this.disabled = false;
+        /**
+         * The type of the button.
+         */
+        this.type = 'button';
         this.onClick = async (ev) => {
             const nav = this.el.closest('ion-nav');
             ev.preventDefault();
@@ -29,13 +37,6 @@ const BackButton = /*@__PURE__*/ proxyCustomElement(class BackButton extends HTM
             }
             return openURL(this.defaultHref, ev, 'back', this.routerAnimation);
         };
-        this.color = undefined;
-        this.defaultHref = undefined;
-        this.disabled = false;
-        this.icon = undefined;
-        this.text = undefined;
-        this.type = 'button';
-        this.routerAnimation = undefined;
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);

package/components/ion-badge.js

@@ -16,7 +16,6 @@ const Badge = /*@__PURE__*/ proxyCustomElement(class Badge extends HTMLElement {
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
     }
     render() {
         const mode = getIonMode(this);

package/components/ion-breadcrumb.js

@@ -23,6 +23,23 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         this.ionBlur = createEvent(this, "ionBlur", 7);
         this.collapsedClick = createEvent(this, "collapsedClick", 7);
         this.inheritedAttributes = {};
+        /** @internal */
+        this.collapsed = false;
+        /**
+         * If `true`, the breadcrumb will take on a different look to show that
+         * it is the currently active breadcrumb. Defaults to `true` for the
+         * last breadcrumb if it is not set on any.
+         */
+        this.active = false;
+        /**
+         * If `true`, the user cannot interact with the breadcrumb.
+         */
+        this.disabled = false;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
+        this.routerDirection = 'forward';
         this.onFocus = () => {
             this.ionFocus.emit();
         };
@@ -32,19 +49,6 @@ const Breadcrumb = /*@__PURE__*/ proxyCustomElement(class Breadcrumb extends HTM
         this.collapsedIndicatorClick = () => {
             this.collapsedClick.emit({ ionShadowTarget: this.collapsedRef });
         };
-        this.collapsed = false;
-        this.last = undefined;
-        this.showCollapsedIndicator = undefined;
-        this.color = undefined;
-        this.active = false;
-        this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
-        this.separator = undefined;
-        this.target = undefined;
-        this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
     }
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);

package/components/ion-breadcrumbs.js

@@ -17,6 +17,18 @@ const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class Breadcrumbs extends H
         this.__registerHost();
         this.__attachShadow();
         this.ionCollapsedClick = createEvent(this, "ionCollapsedClick", 7);
+        /**
+         * The number of breadcrumbs to show before the collapsed indicator.
+         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+         * the breadcrumbs will not be collapsed.
+         */
+        this.itemsBeforeCollapse = 1;
+        /**
+         * The number of breadcrumbs to show after the collapsed indicator.
+         * If `itemsBeforeCollapse` + `itemsAfterCollapse` is greater than `maxItems`,
+         * the breadcrumbs will not be collapsed.
+         */
+        this.itemsAfterCollapse = 1;
         this.breadcrumbsInit = () => {
             this.setBreadcrumbSeparator();
             this.setMaxItems();
@@ -90,12 +102,6 @@ const Breadcrumbs = /*@__PURE__*/ proxyCustomElement(class Breadcrumbs extends H
             this.resetActiveBreadcrumb();
             this.breadcrumbsInit();
         };
-        this.collapsed = undefined;
-        this.activeChanged = undefined;
-        this.color = undefined;
-        this.maxItems = undefined;
-        this.itemsBeforeCollapse = 1;
-        this.itemsAfterCollapse = 1;
     }
     onCollapsedClick(ev) {
         const breadcrumbs = this.getBreadcrumbs();

package/components/ion-card-header.js

@@ -16,7 +16,11 @@ const CardHeader = /*@__PURE__*/ proxyCustomElement(class CardHeader extends HTM
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
+        /**
+         * If `true`, the card header 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;
     }
     render() {

package/components/ion-card-subtitle.js

@@ -16,7 +16,6 @@ const CardSubtitle = /*@__PURE__*/ proxyCustomElement(class CardSubtitle extends
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
     }
     render() {
         const mode = getIonMode(this);

package/components/ion-card-title.js

@@ -16,7 +16,6 @@ const CardTitle = /*@__PURE__*/ proxyCustomElement(class CardTitle extends HTMLE
         super();
         this.__registerHost();
         this.__attachShadow();
-        this.color = undefined;
     }
     render() {
         const mode = getIonMode(this);

package/components/ion-card.js

@@ -19,16 +19,23 @@ const Card = /*@__PURE__*/ proxyCustomElement(class Card extends HTMLElement {
         this.__registerHost();
         this.__attachShadow();
         this.inheritedAriaAttributes = {};
-        this.color = undefined;
+        /**
+         * If `true`, a button tag will be rendered and the card will be tappable.
+         */
         this.button = false;
+        /**
+         * The type of the button. Only used when an `onclick` or `button` property is present.
+         */
         this.type = 'button';
+        /**
+         * If `true`, the user cannot interact with the card.
+         */
         this.disabled = false;
-        this.download = undefined;
-        this.href = undefined;
-        this.rel = undefined;
+        /**
+         * When using a router, it specifies the transition direction when navigating to
+         * another page using `href`.
+         */
         this.routerDirection = 'forward';
-        this.routerAnimation = undefined;
-        this.target = undefined;
     }
     componentWillLoad() {
         this.inheritedAriaAttributes = inheritAttributes(this.el, ['aria-label']);