xv-webcomponents 0.1.9 → 0.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (94) hide show
  1. package/README.md +2 -2
  2. package/dist/cjs/{index-888a60d0.js → index-4d938647.js} +291 -6
  3. package/dist/cjs/index-4d938647.js.map +1 -0
  4. package/dist/cjs/index.cjs.js +4 -4
  5. package/dist/cjs/index.cjs.js.map +1 -1
  6. package/dist/cjs/loader.cjs.js +2 -2
  7. package/dist/cjs/utils-c7652b74.js +13 -0
  8. package/dist/cjs/utils-c7652b74.js.map +1 -0
  9. package/dist/cjs/xv-accordion_10.cjs.entry.js +263 -0
  10. package/dist/cjs/xv-accordion_10.cjs.entry.js.map +1 -0
  11. package/dist/cjs/xv-breadcrumbs.cjs.entry.js +22 -0
  12. package/dist/cjs/xv-breadcrumbs.cjs.entry.js.map +1 -0
  13. package/dist/cjs/xv-webcomponents.cjs.js +2 -2
  14. package/dist/collection/collection-manifest.json +10 -1
  15. package/dist/collection/components/xv-accordion/xv-accordion.css +3 -0
  16. package/dist/collection/components/xv-accordion/xv-accordion.js +163 -0
  17. package/dist/collection/components/xv-accordion/xv-accordion.js.map +1 -0
  18. package/dist/collection/components/xv-accordion-item/xv-accordion-item.css +68 -0
  19. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js +132 -0
  20. package/dist/collection/components/xv-accordion-item/xv-accordion-item.js.map +1 -0
  21. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css +3 -0
  22. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js +19 -0
  23. package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js.map +1 -0
  24. package/dist/collection/components/xv-button/xv-button-v2.css +150 -0
  25. package/dist/collection/components/xv-button/xv-button.js +12 -15
  26. package/dist/collection/components/xv-button/xv-button.js.map +1 -1
  27. package/dist/collection/components/xv-card/xv-card.css +63 -0
  28. package/dist/collection/components/xv-card/xv-card.js +122 -0
  29. package/dist/collection/components/xv-card/xv-card.js.map +1 -0
  30. package/dist/collection/components/xv-checkbox/xv-checkbox.js +1 -1
  31. package/dist/collection/components/xv-link/xv-link.css +60 -0
  32. package/dist/collection/components/xv-link/xv-link.js +132 -0
  33. package/dist/collection/components/xv-link/xv-link.js.map +1 -0
  34. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.css +6 -0
  35. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js +70 -0
  36. package/dist/collection/components/xv-progress-indicator/xv-progress-indicator.js.map +1 -0
  37. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.css +66 -0
  38. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js +47 -0
  39. package/dist/collection/components/xv-progress-indicator-item/xv-progress-indicator-item.js.map +1 -0
  40. package/dist/collection/components/xv-tag/xv-tag.css +97 -0
  41. package/dist/collection/components/xv-tag/xv-tag.js +158 -0
  42. package/dist/collection/components/xv-tag/xv-tag.js.map +1 -0
  43. package/dist/collection/components/xv-tooltip/xv-tooltip.css +153 -0
  44. package/dist/collection/components/xv-tooltip/xv-tooltip.js +70 -0
  45. package/dist/collection/components/xv-tooltip/xv-tooltip.js.map +1 -0
  46. package/dist/collection/utils/utils.js +3 -0
  47. package/dist/collection/utils/utils.js.map +1 -1
  48. package/dist/esm/{index-5147034e.js → index-60f5a964.js} +291 -7
  49. package/dist/esm/index-60f5a964.js.map +1 -0
  50. package/dist/esm/index.js +1 -5
  51. package/dist/esm/index.js.map +1 -1
  52. package/dist/esm/loader.js +3 -3
  53. package/dist/esm/utils-9bb6333b.js +10 -0
  54. package/dist/esm/utils-9bb6333b.js.map +1 -0
  55. package/dist/esm/xv-accordion_10.entry.js +250 -0
  56. package/dist/esm/xv-accordion_10.entry.js.map +1 -0
  57. package/dist/esm/xv-breadcrumbs.entry.js +18 -0
  58. package/dist/esm/xv-breadcrumbs.entry.js.map +1 -0
  59. package/dist/esm/xv-webcomponents.js +3 -3
  60. package/dist/types/components/xv-accordion/xv-accordion.d.ts +20 -0
  61. package/dist/types/components/xv-accordion-item/xv-accordion-item.d.ts +15 -0
  62. package/dist/types/components/xv-breadcrumbs/xv-breadcrumbs.d.ts +3 -0
  63. package/dist/types/components/xv-button/xv-button.d.ts +0 -3
  64. package/dist/types/components/xv-card/xv-card.d.ts +8 -0
  65. package/dist/types/components/xv-link/xv-link.d.ts +9 -0
  66. package/dist/types/components/xv-progress-indicator/xv-progress-indicator.d.ts +7 -0
  67. package/dist/types/components/xv-progress-indicator-item/xv-progress-indicator-item.d.ts +5 -0
  68. package/dist/types/components/xv-tag/xv-tag.d.ts +11 -0
  69. package/dist/types/components/xv-tooltip/xv-tooltip.d.ts +11 -0
  70. package/dist/types/components.d.ts +236 -0
  71. package/dist/types/utils/utils.d.ts +1 -0
  72. package/dist/xv-webcomponents/index.esm.js +1 -1
  73. package/dist/xv-webcomponents/index.esm.js.map +1 -1
  74. package/dist/xv-webcomponents/p-41bd284c.entry.js +2 -0
  75. package/dist/xv-webcomponents/p-41bd284c.entry.js.map +1 -0
  76. package/dist/xv-webcomponents/p-543fe755.js +3 -0
  77. package/dist/xv-webcomponents/p-543fe755.js.map +1 -0
  78. package/dist/xv-webcomponents/p-6f058b7f.entry.js +2 -0
  79. package/dist/xv-webcomponents/p-6f058b7f.entry.js.map +1 -0
  80. package/dist/xv-webcomponents/p-a0b74d3c.js +2 -0
  81. package/dist/xv-webcomponents/p-a0b74d3c.js.map +1 -0
  82. package/dist/xv-webcomponents/xv-webcomponents.esm.js +1 -1
  83. package/dist/xv-webcomponents/xv-webcomponents.esm.js.map +1 -1
  84. package/package.json +3 -1
  85. package/dist/cjs/index-888a60d0.js.map +0 -1
  86. package/dist/cjs/xv-button-v2_2.cjs.entry.js +0 -68
  87. package/dist/cjs/xv-button-v2_2.cjs.entry.js.map +0 -1
  88. package/dist/esm/index-5147034e.js.map +0 -1
  89. package/dist/esm/xv-button-v2_2.entry.js +0 -63
  90. package/dist/esm/xv-button-v2_2.entry.js.map +0 -1
  91. package/dist/xv-webcomponents/p-186c04ea.entry.js +0 -2
  92. package/dist/xv-webcomponents/p-186c04ea.entry.js.map +0 -1
  93. package/dist/xv-webcomponents/p-b6c1c52d.js +0 -3
  94. package/dist/xv-webcomponents/p-b6c1c52d.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  const NAMESPACE = 'xv-webcomponents';
2
- const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, 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: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: false, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: false, state: false, style: false, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: false, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
2
+ const BUILD = /* xv-webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, constructableCSS: true, cssAnnotations: true, devTools: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: true, 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, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: false, 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: false, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };
3
3
 
4
4
  /*
5
5
  Stencil Client Platform v4.27.1 | MIT Licensed | https://stenciljs.com
@@ -10,6 +10,10 @@ var __export = (target, all) => {
10
10
  __defProp(target, name, { get: all[name], enumerable: true });
11
11
  };
12
12
 
13
+ // src/utils/constants.ts
14
+ var SVG_NS = "http://www.w3.org/2000/svg";
15
+ var HTML_NS = "http://www.w3.org/1999/xhtml";
16
+
13
17
  // src/client/client-host-ref.ts
14
18
  var getHostRef = (ref) => {
15
19
  if (ref.__stencil__getHostRef) {
@@ -28,6 +32,9 @@ var registerHost = (hostElement, cmpMeta) => {
28
32
  $cmpMeta$: cmpMeta,
29
33
  $instanceValues$: /* @__PURE__ */ new Map()
30
34
  };
35
+ {
36
+ hostRef.$onInstancePromise$ = new Promise((r) => hostRef.$onInstanceResolve$ = r);
37
+ }
31
38
  {
32
39
  hostRef.$onReadyPromise$ = new Promise((r) => hostRef.$onReadyResolve$ = r);
33
40
  hostElement["s-p"] = [];
@@ -71,6 +78,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
71
78
  }
72
79
  );
73
80
  };
81
+
82
+ // src/client/client-style.ts
83
+ var styles = /* @__PURE__ */ new Map();
84
+ var HYDRATED_STYLE_ID = "sty-id";
74
85
  var HYDRATED_CSS = "{visibility:hidden}.hydrated{visibility:inherit}";
75
86
  var SLOT_FB_CSS = "slot-fb{display:contents}slot-fb[hidden]{display:none}";
76
87
  var win = typeof window !== "undefined" ? window : {};
@@ -83,7 +94,32 @@ var plt = {
83
94
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
84
95
  ce: (eventName, opts) => new CustomEvent(eventName, opts)
85
96
  };
97
+ var supportsListenerOptions = /* @__PURE__ */ (() => {
98
+ var _a;
99
+ let supportsListenerOptions2 = false;
100
+ try {
101
+ (_a = win.document) == null ? void 0 : _a.addEventListener(
102
+ "e",
103
+ null,
104
+ Object.defineProperty({}, "passive", {
105
+ get() {
106
+ supportsListenerOptions2 = true;
107
+ }
108
+ })
109
+ );
110
+ } catch (e) {
111
+ }
112
+ return supportsListenerOptions2;
113
+ })();
86
114
  var promiseResolve = (v) => Promise.resolve(v);
115
+ var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
116
+ try {
117
+ new CSSStyleSheet();
118
+ return typeof new CSSStyleSheet().replaceSync === "function";
119
+ } catch (e) {
120
+ }
121
+ return false;
122
+ })() ;
87
123
  var queuePending = false;
88
124
  var queueDomReads = [];
89
125
  var queueDomWrites = [];
@@ -261,6 +297,9 @@ var parsePropertyValue = (propValue, propType) => {
261
297
  if (propType & 4 /* Boolean */) {
262
298
  return propValue === "false" ? false : propValue === "" || !!propValue;
263
299
  }
300
+ if (propType & 2 /* Number */) {
301
+ return parseFloat(propValue);
302
+ }
264
303
  if (propType & 1 /* String */) {
265
304
  return String(propValue);
266
305
  }
@@ -290,6 +329,101 @@ var emitEvent = (elm, name, opts) => {
290
329
  return ev;
291
330
  };
292
331
  var rootAppliedStyles = /* @__PURE__ */ new WeakMap();
332
+ var registerStyle = (scopeId2, cssText, allowCS) => {
333
+ let style = styles.get(scopeId2);
334
+ if (supportsConstructableStylesheets && allowCS) {
335
+ style = style || new CSSStyleSheet();
336
+ if (typeof style === "string") {
337
+ style = cssText;
338
+ } else {
339
+ style.replaceSync(cssText);
340
+ }
341
+ } else {
342
+ style = cssText;
343
+ }
344
+ styles.set(scopeId2, style);
345
+ };
346
+ var addStyle = (styleContainerNode, cmpMeta, mode) => {
347
+ var _a;
348
+ const scopeId2 = getScopeId(cmpMeta);
349
+ const style = styles.get(scopeId2);
350
+ if (!win.document) {
351
+ return scopeId2;
352
+ }
353
+ styleContainerNode = styleContainerNode.nodeType === 11 /* DocumentFragment */ ? styleContainerNode : win.document;
354
+ if (style) {
355
+ if (typeof style === "string") {
356
+ styleContainerNode = styleContainerNode.head || styleContainerNode;
357
+ let appliedStyles = rootAppliedStyles.get(styleContainerNode);
358
+ let styleElm;
359
+ if (!appliedStyles) {
360
+ rootAppliedStyles.set(styleContainerNode, appliedStyles = /* @__PURE__ */ new Set());
361
+ }
362
+ if (!appliedStyles.has(scopeId2)) {
363
+ {
364
+ styleElm = document.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId2}"]`) || win.document.createElement("style");
365
+ styleElm.innerHTML = style;
366
+ const nonce = (_a = plt.$nonce$) != null ? _a : queryNonceMetaTagContent(win.document);
367
+ if (nonce != null) {
368
+ styleElm.setAttribute("nonce", nonce);
369
+ }
370
+ if (!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */)) {
371
+ if (styleContainerNode.nodeName === "HEAD") {
372
+ const preconnectLinks = styleContainerNode.querySelectorAll("link[rel=preconnect]");
373
+ const referenceNode2 = preconnectLinks.length > 0 ? preconnectLinks[preconnectLinks.length - 1].nextSibling : styleContainerNode.querySelector("style");
374
+ styleContainerNode.insertBefore(
375
+ styleElm,
376
+ (referenceNode2 == null ? void 0 : referenceNode2.parentNode) === styleContainerNode ? referenceNode2 : null
377
+ );
378
+ } else if ("host" in styleContainerNode) {
379
+ if (supportsConstructableStylesheets) {
380
+ const stylesheet = new CSSStyleSheet();
381
+ stylesheet.replaceSync(style);
382
+ styleContainerNode.adoptedStyleSheets = [stylesheet, ...styleContainerNode.adoptedStyleSheets];
383
+ } else {
384
+ const existingStyleContainer = styleContainerNode.querySelector("style");
385
+ if (existingStyleContainer) {
386
+ existingStyleContainer.innerHTML = style + existingStyleContainer.innerHTML;
387
+ } else {
388
+ styleContainerNode.prepend(styleElm);
389
+ }
390
+ }
391
+ } else {
392
+ styleContainerNode.append(styleElm);
393
+ }
394
+ }
395
+ if (cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */) {
396
+ styleContainerNode.insertBefore(styleElm, null);
397
+ }
398
+ }
399
+ if (cmpMeta.$flags$ & 4 /* hasSlotRelocation */) {
400
+ styleElm.innerHTML += SLOT_FB_CSS;
401
+ }
402
+ if (appliedStyles) {
403
+ appliedStyles.add(scopeId2);
404
+ }
405
+ }
406
+ } else if (!styleContainerNode.adoptedStyleSheets.includes(style)) {
407
+ styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];
408
+ }
409
+ }
410
+ return scopeId2;
411
+ };
412
+ var attachStyles = (hostRef) => {
413
+ const cmpMeta = hostRef.$cmpMeta$;
414
+ const elm = hostRef.$hostElement$;
415
+ const flags = cmpMeta.$flags$;
416
+ const endAttachStyles = createTime("attachStyles", cmpMeta.$tagName$);
417
+ const scopeId2 = addStyle(
418
+ elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(),
419
+ cmpMeta);
420
+ if ((flags & 10 /* needsScopedEncapsulation */ && flags & 2 /* scopedCssEncapsulation */ || flags & 128 /* shadowNeedsScopedCss */)) {
421
+ elm["s-sc"] = scopeId2;
422
+ elm.classList.add(scopeId2 + "-h");
423
+ }
424
+ endAttachStyles();
425
+ };
426
+ var getScopeId = (cmp, mode) => "sc-" + (cmp.$tagName$);
293
427
  var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRender) => {
294
428
  if (oldValue === newValue) {
295
429
  return;
@@ -304,6 +438,27 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
304
438
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
305
439
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
306
440
  }
441
+ } else if (memberName === "style") {
442
+ {
443
+ for (const prop in oldValue) {
444
+ if (!newValue || newValue[prop] == null) {
445
+ if (prop.includes("-")) {
446
+ elm.style.removeProperty(prop);
447
+ } else {
448
+ elm.style[prop] = "";
449
+ }
450
+ }
451
+ }
452
+ }
453
+ for (const prop in newValue) {
454
+ if (!oldValue || newValue[prop] !== oldValue[prop]) {
455
+ if (prop.includes("-")) {
456
+ elm.style.setProperty(prop, newValue[prop]);
457
+ } else {
458
+ elm.style[prop] = newValue[prop];
459
+ }
460
+ }
461
+ }
307
462
  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
308
463
  if (memberName[2] === "-") {
309
464
  memberName = memberName.slice(3);
@@ -418,14 +573,21 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
418
573
  if (newVNode2.$text$ !== null) {
419
574
  elm = newVNode2.$elm$ = win.document.createTextNode(newVNode2.$text$);
420
575
  } else {
576
+ if (!isSvgMode) {
577
+ isSvgMode = newVNode2.$tag$ === "svg";
578
+ }
421
579
  if (!win.document) {
422
580
  throw new Error(
423
581
  "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."
424
582
  );
425
583
  }
426
- elm = newVNode2.$elm$ = win.document.createElement(
584
+ elm = newVNode2.$elm$ = win.document.createElementNS(
585
+ isSvgMode ? SVG_NS : HTML_NS,
427
586
  !useNativeShadowDom && BUILD.slotRelocation && newVNode2.$flags$ & 2 /* isSlotFallback */ ? "slot-fb" : newVNode2.$tag$
428
- );
587
+ ) ;
588
+ if (isSvgMode && newVNode2.$tag$ === "foreignObject") {
589
+ isSvgMode = false;
590
+ }
429
591
  {
430
592
  updateElement(null, newVNode2, isSvgMode);
431
593
  }
@@ -437,6 +599,13 @@ var createElm = (oldParentVNode, newParentVNode, childIndex) => {
437
599
  }
438
600
  }
439
601
  }
602
+ {
603
+ if (newVNode2.$tag$ === "svg") {
604
+ isSvgMode = false;
605
+ } else if (elm.tagName === "foreignObject") {
606
+ isSvgMode = true;
607
+ }
608
+ }
440
609
  }
441
610
  elm["s-hn"] = hostTagName;
442
611
  return elm;
@@ -568,8 +737,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
568
737
  const elm = newVNode2.$elm$ = oldVNode.$elm$;
569
738
  const oldChildren = oldVNode.$children$;
570
739
  const newChildren = newVNode2.$children$;
740
+ const tag = newVNode2.$tag$;
571
741
  const text = newVNode2.$text$;
572
742
  if (text === null) {
743
+ {
744
+ isSvgMode = tag === "svg" ? true : tag === "foreignObject" ? false : isSvgMode;
745
+ }
573
746
  {
574
747
  updateElement(oldVNode, newVNode2, isSvgMode);
575
748
  }
@@ -586,6 +759,9 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
586
759
  ) {
587
760
  removeVnodes(oldChildren, 0, oldChildren.length - 1);
588
761
  }
762
+ if (isSvgMode && tag === "svg") {
763
+ isSvgMode = false;
764
+ }
589
765
  } else if (oldVNode.$text$ !== text) {
590
766
  elm.data = text;
591
767
  }
@@ -652,6 +828,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
652
828
  }
653
829
  let maybePromise;
654
830
  if (isInitialLoad) {
831
+ {
832
+ hostRef.$flags$ |= 256 /* isListenReady */;
833
+ if (hostRef.$queuedListeners$) {
834
+ hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
835
+ hostRef.$queuedListeners$ = void 0;
836
+ }
837
+ }
655
838
  maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
656
839
  } else {
657
840
  maybePromise = safeCall(instance, "componentWillUpdate", void 0, elm);
@@ -670,6 +853,9 @@ var updateComponent = async (hostRef, instance, isInitialLoad) => {
670
853
  const elm = hostRef.$hostElement$;
671
854
  const endUpdate = createTime("update", hostRef.$cmpMeta$.$tagName$);
672
855
  const rc = elm["s-rc"];
856
+ if (isInitialLoad) {
857
+ attachStyles(hostRef);
858
+ }
673
859
  const endRender = createTime("render", hostRef.$cmpMeta$.$tagName$);
674
860
  {
675
861
  callRender(hostRef, instance, elm, isInitialLoad);
@@ -737,6 +923,9 @@ var postUpdateComponent = (hostRef) => {
737
923
  safeCall(instance, "componentDidUpdate", void 0, elm);
738
924
  endPostUpdate();
739
925
  }
926
+ {
927
+ hostRef.$onInstanceResolve$(elm);
928
+ }
740
929
  {
741
930
  if (hostRef.$onRenderResolve$) {
742
931
  hostRef.$onRenderResolve$();
@@ -775,6 +964,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
775
964
  `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/ionic-team/stencil/issues/5457).`
776
965
  );
777
966
  }
967
+ const elm = hostRef.$hostElement$ ;
778
968
  const oldVal = hostRef.$instanceValues$.get(propName);
779
969
  const flags = hostRef.$flags$;
780
970
  const instance = hostRef.$lazyInstance$ ;
@@ -784,6 +974,18 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
784
974
  if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
785
975
  hostRef.$instanceValues$.set(propName, newVal);
786
976
  if (instance) {
977
+ if (cmpMeta.$watchers$ && flags & 128 /* isWatchReady */) {
978
+ const watchMethods = cmpMeta.$watchers$[propName];
979
+ if (watchMethods) {
980
+ watchMethods.map((watchMethodName) => {
981
+ try {
982
+ instance[watchMethodName](newVal, oldVal, propName);
983
+ } catch (e) {
984
+ consoleError(e, elm);
985
+ }
986
+ });
987
+ }
988
+ }
787
989
  if ((flags & (2 /* hasRendered */ | 16 /* isQueuedForUpdate */)) === 2 /* hasRendered */) {
788
990
  if (instance.componentShouldUpdate) {
789
991
  if (instance.componentShouldUpdate(newVal, oldVal, propName) === false) {
@@ -800,7 +1002,10 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
800
1002
  var proxyComponent = (Cstr, cmpMeta, flags) => {
801
1003
  var _a, _b;
802
1004
  const prototype = Cstr.prototype;
803
- if (cmpMeta.$members$ || BUILD.watchCallback ) {
1005
+ if (cmpMeta.$members$ || (cmpMeta.$watchers$ || Cstr.watchers)) {
1006
+ if (Cstr.watchers && !cmpMeta.$watchers$) {
1007
+ cmpMeta.$watchers$ = Cstr.watchers;
1008
+ }
804
1009
  const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
805
1010
  members.map(([memberName, [memberFlags]]) => {
806
1011
  if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -867,6 +1072,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
867
1072
  }
868
1073
  }
869
1074
  });
1075
+ } else if (flags & 1 /* isElementConstructor */ && memberFlags & 64 /* Method */) {
1076
+ Object.defineProperty(prototype, memberName, {
1077
+ value(...args) {
1078
+ var _a2;
1079
+ const ref = getHostRef(this);
1080
+ return (_a2 = ref == null ? void 0 : ref.$onInstancePromise$) == null ? void 0 : _a2.then(() => {
1081
+ var _a3;
1082
+ return (_a3 = ref.$lazyInstance$) == null ? void 0 : _a3[memberName](...args);
1083
+ });
1084
+ }
1085
+ });
870
1086
  }
871
1087
  });
872
1088
  if ((flags & 1 /* isElementConstructor */)) {
@@ -936,6 +1152,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
936
1152
  throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
937
1153
  }
938
1154
  if (!Cstr.isProxied) {
1155
+ {
1156
+ cmpMeta.$watchers$ = Cstr.watchers;
1157
+ }
939
1158
  proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
940
1159
  Cstr.isProxied = true;
941
1160
  }
@@ -951,6 +1170,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
951
1170
  {
952
1171
  hostRef.$flags$ &= ~8 /* isConstructingInstance */;
953
1172
  }
1173
+ {
1174
+ hostRef.$flags$ |= 128 /* isWatchReady */;
1175
+ }
954
1176
  endNewInstance();
955
1177
  fireConnectedCallback(hostRef.$lazyInstance$, elm);
956
1178
  } else {
@@ -958,6 +1180,18 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
958
1180
  const cmpTag = elm.localName;
959
1181
  customElements.whenDefined(cmpTag).then(() => hostRef.$flags$ |= 128 /* isWatchReady */);
960
1182
  }
1183
+ if (Cstr && Cstr.style) {
1184
+ let style;
1185
+ if (typeof Cstr.style === "string") {
1186
+ style = Cstr.style;
1187
+ }
1188
+ const scopeId2 = getScopeId(cmpMeta);
1189
+ if (!styles.has(scopeId2)) {
1190
+ const endRegisterStyles = createTime("registerStyles", cmpMeta.$tagName$);
1191
+ registerStyle(scopeId2, style, !!(cmpMeta.$flags$ & 1 /* shadowDomEncapsulation */));
1192
+ endRegisterStyles();
1193
+ }
1194
+ }
961
1195
  }
962
1196
  const ancestorComponent = hostRef.$ancestorComponent$;
963
1197
  const schedule = () => scheduleUpdate(hostRef, true);
@@ -1003,6 +1237,7 @@ var connectedCallback = (elm) => {
1003
1237
  initializeComponent(elm, hostRef, cmpMeta);
1004
1238
  }
1005
1239
  } else {
1240
+ addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1006
1241
  if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
1007
1242
  fireConnectedCallback(hostRef.$lazyInstance$, elm);
1008
1243
  } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1020,6 +1255,12 @@ var disconnectInstance = (instance, elm) => {
1020
1255
  var disconnectedCallback = async (elm) => {
1021
1256
  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1022
1257
  const hostRef = getHostRef(elm);
1258
+ {
1259
+ if (hostRef.$rmListeners$) {
1260
+ hostRef.$rmListeners$.map((rmListener) => rmListener());
1261
+ hostRef.$rmListeners$ = void 0;
1262
+ }
1263
+ }
1023
1264
  if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
1024
1265
  disconnectInstance(hostRef.$lazyInstance$, elm);
1025
1266
  } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1056,6 +1297,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1056
1297
  let hasSlotRelocation = false;
1057
1298
  lazyBundles.map((lazyBundle) => {
1058
1299
  lazyBundle[1].map((compactMeta) => {
1300
+ var _a2;
1059
1301
  const cmpMeta = {
1060
1302
  $flags$: compactMeta[0],
1061
1303
  $tagName$: compactMeta[1],
@@ -1068,6 +1310,12 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1068
1310
  {
1069
1311
  cmpMeta.$members$ = compactMeta[2];
1070
1312
  }
1313
+ {
1314
+ cmpMeta.$listeners$ = compactMeta[3];
1315
+ }
1316
+ {
1317
+ cmpMeta.$watchers$ = (_a2 = compactMeta[4]) != null ? _a2 : {};
1318
+ }
1071
1319
  const tagName = cmpMeta.$tagName$;
1072
1320
  const HostElement = class extends HTMLElement {
1073
1321
  // StencilLazyHost
@@ -1093,9 +1341,10 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1093
1341
  }
1094
1342
  }
1095
1343
  connectedCallback() {
1096
- getHostRef(this);
1344
+ const hostRef = getHostRef(this);
1097
1345
  if (!this.hasRegisteredEventListeners) {
1098
1346
  this.hasRegisteredEventListeners = true;
1347
+ addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
1099
1348
  }
1100
1349
  if (appLoadFallback) {
1101
1350
  clearTimeout(appLoadFallback);
@@ -1161,10 +1410,45 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
1161
1410
  }
1162
1411
  endBootstrap();
1163
1412
  };
1413
+ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1414
+ if (listeners && win.document) {
1415
+ listeners.map(([flags, name, method]) => {
1416
+ const target = getHostListenerTarget(win.document, elm, flags) ;
1417
+ const handler = hostListenerProxy(hostRef, method);
1418
+ const opts = hostListenerOpts(flags);
1419
+ plt.ael(target, name, handler, opts);
1420
+ (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
1421
+ });
1422
+ }
1423
+ };
1424
+ var hostListenerProxy = (hostRef, methodName) => (ev) => {
1425
+ var _a;
1426
+ try {
1427
+ {
1428
+ if (hostRef.$flags$ & 256 /* isListenReady */) {
1429
+ (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
1430
+ } else {
1431
+ (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
1432
+ }
1433
+ }
1434
+ } catch (e) {
1435
+ consoleError(e, hostRef.$hostElement$);
1436
+ }
1437
+ };
1438
+ var getHostListenerTarget = (doc, elm, flags) => {
1439
+ if (flags & 16 /* TargetBody */) {
1440
+ return doc.body;
1441
+ }
1442
+ return elm;
1443
+ };
1444
+ var hostListenerOpts = (flags) => supportsListenerOptions ? {
1445
+ passive: (flags & 1 /* Passive */) !== 0,
1446
+ capture: (flags & 2 /* Capture */) !== 0
1447
+ } : (flags & 2 /* Capture */) !== 0;
1164
1448
 
1165
1449
  // src/runtime/nonce.ts
1166
1450
  var setNonce = (nonce) => plt.$nonce$ = nonce;
1167
1451
 
1168
- export { bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1452
+ export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
1169
1453
 
1170
- //# sourceMappingURL=index-5147034e.js.map
1454
+ //# sourceMappingURL=index-60f5a964.js.map