UNPKG

@trimble-oss/moduswebcomponents

Version:

Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust

1,474 lines (1,460 loc) 56 kB
const NAMESPACE = 'modus-wc'; const BUILD = /* modus-wc */ { hydratedSelectorName: "hydrated", lazyLoad: false, shadowDom: false, slotRelocation: true, updatable: true}; /* Stencil Client Platform v4.31.0 | MIT Licensed | https://stenciljs.com */ var __defProp = Object.defineProperty; var __export = (target, all) => { for (var name in all) __defProp(target, name, { get: all[name], enumerable: true }); }; // src/utils/constants.ts var SVG_NS = "http://www.w3.org/2000/svg"; var HTML_NS = "http://www.w3.org/1999/xhtml"; // src/client/client-host-ref.ts var getHostRef = (ref) => { if (ref.__stencil__getHostRef) { return ref.__stencil__getHostRef(); } return void 0; }; var registerHost = (hostElement, cmpMeta) => { const hostRef = { $flags$: 0, $hostElement$: hostElement, $cmpMeta$: cmpMeta, $instanceValues$: /* @__PURE__ */ new Map() }; { hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r); hostElement["s-p"] = []; hostElement["s-rc"] = []; } const ref = hostRef; hostElement.__stencil__getHostRef = () => ref; return ref; }; var isMemberInElement = (elm, memberName) => memberName in elm; var consoleError = (e, el) => (0, console.error)(e, el); // src/client/client-style.ts var styles = /* @__PURE__ */ new Map(); var HYDRATED_STYLE_ID = "sty-id"; var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}"; var XLINK_NS = "http://www.w3.org/1999/xlink"; var win = typeof window !== "undefined" ? window : {}; var H = win.HTMLElement || class { }; var plt = { $flags$: 0, $resourcesUrl$: "", jmp: (h2) => h2(), raf: (h2) => requestAnimationFrame(h2), 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) }; var supportsShadow = BUILD.shadowDom; var supportsListenerOptions = /* @__PURE__ */ (() => { var _a; let supportsListenerOptions2 = false; try { (_a = win.document) == null ? void 0 : _a.addEventListener( "e", null, Object.defineProperty({}, "passive", { get() { supportsListenerOptions2 = true; } }) ); } catch (e) { } return supportsListenerOptions2; })(); var promiseResolve = (v) => Promise.resolve(v); var supportsConstructableStylesheets = /* @__PURE__ */ (() => { try { new CSSStyleSheet(); return typeof new CSSStyleSheet().replaceSync === "function"; } catch (e) { } return false; })() ; var queuePending = false; var queueDomReads = []; var queueDomWrites = []; var queueTask = (queue, write) => (cb) => { queue.push(cb); if (!queuePending) { queuePending = true; if (write && plt.$flags$ & 4 /* queueSync */) { nextTick(flush); } else { plt.raf(flush); } } }; var consume = (queue) => { for (let i2 = 0; i2 < queue.length; i2++) { try { queue[i2](performance.now()); } catch (e) { consoleError(e); } } queue.length = 0; }; var flush = () => { consume(queueDomReads); { consume(queueDomWrites); if (queuePending = queueDomReads.length > 0) { plt.raf(flush); } } }; var nextTick = (cb) => promiseResolve().then(cb); var writeTask = /* @__PURE__ */ queueTask(queueDomWrites, true); // src/runtime/asset-path.ts var getAssetPath = (path) => { const assetUrl = new URL(path, plt.$resourcesUrl$); return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname; }; var setAssetPath = (path) => plt.$resourcesUrl$ = path; var isComplexType = (o) => { o = typeof o; return o === "object" || o === "function"; }; // src/utils/query-nonce-meta-tag-content.ts function queryNonceMetaTagContent(doc) { var _a, _b, _c; return (_c = (_b = (_a = doc.head) == null ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) == null ? void 0 : _b.getAttribute("content")) != null ? _c : void 0; } // src/utils/regular-expression.ts var escapeRegExpSpecialCharacters = (text) => { return text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); }; // src/utils/result.ts var result_exports = {}; __export(result_exports, { err: () => err, map: () => map, ok: () => ok, unwrap: () => unwrap, unwrapErr: () => unwrapErr }); var ok = (value) => ({ isOk: true, isErr: false, value }); var err = (value) => ({ isOk: false, isErr: true, value }); function map(result, fn) { if (result.isOk) { const val = fn(result.value); if (val instanceof Promise) { return val.then((newVal) => ok(newVal)); } else { return ok(val); } } if (result.isErr) { const value = result.value; return err(value); } throw "should never get here"; } var unwrap = (result) => { if (result.isOk) { return result.value; } else { throw result.value; } }; var unwrapErr = (result) => { if (result.isErr) { return result.value; } else { throw result.value; } }; var updateFallbackSlotVisibility = (elm) => { const childNodes = internalCall(elm, "childNodes"); if (elm.tagName && elm.tagName.includes("-") && elm["s-cr"] && elm.tagName !== "SLOT-FB") { getHostSlotNodes(childNodes, elm.tagName).forEach((slotNode) => { if (slotNode.nodeType === 1 /* ElementNode */ && slotNode.tagName === "SLOT-FB") { if (getSlotChildSiblings(slotNode, getSlotName(slotNode), false).length) { slotNode.hidden = true; } else { slotNode.hidden = false; } } }); } let i2 = 0; for (i2 = 0; i2 < childNodes.length; i2++) { const childNode = childNodes[i2]; if (childNode.nodeType === 1 /* ElementNode */ && internalCall(childNode, "childNodes").length) { updateFallbackSlotVisibility(childNode); } } }; var getSlottedChildNodes = (childNodes) => { const result = []; for (let i2 = 0; i2 < childNodes.length; i2++) { const slottedNode = childNodes[i2]["s-nr"] || void 0; if (slottedNode && slottedNode.isConnected) { result.push(slottedNode); } } return result; }; function getHostSlotNodes(childNodes, hostName, slotName) { let i2 = 0; let slottedNodes = []; let childNode; for (; i2 < childNodes.length; i2++) { childNode = childNodes[i2]; if (childNode["s-sr"] && (!hostName || childNode["s-hn"] === hostName) && (slotName === void 0)) { slottedNodes.push(childNode); } slottedNodes = [...slottedNodes, ...getHostSlotNodes(childNode.childNodes, hostName, slotName)]; } return slottedNodes; } var getSlotChildSiblings = (slot, slotName, includeSlot = true) => { const childNodes = []; if (includeSlot && slot["s-sr"] || !slot["s-sr"]) childNodes.push(slot); let node = slot; while (node = node.nextSibling) { if (getSlotName(node) === slotName && (includeSlot || !node["s-sr"])) childNodes.push(node); } return childNodes; }; var isNodeLocatedInSlot = (nodeToRelocate, slotName) => { if (nodeToRelocate.nodeType === 1 /* ElementNode */) { if (nodeToRelocate.getAttribute("slot") === null && slotName === "") { return true; } if (nodeToRelocate.getAttribute("slot") === slotName) { return true; } return false; } if (nodeToRelocate["s-sn"] === slotName) { return true; } return slotName === ""; }; var getSlotName = (node) => typeof node["s-sn"] === "string" ? node["s-sn"] : node.nodeType === 1 && node.getAttribute("slot") || void 0; function patchSlotNode(node) { if (node.assignedElements || node.assignedNodes || !node["s-sr"]) return; const assignedFactory = (elementsOnly) => (function(opts) { const toReturn = []; const slotName = this["s-sn"]; if (opts == null ? void 0 : opts.flatten) { console.error(` Flattening is not supported for Stencil non-shadow slots. You can use \`.childNodes\` to nested slot fallback content. If you have a particular use case, please open an issue on the Stencil repo. `); } const parent = this["s-cr"].parentElement; const slottedNodes = parent.__childNodes ? parent.childNodes : getSlottedChildNodes(parent.childNodes); slottedNodes.forEach((n) => { if (slotName === getSlotName(n)) { toReturn.push(n); } }); if (elementsOnly) { return toReturn.filter((n) => n.nodeType === 1 /* ElementNode */); } return toReturn; }).bind(node); node.assignedElements = assignedFactory(true); node.assignedNodes = assignedFactory(false); } function internalCall(node, method) { if ("__" + method in node) { const toReturn = node["__" + method]; if (typeof toReturn !== "function") return toReturn; return toReturn.bind(node); } else { if (typeof node[method] !== "function") return node[method]; return node[method].bind(node); } } var createTime = (fnName, tagName = "") => { { return () => { return; }; } }; var h = (nodeName, vnodeData, ...children) => { let child = null; let key = null; let slotName = null; let simple = false; let lastSimple = false; const vNodeChildren = []; const walk = (c) => { for (let i2 = 0; i2 < c.length; i2++) { child = c[i2]; if (Array.isArray(child)) { walk(child); } else if (child != null && typeof child !== "boolean") { if (simple = typeof nodeName !== "function" && !isComplexType(child)) { child = String(child); } if (simple && lastSimple) { vNodeChildren[vNodeChildren.length - 1].$text$ += child; } else { vNodeChildren.push(simple ? newVNode(null, child) : child); } lastSimple = simple; } } }; walk(children); if (vnodeData) { if (vnodeData.key) { key = vnodeData.key; } if (vnodeData.name) { slotName = vnodeData.name; } { const classData = vnodeData.className || vnodeData.class; if (classData) { vnodeData.class = typeof classData !== "object" ? classData : Object.keys(classData).filter((k) => classData[k]).join(" "); } } } if (typeof nodeName === "function") { return nodeName( vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils ); } const vnode = newVNode(nodeName, null); vnode.$attrs$ = vnodeData; if (vNodeChildren.length > 0) { vnode.$children$ = vNodeChildren; } { vnode.$key$ = key; } { vnode.$name$ = slotName; } return vnode; }; var newVNode = (tag, text) => { const vnode = { $flags$: 0, $tag$: tag, $text$: text, $elm$: null, $children$: null }; { vnode.$attrs$ = null; } { vnode.$key$ = null; } { vnode.$name$ = null; } return vnode; }; var Host = {}; var isHost = (node) => node && node.$tag$ === Host; var vdomFnUtils = { forEach: (children, cb) => children.map(convertToPublic).forEach(cb), map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate) }; var convertToPublic = (node) => ({ vattrs: node.$attrs$, vchildren: node.$children$, vkey: node.$key$, vname: node.$name$, vtag: node.$tag$, vtext: node.$text$ }); var convertToPrivate = (node) => { if (typeof node.vtag === "function") { const vnodeData = { ...node.vattrs }; if (node.vkey) { vnodeData.key = node.vkey; } if (node.vname) { vnodeData.name = node.vname; } return h(node.vtag, vnodeData, ...node.vchildren || []); } const vnode = newVNode(node.vtag, node.vtext); vnode.$attrs$ = node.vattrs; vnode.$children$ = node.vchildren; vnode.$key$ = node.vkey; vnode.$name$ = node.vname; return vnode; }; var createSupportsRuleRe = (selector) => { const safeSelector2 = escapeRegExpSpecialCharacters(selector); return new RegExp( // First capture group: match any context before the selector that's not inside @supports selector() // Using negative lookahead to avoid matching inside @supports selector(...) condition `(^|[^@]|@(?!supports\\s+selector\\s*\\([^{]*?${safeSelector2}))(${safeSelector2}\\b)`, "g" ); }; createSupportsRuleRe("::slotted"); createSupportsRuleRe(":host"); createSupportsRuleRe(":host-context"); var parsePropertyValue = (propValue, propType) => { if (propValue != null && !isComplexType(propValue)) { if (propType & 4 /* Boolean */) { return propValue === "false" ? false : propValue === "" || !!propValue; } if (propType & 2 /* Number */) { return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN; } if (propType & 1 /* String */) { return String(propValue); } return propValue; } return propValue; }; var getElement = (ref) => ref; // src/runtime/event-emitter.ts var createEvent = (ref, name, flags) => { const elm = getElement(ref); return { emit: (detail) => { return emitEvent(elm, name, { bubbles: true, composed: true, cancelable: true, detail }); } }; }; var emitEvent = (elm, name, opts) => { const ev = plt.ce(name, opts); elm.dispatchEvent(ev); return ev; }; var rootAppliedStyles = /* @__PURE__ */ new WeakMap(); var registerStyle = (scopeId2, cssText, allowCS) => { let style = styles.get(scopeId2); if (supportsConstructableStylesheets && allowCS) { style = style || new CSSStyleSheet(); if (typeof style === "string") { style = cssText; } else { style.replaceSync(cssText); } } else { style = cssText; } styles.set(scopeId2, style); }; var addStyle = (styleContainerNode, cmpMeta, mode) => { var _a; const scopeId2 = getScopeId(cmpMeta); const style = styles.get(scopeId2); if (!win.document) { return scopeId2; } styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document; if (style) { if (typeof style === "string") { styleContainerNode = styleContainerNode.head || styleContainerNode; let appliedStyles = rootAppliedStyles.get(styleContainerNode); let styleElm; if (!appliedStyles) { rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set()); } if (!appliedStyles.has(scopeId2)) { { styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || win.document.createElement("style"); styleElm.innerHTML = style; const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document); if (nonce != null) { styleElm.setAttribute("nonce", nonce); } if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) { if (styleContainerNode.nodeName === "HEAD") { const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]"); const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style"); styleContainerNode.insertBefore( styleElm, (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null ); } else if ("host" in styleContainerNode) { if (supportsConstructableStylesheets) { const stylesheet = new CSSStyleSheet(); stylesheet.replaceSync(style); styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets]; } else { const existingStyleContainer = styleContainerNode.querySelector("style"); if (existingStyleContainer) { existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML; } else { styleContainerNode.prepend(styleElm); } } } else { styleContainerNode.append(styleElm); } } if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) { styleContainerNode.insertBefore(styleElm, null); } } if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) { styleElm.innerHTML += SLOT_FB_CSS; } if (appliedStyles) { appliedStyles.add(scopeId2); } } } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) { styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style]; } } return scopeId2; }; var attachStyles = (hostRef) => { const cmpMeta = hostRef.$cmpMeta$; const elm = hostRef.$hostElement$; const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$); addStyle( elm.getRootNode(), cmpMeta); endAttachStyles(); }; var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$); var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => { if (oldValue === newValue) { return; } let isProp = isMemberInElement(elm, memberName); let ln = memberName.toLowerCase(); if (memberName === "class") { const classList = elm.classList; const oldClasses = parseClassList(oldValue); let newClasses = parseClassList(newValue); { classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c))); classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c))); } } else if (memberName === "style") { { for (const prop in oldValue) { if (!newValue || newValue[prop] == null) { if (prop.includes("-")) { elm.style.removeProperty(prop); } else { elm.style[prop] = ""; } } } } for (const prop in newValue) { if (!oldValue || newValue[prop] !== oldValue[prop]) { if (prop.includes("-")) { elm.style.setProperty(prop, newValue[prop]); } else { elm.style[prop] = newValue[prop]; } } } } else if (memberName === "key") ; else if (memberName === "ref") { if (newValue) { newValue(elm); } } else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") { if (memberName[2] === "-") { memberName = memberName.slice(3); } else if (isMemberInElement(win, ln)) { memberName = ln.slice(2); } else { memberName = ln[2] + memberName.slice(3); } if (oldValue || newValue) { const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX); memberName = memberName.replace(CAPTURE_EVENT_REGEX, ""); if (oldValue) { plt.rel(elm, memberName, oldValue, capture); } if (newValue) { plt.ael(elm, memberName, newValue, capture); } } } else { const isComplex = isComplexType(newValue); if ((isProp || isComplex && newValue !== null) && !isSvg) { try { if (!elm.tagName.includes("-")) { const n = newValue == null ? "" : newValue; if (memberName === "list") { isProp = false; } else if (oldValue == null || elm[memberName] != n) { if (typeof elm.__lookupSetter__(memberName) === "function") { elm[memberName] = n; } else { elm.setAttribute(memberName, n); } } } else if (elm[memberName] !== newValue) { elm[memberName] = newValue; } } catch (e) { } } let xlink = false; { if (ln !== (ln = ln.replace(/^xlink\:?/, ""))) { memberName = ln; xlink = true; } } if (newValue == null || newValue === false) { if (newValue !== false || elm.getAttribute(memberName) === "") { if (xlink) { elm.removeAttributeNS(XLINK_NS, memberName); } else { elm.removeAttribute(memberName); } } } else if ((!isProp || flags & 4 /* isHost */ || isSvg) && !isComplex && elm.nodeType === 1 /* ElementNode */) { newValue = newValue === true ? "" : newValue; if (xlink) { elm.setAttributeNS(XLINK_NS, memberName, newValue); } else { elm.setAttribute(memberName, newValue); } } } }; var parseClassListRegex = /\s/; var parseClassList = (value) => { if (typeof value === "object" && value && "baseVal" in value) { value = value.baseVal; } if (!value || typeof value !== "string") { return []; } return value.split(parseClassListRegex); }; var CAPTURE_EVENT_SUFFIX = "Capture"; var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$"); // src/runtime/vdom/update-element.ts var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => { const elm = newVnode.$elm$.nodeType === 11 /* DocumentFragment */ && newVnode.$elm$.host ? newVnode.$elm$.host : newVnode.$elm$; const oldVnodeAttrs = oldVnode && oldVnode.$attrs$ || {}; const newVnodeAttrs = newVnode.$attrs$ || {}; { for (const memberName of sortedAttrNames(Object.keys(oldVnodeAttrs))) { if (!(memberName in newVnodeAttrs)) { setAccessor( elm, memberName, oldVnodeAttrs[memberName], void 0, isSvgMode2, newVnode.$flags$); } } } for (const memberName of sortedAttrNames(Object.keys(newVnodeAttrs))) { setAccessor( elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode2, newVnode.$flags$); } }; function sortedAttrNames(attrNames) { return attrNames.includes("ref") ? ( // we need to sort these to ensure that `'ref'` is the last attr [...attrNames.filter((attr) => attr !== "ref"), "ref"] ) : ( // no need to sort, return the original array attrNames ); } var contentRef; var hostTagName; var useNativeShadowDom = false; var checkSlotFallbackVisibility = false; var checkSlotRelocate = false; var isSvgMode = false; var createElm = (oldParentVNode, newParentVNode, childIndex) => { var _a; const newVNode2 = newParentVNode.$children$[childIndex]; let i2 = 0; let elm; let childNode; let oldVNode; if (!useNativeShadowDom) { checkSlotRelocate = true; if (newVNode2.$tag$ === "slot") { newVNode2.$flags$ |= newVNode2.$children$ ? ( // slot element has fallback content // still create an element that "mocks" the slot element 2 /* isSlotFallback */ ) : ( // slot element does not have fallback content // create an html comment we'll use to always reference // where actual slot content should sit next to 1 /* isSlotReference */ ); } } if (newVNode2.$text$ !== null) { elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$); } else if (newVNode2.$flags$ & 1 /* isSlotReference */) { elm = newVNode2.$elm$ = win.document.createTextNode(""); { updateElement(null, newVNode2, isSvgMode); } } else { if (!isSvgMode) { isSvgMode = newVNode2.$tag$ === "svg"; } if (!win.document) { throw new Error( "You are trying to render a Stencil component in an environment that doesn't support the DOM. Make sure to populate the [`window`](https://developer.mozilla.org/en-US/docs/Web/API/Window/window) object before rendering a component." ); } elm = newVNode2.$elm$ = win.document.createElementNS( isSvgMode ? SVG_NS : HTML_NS, !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$ ) ; if (isSvgMode && newVNode2.$tag$ === "foreignObject") { isSvgMode = false; } { updateElement(null, newVNode2, isSvgMode); } if (newVNode2.$children$) { for (i2 = 0; i2 < newVNode2.$children$.length; ++i2) { childNode = createElm(oldParentVNode, newVNode2, i2); if (childNode) { elm.appendChild(childNode); } } } { if (newVNode2.$tag$ === "svg") { isSvgMode = false; } else if (elm.tagName === "foreignObject") { isSvgMode = true; } } } elm["s-hn"] = hostTagName; { if (newVNode2.$flags$ & (2 /* isSlotFallback */ | 1 /* isSlotReference */)) { elm["s-sr"] = true; elm["s-cr"] = contentRef; elm["s-sn"] = newVNode2.$name$ || ""; elm["s-rf"] = (_a = newVNode2.$attrs$) == null ? void 0 : _a.ref; patchSlotNode(elm); oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex]; if (oldVNode && oldVNode.$tag$ === newVNode2.$tag$ && oldParentVNode.$elm$) { { putBackInOriginalLocation(oldParentVNode.$elm$, false); } } } } return elm; }; var putBackInOriginalLocation = (parentElm, recursive) => { plt.$flags$ |= 1 /* isTmpDisconnected */; const oldSlotChildNodes = Array.from(parentElm.__childNodes || parentElm.childNodes); for (let i2 = oldSlotChildNodes.length - 1; i2 >= 0; i2--) { const childNode = oldSlotChildNodes[i2]; if (childNode["s-hn"] !== hostTagName && childNode["s-ol"]) { insertBefore(referenceNode(childNode).parentNode, childNode, referenceNode(childNode)); childNode["s-ol"].remove(); childNode["s-ol"] = void 0; childNode["s-sh"] = void 0; checkSlotRelocate = true; } if (recursive) { putBackInOriginalLocation(childNode, recursive); } } plt.$flags$ &= -2 /* isTmpDisconnected */; }; var addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => { let containerElm = parentElm["s-cr"] && parentElm["s-cr"].parentNode || parentElm; let childNode; for (; startIdx <= endIdx; ++startIdx) { if (vnodes[startIdx]) { childNode = createElm(null, parentVNode, startIdx); if (childNode) { vnodes[startIdx].$elm$ = childNode; insertBefore(containerElm, childNode, referenceNode(before) ); } } } }; var removeVnodes = (vnodes, startIdx, endIdx) => { for (let index = startIdx; index <= endIdx; ++index) { const vnode = vnodes[index]; if (vnode) { const elm = vnode.$elm$; nullifyVNodeRefs(vnode); if (elm) { { checkSlotFallbackVisibility = true; if (elm["s-ol"]) { elm["s-ol"].remove(); } else { putBackInOriginalLocation(elm, true); } } elm.remove(); } } } }; var updateChildren = (parentElm, oldCh, newVNode2, newCh, isInitialRender = false) => { let oldStartIdx = 0; let newStartIdx = 0; let idxInOld = 0; let i2 = 0; let oldEndIdx = oldCh.length - 1; let oldStartVnode = oldCh[0]; let oldEndVnode = oldCh[oldEndIdx]; let newEndIdx = newCh.length - 1; let newStartVnode = newCh[0]; let newEndVnode = newCh[newEndIdx]; let node; let elmToMove; while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (oldStartVnode == null) { oldStartVnode = oldCh[++oldStartIdx]; } else if (oldEndVnode == null) { oldEndVnode = oldCh[--oldEndIdx]; } else if (newStartVnode == null) { newStartVnode = newCh[++newStartIdx]; } else if (newEndVnode == null) { newEndVnode = newCh[--newEndIdx]; } else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) { patch(oldStartVnode, newStartVnode, isInitialRender); oldStartVnode = oldCh[++oldStartIdx]; newStartVnode = newCh[++newStartIdx]; } else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) { patch(oldEndVnode, newEndVnode, isInitialRender); oldEndVnode = oldCh[--oldEndIdx]; newEndVnode = newCh[--newEndIdx]; } else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) { if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) { putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false); } patch(oldStartVnode, newEndVnode, isInitialRender); insertBefore(parentElm, oldStartVnode.$elm$, oldEndVnode.$elm$.nextSibling); oldStartVnode = oldCh[++oldStartIdx]; newEndVnode = newCh[--newEndIdx]; } else if (isSameVnode(oldEndVnode, newStartVnode, isInitialRender)) { if ((oldStartVnode.$tag$ === "slot" || newEndVnode.$tag$ === "slot")) { putBackInOriginalLocation(oldEndVnode.$elm$.parentNode, false); } patch(oldEndVnode, newStartVnode, isInitialRender); insertBefore(parentElm, oldEndVnode.$elm$, oldStartVnode.$elm$); oldEndVnode = oldCh[--oldEndIdx]; newStartVnode = newCh[++newStartIdx]; } else { idxInOld = -1; { for (i2 = oldStartIdx; i2 <= oldEndIdx; ++i2) { if (oldCh[i2] && oldCh[i2].$key$ !== null && oldCh[i2].$key$ === newStartVnode.$key$) { idxInOld = i2; break; } } } if (idxInOld >= 0) { elmToMove = oldCh[idxInOld]; if (elmToMove.$tag$ !== newStartVnode.$tag$) { node = createElm(oldCh && oldCh[newStartIdx], newVNode2, idxInOld); } else { patch(elmToMove, newStartVnode, isInitialRender); oldCh[idxInOld] = void 0; node = elmToMove.$elm$; } newStartVnode = newCh[++newStartIdx]; } else { node = createElm(oldCh && oldCh[newStartIdx], newVNode2, newStartIdx); newStartVnode = newCh[++newStartIdx]; } if (node) { { insertBefore( referenceNode(oldStartVnode.$elm$).parentNode, node, referenceNode(oldStartVnode.$elm$) ); } } } } if (oldStartIdx > oldEndIdx) { addVnodes( parentElm, newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].$elm$, newVNode2, newCh, newStartIdx, newEndIdx ); } else if (newStartIdx > newEndIdx) { removeVnodes(oldCh, oldStartIdx, oldEndIdx); } }; var isSameVnode = (leftVNode, rightVNode, isInitialRender = false) => { if (leftVNode.$tag$ === rightVNode.$tag$) { if (leftVNode.$tag$ === "slot") { return leftVNode.$name$ === rightVNode.$name$; } if (!isInitialRender) { return leftVNode.$key$ === rightVNode.$key$; } if (isInitialRender && !leftVNode.$key$ && rightVNode.$key$) { leftVNode.$key$ = rightVNode.$key$; } return true; } return false; }; var referenceNode = (node) => node && node["s-ol"] || node; var patch = (oldVNode, newVNode2, isInitialRender = false) => { const elm = newVNode2.$elm$ = oldVNode.$elm$; const oldChildren = oldVNode.$children$; const newChildren = newVNode2.$children$; const tag = newVNode2.$tag$; const text = newVNode2.$text$; let defaultHolder; if (text === null) { { isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode; } { updateElement(oldVNode, newVNode2, isSvgMode); } if (oldChildren !== null && newChildren !== null) { updateChildren(elm, oldChildren, newVNode2, newChildren, isInitialRender); } else if (newChildren !== null) { if (oldVNode.$text$ !== null) { elm.textContent = ""; } addVnodes(elm, null, newVNode2, newChildren, 0, newChildren.length - 1); } else if ( // don't do this on initial render as it can cause non-hydrated content to be removed !isInitialRender && BUILD.updatable && oldChildren !== null ) { removeVnodes(oldChildren, 0, oldChildren.length - 1); } if (isSvgMode && tag === "svg") { isSvgMode = false; } } else if ((defaultHolder = elm["s-cr"])) { defaultHolder.parentNode.textContent = text; } else if (oldVNode.$text$ !== text) { elm.data = text; } }; var relocateNodes = []; var markSlotContentForRelocation = (elm) => { let node; let hostContentNodes; let j; const children = elm.__childNodes || elm.childNodes; for (const childNode of children) { if (childNode["s-sr"] && (node = childNode["s-cr"]) && node.parentNode) { hostContentNodes = node.parentNode.__childNodes || node.parentNode.childNodes; const slotName = childNode["s-sn"]; for (j = hostContentNodes.length - 1; j >= 0; j--) { node = hostContentNodes[j]; if (!node["s-cn"] && !node["s-nr"] && node["s-hn"] !== childNode["s-hn"] && (true)) { if (isNodeLocatedInSlot(node, slotName)) { let relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node); checkSlotFallbackVisibility = true; node["s-sn"] = node["s-sn"] || slotName; if (relocateNodeData) { relocateNodeData.$nodeToRelocate$["s-sh"] = childNode["s-hn"]; relocateNodeData.$slotRefNode$ = childNode; } else { node["s-sh"] = childNode["s-hn"]; relocateNodes.push({ $slotRefNode$: childNode, $nodeToRelocate$: node }); } if (node["s-sr"]) { relocateNodes.map((relocateNode) => { if (isNodeLocatedInSlot(relocateNode.$nodeToRelocate$, node["s-sn"])) { relocateNodeData = relocateNodes.find((r) => r.$nodeToRelocate$ === node); if (relocateNodeData && !relocateNode.$slotRefNode$) { relocateNode.$slotRefNode$ = relocateNodeData.$slotRefNode$; } } }); } } else if (!relocateNodes.some((r) => r.$nodeToRelocate$ === node)) { relocateNodes.push({ $nodeToRelocate$: node }); } } } } if (childNode.nodeType === 1 /* ElementNode */) { markSlotContentForRelocation(childNode); } } }; var nullifyVNodeRefs = (vNode) => { { vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null); vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs); } }; var insertBefore = (parent, newNode, reference) => { { return parent == null ? void 0 : parent.insertBefore(newNode, reference); } }; var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => { var _a, _b, _c, _d; const hostElm = hostRef.$hostElement$; const cmpMeta = hostRef.$cmpMeta$; const oldVNode = hostRef.$vnode$ || newVNode(null, null); const isHostElement = isHost(renderFnResults); const rootVnode = isHostElement ? renderFnResults : h(null, null, renderFnResults); hostTagName = hostElm.tagName; if (cmpMeta.$attrsToReflect$) { rootVnode.$attrs$ = rootVnode.$attrs$ || {}; cmpMeta.$attrsToReflect$.map( ([propName, attribute]) => rootVnode.$attrs$[attribute] = hostElm[propName] ); } if (isInitialLoad && rootVnode.$attrs$) { for (const key of Object.keys(rootVnode.$attrs$)) { if (hostElm.hasAttribute(key) && !["key", "ref", "style", "class"].includes(key)) { rootVnode.$attrs$[key] = hostElm[key]; } } } rootVnode.$tag$ = null; rootVnode.$flags$ |= 4 /* isHost */; hostRef.$vnode$ = rootVnode; rootVnode.$elm$ = oldVNode.$elm$ = hostElm; useNativeShadowDom = supportsShadow; { contentRef = hostElm["s-cr"]; checkSlotFallbackVisibility = false; } patch(oldVNode, rootVnode, isInitialLoad); { plt.$flags$ |= 1 /* isTmpDisconnected */; if (checkSlotRelocate) { markSlotContentForRelocation(rootVnode.$elm$); for (const relocateData of relocateNodes) { const nodeToRelocate = relocateData.$nodeToRelocate$; if (!nodeToRelocate["s-ol"] && win.document) { const orgLocationNode = win.document.createTextNode(""); orgLocationNode["s-nr"] = nodeToRelocate; insertBefore(nodeToRelocate.parentNode, nodeToRelocate["s-ol"] = orgLocationNode, nodeToRelocate); } } for (const relocateData of relocateNodes) { const nodeToRelocate = relocateData.$nodeToRelocate$; const slotRefNode = relocateData.$slotRefNode$; if (slotRefNode) { const parentNodeRef = slotRefNode.parentNode; let insertBeforeNode = slotRefNode.nextSibling; { let orgLocationNode = (_a = nodeToRelocate["s-ol"]) == null ? void 0 : _a.previousSibling; while (orgLocationNode) { let refNode = (_b = orgLocationNode["s-nr"]) != null ? _b : null; if (refNode && refNode["s-sn"] === nodeToRelocate["s-sn"] && parentNodeRef === (refNode.__parentNode || refNode.parentNode)) { refNode = refNode.nextSibling; while (refNode === nodeToRelocate || (refNode == null ? void 0 : refNode["s-sr"])) { refNode = refNode == null ? void 0 : refNode.nextSibling; } if (!refNode || !refNode["s-nr"]) { insertBeforeNode = refNode; break; } } orgLocationNode = orgLocationNode.previousSibling; } } const parent = nodeToRelocate.__parentNode || nodeToRelocate.parentNode; const nextSibling = nodeToRelocate.__nextSibling || nodeToRelocate.nextSibling; if (!insertBeforeNode && parentNodeRef !== parent || nextSibling !== insertBeforeNode) { if (nodeToRelocate !== insertBeforeNode) { if (!nodeToRelocate["s-hn"] && nodeToRelocate["s-ol"]) { nodeToRelocate["s-hn"] = nodeToRelocate["s-ol"].parentNode.nodeName; } insertBefore(parentNodeRef, nodeToRelocate, insertBeforeNode); if (nodeToRelocate.nodeType === 1 /* ElementNode */ && nodeToRelocate.tagName !== "SLOT-FB") { nodeToRelocate.hidden = (_c = nodeToRelocate["s-ih"]) != null ? _c : false; } } } nodeToRelocate && typeof slotRefNode["s-rf"] === "function" && slotRefNode["s-rf"](slotRefNode); } else { if (nodeToRelocate.nodeType === 1 /* ElementNode */) { if (isInitialLoad) { nodeToRelocate["s-ih"] = (_d = nodeToRelocate.hidden) != null ? _d : false; } nodeToRelocate.hidden = true; } } } } if (checkSlotFallbackVisibility) { updateFallbackSlotVisibility(rootVnode.$elm$); } plt.$flags$ &= -2 /* isTmpDisconnected */; relocateNodes.length = 0; } contentRef = void 0; }; // src/runtime/update-component.ts var attachToAncestor = (hostRef, ancestorComponent) => { if (ancestorComponent && !hostRef.$onRenderResolve$ && ancestorComponent["s-p"]) { const index = ancestorComponent["s-p"].push( new Promise( (r) => hostRef.$onRenderResolve$ = () => { ancestorComponent["s-p"].splice(index - 1, 1); r(); } ) ); } }; var scheduleUpdate = (hostRef, isInitialLoad) => { { hostRef.$flags$ |= 16 /* isQueuedForUpdate */; } if (hostRef.$flags$ & 4 /* isWaitingForChildren */) { hostRef.$flags$ |= 512 /* needsRerender */; return; } attachToAncestor(hostRef, hostRef.$ancestorComponent$); const dispatch = () => dispatchHooks(hostRef, isInitialLoad); return writeTask(dispatch) ; }; var dispatchHooks = (hostRef, isInitialLoad) => { const elm = hostRef.$hostElement$; const endSchedule = createTime("scheduleUpdate", hostRef.$cmpMeta$.$tagName$); const instance = elm; if (!instance) { throw new Error( `Can't render component <${elm.tagName.toLowerCase()} /> with invalid Stencil runtime! Make sure this imported component is compiled with a \`externalRuntime: true\` flag. For more information, please refer to https://stenciljs.com/docs/custom-elements#externalruntime` ); } let maybePromise; if (isInitialLoad) { maybePromise = safeCall(instance, "componentWillLoad", void 0, elm); } else { maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm); } maybePromise = enqueue(maybePromise, () => safeCall(instance, "componentWillRender", void 0, elm)); endSchedule(); return enqueue(maybePromise, () => updateComponent(hostRef, instance, isInitialLoad)); }; var enqueue = (maybePromise, fn) => isPromisey(maybePromise) ? maybePromise.then(fn).catch((err2) => { console.error(err2); fn(); }) : fn(); var isPromisey = (maybePromise) => maybePromise instanceof Promise || maybePromise && maybePromise.then && typeof maybePromise.then === "function"; var updateComponent = async (hostRef, instance, isInitialLoad) => { var _a; const elm = hostRef.$hostElement$; const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$); const rc = elm["s-rc"]; if (isInitialLoad) { attachStyles(hostRef); } const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$); { callRender(hostRef, instance, elm, isInitialLoad); } if (rc) { rc.map((cb) => cb()); elm["s-rc"] = void 0; } endRender(); endUpdate(); { const childrenPromises = (_a = elm["s-p"]) != null ? _a : []; const postUpdate = () => postUpdateComponent(hostRef); if (childrenPromises.length === 0) { postUpdate(); } else { Promise.all(childrenPromises).then(postUpdate); hostRef.$flags$ |= 4 /* isWaitingForChildren */; childrenPromises.length = 0; } } }; var renderingRef = null; var callRender = (hostRef, instance, elm, isInitialLoad) => { try { renderingRef = instance; instance = instance.render() ; { hostRef.$flags$ &= -17 /* isQueuedForUpdate */; } { hostRef.$flags$ |= 2 /* hasRendered */; } { { { renderVdom(hostRef, instance, isInitialLoad); } } } } catch (e) { consoleError(e, hostRef.$hostElement$); } renderingRef = null; return null; }; var getRenderingRef = () => renderingRef; var postUpdateComponent = (hostRef) => { const tagName = hostRef.$cmpMeta$.$tagName$; const elm = hostRef.$hostElement$; const endPostUpdate = createTime("postUpdate", tagName); const instance = elm; const ancestorComponent = hostRef.$ancestorComponent$; safeCall(instance, "componentDidRender", void 0, elm); if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) { hostRef.$flags$ |= 64 /* hasLoadedComponent */; { addHydratedFlag(elm); } safeCall(instance, "componentDidLoad", void 0, elm); endPostUpdate(); { hostRef.$onReadyResolve$(elm); if (!ancestorComponent) { appDidLoad(); } } } else { safeCall(instance, "componentDidUpdate", void 0, elm); endPostUpdate(); } { if (hostRef.$onRenderResolve$) { hostRef.$onRenderResolve$(); hostRef.$onRenderResolve$ = void 0; } if (hostRef.$flags$ & 512 /* needsRerender */) { nextTick(() => scheduleUpdate(hostRef, false)); } hostRef.$flags$ &= -517; } }; var forceUpdate = (ref) => { { const hostRef = getHostRef(ref); const isConnected = hostRef.$hostElement$.isConnected; if (isConnected && (hostRef.$flags$ & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) { scheduleUpdate(hostRef, false); } return isConnected; } }; var appDidLoad = (who) => { nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } })); }; var safeCall = (instance, method, arg, elm) => { if (instance && instance[method]) { try { return instance[method](arg); } catch (e) { consoleError(e, elm); } } return void 0; }; var addHydratedFlag = (elm) => { var _a; return elm.classList.add((_a = BUILD.hydratedSelectorName) != null ? _a : "hydrated") ; }; // src/runtime/set-value.ts var getValue = (ref, propName) => getHostRef(ref).$instanceValues$.get(propName); var setValue = (ref, propName, newVal, cmpMeta) => { const hostRef = getHostRef(ref); const elm = ref; const oldVal = hostRef.$instanceValues$.get(propName); const flags = hostRef.$flags$; const instance = elm; newVal = parsePropertyValue(newVal, cmpMeta.$members$[propName][0]); const areBothNaN = Number.isNaN(oldVal) && Number.isNaN(newVal); const didValueChange = newVal !== oldVal && !areBothNaN; if (didValueChange) { hostRef.$instanceValues$.set(propName, newVal); { if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) { const watchMethods = cmpMeta.$watchers$[propName]; if (watchMethods) { watchMethods.map((watchMethodName) => { try { instance[watchMethodName](newVal, oldVal, propName); } catch (e) { consoleError(e, elm); } }); } } if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) { if (instance.componentShouldUpdate) { if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) { return; } } scheduleUpdate(hostRef, false); } } } }; // src/runtime/proxy-component.ts var proxyComponent = (Cstr, cmpMeta, flags) => { var _a, _b; const prototype = Cstr.prototype; if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) { if (Cstr.watchers && !cmpMeta.$watchers$) { cmpMeta.$watchers$ = Cstr.watchers; } const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {}); members.map(([memberName, [memberFlags]]) => { if ((memberFlags & 31 /* Prop */ || memberFlags & 32 /* State */)) { const { get: origGetter, set: origSetter } = Object.getOwnPropertyDescriptor(prototype, memberName) || {}; if (origGetter) cmpMeta.$members$[memberName][0] |= 2048 /* Getter */; if (origSetter) cmpMeta.$members$[memberName][0] |= 4096 /* Setter */; { Object.defineProperty(prototype, memberName, { get() { { return origGetter ? origGetter.apply(this) : getValue(this, memberName); } }, configurable: true, enumerable: true }); } Object.defineProperty(prototype, memberName, { set(newValue) { const ref = getHostRef(this); if (origSetter) { const currentValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName]; if (typeof currentValue === "undefined" && ref.$instanceValues$.get(memberName)) { newValue = ref.$instanceValues$.get(memberName); } else if (!ref.$instanceValues$.get(memberName) && currentValue) { ref.$instanceValues$.set(memberName, currentValue); } origSetter.apply(this, [parsePropertyValue(newValue, memberFlags)]); newValue = memberFlags & 32 /* State */ ? this[memberName] : ref.$hostElement$[memberName]; setValue(this, memberName, newValue, cmpMeta); return; } { setValue(this, memberName, newValue, cmpMeta); return; } } }); } }); { const attrNameToPropName = /* @__PURE__ */ new Map(); prototype.attributeChangedCallback = function(attrName, oldValue, newValue) { plt.jmp(() => { var _a2; const propName = attrNameToPropName.get(attrName); if (this.hasOwnProperty(propName) && BUILD.lazyLoad) ; else if (prototype.hasOwnProperty(propName) && typeof this[propName] === "number" && // cast type to number to avoid TS compiler issues this[propName] == newValue) { return; } else if (propName == null) { const hostRef = getHostRef(this); const flags2 = hostRef == null ? void 0 : hostRef.$flags$; if (flags2 && !(flags2 & 8 /* isConstructingInstance */) && flags2 & 128 /* isWatchReady */ && newValue !== oldValue) { const elm = this; const instance = elm; const entry = (_a2 = cmpMeta.$watchers$) == null ? void 0 : _a2[attrName]; entry == null ? void 0 : entry.forEach((callbackName) => { if (instance[callbackName] != null) { instance[callbackName].call(instance, newValue, oldValue, attrName); } }); } return; } const propDesc = Object.getOwnPropertyDescriptor(prototype, propName); newValue = newValue === null && typeof this[propName] === "boolean" ? false : newValue; if (newValue !== this[propName] && (!propDesc.get || !!propDesc.set)) { this[propName] = newValue; } }); }; Cstr.observedAttributes = Array.from( /* @__PURE__ */ new Set([ ...Object.keys((_b = cmpMeta.$watchers$) != null ? _b : {}), ...members.filter(([_, m]) => m[0] & 15 /* HasAttribute */).map(([propName, m]) => { var _a2; const attrName = m[1] || propName; attrNameToPropName.set(attrName, propName); if (m[0] & 512 /* ReflectAttr */) { (_a2 = cmpMeta.$attrsToReflect$) == null ? void 0 : _a2.push([propName, attrName]); } return attrName; }) ]) ); } } return Cstr; }; // src/runtime/initialize-component.ts var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => { let Cstr; if ((hostRef.$flags$ & 32 /* hasInitializedComponent */) === 0) { hostRef.$flags$ |= 32 /* hasInitializedComponent */; { Cstr = elm.constructor; const cmpTag = elm.localName; customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */); } if (Cstr && Cstr.style) { let style; if (typeof Cstr.style === "string") { style = Cstr.style; } const scopeId2 = getScopeId(cmpMeta); if (!styles.has(scopeId2)) { const en