@sula-tech/webcomponents 0.1.1 → 0.2.0

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 (63) hide show
  1. package/dist/cjs/{index-7973b779.js → index-3eac14f6.js} +102 -4
  2. package/dist/cjs/index-3eac14f6.js.map +1 -0
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/{sula-avatar_3.cjs.entry.js → sula-avatar_4.cjs.entry.js} +133 -5
  5. package/dist/cjs/sula-avatar_4.cjs.entry.js.map +1 -0
  6. package/dist/cjs/webcomponents.cjs.js +2 -2
  7. package/dist/collection/collection-manifest.json +2 -1
  8. package/dist/collection/components/sula-avatar/sula-avatar.css +1 -1
  9. package/dist/collection/components/sula-avatar/sula-avatar.stories.js +14 -17
  10. package/dist/collection/components/sula-avatar/sula-avatar.stories.js.map +1 -1
  11. package/dist/collection/components/sula-button/sula-button.css +1 -1
  12. package/dist/collection/components/sula-button/sula-button.stories.js +36 -9
  13. package/dist/collection/components/sula-button/sula-button.stories.js.map +1 -1
  14. package/dist/collection/components/sula-icon/sula-icon.css +1 -1
  15. package/dist/collection/components/sula-icon/sula-icon.stories.js +35 -14
  16. package/dist/collection/components/sula-icon/sula-icon.stories.js.map +1 -1
  17. package/dist/collection/components/sula-textfield/model/sula-textfield.model.js +11 -0
  18. package/dist/collection/components/sula-textfield/model/sula-textfield.model.js.map +1 -0
  19. package/dist/collection/components/sula-textfield/sula-textfield.css +1 -0
  20. package/dist/collection/components/sula-textfield/sula-textfield.js +376 -0
  21. package/dist/collection/components/sula-textfield/sula-textfield.js.map +1 -0
  22. package/dist/collection/components/sula-textfield/sula-textfield.stories.js +148 -0
  23. package/dist/collection/components/sula-textfield/sula-textfield.stories.js.map +1 -0
  24. package/dist/components/index.js +1 -1
  25. package/dist/components/{p-81fcc74a.js → p-a07ff261.js} +3 -3
  26. package/dist/components/{p-81fcc74a.js.map → p-a07ff261.js.map} +1 -1
  27. package/dist/components/{p-d3ba6302.js → p-ca146b16.js} +91 -5
  28. package/dist/components/p-ca146b16.js.map +1 -0
  29. package/dist/components/sula-avatar.js +3 -3
  30. package/dist/components/sula-avatar.js.map +1 -1
  31. package/dist/components/sula-button.js +3 -3
  32. package/dist/components/sula-button.js.map +1 -1
  33. package/dist/components/sula-icon.js +1 -1
  34. package/dist/components/sula-textfield.d.ts +11 -0
  35. package/dist/components/sula-textfield.js +171 -0
  36. package/dist/components/sula-textfield.js.map +1 -0
  37. package/dist/esm/{index-9bf8f892.js → index-1dc4ae53.js} +102 -4
  38. package/dist/esm/index-1dc4ae53.js.map +1 -0
  39. package/dist/esm/loader.js +3 -3
  40. package/dist/esm/{sula-avatar_3.entry.js → sula-avatar_4.entry.js} +133 -6
  41. package/dist/esm/sula-avatar_4.entry.js.map +1 -0
  42. package/dist/esm/webcomponents.js +3 -3
  43. package/dist/types/components/sula-avatar/sula-avatar.stories.d.ts +0 -1
  44. package/dist/types/components/sula-button/sula-button.stories.d.ts +2 -0
  45. package/dist/types/components/sula-icon/sula-icon.stories.d.ts +5 -2
  46. package/dist/types/components/sula-textfield/model/sula-textfield.model.d.ts +8 -0
  47. package/dist/types/components/sula-textfield/sula-textfield.d.ts +74 -0
  48. package/dist/types/components/sula-textfield/sula-textfield.stories.d.ts +108 -0
  49. package/dist/types/components.d.ts +116 -0
  50. package/dist/webcomponents/{p-82d7a024.entry.js → p-77709b3c.entry.js} +201 -9
  51. package/dist/webcomponents/p-77709b3c.entry.js.map +1 -0
  52. package/dist/webcomponents/{p-cca32e44.js → p-fbee9d79.js} +426 -325
  53. package/dist/webcomponents/p-fbee9d79.js.map +1 -0
  54. package/dist/webcomponents/webcomponents.esm.js +27 -13
  55. package/dist/webcomponents/webcomponents.esm.js.map +1 -1
  56. package/package.json +20 -12
  57. package/dist/cjs/index-7973b779.js.map +0 -1
  58. package/dist/cjs/sula-avatar_3.cjs.entry.js.map +0 -1
  59. package/dist/components/p-d3ba6302.js.map +0 -1
  60. package/dist/esm/index-9bf8f892.js.map +0 -1
  61. package/dist/esm/sula-avatar_3.entry.js.map +0 -1
  62. package/dist/webcomponents/p-82d7a024.entry.js.map +0 -1
  63. package/dist/webcomponents/p-cca32e44.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  const NAMESPACE = 'webcomponents';
2
- const BUILD = /* webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: false, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: false, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: 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", invisiblePrehydration: true, isDebug: true, isDev: false, isTesting: false, lazyLoad: false, lifecycle: false, lifecycleDOMEvents: true, member: true, method: false, mode: false, modernPropertyDecls: false, observeAttribute: true, profile: false, prop: true, propBoolean: true, propMutable: true, propNumber: false, propString: true, reflect: false, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: false, shadowDom: true, slot: false, slotChildNodesFix: false, slotRelocation: false, state: false, style: true, svg: false, taskQueue: true, 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 = /* webcomponents */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: false, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: false, constructableCSS: true, cssAnnotations: true, devTools: false, disconnectedCallback: false, element: false, event: true, experimentalScopedSlotChanges: false, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: true, hostListenerTargetBody: false, hostListenerTargetDocument: true, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: false, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, hydratedSelectorName: "hydrated", invisiblePrehydration: true, isDebug: true, isDev: false, isTesting: false, lazyLoad: false, lifecycle: true, lifecycleDOMEvents: true, member: true, method: false, 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: false, slotChildNodesFix: false, slotRelocation: false, state: true, style: true, svg: false, taskQueue: true, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: false, vdomText: true, vdomXlink: false, watchCallback: false };
3
3
 
4
4
  /*
5
5
  Stencil Client Platform v4.26.0 | MIT Licensed | https://stenciljs.com
@@ -49,6 +49,22 @@ var plt = {
49
49
  rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),
50
50
  ce: (eventName, opts) => new CustomEvent(eventName, opts)
51
51
  };
52
+ var supportsListenerOptions = /* @__PURE__ */ (() => {
53
+ let supportsListenerOptions2 = false;
54
+ try {
55
+ doc.addEventListener(
56
+ "e",
57
+ null,
58
+ Object.defineProperty({}, "passive", {
59
+ get() {
60
+ supportsListenerOptions2 = true;
61
+ }
62
+ })
63
+ );
64
+ } catch (e) {
65
+ }
66
+ return supportsListenerOptions2;
67
+ })();
52
68
  var promiseResolve = (v) => Promise.resolve(v);
53
69
  var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
54
70
  try {
@@ -235,6 +251,9 @@ var parsePropertyValue = (propValue, propType) => {
235
251
  if (propType & 4 /* Boolean */) {
236
252
  return propValue === "false" ? false : propValue === "" || !!propValue;
237
253
  }
254
+ if (propType & 2 /* Number */) {
255
+ return parseFloat(propValue);
256
+ }
238
257
  if (propType & 1 /* String */) {
239
258
  return String(propValue);
240
259
  }
@@ -368,7 +387,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
368
387
  classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
369
388
  classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
370
389
  }
371
- } else if (memberName === "key") ; else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
390
+ } else if (memberName === "key") ; else if (memberName === "ref") {
391
+ if (newValue) {
392
+ newValue(elm);
393
+ }
394
+ } else if ((!elm.__lookupSetter__(memberName)) && memberName[0] === "o" && memberName[1] === "n") {
372
395
  if (memberName[2] === "-") {
373
396
  memberName = memberName.slice(3);
374
397
  } else if (isMemberInElement(win, ln)) {
@@ -522,6 +545,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
522
545
  const vnode = vnodes[index];
523
546
  if (vnode) {
524
547
  const elm = vnode.$elm$;
548
+ nullifyVNodeRefs(vnode);
525
549
  if (elm) {
526
550
  elm.remove();
527
551
  }
@@ -652,6 +676,12 @@ var patch = (oldVNode, newVNode2, isInitialRender = false) => {
652
676
  elm.data = text;
653
677
  }
654
678
  };
679
+ var nullifyVNodeRefs = (vNode) => {
680
+ {
681
+ vNode.$attrs$ && vNode.$attrs$.ref && vNode.$attrs$.ref(null);
682
+ vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
683
+ }
684
+ };
655
685
  var insertBefore = (parent, newNode, reference) => {
656
686
  {
657
687
  return parent == null ? void 0 : parent.insertBefore(newNode, reference);
@@ -715,6 +745,9 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
715
745
  let maybePromise;
716
746
  if (isInitialLoad) {
717
747
  emitLifecycleEvent(elm, "componentWillLoad");
748
+ {
749
+ maybePromise = safeCall(instance, "componentWillLoad", void 0, elm);
750
+ }
718
751
  } else {
719
752
  emitLifecycleEvent(elm, "componentWillUpdate");
720
753
  }
@@ -782,6 +815,7 @@ var postUpdateComponent = (hostRef) => {
782
815
  const tagName = hostRef.$cmpMeta$.$tagName$;
783
816
  const elm = hostRef.$hostElement$;
784
817
  const endPostUpdate = createTime("postUpdate", tagName);
818
+ const instance = elm;
785
819
  const ancestorComponent = hostRef.$ancestorComponent$;
786
820
  emitLifecycleEvent(elm, "componentDidRender");
787
821
  if (!(hostRef.$flags$ & 64 /* hasLoadedComponent */)) {
@@ -789,6 +823,9 @@ var postUpdateComponent = (hostRef) => {
789
823
  {
790
824
  addHydratedFlag(elm);
791
825
  }
826
+ {
827
+ safeCall(instance, "componentDidLoad", void 0, elm);
828
+ }
792
829
  emitLifecycleEvent(elm, "componentDidLoad");
793
830
  endPostUpdate();
794
831
  {
@@ -815,6 +852,16 @@ var postUpdateComponent = (hostRef) => {
815
852
  var appDidLoad = (who) => {
816
853
  nextTick(() => emitEvent(win, "appload", { detail: { namespace: NAMESPACE } }));
817
854
  };
855
+ var safeCall = (instance, method, arg, elm) => {
856
+ if (instance && instance[method]) {
857
+ try {
858
+ return instance[method](arg);
859
+ } catch (e) {
860
+ consoleError(e, elm);
861
+ }
862
+ }
863
+ return void 0;
864
+ };
818
865
  var emitLifecycleEvent = (elm, lifecycleName) => {
819
866
  {
820
867
  emitEvent(elm, "stencil_" + lifecycleName, {
@@ -1008,6 +1055,7 @@ var connectedCallback = (elm) => {
1008
1055
  initializeComponent(elm, hostRef, cmpMeta);
1009
1056
  }
1010
1057
  } else {
1058
+ addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
1011
1059
  if (hostRef == null ? void 0 : hostRef.$lazyInstance$) ; else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
1012
1060
  hostRef.$onReadyPromise$.then(() => fireConnectedCallback());
1013
1061
  }
@@ -1017,7 +1065,13 @@ var connectedCallback = (elm) => {
1017
1065
  };
1018
1066
  var disconnectedCallback = async (elm) => {
1019
1067
  if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
1020
- getHostRef(elm);
1068
+ const hostRef = getHostRef(elm);
1069
+ {
1070
+ if (hostRef.$rmListeners$) {
1071
+ hostRef.$rmListeners$.map((rmListener) => rmListener());
1072
+ hostRef.$rmListeners$ = void 0;
1073
+ }
1074
+ }
1021
1075
  }
1022
1076
  if (rootAppliedStyles.has(elm)) {
1023
1077
  rootAppliedStyles.delete(elm);
@@ -1034,6 +1088,9 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1034
1088
  {
1035
1089
  cmpMeta.$members$ = compactMeta[2];
1036
1090
  }
1091
+ {
1092
+ cmpMeta.$listeners$ = compactMeta[3];
1093
+ }
1037
1094
  Object.assign(Cstr.prototype, {
1038
1095
  __hasHostListenerAttached: false,
1039
1096
  __registerHost() {
@@ -1041,7 +1098,8 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1041
1098
  },
1042
1099
  connectedCallback() {
1043
1100
  if (!this.__hasHostListenerAttached) {
1044
- getHostRef(this);
1101
+ const hostRef = getHostRef(this);
1102
+ addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
1045
1103
  this.__hasHostListenerAttached = true;
1046
1104
  }
1047
1105
  connectedCallback(this);
@@ -1078,6 +1136,34 @@ var proxyCustomElement = (Cstr, compactMeta) => {
1078
1136
  Cstr.is = cmpMeta.$tagName$;
1079
1137
  return proxyComponent(Cstr, cmpMeta, 1 /* isElementConstructor */ | 2 /* proxyState */);
1080
1138
  };
1139
+ var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
1140
+ if (listeners) {
1141
+ listeners.map(([flags, name, method]) => {
1142
+ const target = getHostListenerTarget(elm, flags) ;
1143
+ const handler = hostListenerProxy(hostRef, method);
1144
+ const opts = hostListenerOpts(flags);
1145
+ plt.ael(target, name, handler, opts);
1146
+ (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
1147
+ });
1148
+ }
1149
+ };
1150
+ var hostListenerProxy = (hostRef, methodName) => (ev) => {
1151
+ try {
1152
+ {
1153
+ hostRef.$hostElement$[methodName](ev);
1154
+ }
1155
+ } catch (e) {
1156
+ consoleError(e, hostRef.$hostElement$);
1157
+ }
1158
+ };
1159
+ var getHostListenerTarget = (elm, flags) => {
1160
+ if (flags & 4 /* TargetDocument */) return doc;
1161
+ return elm;
1162
+ };
1163
+ var hostListenerOpts = (flags) => supportsListenerOptions ? {
1164
+ passive: (flags & 1 /* Passive */) !== 0,
1165
+ capture: (flags & 2 /* Capture */) !== 0
1166
+ } : (flags & 2 /* Capture */) !== 0;
1081
1167
 
1082
1168
  // src/runtime/nonce.ts
1083
1169
  var setNonce = (nonce) => plt.$nonce$ = nonce;
@@ -1087,4 +1173,4 @@ var setPlatformOptions = (opts) => Object.assign(plt, opts);
1087
1173
 
1088
1174
  export { H, setNonce as a, setPlatformOptions as b, Host as c, createEvent as d, getAssetPath as g, h, proxyCustomElement as p, setAssetPath as s };
1089
1175
 
1090
- //# sourceMappingURL=p-d3ba6302.js.map
1176
+ //# sourceMappingURL=p-ca146b16.js.map