urnovl-web-components 0.0.172 → 0.0.174

package/dist/cjs/index-5ef88da0.js

@@ -0,0 +1,496 @@
+'use strict';
+
+const get = require('./get-511a0185.js');
+const ref = require('./ref-05dc0add.js');
+const when = require('./when-56b737f5.js');
+require('./appendTo-18fb250c.js');
+const watch = require('./watch-fc873d99.js');
+const motion = require('./motion-ceba572b.js');
+const scroll = require('./scroll-7a932edc.js');
+const observeResize = require('./observeResize-c91c316e.js');
+const layoutItemBase = require('./layout-item-base-1e29df10.js');
+
+/**
+ * 断点相关的 js 函数
+ * 这些函数直接导出到 mdui 全局对象下，供应用使用。框架内部使用时，为避免循环依赖，从 @mdui/shared 包内导入
+ */
+/**
+ * 获取断点对象，通过返回的对象可用于判断指定宽度、或指定元素的宽度、或当前窗口宽度与各个断点值的关系
+ *
+ * * 未传入参数时，获取的是 `window` 的宽度对应的断点对象
+ * * 若传入数值，则获取的是该数值宽度对应的断点对象
+ * * 若传入 CSS 选择器，则获取的是该选择器对应元素的宽度对应的断点对象
+ * * 若传入 HTML 元素，则获取的是该元素的宽度对应的断点对象
+ * * 若传入 JQ 对象，则获取的是该 JQ 对象中的元素的宽度对应的断点对象
+ *
+ * 返回的对象包含以下方法：
+ *
+ * * `up(breakpoint)`：判断当前宽度是否大于指定断点值
+ * * `down(breakpoint)`：判断当前宽度是否小于指定断点值
+ * * `only(breakpoint)`：判断当前宽度是否在指定断点值内
+ * * `not(breakpoint)`：判断当前宽度是否不在指定断点值内
+ * * `between(startBreakpoint, endBreakpoint)`：判断当前宽度是否在指定断点值之间
+ */
+const breakpoint = (width) => {
+    const window = get.getWindow();
+    const document = get.getDocument();
+    const computedStyle = window.getComputedStyle(document.documentElement);
+    // 容器的宽度
+    const containerWidth = get.isElement(width)
+        ? get.$(width).innerWidth()
+        : get.isNumber(width)
+            ? width
+            : get.$(window).innerWidth();
+    // 断点对应的宽度值
+    const getBreakpointValue = (breakpoint) => {
+        const width = computedStyle
+            .getPropertyValue(`--mdui-breakpoint-${breakpoint}`)
+            .toLowerCase();
+        return parseFloat(width);
+    };
+    // 获取比指定断点更大的一个断点
+    const getNextBreakpoint = (breakpoint) => {
+        switch (breakpoint) {
+            case 'xs':
+                return 'sm';
+            case 'sm':
+                return 'md';
+            case 'md':
+                return 'lg';
+            case 'lg':
+                return 'xl';
+            case 'xl':
+                return 'xxl';
+        }
+    };
+    return {
+        /**
+         * 当前宽度是否大于指定断点值
+         * @param breakpoint
+         */
+        up(breakpoint) {
+            return containerWidth >= getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否小于指定断点值
+         * @param breakpoint
+         */
+        down(breakpoint) {
+            return containerWidth < getBreakpointValue(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值内
+         * @param breakpoint
+         */
+        only(breakpoint) {
+            if (breakpoint === 'xxl') {
+                return this.up(breakpoint);
+            }
+            else {
+                return this.up(breakpoint) && this.down(getNextBreakpoint(breakpoint));
+            }
+        },
+        /**
+         * 当前宽度是否不在指定断点值内
+         * @param breakpoint
+         */
+        not(breakpoint) {
+            return !this.only(breakpoint);
+        },
+        /**
+         * 当前宽度是否在指定断点值之间
+         * @param startBreakpoint
+         * @param endBreakpoint
+         * @returns
+         */
+        between(startBreakpoint, endBreakpoint) {
+            return this.up(startBreakpoint) && this.down(endBreakpoint);
+        },
+    };
+};
+
+const style = get.i `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]:not([modal=false i])){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]:not([modal=false i])){left:0}:host([contained]:not([contained=false i])){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]:not([modal=false i])) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]:not([modal=false i])) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;
+
+/**
+ * 在手机端，`modal` 始终为 `true`；大于手机端时，`modal` 属性才开始生效
+ *
+ * @summary 侧边抽屉栏组件
+ *
+ * ```html
+ * <mdui-navigation-drawer>content</mdui-navigation-drawer>
+ * ```
+ *
+ * @event open - 抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
+ * @event opened - 抽屉栏打开动画完成之后触发
+ * @event close - 抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
+ * @event closed - 抽屉栏关闭动画完成之后触发
+ * @event overlay-click - 点击遮罩层时触发
+ *
+ * @slot - 抽屉栏中的内容
+ *
+ * @csspart overlay - 遮罩层
+ * @csspart panel - 抽屉栏容器
+ *
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
+ */
+let NavigationDrawer = class NavigationDrawer extends layoutItemBase.LayoutItemBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * 是否打开抽屉栏
+         */
+        this.open = false;
+        /**
+         * 抽屉栏打开时，是否显示遮罩层
+         *
+         * 在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数
+         */
+        this.modal = false;
+        /**
+         * 在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
+         */
+        this.closeOnEsc = false;
+        /**
+         * 点击遮罩层时，是否关闭抽屉栏
+         */
+        this.closeOnOverlayClick = false;
+        /**
+         * 抽屉栏的位置。可选值包括：
+         *
+         * * `left`：左侧
+         * * `right`：右侧
+         */
+        this.placement = 'left';
+        /**
+         * 默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。
+         *
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
+         */
+        this.contained = false;
+        // 断点为 mobile 时为 `true` 时，强制使用遮罩层
+        this.mobile = false;
+        this.overlayRef = ref.ii();
+        this.panelRef = ref.ii();
+        this.definedController = new get.DefinedController(this, {
+            needDomReady: true,
+        });
+    }
+    get layoutPlacement() {
+        return this.placement;
+    }
+    get lockTarget() {
+        return this.contained || this.isParentLayout
+            ? this.parentElement
+            : document.documentElement;
+    }
+    get isModal() {
+        return this.mobile || this.modal;
+    }
+    // contained 变更后，修改监听尺寸变化的元素。为 true 时，监听父元素；为 false 时，监听 body
+    async onContainedChange() {
+        await this.definedController.whenDefined();
+        this.observeResize?.unobserve();
+        this.setObserveResize();
+    }
+    onPlacementChange() {
+        if (this.isParentLayout) {
+            this.layoutManager.updateLayout(this);
+        }
+    }
+    async onMobileChange() {
+        if (!this.open || this.isParentLayout || this.contained) {
+            return;
+        }
+        await this.definedController.whenDefined();
+        if (this.isModal) {
+            scroll.lockScreen(this, this.lockTarget);
+            await this.getLockTargetAnimate(false, 0);
+        }
+        else {
+            scroll.unlockScreen(this, this.lockTarget);
+            await this.getLockTargetAnimate(true, 0);
+        }
+    }
+    async onOpenChange() {
+        let panel = this.panelRef.value;
+        let overlay = this.overlayRef.value;
+        const isRight = this.placement === 'right';
+        const easingLinear = motion.getEasing(this, 'linear');
+        const easingEmphasized = motion.getEasing(this, 'emphasized');
+        // 在当前 drawer 位于 layout 中时，设置所有 layout-item 和 layout-main 元素的 transition 样式
+        const setLayoutTransition = (duration, easing) => {
+            get.$(this.layoutManager.getItemsAndMain()).css('transition', get.isNull(duration) ? null : `all ${duration}ms ${easing}`);
+        };
+        // 停止原有动画
+        const stopOldAnimations = async () => {
+            const elements = [];
+            if (this.isModal) {
+                elements.push(overlay, panel);
+            }
+            else if (!this.isParentLayout) {
+                elements.push(this.lockTarget);
+            }
+            if (this.isParentLayout) {
+                const layoutItems = this.layoutManager.getItemsAndMain();
+                const layoutIndex = layoutItems.indexOf(this);
+                elements.push(...layoutItems.slice(layoutIndex));
+            }
+            if (!this.isModal && !elements.includes(this)) {
+                elements.push(this);
+            }
+            await Promise.all(elements.map((element) => motion.stopAnimations(element)));
+        };
+        // 打开
+        // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
+        if (this.open) {
+            const hasUpdated = this.hasUpdated;
+            if (!hasUpdated) {
+                await this.updateComplete;
+                panel = this.panelRef.value;
+                overlay = this.overlayRef.value;
+            }
+            if (hasUpdated) {
+                const eventProceeded = this.emit('open', { cancelable: true });
+                if (!eventProceeded) {
+                    return;
+                }
+            }
+            await this.definedController.whenDefined();
+            this.style.display = 'block';
+            this.originalTrigger = document.activeElement;
+            if (this.isModal) {
+                this.modalHelper.activate();
+                if (!this.contained) {
+                    scroll.lockScreen(this, this.lockTarget);
+                }
+            }
+            await stopOldAnimations();
+            // 设置聚焦
+            requestAnimationFrame(() => {
+                const autoFocusTarget = this.querySelector('[autofocus]');
+                if (autoFocusTarget) {
+                    autoFocusTarget.focus({ preventScroll: true });
+                }
+                else {
+                    panel.focus({ preventScroll: true });
+                }
+            });
+            const duration = motion.getDuration(this, 'long2');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(motion.animateTo(overlay, [{ opacity: 0 }, { opacity: 1, offset: 0.3 }, { opacity: 1 }], {
+                    duration: hasUpdated ? duration : 0,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(this.getLockTargetAnimate(true, hasUpdated ? duration : 0));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            // 但首次渲染不执行动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(duration, easingEmphasized);
+                this.layoutManager.updateLayout(this);
+            }
+            // drawer 显示动画
+            animations.push(motion.animateTo(this.isModal ? panel : this, [
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+                { transform: 'translateX(0)' },
+            ], {
+                duration: hasUpdated ? duration : 0,
+                easing: easingEmphasized,
+            }));
+            await Promise.all(animations);
+            if (!this.open) {
+                return;
+            }
+            // 若位于 layout 中，则 drawer 动画完成后，移除 layout-main 的动画
+            if (this.isParentLayout && hasUpdated) {
+                setLayoutTransition(null);
+            }
+            if (hasUpdated) {
+                this.emit('opened');
+            }
+        }
+        else if (this.hasUpdated) {
+            // 关闭
+            const eventProceeded = this.emit('close', { cancelable: true });
+            if (!eventProceeded) {
+                return;
+            }
+            await this.definedController.whenDefined();
+            if (this.isModal) {
+                this.modalHelper.deactivate();
+            }
+            await stopOldAnimations();
+            const duration = motion.getDuration(this, 'short4');
+            const animations = [];
+            // 模态框 drawer，显示 overlay 动画
+            if (this.isModal) {
+                animations.push(motion.animateTo(overlay, [{ opacity: 1 }, { opacity: 0 }], {
+                    duration,
+                    easing: easingLinear,
+                }));
+            }
+            // 不位于 layout 中，父元素 padding 变化的动画
+            else if (!this.isParentLayout) {
+                animations.push(this.getLockTargetAnimate(false, duration));
+            }
+            // 若位于 layout 中，则 layout-main 的 padding 变化需要有和 drawer 相同的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(duration, easingEmphasized);
+                // 关闭动画开始时，drawer 的宽度不变。等到关闭动画结束，drawer 的宽度才变为 0
+                // 为了 layout-main 的动画能在关闭动画开始时就执行，强制调用 updateLayout 更新布局
+                this.layoutManager.updateLayout(this, { width: 0 });
+            }
+            // drawer 显示动画
+            animations.push(motion.animateTo(this.isModal ? panel : this, [
+                { transform: 'translateX(0)' },
+                { transform: `translateX(${isRight ? '' : '-'}100%)` },
+            ], { duration, easing: easingEmphasized }));
+            await Promise.all(animations);
+            if (this.open) {
+                return;
+            }
+            // 若位于 layout 中，则 drawer 动画结束后，移除 layout-main 的动画
+            if (this.isParentLayout) {
+                setLayoutTransition(null);
+            }
+            this.style.display = 'none';
+            if (this.isModal && !this.contained) {
+                scroll.unlockScreen(this, this.lockTarget);
+            }
+            // 抽屉栏关闭后，恢复焦点到原有的元素上
+            const trigger = this.originalTrigger;
+            if (get.isFunction(trigger?.focus)) {
+                setTimeout(() => trigger.focus());
+            }
+            this.emit('closed');
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.modalHelper = new scroll.Modal(this);
+        this.definedController.whenDefined().then(() => {
+            this.setObserveResize();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        scroll.unlockScreen(this, this.lockTarget);
+        this.observeResize?.unobserve();
+    }
+    firstUpdated(_changedProperties) {
+        super.firstUpdated(_changedProperties);
+        this.addEventListener('keydown', (event) => {
+            if (this.open &&
+                this.closeOnEsc &&
+                event.key === 'Escape' &&
+                this.isModal) {
+                event.stopPropagation();
+                this.open = false;
+            }
+        });
+    }
+    render() {
+        return get.ke `${when.nn(this.isModal, () => get.ke `<div ${ref.Kt(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref.Kt(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
+    }
+    setObserveResize() {
+        this.observeResize = observeResize.observeResize(this.contained ? this.parentElement : document.documentElement, () => {
+            const target = this.contained ? this.parentElement : undefined;
+            this.mobile = breakpoint(target).down('md');
+            // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
+            if (this.isParentLayout) {
+                this.layoutManager.updateLayout(this, {
+                    width: this.isModal ? 0 : undefined,
+                });
+            }
+        });
+    }
+    onOverlayClick() {
+        this.emit('overlay-click');
+        if (this.closeOnOverlayClick) {
+            this.open = false;
+        }
+    }
+    getLockTargetAnimate(open, duration) {
+        const paddingName = this.placement === 'right' ? 'paddingRight' : 'paddingLeft';
+        const panelWidth = get.$(this.panelRef.value).innerWidth() + 'px';
+        return motion.animateTo(this.lockTarget, [
+            { [paddingName]: open ? 0 : panelWidth },
+            { [paddingName]: open ? panelWidth : 0 },
+        ], {
+            duration,
+            easing: motion.getEasing(this, 'emphasized'),
+            fill: 'forwards',
+        });
+    }
+};
+NavigationDrawer.styles = [get.componentStyle, style];
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+    })
+], NavigationDrawer.prototype, "open", void 0);
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+    })
+], NavigationDrawer.prototype, "modal", void 0);
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+        attribute: 'close-on-esc',
+    })
+], NavigationDrawer.prototype, "closeOnEsc", void 0);
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+        attribute: 'close-on-overlay-click',
+    })
+], NavigationDrawer.prototype, "closeOnOverlayClick", void 0);
+get.__decorate([
+    get.n({ reflect: true })
+    // eslint-disable-next-line prettier/prettier
+], NavigationDrawer.prototype, "placement", void 0);
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+    })
+], NavigationDrawer.prototype, "contained", void 0);
+get.__decorate([
+    get.n({
+        type: Boolean,
+        reflect: true,
+        converter: get.booleanConverter,
+    })
+], NavigationDrawer.prototype, "mobile", void 0);
+get.__decorate([
+    watch.watch('contained', true)
+], NavigationDrawer.prototype, "onContainedChange", null);
+get.__decorate([
+    watch.watch('placement', true)
+], NavigationDrawer.prototype, "onPlacementChange", null);
+get.__decorate([
+    watch.watch('mobile', true),
+    watch.watch('modal', true)
+], NavigationDrawer.prototype, "onMobileChange", null);
+get.__decorate([
+    watch.watch('open')
+], NavigationDrawer.prototype, "onOpenChange", null);
+NavigationDrawer = get.__decorate([
+    get.t('mdui-navigation-drawer')
+], NavigationDrawer);

package/dist/cjs/{index-82359396.js → index-8ef53368.js}

@@ -21,7 +21,7 @@ function _interopNamespace(e) {
 }
 
 const NAMESPACE = 'urnovl-web-components';
-const BUILD = /* urnovl-web-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: false, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
+const BUILD = /* urnovl-web-components */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: true, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: false, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: true, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: true, watchCallback: true };
 
 /*
  Stencil Client Platform v4.23.0 | MIT Licensed | https://stenciljs.com
@@ -97,6 +97,22 @@ var plt = {
   rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  let supportsListenerOptions2 = false;
+  try {
+    doc.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -821,6 +837,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
   }
   let maybePromise;
   if (isInitialLoad) {
+    {
+      hostRef.$flags$ |= 256 /* isListenReady */;
+      if (hostRef.$queuedListeners$) {
+        hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event));
+        hostRef.$queuedListeners$ = void 0;
+      }
+    }
     {
       maybePromise = safeCall(instance, "componentWillLoad");
     }
@@ -1226,6 +1249,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1243,6 +1267,12 @@ var disconnectInstance = (instance) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1282,6 +1312,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       {
         cmpMeta.$attrsToReflect$ = [];
       }
@@ -1313,9 +1346,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
         }
         connectedCallback() {
-          getHostRef(this);
+          const hostRef = getHostRef(this);
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -1370,6 +1404,35 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners) {
+    listeners.map(([flags, name, method]) => {
+      const target = elm;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e);
+  }
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;