@pod-os/elements 0.11.1-7f3678c.0 → 0.11.1-e89c280.0

package/dist/cjs/{index-9fca5d6f.js → index-c82a0027.js}

@@ -61,6 +61,7 @@ const findClosestIonContent = (el) => {
  * Scrolls to the top of the element. If an `ion-content` is found, it will scroll
  * using the public API `scrollToTop` with a duration.
  */
+// TODO(FW-2832): type
 const scrollToTop = (el, durationMs) => {
   if (isIonContent(el)) {
     const content = el;

package/dist/cjs/{index-4018a65a.js → index-db5db51f.js}

@@ -84,6 +84,18 @@ const isComplexType = (o) => {
     o = typeof o;
     return o === 'object' || o === 'function';
 };
+/**
+ * Helper method for querying a `meta` tag that contains a nonce value
+ * out of a DOM's head.
+ *
+ * @param doc The DOM containing the `head` to query against
+ * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag
+ * exists or the tag has no content.
+ */
+function queryNonceMetaTagContent(doc) {
+    var _a, _b, _c;
+    return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;
+}
 /**
  * Production h() function based on Preact by
  * Jason Miller (@developit)
@@ -161,6 +173,14 @@ const h = (nodeName, vnodeData, ...children) => {
     }
     return vnode;
 };
+/**
+ * A utility function for creating a virtual DOM node from a tag and some
+ * possible text content.
+ *
+ * @param tag the tag for this element
+ * @param text possible text content for the node
+ * @returns a newly-minted virtual DOM node
+ */
 const newVNode = (tag, text) => {
     const vnode = {
         $flags$: 0,
@@ -181,6 +201,12 @@ const newVNode = (tag, text) => {
     return vnode;
 };
 const Host = {};
+/**
+ * Check whether a given node is a Host node or not
+ *
+ * @param node the virtual DOM node to check
+ * @returns whether it's a Host node or not
+ */
 const isHost = (node) => node && node.$tag$ === Host;
 /**
  * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.
@@ -193,6 +219,13 @@ const vdomFnUtils = {
     forEach: (children, cb) => children.map(convertToPublic).forEach(cb),
     map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),
 };
+/**
+ * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a
+ * friendlier public interface (hence, 'convertToPublic').
+ *
+ * @param node the virtual DOM node to convert
+ * @returns a converted child node
+ */
 const convertToPublic = (node) => ({
     vattrs: node.$attrs$,
     vchildren: node.$children$,
@@ -201,6 +234,15 @@ const convertToPublic = (node) => ({
     vtag: node.$tag$,
     vtext: node.$text$,
 });
+/**
+ * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in
+ * order to use the resulting object in the virtual DOM. The initial object was
+ * likely created as part of presenting a public API, so converting it back
+ * involved making it 'private' again (hence, `convertToPrivate`).
+ *
+ * @param node the child node to convert
+ * @returns a converted virtual DOM node
+ */
 const convertToPrivate = (node) => {
     if (typeof node.vtag === 'function') {
         const vnodeData = Object.assign({}, node.vattrs);
@@ -315,6 +357,7 @@ const registerStyle = (scopeId, cssText, allowCS) => {
     styles.set(scopeId, style);
 };
 const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
+    var _a;
     let scopeId = getScopeId(cmpMeta, mode);
     const style = styles.get(scopeId);
     // if an element is NOT connected then getRootNode() will return the wrong root node
@@ -334,6 +377,11 @@ const addStyle = (styleContainerNode, cmpMeta, mode, hostElm) => {
                         styleElm = doc.createElement('style');
                         styleElm.innerHTML = style;
                     }
+                    // Apply CSP nonce to the style tag if it exists
+                    const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+                    if (nonce != null) {
+                        styleElm.setAttribute('nonce', nonce);
+                    }
                     styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
                 }
                 if (appliedStyles) {
@@ -670,6 +718,21 @@ const putBackInOriginalLocation = (parentElm, recursive) => {
     }
     plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;
 };
+/**
+ * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and
+ * add them to the DOM in the appropriate place.
+ *
+ * @param parentElm the DOM node which should be used as a parent for the new
+ * DOM nodes
+ * @param before a child of the `parentElm` which the new children should be
+ * inserted before (optional)
+ * @param parentVNode the parent virtual DOM node
+ * @param vnodes the new child virtual DOM nodes to produce DOM nodes for
+ * @param startIdx the index in the child virtual DOM nodes at which to start
+ * creating DOM nodes (inclusive)
+ * @param endIdx the index in the child virtual DOM nodes at which to stop
+ * creating DOM nodes (inclusive)
+ */
 const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {
     let containerElm = ((parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);
     let childNode;
@@ -686,6 +749,19 @@ const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) =>
         }
     }
 };
+/**
+ * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.
+ * This can be used to, for instance, clean up after a list of children which
+ * should no longer be shown.
+ *
+ * This function also handles some of Stencil's slot relocation logic.
+ *
+ * @param vnodes a list of virtual DOM nodes to remove
+ * @param startIdx the index at which to start removing nodes (inclusive)
+ * @param endIdx the index at which to stop removing nodes (inclusive)
+ * @param vnode a VNode
+ * @param elm an element
+ */
 const removeVnodes = (vnodes, startIdx, endIdx, vnode, elm) => {
     for (; startIdx <= endIdx; ++startIdx) {
         if ((vnode = vnodes[startIdx])) {
@@ -964,7 +1040,8 @@ const updateChildren = (parentElm, oldCh, newVNode, newCh) => {
  *
  * So, in other words, if `key` attrs are not set on VNodes which may be
  * changing order within a `children` array or something along those lines then
- * we could obtain a false positive and then have to do needless re-rendering.
+ * we could obtain a false negative and then have to do needless re-rendering
+ * (i.e. we'd say two VNodes aren't equal when in fact they should be).
  *
  * @param leftVNode the first VNode to check
  * @param rightVNode the second VNode to check
@@ -1192,6 +1269,18 @@ const callNodeRefs = (vNode) => {
         vNode.$children$ && vNode.$children$.map(callNodeRefs);
     }
 };
+/**
+ * The main entry point for Stencil's virtual DOM-based rendering engine
+ *
+ * Given a {@link d.HostRef} container and some virtual DOM nodes, this
+ * function will handle creating a virtual DOM tree with a single root, patching
+ * the current virtual DOM tree onto an old one (if any), dealing with slot
+ * relocation, and reflecting attributes.
+ *
+ * @param hostRef data needed to root and render the virtual DOM tree, such as
+ * the DOM node into which it should be rendered.
+ * @param renderFnResults the virtual DOM nodes to be rendered
+ */
 const renderVdom = (hostRef, renderFnResults) => {
     const hostElm = hostRef.$hostElement$;
     const cmpMeta = hostRef.$cmpMeta$;
@@ -1816,6 +1905,7 @@ const disconnectedCallback = (elm) => {
     }
 };
 const bootstrapLazy = (lazyBundles, options = {}) => {
+    var _a;
     const endBootstrap = createTime();
     const cmpTags = [];
     const exclude = options.exclude || [];
@@ -1901,6 +1991,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
     {
         visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
         visibilityStyle.setAttribute('data-styles', '');
+        // Apply CSP nonce to the style tag if it exists
+        const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
+        if (nonce != null) {
+            visibilityStyle.setAttribute('nonce', nonce);
+        }
         head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
     }
     // Process deferred connectedCallbacks now all components have been registered
@@ -1954,6 +2049,13 @@ const getHostListenerTarget = (elm, flags) => {
 };
 // prettier-ignore
 const hostListenerOpts = (flags) => (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;
+/**
+ * Assigns the given value to the nonce property on the runtime platform object.
+ * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.
+ * @param nonce The value to be assigned to the platform nonce property.
+ * @returns void
+ */
+const setNonce = (nonce) => (plt.$nonce$ = nonce);
 const hostRefs = /*@__PURE__*/ new WeakMap();
 const getHostRef = (ref) => hostRefs.get(ref);
 const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);
@@ -2083,5 +2185,6 @@ exports.promiseResolve = promiseResolve;
 exports.readTask = readTask;
 exports.registerInstance = registerInstance;
 exports.setMode = setMode;
+exports.setNonce = setNonce;
 exports.setPlatformHelpers = setPlatformHelpers;
 exports.writeTask = writeTask;

package/dist/cjs/{input-shims-427999f7.js → input-shims-444cce9d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-const index = require('./index-9fca5d6f.js');
+const index = require('./index-c82a0027.js');
 const helpers = require('./helpers-cb08f5ae.js');
 require('./index-b2a479e4.js');
 
@@ -19,6 +19,7 @@ const relocateInput = (componentEl, inputEl, shouldRelocate, inputRelativeY = 0,
     removeClone(componentEl, inputEl);
   }
 };
+// TODO(FW-2832): type
 const isFocused = (input) => {
   return input === input.getRootNode().activeElement;
 };
@@ -92,7 +93,7 @@ const enableHideCaretOnScroll = (componentEl, inputEl, scrollEl) => {
   return () => {
     helpers.removeEventListener(scrollEl, 'ionScrollStart', hideCaret);
     helpers.removeEventListener(scrollEl, 'ionScrollEnd', showCaret);
-    inputEl.addEventListener('ionBlur', onBlur);
+    inputEl.removeEventListener('blur', onBlur);
   };
 };
 
@@ -157,7 +158,8 @@ const SCROLL_ASSIST_SPEED = 0.3;
 const getScrollData = (componentEl, contentEl, keyboardHeight) => {
   var _a;
   const itemEl = (_a = componentEl.closest('ion-item,[ion-item]')) !== null && _a !== void 0 ? _a : componentEl;
-  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight);
+  return calcScrollData(itemEl.getBoundingClientRect(), contentEl.getBoundingClientRect(), keyboardHeight, componentEl.ownerDocument.defaultView.innerHeight // TODO(FW-2832): type
+  );
 };
 const calcScrollData = (inputRect, contentRect, keyboardHeight, platformHeight) => {
   // compute input's Y values relative to the body
@@ -320,6 +322,7 @@ const hasPointerMoved = (threshold, startCoord, endCoord) => {
 const PADDING_TIMER_KEY = '$ionPaddingTimer';
 const enableScrollPadding = (keyboardHeight) => {
   const doc = document;
+  // TODO(FW-2832): types
   const onFocusin = (ev) => {
     setScrollPadding(ev.target, keyboardHeight);
   };
@@ -440,6 +443,7 @@ const startInputShims = (config, platform) => {
   for (const input of inputs) {
     registerInput(input);
   }
+  // TODO(FW-2832): types
   doc.addEventListener('ionInputDidLoad', ((ev) => {
     registerInput(ev.detail);
   }));

package/dist/cjs/ion-accordion-group.cjs.entry.js

@@ -2,8 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4018a65a.js');
-const ionicGlobal = require('./ionic-global-3ede5d2d.js');
+const index = require('./index-db5db51f.js');
+const ionicGlobal = require('./ionic-global-66c719bf.js');
 
 const accordionGroupIosCss = ":host{display:block}:host(.accordion-group-expand-inset){margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.accordion-group-expand-inset){margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanding),:host(.accordion-group-expand-inset) ::slotted(ion-accordion.accordion-expanded){border-bottom:none}";
 

package/dist/cjs/ion-accordion.cjs.entry.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-4018a65a.js');
-const index$1 = require('./index-731691ca.js');
-const ionicGlobal = require('./ionic-global-3ede5d2d.js');
+const index = require('./index-db5db51f.js');
+const index$1 = require('./index-4e78c1d2.js');
+const ionicGlobal = require('./ionic-global-66c719bf.js');
 const helpers = require('./helpers-cb08f5ae.js');
 
 const accordionIosCss = ":host{display:block;position:relative;width:100%;background-color:var(--ion-background-color, #ffffff);overflow:hidden;z-index:0}:host(.accordion-expanding) ::slotted(ion-item[slot=header]),:host(.accordion-expanded) ::slotted(ion-item[slot=header]){--border-width:0px}:host(.accordion-animated){transition:all 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}:host(.accordion-animated) #content{transition:max-height 300ms cubic-bezier(0.25, 0.8, 0.5, 1)}#content{overflow:hidden;will-change:max-height}:host(.accordion-collapsing) #content{max-height:0 !important}:host(.accordion-collapsed) #content{display:none}:host(.accordion-expanding) #content{max-height:0}:host(.accordion-disabled) #header,:host(.accordion-readonly) #header,:host(.accordion-disabled) #content,:host(.accordion-readonly) #content{pointer-events:none}:host(.accordion-disabled) #header,:host(.accordion-disabled) #content{opacity:0.4}@media (prefers-reduced-motion: reduce){:host,#content{transition:none !important}}:host(.accordion-next) ::slotted(ion-item[slot=header]){--border-width:0.55px 0px 0.55px 0px}";

package/dist/cjs/ion-action-sheet_3.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-4018a65a.js');
-const ionicGlobal = require('./ionic-global-3ede5d2d.js');
+const index$1 = require('./index-db5db51f.js');
+const ionicGlobal = require('./ionic-global-66c719bf.js');
 const haptic = require('./haptic-7358cb0b.js');
-const index = require('./index-643851c6.js');
-const overlays = require('./overlays-28664090.js');
+const index = require('./index-737a39be.js');
+const overlays = require('./overlays-56226483.js');
 const theme = require('./theme-fc63803b.js');
-const animation = require('./animation-9bea118f.js');
-const index$2 = require('./index-7d56774d.js');
+const animation = require('./animation-ca5a256a.js');
+const index$2 = require('./index-39630668.js');
 require('./gesture-controller-00a6b02f.js');
 require('./hardware-back-button-25372ec7.js');
 require('./helpers-cb08f5ae.js');
@@ -317,7 +317,7 @@ const ActionSheet = class {
       }, class: Object.assign(Object.assign({ [mode]: true }, theme.getClassMap(this.cssClass)), { 'overlay-hidden': true, 'action-sheet-translucent': this.translucent }), onIonActionSheetWillDismiss: this.dispatchCancelHandler, onIonBackdropTap: this.onBackdropTap }), index$1.h("ion-backdrop", { tappable: this.backdropDismiss }), index$1.h("div", { tabindex: "0" }), index$1.h("div", { class: "action-sheet-wrapper ion-overlay-wrapper", ref: (el) => (this.wrapperEl = el) }, index$1.h("div", { class: "action-sheet-container" }, index$1.h("div", { class: "action-sheet-group", ref: (el) => (this.groupEl = el) }, header !== undefined && (index$1.h("div", { id: headerID, class: {
         'action-sheet-title': true,
         'action-sheet-has-sub-title': this.subHeader !== undefined,
-      } }, header, this.subHeader && index$1.h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index$1.h("button", { type: "button", id: b.id, class: buttonClass$1(b), onClick: () => this.buttonClick(b) }, index$1.h("span", { class: "action-sheet-button-inner" }, b.icon && index$1.h("ion-icon", { icon: b.icon, lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index$1.h("ion-ripple-effect", null))))), cancelButton && (index$1.h("div", { class: "action-sheet-group action-sheet-group-cancel" }, index$1.h("button", { type: "button", class: buttonClass$1(cancelButton), onClick: () => this.buttonClick(cancelButton) }, index$1.h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && index$1.h("ion-icon", { icon: cancelButton.icon, lazy: false, class: "action-sheet-icon" }), cancelButton.text), mode === 'md' && index$1.h("ion-ripple-effect", null)))))), index$1.h("div", { tabindex: "0" })));
+      } }, header, this.subHeader && index$1.h("div", { class: "action-sheet-sub-title" }, this.subHeader))), buttons.map((b) => (index$1.h("button", { type: "button", id: b.id, class: buttonClass$1(b), onClick: () => this.buttonClick(b) }, index$1.h("span", { class: "action-sheet-button-inner" }, b.icon && index$1.h("ion-icon", { icon: b.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" }), b.text), mode === 'md' && index$1.h("ion-ripple-effect", null))))), cancelButton && (index$1.h("div", { class: "action-sheet-group action-sheet-group-cancel" }, index$1.h("button", { type: "button", class: buttonClass$1(cancelButton), onClick: () => this.buttonClick(cancelButton) }, index$1.h("span", { class: "action-sheet-button-inner" }, cancelButton.icon && (index$1.h("ion-icon", { icon: cancelButton.icon, "aria-hidden": "true", lazy: false, class: "action-sheet-icon" })), cancelButton.text), mode === 'md' && index$1.h("ion-ripple-effect", null)))))), index$1.h("div", { tabindex: "0" })));
   }
   get el() { return index$1.getElement(this); }
 };