@zanichelli/albe-web-components 6.3.3 → 6.4.0

package/dist/collection/collection-manifest.json

@@ -16,6 +16,7 @@
     "./components/indicators/z-stepper/index.js",
     "./components/indicators/z-stepper-item/index.js",
     "./components/inputs/z-input/index.js",
+    "./snowflakes/myz/list/z-myz-list-item/index.js",
     "./components/inputs/z-combobox/index.js",
     "./components/inputs/z-input-message/index.js",
     "./components/inputs/z-select/index.js",
@@ -84,7 +85,6 @@
     "./snowflakes/myz/card/z-myz-card-info/index.js",
     "./snowflakes/myz/card/z-myz-card-list/index.js",
     "./snowflakes/myz/list/z-myz-list/index.js",
-    "./snowflakes/myz/list/z-myz-list-item/index.js",
     "./snowflakes/myz/pocket/z-messages-pocket/index.js",
     "./snowflakes/myz/pocket/z-pocket/index.js",
     "./snowflakes/myz/pocket/z-pocket-body/index.js",
@@ -96,7 +96,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.18.1",
+    "version": "2.18.0",
     "typescriptVersion": "4.7.4"
   },
   "collections": [],

package/dist/collection/components/inputs/z-combobox/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { InputType, KeyboardKeyCode } from "../../../beans";
+import { InputType, KeyboardKeyCode, ListDividerType } from "../../../beans";
 import { handleKeyboardSubmit } from "../../../utils/utils";
 export class ZCombobox {
   constructor() {
@@ -117,6 +117,9 @@ export class ZCombobox {
     }
     return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
   }
+  renderItem(item, index, length) {
+    return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index !== length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+  }
   renderList(items) {
     if (!items) {
       return;
@@ -124,10 +127,27 @@ export class ZCombobox {
     if (!items.length && this.searchValue) {
       return this.renderNoSearchResults();
     }
+    if (this.hasgroupitems) {
+      return this.renderGroups(this.itemsList);
+    }
     return (h("ul", null, items.map((item, i) => {
-      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter })));
+      return this.renderItem(item, i, items.length);
     })));
   }
+  renderGroups(items) {
+    const newData = items.reduce((group, item, index) => {
+      var _a;
+      const { category } = item;
+      const zListItem = this.renderItem(item, index, items.length);
+      group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
+      group[category].push(zListItem);
+      return group;
+    }, {});
+    const listGroups = Object.entries(newData).map(([key, value]) => {
+      return (h("z-list-group", { "divider-type": ListDividerType.ELEMENT }, h("z-body", { class: "z-list-group-title", level: 3, slot: "header-title", variant: "semibold" }, key), value.map((item) => item)));
+    });
+    return h("ul", null, listGroups);
+  }
   renderNoSearchResults() {
     return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
   }
@@ -437,6 +457,23 @@ export class ZCombobox {
         "attribute": "maxcheckableitems",
         "reflect": false,
         "defaultValue": "0"
+      },
+      "hasgroupitems": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "group items by category"
+        },
+        "attribute": "hasgroupitems",
+        "reflect": false
       }
     };
   }

package/dist/collection/components/inputs/z-select/index.js

@@ -221,26 +221,29 @@ export class ZSelect {
         readonly: this.readonly,
         filled: !!this.selectedItem,
         [`input-${this.status}`]: !this.isOpen && !!this.status,
-      } }, this.hasGroupItems ? this.renderSelectGroupItems() : this.renderSelectUlItems()))));
+      } }, this.renderSelectUlItems()))));
+  }
+  renderItem(item, key, lastItem) {
+    return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
   }
   renderSelectUlItems() {
     if (!this.itemsList.length) {
       return this.renderNoSearchResults();
     }
+    if (this.hasGroupItems) {
+      return this.renderSelectGroupItems();
+    }
     return this.itemsList.map((item, key, array) => {
       const lastItem = array.length === key + 1;
-      return (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${key}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, key) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      return this.renderItem(item, key, lastItem);
     });
   }
   renderSelectGroupItems() {
-    if (!this.itemsList.length) {
-      return this.renderNoSearchResults();
-    }
     const newData = this.itemsList.reduce((group, item, index, array) => {
       var _a;
       const { category } = item;
       const lastItem = array.length === index + 1;
-      const zListItem = (h("z-list-element", { clickable: !item.disabled, disabled: item.disabled, dividerType: lastItem ? ListDividerType.HEADER : ListDividerType.ELEMENT, role: "option", tabindex: item.disabled || !this.isOpen ? -1 : 0, "aria-selected": !!item.selected, id: `${this.htmlid}_${index}`, onClickItem: () => this.selectItem(item, true), onKeyDown: (e) => this.arrowsSelectNav(e, index) }, h("span", { class: { selected: !!item.selected }, innerHTML: item.name })));
+      const zListItem = this.renderItem(item, index, lastItem);
       group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
       group[category].push(zListItem);
       return group;

package/dist/collection/components/z-offcanvas/styles.css

@@ -2,7 +2,6 @@
   --z-offcanvas--container-width: 375px;
   --z-offcanvas--top-space: 0;
 
-  z-index: 1000;
   display: none;
   min-width: 100%;
   height: 100%;
@@ -12,7 +11,6 @@
 }
 
 .canvas-container {
-  z-index: 1010;
   display: flex;
   overflow: -moz-scrollbars-none;
   overflow: hidden;
@@ -59,6 +57,7 @@
 
 :host([variant="overlay"]) {
   position: fixed;
+  z-index: 1000;
   top: var(--z-offcanvas--top-space);
   right: 0;
   bottom: 0;
@@ -66,6 +65,10 @@
   height: calc(100% - var(--z-offcanvas--top-space));
 }
 
+:host([variant="overlay"]) > .canvas-container {
+  z-index: 1010;
+}
+
 :host([variant="overlay"]) .canvas-background {
   position: absolute;
   left: 0;

package/dist/esm/{index-a2ca4b97.js → index-3517583d.js}

@@ -1,13 +1,5 @@
 const NAMESPACE = 'web-components-library';
 
-/**
- * Virtual DOM patching algorithm based on Snabbdom by
- * Simon Friis Vindum (@paldepind)
- * Licensed under the MIT License
- * https://github.com/snabbdom/snabbdom/blob/master/LICENSE
- *
- * Modified for Stencil's renderer and slot projection
- */
 let scopeId;
 let contentRef;
 let hostTagName;
@@ -16,6 +8,67 @@ let checkSlotFallbackVisibility = false;
 let checkSlotRelocate = false;
 let isSvgMode = false;
 let queuePending = false;
+const win = typeof window !== 'undefined' ? window : {};
+const doc = win.document || { head: {} };
+const plt = {
+    $flags$: 0,
+    $resourcesUrl$: '',
+    jmp: (h) => h(),
+    raf: (h) => requestAnimationFrame(h),
+    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
+    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
+    ce: (eventName, opts) => new CustomEvent(eventName, opts),
+};
+const promiseResolve = (v) => Promise.resolve(v);
+const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
+        try {
+            new CSSStyleSheet();
+            return typeof new CSSStyleSheet().replaceSync === 'function';
+        }
+        catch (e) { }
+        return false;
+    })()
+    ;
+const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+    if (listeners) {
+        listeners.map(([flags, name, method]) => {
+            const target = getHostListenerTarget(elm, flags) ;
+            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));
+        });
+    }
+};
+const hostListenerProxy = (hostRef, methodName) => (ev) => {
+    try {
+        {
+            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
+                // instance is ready, let's call it's member method for this event
+                hostRef.$lazyInstance$[methodName](ev);
+            }
+            else {
+                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+            }
+        }
+    }
+    catch (e) {
+        consoleError(e);
+    }
+};
+const getHostListenerTarget = (elm, flags) => {
+    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
+        return doc;
+    if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
+        return win;
+    if (flags & 16 /* LISTENER_FLAGS.TargetBody */)
+        return doc.body;
+    return elm;
+};
+// prettier-ignore
+const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
+const XLINK_NS = 'http://www.w3.org/1999/xlink';
 const createTime = (fnName, tagName = '') => {
     {
         return () => {
@@ -30,8 +83,79 @@ const uniqueTime = (key, measureText) => {
         };
     }
 };
-const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';
-const XLINK_NS = 'http://www.w3.org/1999/xlink';
+const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
+const registerStyle = (scopeId, cssText, allowCS) => {
+    let style = styles.get(scopeId);
+    if (supportsConstructableStylesheets && allowCS) {
+        style = (style || new CSSStyleSheet());
+        if (typeof style === 'string') {
+            style = cssText;
+        }
+        else {
+            style.replaceSync(cssText);
+        }
+    }
+    else {
+        style = cssText;
+    }
+    styles.set(scopeId, style);
+};
+const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    let scopeId = getScopeId(cmpMeta);
+    const style = styles.get(scopeId);
+    // if an element is NOT connected then getRootNode() will return the wrong root node
+    // so the fallback is to always use the document for the root node in those cases
+    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
+    if (style) {
+        if (typeof style === 'string') {
+            styleContainerNode = styleContainerNode.head || styleContainerNode;
+            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
+            let styleElm;
+            if (!appliedStyles) {
+                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
+            }
+            if (!appliedStyles.has(scopeId)) {
+                {
+                    {
+                        styleElm = doc.createElement('style');
+                        styleElm.innerHTML = style;
+                    }
+                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
+                }
+                if (appliedStyles) {
+                    appliedStyles.add(scopeId);
+                }
+            }
+        }
+        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
+            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
+        }
+    }
+    return scopeId;
+};
+const attachStyles = (hostRef) => {
+    const cmpMeta = hostRef.$cmpMeta$;
+    const elm = hostRef.$hostElement$;
+    const flags = cmpMeta.$flags$;
+    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
+    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
+    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
+        // only required when we're NOT using native shadow dom (slot)
+        // or this browser doesn't support native shadow dom
+        // and this host element was NOT created with SSR
+        // let's pick out the inner content for slot projection
+        // create a node to represent where the original
+        // content was first placed, which is useful later on
+        // DOM WRITE!!
+        elm['s-sc'] = scopeId;
+        elm.classList.add(scopeId + '-h');
+        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
+            elm.classList.add(scopeId + '-s');
+        }
+    }
+    endAttachStyles();
+};
+const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 /**
  * Default style mode id
  */
@@ -146,152 +270,6 @@ const newVNode = (tag, text) => {
 };
 const Host = {};
 const isHost = (node) => node && node.$tag$ === Host;
-/**
- * Parse a new property value for a given property type.
- *
- * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
- * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
- *   1. `any`, the type given to `propValue` in the function signature
- *   2. the type stored from `propType`.
- *
- * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
- *
- * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
- * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
- * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
- * ```tsx
- * <my-cmp prop-val={0}></my-cmp>
- * ```
- *
- * HTML prop values on the other hand, will always a string
- *
- * @param propValue the new value to coerce to some type
- * @param propType the type of the prop, expressed as a binary number
- * @returns the parsed/coerced value
- */
-const parsePropertyValue = (propValue, propType) => {
-    // ensure this value is of the correct prop type
-    if (propValue != null && !isComplexType(propValue)) {
-        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
-            // per the HTML spec, any string value means it is a boolean true value
-            // but we'll cheat here and say that the string "false" is the boolean false
-            return propValue === 'false' ? false : propValue === '' || !!propValue;
-        }
-        if (propType & 2 /* MEMBER_FLAGS.Number */) {
-            // force it to be a number
-            return parseFloat(propValue);
-        }
-        if (propType & 1 /* MEMBER_FLAGS.String */) {
-            // could have been passed as a number or boolean
-            // but we still want it as a string
-            return String(propValue);
-        }
-        // redundant return here for better minification
-        return propValue;
-    }
-    // not sure exactly what type we want
-    // so no need to change to a different type
-    return propValue;
-};
-const getElement = (ref) => (getHostRef(ref).$hostElement$ );
-const createEvent = (ref, name, flags) => {
-    const elm = getElement(ref);
-    return {
-        emit: (detail) => {
-            return emitEvent(elm, name, {
-                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
-                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
-                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
-                detail,
-            });
-        },
-    };
-};
-/**
- * Helper function to create & dispatch a custom Event on a provided target
- * @param elm the target of the Event
- * @param name the name to give the custom Event
- * @param opts options for configuring a custom Event
- * @returns the custom Event
- */
-const emitEvent = (elm, name, opts) => {
-    const ev = plt.ce(name, opts);
-    elm.dispatchEvent(ev);
-    return ev;
-};
-const rootAppliedStyles = /*@__PURE__*/ new WeakMap();
-const registerStyle = (scopeId, cssText, allowCS) => {
-    let style = styles.get(scopeId);
-    if (supportsConstructableStylesheets && allowCS) {
-        style = (style || new CSSStyleSheet());
-        if (typeof style === 'string') {
-            style = cssText;
-        }
-        else {
-            style.replaceSync(cssText);
-        }
-    }
-    else {
-        style = cssText;
-    }
-    styles.set(scopeId, style);
-};
-const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
-    let scopeId = getScopeId(cmpMeta);
-    const style = styles.get(scopeId);
-    // if an element is NOT connected then getRootNode() will return the wrong root node
-    // so the fallback is to always use the document for the root node in those cases
-    styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;
-    if (style) {
-        if (typeof style === 'string') {
-            styleContainerNode = styleContainerNode.head || styleContainerNode;
-            let appliedStyles = rootAppliedStyles.get(styleContainerNode);
-            let styleElm;
-            if (!appliedStyles) {
-                rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));
-            }
-            if (!appliedStyles.has(scopeId)) {
-                {
-                    {
-                        styleElm = doc.createElement('style');
-                        styleElm.innerHTML = style;
-                    }
-                    styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
-                }
-                if (appliedStyles) {
-                    appliedStyles.add(scopeId);
-                }
-            }
-        }
-        else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
-            styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
-        }
-    }
-    return scopeId;
-};
-const attachStyles = (hostRef) => {
-    const cmpMeta = hostRef.$cmpMeta$;
-    const elm = hostRef.$hostElement$;
-    const flags = cmpMeta.$flags$;
-    const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);
-    const scopeId = addStyle(elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta);
-    if (flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {
-        // only required when we're NOT using native shadow dom (slot)
-        // or this browser doesn't support native shadow dom
-        // and this host element was NOT created with SSR
-        // let's pick out the inner content for slot projection
-        // create a node to represent where the original
-        // content was first placed, which is useful later on
-        // DOM WRITE!!
-        elm['s-sc'] = scopeId;
-        elm.classList.add(scopeId + '-h');
-        if (flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {
-            elm.classList.add(scopeId + '-s');
-        }
-    }
-    endAttachStyles();
-};
-const getScopeId = (cmp, mode) => 'sc-' + (cmp.$tagName$);
 /**
  * Production setAccessor() function based on Preact by
  * Jason Miller (@developit)
@@ -1216,6 +1194,32 @@ const renderVdom = (hostRef, renderFnResults) => {
         relocateNodes.length = 0;
     }
 };
+const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
+                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
+                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
+                detail,
+            });
+        },
+    };
+};
+/**
+ * Helper function to create & dispatch a custom Event on a provided target
+ * @param elm the target of the Event
+ * @param name the name to give the custom Event
+ * @param opts options for configuring a custom Event
+ * @returns the custom Event
+ */
+const emitEvent = (elm, name, opts) => {
+    const ev = plt.ce(name, opts);
+    elm.dispatchEvent(ev);
+    return ev;
+};
 const attachToAncestor = (hostRef, ancestorComponent) => {
     if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent['s-p']) {
         ancestorComponent['s-p'].push(new Promise((r) => (hostRef.$onRenderResolve$ = r)));
@@ -1398,6 +1402,53 @@ const then = (promise, thenFn) => {
 };
 const addHydratedFlag = (elm) => elm.classList.add('hydrated')
     ;
+/**
+ * Parse a new property value for a given property type.
+ *
+ * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,
+ * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:
+ *   1. `any`, the type given to `propValue` in the function signature
+ *   2. the type stored from `propType`.
+ *
+ * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.
+ *
+ * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to
+ * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is
+ * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.
+ * ```tsx
+ * <my-cmp prop-val={0}></my-cmp>
+ * ```
+ *
+ * HTML prop values on the other hand, will always a string
+ *
+ * @param propValue the new value to coerce to some type
+ * @param propType the type of the prop, expressed as a binary number
+ * @returns the parsed/coerced value
+ */
+const parsePropertyValue = (propValue, propType) => {
+    // ensure this value is of the correct prop type
+    if (propValue != null && !isComplexType(propValue)) {
+        if (propType & 4 /* MEMBER_FLAGS.Boolean */) {
+            // per the HTML spec, any string value means it is a boolean true value
+            // but we'll cheat here and say that the string "false" is the boolean false
+            return propValue === 'false' ? false : propValue === '' || !!propValue;
+        }
+        if (propType & 2 /* MEMBER_FLAGS.Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
+        if (propType & 1 /* MEMBER_FLAGS.String */) {
+            // could have been passed as a number or boolean
+            // but we still want it as a string
+            return String(propValue);
+        }
+        // redundant return here for better minification
+        return propValue;
+    }
+    // not sure exactly what type we want
+    // so no need to change to a different type
+    return propValue;
+};
 const getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName);
 const setValue = (ref, propName, newVal, cmpMeta) => {
     // check our new property value against our internal value
@@ -1441,16 +1492,6 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
         }
     }
 };
-/**
- * Attach a series of runtime constructs to a compiled Stencil component
- * constructor, including getters and setters for the `@Prop` and `@State`
- * decorators, callbacks for when attributes change, and so on.
- *
- * @param Cstr the constructor for a component that we need to process
- * @param cmpMeta metadata collected previously about the component
- * @param flags a number used to store a series of bit flags
- * @returns a reference to the same constructor passed in (but now mutated)
- */
 const proxyComponent = (Cstr, cmpMeta, flags) => {
     if (cmpMeta.$members$) {
         if (Cstr.watchers) {
@@ -1814,44 +1855,6 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     // Fallback appLoad event
     endBootstrap();
 };
-const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
-    if (listeners) {
-        listeners.map(([flags, name, method]) => {
-            const target = getHostListenerTarget(elm, flags) ;
-            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));
-        });
-    }
-};
-const hostListenerProxy = (hostRef, methodName) => (ev) => {
-    try {
-        {
-            if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {
-                // instance is ready, let's call it's member method for this event
-                hostRef.$lazyInstance$[methodName](ev);
-            }
-            else {
-                (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
-            }
-        }
-    }
-    catch (e) {
-        consoleError(e);
-    }
-};
-const getHostListenerTarget = (elm, flags) => {
-    if (flags & 4 /* LISTENER_FLAGS.TargetDocument */)
-        return doc;
-    if (flags & 8 /* LISTENER_FLAGS.TargetWindow */)
-        return win;
-    if (flags & 16 /* LISTENER_FLAGS.TargetBody */)
-        return doc.body;
-    return elm;
-};
-// prettier-ignore
-const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -2231,27 +2234,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
     }, consoleError);
 };
 const styles = /*@__PURE__*/ new Map();
-const win = typeof window !== 'undefined' ? window : {};
-const doc = win.document || { head: {} };
-const plt = {
-    $flags$: 0,
-    $resourcesUrl$: '',
-    jmp: (h) => h(),
-    raf: (h) => requestAnimationFrame(h),
-    ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),
-    rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
-    ce: (eventName, opts) => new CustomEvent(eventName, opts),
-};
-const promiseResolve = (v) => Promise.resolve(v);
-const supportsConstructableStylesheets = /*@__PURE__*/ (() => {
-        try {
-            new CSSStyleSheet();
-            return typeof new CSSStyleSheet().replaceSync === 'function';
-        }
-        catch (e) { }
-        return false;
-    })()
-    ;
 const queueDomReads = [];
 const queueDomWrites = [];
 const queueTask = (queue, write) => (cb) => {