@ionic/core 8.8.19-dev.11787076261.138d5922 → 8.8.19-dev.11787083540.1511caf2

package/dist/collection/components/checkbox/checkbox.js

@@ -19,104 +19,101 @@ import { getIonMode } from "../../global/ionic-global";
  * @part error-text - Supporting text displayed beneath the checkbox label when the checkbox is invalid and touched.
  */
 export class Checkbox {
-    inputId = `ion-cb-${checkboxIds++}`;
-    inputLabelId = `${this.inputId}-lbl`;
-    helperTextId = `${this.inputId}-helper-text`;
-    errorTextId = `${this.inputId}-error-text`;
-    inheritedAttributes = {};
-    validationObserver;
-    itemFocusObserver;
-    el;
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * The name of the control, which is submitted with the form data.
-     */
-    name = this.inputId;
-    /**
-     * If `true`, the checkbox is selected.
-     */
-    checked = false;
-    /**
-     * If `true`, the checkbox will visually appear as indeterminate.
-     */
-    indeterminate = false;
-    /**
-     * If `true`, the user cannot interact with the checkbox.
-     */
-    disabled = false;
-    /**
-     * Text that is placed under the checkbox label and displayed when an error is detected.
-     */
-    errorText;
-    /**
-     * Text that is placed under the checkbox label and displayed when no error is detected.
-     */
-    helperText;
-    /**
-     * 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>`.
-     */
-    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.
-     */
-    labelPlacement = 'start';
-    /**
-     * How to pack the label and checkbox within a line.
-     * `"start"`: The label and checkbox will appear on the left in LTR and
-     * on the right in RTL.
-     * `"end"`: The label and checkbox will appear on the right in LTR and
-     * on the left in RTL.
-     * `"space-between"`: The label and checkbox will appear on opposite
-     * ends of the line with space between the two elements.
-     * Setting this property will change the checkbox `display` to `block`.
-     */
-    justify;
-    /**
-     * How to control the alignment of the checkbox and label on the cross axis.
-     * `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
-     * `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
-     * Setting this property will change the checkbox `display` to `block`.
-     */
-    alignment;
-    /**
-     * If true, screen readers will announce it as a required field. This property
-     * works only for accessibility purposes, it will not prevent the form from
-     * submitting if the value is invalid.
-     */
-    required = false;
-    /**
-     * Track validation state for proper aria-live announcements.
-     */
-    isInvalid = false;
-    hasLabelContent = false;
-    hintTextId;
-    /**
-     * Emitted when the checked property has changed as a result of a user action such as a click.
-     *
-     * This event will not emit when programmatically setting the `checked` property.
-     */
-    ionChange;
-    /**
-     * Emitted when the checkbox has focus.
-     */
-    ionFocus;
-    /**
-     * Emitted when the checkbox loses focus.
-     */
-    ionBlur;
+    constructor() {
+        this.inputId = `ion-cb-${checkboxIds++}`;
+        this.inputLabelId = `${this.inputId}-lbl`;
+        this.helperTextId = `${this.inputId}-helper-text`;
+        this.errorTextId = `${this.inputId}-error-text`;
+        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';
+        /**
+         * If true, screen readers will announce it as a required field. This property
+         * works only for accessibility purposes, it will not prevent the form from
+         * submitting if the value is invalid.
+         */
+        this.required = false;
+        /**
+         * Track validation state for proper aria-live announcements.
+         */
+        this.isInvalid = false;
+        this.hasLabelContent = false;
+        /**
+         * Sets the checked property and emits
+         * the ionChange event. Use this to update the
+         * checked state in response to user-generated
+         * actions such as a click.
+         */
+        this.setChecked = (state) => {
+            const isChecked = (this.checked = state);
+            this.ionChange.emit({
+                checked: isChecked,
+                value: this.value,
+            });
+        };
+        this.toggleChecked = (ev) => {
+            ev.preventDefault();
+            this.setChecked(!this.checked);
+            this.indeterminate = false;
+        };
+        this.onFocus = () => {
+            this.ionFocus.emit();
+        };
+        this.onBlur = () => {
+            this.ionBlur.emit();
+        };
+        this.onKeyDown = (ev) => {
+            if (ev.key === ' ') {
+                ev.preventDefault();
+                if (!this.disabled) {
+                    this.toggleChecked(ev);
+                }
+            }
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            this.toggleChecked(ev);
+        };
+        /**
+         * Stops propagation when the display label is clicked,
+         * otherwise, two clicks will be triggered.
+         */
+        this.onDivLabelClick = (ev) => {
+            ev.stopPropagation();
+        };
+    }
     connectedCallback() {
         const { el } = this;
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
@@ -168,9 +165,7 @@ export class Checkbox {
         this.itemFocusObserver = createItemMultipleInputsObserver(el, () => forceUpdate(this));
     }
     componentWillLoad() {
-        this.inheritedAttributes = {
-            ...inheritAriaAttributes(this.el),
-        };
+        this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
         this.hintTextId = this.getHintTextId();
     }
     disconnectedCallback() {
@@ -187,51 +182,6 @@ export class Checkbox {
     async setFocus() {
         this.el.focus();
     }
-    /**
-     * Sets the checked property and emits
-     * the ionChange event. Use this to update the
-     * checked state in response to user-generated
-     * actions such as a click.
-     */
-    setChecked = (state) => {
-        const isChecked = (this.checked = state);
-        this.ionChange.emit({
-            checked: isChecked,
-            value: this.value,
-        });
-    };
-    toggleChecked = (ev) => {
-        ev.preventDefault();
-        this.setChecked(!this.checked);
-        this.indeterminate = false;
-    };
-    onFocus = () => {
-        this.ionFocus.emit();
-    };
-    onBlur = () => {
-        this.ionBlur.emit();
-    };
-    onKeyDown = (ev) => {
-        if (ev.key === ' ') {
-            ev.preventDefault();
-            if (!this.disabled) {
-                this.toggleChecked(ev);
-            }
-        }
-    };
-    onClick = (ev) => {
-        if (this.disabled) {
-            return;
-        }
-        this.toggleChecked(ev);
-    };
-    /**
-     * Stops propagation when the display label is clicked,
-     * otherwise, two clicks will be triggered.
-     */
-    onDivLabelClick = (ev) => {
-        ev.stopPropagation();
-    };
     getHintTextId() {
         const { helperText, errorText, helperTextId, errorTextId, isInvalid } = this;
         if (isInvalid && errorText) {
@@ -280,7 +230,7 @@ export class Checkbox {
                 [`checkbox-justify-${justify}`]: justify !== undefined,
                 [`checkbox-alignment-${alignment}`]: alignment !== undefined,
                 [`checkbox-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", { key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required, ...inheritedAttributes }), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
+            }) }, h("label", { key: 'acca2f5b0a37aa70930b2f74ff4857939b2be2b0', class: "checkbox-wrapper", htmlFor: inputId }, h("input", Object.assign({ key: 'f46e409383e9d3ffc3daae8e7cd4159427d4c8fe', type: "checkbox", checked: checked ? true : undefined, disabled: disabled, id: inputId, onChange: this.toggleChecked, required: required }, inheritedAttributes)), h("div", { key: '69d8bf21c781cd9b1f56ceae40ff7911e6f5adfe', class: {
                 'label-text-wrapper': true,
                 'label-text-wrapper-hidden': !this.hasLabelContent,
             }, part: "label", id: this.inputLabelId, onClick: this.onDivLabelClick }, h("slot", { key: '3c444ab897456c522588fc6cee616030f16b0586' }), this.renderHintText()), h("div", { key: '0a18dfe7a68a8eec08ce8764bd2c8a59c4a38802', class: "native-wrapper" }, h("svg", { key: '56b298b54ebc88a429a9dd67b8dabd7063759b3a', class: "checkbox-icon", viewBox: "0 0 24 24", part: "container", "aria-hidden": "true" }, path)))));

package/dist/collection/components/chip/chip.js

@@ -8,20 +8,16 @@ import { getIonMode } from "../../global/ionic-global";
  * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
  */
 export class Chip {
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * Display an outline style button.
-     */
-    outline = false;
-    /**
-     * If `true`, the user cannot interact with the chip.
-     */
-    disabled = false;
+    constructor() {
+        /**
+         * Display an outline style button.
+         */
+        this.outline = false;
+        /**
+         * If `true`, the user cannot interact with the chip.
+         */
+        this.disabled = false;
+    }
     render() {
         const mode = getIonMode(this);
         return (h(Host, { key: 'fa2e9a4837ef87a17ef10f388e8caa7f604d9145', "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {

package/dist/collection/components/col/col.js

@@ -5,129 +5,10 @@ import { Host, forceUpdate, h } from "@stencil/core";
 import { matchBreakpoint } from "../../utils/media";
 import { getIonMode } from "../../global/ionic-global";
 const win = typeof window !== 'undefined' ? window : undefined;
+// eslint-disable-next-line @typescript-eslint/prefer-optional-chain
 const SUPPORTS_VARS = win && !!(win.CSS && win.CSS.supports && win.CSS.supports('--a: 0'));
 const BREAKPOINTS = ['', 'xs', 'sm', 'md', 'lg', 'xl'];
 export class Col {
-    /**
-     * The amount to offset the column, in terms of how many columns it should shift to the end
-     * of the total available.
-     */
-    offset;
-    /**
-     * The amount to offset the column for xs screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetXs;
-    /**
-     * The amount to offset the column for sm screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetSm;
-    /**
-     * The amount to offset the column for md screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetMd;
-    /**
-     * The amount to offset the column for lg screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetLg;
-    /**
-     * The amount to offset the column for xl screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    offsetXl;
-    /**
-     * The amount to pull the column, in terms of how many columns it should shift to the start of
-     * the total available.
-     */
-    pull;
-    /**
-     * The amount to pull the column for xs screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullXs;
-    /**
-     * The amount to pull the column for sm screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullSm;
-    /**
-     * The amount to pull the column for md screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullMd;
-    /**
-     * The amount to pull the column for lg screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullLg;
-    /**
-     * The amount to pull the column for xl screens, in terms of how many columns it should shift
-     * to the start of the total available.
-     */
-    pullXl;
-    /**
-     * The amount to push the column, in terms of how many columns it should shift to the end
-     * of the total available.
-     */
-    push;
-    /**
-     * The amount to push the column for xs screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushXs;
-    /**
-     * The amount to push the column for sm screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushSm;
-    /**
-     * The amount to push the column for md screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushMd;
-    /**
-     * The amount to push the column for lg screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushLg;
-    /**
-     * The amount to push the column for xl screens, in terms of how many columns it should shift
-     * to the end of the total available.
-     */
-    pushXl;
-    /**
-     * The size of the column, in terms of how many columns it should take up out of the total
-     * available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    size;
-    /**
-     * The size of the column for xs screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeXs;
-    /**
-     * The size of the column for sm screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeSm;
-    /**
-     * The size of the column for md screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeMd;
-    /**
-     * The size of the column for lg screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeLg;
-    /**
-     * The size of the column for xl screens, in terms of how many columns it should take up out
-     * of the total available. If `"auto"` is passed, the column will be the size of its content.
-     */
-    sizeXl;
     onResize() {
         forceUpdate(this);
     }
@@ -204,14 +85,9 @@ export class Col {
     render() {
         const isRTL = document.dir === 'rtl';
         const mode = getIonMode(this);
-        return (h(Host, { key: 'e12293a4315cb474bbde73421dd0b4129f1df1cc', class: {
+        return (h(Host, { key: '32ed75d81dd09d9bc8999f6d42e5b3cb99c84d91', class: {
                 [mode]: true,
-            }, style: {
-                ...this.calculateOffset(isRTL),
-                ...this.calculatePull(isRTL),
-                ...this.calculatePush(isRTL),
-                ...this.calculateSize(),
-            } }, h("slot", { key: '869317ea6574111a57a7a9d096c53d264c335d28' })));
+            }, style: Object.assign(Object.assign(Object.assign(Object.assign({}, this.calculateOffset(isRTL)), this.calculatePull(isRTL)), this.calculatePush(isRTL)), this.calculateSize()) }, h("slot", { key: '38f8d0440c20cc6d1b1d6a654d07f16de61d8134' })));
     }
     static get is() { return "ion-col"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/content/content.js

@@ -15,99 +15,69 @@ import { getIonMode } from "../../global/ionic-global";
  * @part scroll - The scrollable container of the content.
  */
 export class Content {
-    watchDog = null;
-    isScrolling = false;
-    lastScroll = 0;
-    queued = false;
-    cTop = -1;
-    cBottom = -1;
-    scrollEl;
-    backgroundContentEl;
-    isMainContent = true;
-    resizeTimeout = null;
-    fullscreenResizeObserver;
-    inheritedAttributes = {};
-    tabsElement = null;
-    tabsLoadCallback;
-    // Detail is used in a hot loop in the scroll event, by allocating it here
-    // V8 will be able to inline any read/write to it since it's a monomorphic class.
-    // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
-    detail = {
-        scrollTop: 0,
-        scrollLeft: 0,
-        type: 'scroll',
-        event: undefined,
-        startX: 0,
-        startY: 0,
-        startTime: 0,
-        currentX: 0,
-        currentY: 0,
-        velocityX: 0,
-        velocityY: 0,
-        deltaX: 0,
-        deltaY: 0,
-        currentTime: 0,
-        data: undefined,
-        isScrolling: true,
-    };
-    el;
-    /**
-     * 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).
-     */
-    color;
-    /**
-     * If `true`, the content will scroll behind the headers
-     * and footers. This effect can easily be seen by setting the toolbar
-     * to transparent.
-     */
-    fullscreen = false;
+    constructor() {
+        this.watchDog = null;
+        this.isScrolling = false;
+        this.lastScroll = 0;
+        this.queued = false;
+        this.cTop = -1;
+        this.cBottom = -1;
+        this.isMainContent = true;
+        this.resizeTimeout = null;
+        this.inheritedAttributes = {};
+        this.tabsElement = null;
+        // Detail is used in a hot loop in the scroll event, by allocating it here
+        // V8 will be able to inline any read/write to it since it's a monomorphic class.
+        // https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html
+        this.detail = {
+            scrollTop: 0,
+            scrollLeft: 0,
+            type: 'scroll',
+            event: undefined,
+            startX: 0,
+            startY: 0,
+            startTime: 0,
+            currentX: 0,
+            currentY: 0,
+            velocityX: 0,
+            velocityY: 0,
+            deltaX: 0,
+            deltaY: 0,
+            currentTime: 0,
+            data: undefined,
+            isScrolling: true,
+        };
+        /**
+         * 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';
+        /**
+         * 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;
+    }
     fullscreenChanged() {
         this.setupFullscreenResizeObserver();
     }
-    /**
-     * 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'`.
-     */
-    fixedSlotPlacement = 'after';
-    /**
-     * If `true` and the content does not cause an overflow scroll, the scroll interaction will cause a bounce.
-     * If the content exceeds the bounds of ionContent, nothing will change.
-     * Note, this does not disable the system bounce on iOS. That is an OS level setting.
-     */
-    forceOverscroll;
-    /**
-     * If you want to enable the content scrolling in the X axis, set this property to `true`.
-     */
-    scrollX = false;
-    /**
-     * If you want to disable the content scrolling in the Y axis, set this property to `false`.
-     */
-    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`.
-     */
-    scrollEvents = false;
-    /**
-     * Emitted when the scroll has started. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollStart;
-    /**
-     * Emitted while scrolling. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScroll;
-    /**
-     * Emitted when the scroll has ended. This event is disabled by default.
-     * Set `scrollEvents` to `true` to enable.
-     */
-    ionScrollEnd;
     componentWillLoad() {
         this.inheritedAttributes = inheritAriaAttributes(this.el);
     }
@@ -448,7 +418,7 @@ export class Content {
         const forceOverscroll = this.shouldForceOverscroll();
         const transitionShadow = mode === 'ios';
         this.resize();
-        return (h(Host, { key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
+        return (h(Host, Object.assign({ key: '9551c759df407b10d809171641fc6e8f14d92219', role: isMainContent ? 'main' : undefined, class: createColorClasses(this.color, {
                 [mode]: true,
                 'content-fullscreen': this.fullscreen,
                 'content-sizing': hostContext('ion-popover', this.el),
@@ -457,7 +427,7 @@ export class Content {
             }), style: {
                 '--offset-top': `${this.cTop}px`,
                 '--offset-bottom': `${this.cBottom}px`,
-            }, ...inheritedAttributes }, h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
+            } }, inheritedAttributes), h("div", { key: 'c6de8fd226f0d10a534eb107fe032ac155fbe68e', ref: (el) => (this.backgroundContentEl = el), id: "background-content", part: "background" }), fixedSlotPlacement === 'before' ? h("slot", { name: "fixed" }) : null, h("div", { key: '082fc2936061360060b48221ecb1c864a3711fa0', class: {
                 'inner-scroll': true,
                 'scroll-x': scrollX,
                 'scroll-y': scrollY,
@@ -905,11 +875,12 @@ export class Content {
     }
 }
 const getParentElement = (el) => {
+    var _a;
     if (el.parentElement) {
         // normal element with a parent element
         return el.parentElement;
     }
-    if (el.parentNode?.host) {
+    if ((_a = el.parentNode) === null || _a === void 0 ? void 0 : _a.host) {
         // shadow dom's document fragment
         return el.parentNode.host;
     }