@twobirds/microcomponents 0.0.82 → 0.0.84

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 (268) hide show
  1. package/assets/documentation/MC.md +0 -1
  2. package/assets/test/test.html +1 -1
  3. package/dist/MC.d.ts +11 -10
  4. package/dist/MC.d.ts.map +1 -1
  5. package/dist/MC.js +137 -200
  6. package/dist/MC.min.js +157 -296
  7. package/dist/MC.ts +202 -337
  8. package/dist/elements.d.ts +1 -1
  9. package/dist/elements.d.ts.map +1 -1
  10. package/dist/elements.js +26 -6
  11. package/dist/elements.min.js +1 -1
  12. package/dist/elements.ts +50 -7
  13. package/dist/formValues.js +2 -2
  14. package/dist/formValues.min.js +1 -1
  15. package/dist/formValues.ts +3 -3
  16. package/dist/microcomponents.d.ts +0 -1
  17. package/dist/microcomponents.d.ts.map +1 -1
  18. package/dist/microcomponents.js +0 -1
  19. package/dist/microcomponents.min.js +1 -1
  20. package/dist/microcomponents.ts +1 -1
  21. package/dist/observables.d.ts.map +1 -1
  22. package/dist/observables.js +52 -57
  23. package/dist/observables.min.js +1 -1
  24. package/dist/observables.ts +68 -73
  25. package/package.json +6 -5
  26. package/public/MC.d.ts +11 -10
  27. package/public/MC.d.ts.map +1 -1
  28. package/public/MC.js +137 -200
  29. package/public/MC.js.map +1 -1
  30. package/public/MC.min.js +157 -296
  31. package/public/MC.ts +202 -337
  32. package/public/documentation/MC.md +0 -1
  33. package/public/elements.d.ts +1 -1
  34. package/public/elements.d.ts.map +1 -1
  35. package/public/elements.js +26 -6
  36. package/public/elements.js.map +1 -1
  37. package/public/elements.min.js +1 -1
  38. package/public/elements.ts +50 -7
  39. package/public/formValues.js +2 -2
  40. package/public/formValues.js.map +1 -1
  41. package/public/formValues.min.js +1 -1
  42. package/public/formValues.ts +3 -3
  43. package/public/microcomponents.d.ts +0 -1
  44. package/public/microcomponents.d.ts.map +1 -1
  45. package/public/microcomponents.js +0 -1
  46. package/public/microcomponents.js.map +1 -1
  47. package/public/microcomponents.min.js +1 -1
  48. package/public/microcomponents.ts +1 -1
  49. package/public/observables.d.ts.map +1 -1
  50. package/public/observables.js +52 -57
  51. package/public/observables.js.map +1 -1
  52. package/public/observables.min.js +1 -1
  53. package/public/observables.ts +68 -73
  54. package/public/{test/selectors.ts → selectors._ts} +2 -367
  55. package/public/src/MC.d.ts +37 -0
  56. package/public/src/MC.d.ts.map +1 -0
  57. package/public/src/MC.js +316 -0
  58. package/public/src/MC.js.map +1 -0
  59. package/public/src/MC.ts +202 -337
  60. package/public/src/elements.d.ts +5 -0
  61. package/public/src/elements.d.ts.map +1 -0
  62. package/public/src/elements.js +68 -0
  63. package/public/src/elements.js.map +1 -0
  64. package/public/src/elements.ts +50 -7
  65. package/public/src/formValues.d.ts +3 -0
  66. package/public/src/formValues.d.ts.map +1 -0
  67. package/public/src/formValues.js +162 -0
  68. package/public/src/formValues.js.map +1 -0
  69. package/public/src/formValues.ts +3 -3
  70. package/public/src/helpers.d.ts +14 -0
  71. package/public/src/helpers.d.ts.map +1 -0
  72. package/public/src/helpers.js +113 -0
  73. package/public/src/microcomponents.d.ts +6 -0
  74. package/public/src/microcomponents.d.ts.map +1 -0
  75. package/public/src/microcomponents.js +7 -0
  76. package/public/src/microcomponents.js.map +1 -0
  77. package/public/src/microcomponents.ts +1 -1
  78. package/public/src/observables.d.ts +11 -0
  79. package/public/src/observables.d.ts.map +1 -0
  80. package/public/src/observables.js +244 -0
  81. package/public/src/observables.js.map +1 -0
  82. package/public/src/observables.ts +68 -73
  83. package/public/{selectors.ts → src/selectors._ts} +2 -367
  84. package/public/src/test/grandparent.css +11 -0
  85. package/public/src/test/test/child.d.ts +2 -0
  86. package/public/src/test/test/child.d.ts.map +1 -0
  87. package/public/src/test/test/child.js +15 -0
  88. package/public/src/test/test/child.js.map +1 -0
  89. package/public/src/test/test/child.ts +21 -0
  90. package/public/src/test/test/grandchild.d.ts +2 -0
  91. package/public/src/test/test/grandchild.d.ts.map +1 -0
  92. package/public/src/test/test/grandchild.js +15 -0
  93. package/public/src/test/test/grandchild.js.map +1 -0
  94. package/public/src/test/test/grandchild.ts +21 -0
  95. package/public/src/test/test/grandparent.d.ts +2 -0
  96. package/public/src/test/test/grandparent.d.ts.map +1 -0
  97. package/public/src/test/test/grandparent.js +1 -0
  98. package/public/src/test/test/grandparent.js.map +1 -0
  99. package/public/src/test/test/grandparent.ts +29 -0
  100. package/public/src/test/test/greatgrandchild.d.ts +2 -0
  101. package/public/src/test/test/greatgrandchild.d.ts.map +1 -0
  102. package/public/src/test/test/greatgrandchild.js +29 -0
  103. package/public/src/test/test/greatgrandchild.js.map +1 -0
  104. package/public/src/test/test/greatgrandchild.ts +42 -0
  105. package/public/src/test/test/parent.d.ts +2 -0
  106. package/public/src/test/test/parent.d.ts.map +1 -0
  107. package/public/src/test/test/parent.js +15 -0
  108. package/public/src/test/test/parent.js.map +1 -0
  109. package/public/src/test/test/parent.ts +21 -0
  110. package/public/src/test/test/testform.d.ts +2 -0
  111. package/public/src/test/test/testform.d.ts.map +1 -0
  112. package/public/src/test/test/testform.js +1 -0
  113. package/public/src/test/test/testform.js.map +1 -0
  114. package/public/src/test/test/testform.ts +153 -0
  115. package/public/src/test/test/testfunction.d.ts +3 -0
  116. package/public/src/test/test/testfunction.d.ts.map +1 -0
  117. package/public/src/test/test/testfunction.js +7 -0
  118. package/public/src/test/test/testfunction.js.map +1 -0
  119. package/public/src/test/test/testfunction.ts +12 -0
  120. package/public/src/test/test/testmc.d.ts +3 -0
  121. package/public/src/test/test/testmc.d.ts.map +1 -0
  122. package/public/src/test/test/testmc.js +10 -0
  123. package/public/src/test/test/testmc.js.map +1 -0
  124. package/public/src/test/test/testmc.ts +16 -0
  125. package/public/src/test/test/testsimpleclass.d.ts +3 -0
  126. package/public/src/test/test/testsimpleclass.d.ts.map +1 -0
  127. package/public/src/test/test/testsimpleclass.js +9 -0
  128. package/public/src/test/test/testsimpleclass.js.map +1 -0
  129. package/public/src/test/test/testsimpleclass.ts +15 -0
  130. package/public/src/test/test.d.ts +2 -0
  131. package/public/src/test/test.d.ts.map +1 -0
  132. package/public/src/test/test.js +80 -0
  133. package/public/src/test/test.js.map +1 -0
  134. package/public/src/test/test.ts +188 -0
  135. package/public/src/test/testform.css +47 -0
  136. package/public/src/test/testform.html +56 -0
  137. package/public/src/test/testform.json +27 -0
  138. package/public/test/MC.d.ts +11 -10
  139. package/public/test/MC.d.ts.map +1 -1
  140. package/public/test/MC.js +137 -200
  141. package/public/test/MC.min.js +377 -0
  142. package/public/test/MC.ts +202 -337
  143. package/public/test/elements.d.ts +1 -1
  144. package/public/test/elements.d.ts.map +1 -1
  145. package/public/test/elements.js +26 -6
  146. package/public/test/elements.min.js +1 -0
  147. package/public/test/elements.ts +50 -7
  148. package/public/test/formValues.js +2 -2
  149. package/public/test/formValues.min.js +1 -0
  150. package/public/test/formValues.ts +3 -3
  151. package/public/test/grandparent.css +1 -3
  152. package/public/test/microcomponents.d.ts +0 -1
  153. package/public/test/microcomponents.d.ts.map +1 -1
  154. package/public/test/microcomponents.js +0 -1
  155. package/public/test/microcomponents.min.js +1 -1
  156. package/public/test/microcomponents.ts +1 -1
  157. package/public/test/observables.d.ts.map +1 -1
  158. package/public/test/observables.js +52 -57
  159. package/public/test/observables.min.js +1 -0
  160. package/public/test/observables.ts +68 -73
  161. package/public/test/test/child.ts +21 -0
  162. package/public/test/test/grandchild.ts +21 -0
  163. package/public/test/test/grandparent.d.ts.map +1 -1
  164. package/public/test/test/grandparent.js +1 -1
  165. package/public/test/test/grandparent.js.map +1 -1
  166. package/public/test/test/grandparent.ts +29 -0
  167. package/public/test/test/greatgrandchild.ts +42 -0
  168. package/public/test/test/parent.ts +21 -0
  169. package/public/test/test/testform.js +1 -1
  170. package/public/test/test/testform.js.map +1 -1
  171. package/public/test/test/testform.ts +153 -0
  172. package/public/test/test/testfunction.d.ts +3 -0
  173. package/public/test/test/testfunction.d.ts.map +1 -0
  174. package/public/test/test/testfunction.js +7 -0
  175. package/public/test/test/testfunction.js.map +1 -0
  176. package/public/test/test/testfunction.ts +12 -0
  177. package/public/test/test/testmc.d.ts +2 -5
  178. package/public/test/test/testmc.d.ts.map +1 -1
  179. package/public/test/test/testmc.js +4 -4
  180. package/public/test/test/testmc.js.map +1 -1
  181. package/public/test/test/testmc.ts +16 -0
  182. package/public/test/test/testsimpleclass.d.ts +3 -0
  183. package/public/test/test/testsimpleclass.d.ts.map +1 -0
  184. package/public/test/test/testsimpleclass.js +9 -0
  185. package/public/test/test/testsimpleclass.js.map +1 -0
  186. package/public/test/test/testsimpleclass.ts +15 -0
  187. package/public/test/test.html +1 -1
  188. package/public/test/test.js +5 -6
  189. package/public/test/test.js.map +1 -1
  190. package/public/test/test.ts +188 -0
  191. package/public/test/testform.css +47 -0
  192. package/public/test/testform.html +56 -0
  193. package/public/test/testform.json +3 -3
  194. package/public/typedoc/assets/navigation.js +1 -1
  195. package/public/typedoc/assets/search.js +1 -1
  196. package/public/typedoc/classes/MC.DC.html +6 -4
  197. package/public/typedoc/classes/MC.MC.html +3 -4
  198. package/public/typedoc/classes/MC.McBase.html +2 -2
  199. package/public/typedoc/functions/MC.autoload.html +1 -1
  200. package/public/typedoc/functions/MC.off.html +1 -0
  201. package/public/typedoc/functions/MC.on.html +1 -0
  202. package/public/typedoc/functions/MC.one.html +1 -0
  203. package/public/typedoc/functions/elements.defineCE.html +1 -1
  204. package/public/typedoc/functions/elements.getCE.html +1 -1
  205. package/public/typedoc/functions/formValues.formValues.html +1 -1
  206. package/public/typedoc/functions/observables.observe.html +1 -1
  207. package/public/typedoc/interfaces/MC.HTMLMcElement.html +2 -2
  208. package/public/typedoc/modules/MC.html +7 -6
  209. package/public/typedoc/modules/elements.html +1 -1
  210. package/public/typedoc/modules/formValues.html +1 -1
  211. package/public/typedoc/modules/observables.html +1 -1
  212. package/public/typedoc/types/observables.Observable.html +1 -1
  213. package/src/MC.ts +202 -337
  214. package/src/elements.ts +50 -7
  215. package/src/formValues.ts +3 -3
  216. package/src/microcomponents.ts +1 -1
  217. package/src/observables.ts +68 -73
  218. package/{dist/selectors.ts → src/selectors._ts} +2 -367
  219. package/src/test/test/grandparent.ts +12 -4
  220. package/src/test/test/testform.ts +13 -11
  221. package/src/test/test/testfunction.ts +12 -0
  222. package/src/test/test/testmc.ts +13 -9
  223. package/src/test/test/testsimpleclass.ts +15 -0
  224. package/src/test/test.ts +8 -20
  225. package/tasks.md +36 -0
  226. package/tsconfig.json +2 -2
  227. package/typedoc.json +1 -1
  228. package/webpack.config.js +2 -2
  229. package/dist/McEvent.d.ts +0 -15
  230. package/dist/McEvent.d.ts.map +0 -1
  231. package/dist/McEvent.js +0 -71
  232. package/dist/selectors.d.ts +0 -108
  233. package/dist/selectors.d.ts.map +0 -1
  234. package/dist/selectors.js +0 -971
  235. package/dist/selectors.min.js +0 -1
  236. package/public/McEvent.d.ts +0 -15
  237. package/public/McEvent.d.ts.map +0 -1
  238. package/public/McEvent.js +0 -71
  239. package/public/McEvent.js.map +0 -1
  240. package/public/selectors.d.ts +0 -108
  241. package/public/selectors.d.ts.map +0 -1
  242. package/public/selectors.js +0 -971
  243. package/public/selectors.js.map +0 -1
  244. package/public/selectors.min.js +0 -1
  245. package/public/src/selectors.ts +0 -1634
  246. package/public/test/MC.js.map +0 -1
  247. package/public/test/McEvent.d.ts +0 -15
  248. package/public/test/McEvent.d.ts.map +0 -1
  249. package/public/test/McEvent.js +0 -71
  250. package/public/test/McEvent.js.map +0 -1
  251. package/public/test/McEvent.ts +0 -96
  252. package/public/test/elements.js.map +0 -1
  253. package/public/test/formValues.js.map +0 -1
  254. package/public/test/microcomponents.js.map +0 -1
  255. package/public/test/observables.js.map +0 -1
  256. package/public/test/selectors.d.ts +0 -108
  257. package/public/test/selectors.d.ts.map +0 -1
  258. package/public/test/selectors.js +0 -971
  259. package/public/test/selectors.js.map +0 -1
  260. package/public/typedoc/classes/MC.McEvent.html +0 -9
  261. package/public/typedoc/functions/MC.addListener.html +0 -1
  262. package/public/typedoc/functions/MC.removeListener.html +0 -1
  263. package/src/McEvent.ts +0 -96
  264. package/src/selectors.ts +0 -1634
  265. /package/{dist/McEvent.ts → public/McEvent._ts} +0 -0
  266. /package/public/{McEvent.ts → src/McEvent._ts} +0 -0
  267. /package/public/{test → src}/helpers.js.map +0 -0
  268. /package/{public/src/McEvent.ts → src/McEvent._ts} +0 -0
@@ -1,17 +1,16 @@
1
1
  'use strict';
2
2
  import { debounce, deepEqual, flattenObject, copyGettersSetters, } from './helpers.js';
3
- import { DC } from './MC.js';
3
+ import { DC, trigger } from './MC.js';
4
4
  function isObservableObject(value) {
5
5
  return value != null && typeof value === 'object';
6
6
  }
7
7
  function getPlaceholders(target) {
8
8
  let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
9
- target
10
- .getAttributeNames()
9
+ (!!target.getAttributeNames ? target.getAttributeNames() : [])
11
10
  .filter((attr) => target.getAttribute(attr)?.match(regEx))
12
11
  .forEach((attr) => {
13
- let phs = new Set(target.getAttribute(attr)?.match(regEx));
14
- phs.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
12
+ let placeholders = new Set(target.getAttribute(attr)?.match(regEx));
13
+ placeholders.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
15
14
  });
16
15
  [...target.childNodes]
17
16
  .filter((childNode) => {
@@ -33,22 +32,19 @@ class Placeholders extends DC {
33
32
  oldDisplay = '';
34
33
  constructor(target) {
35
34
  super(target);
36
- let that = this;
37
- getPlaceholders(target).forEach((property) => (that.data[property] = ''));
38
- observe(that);
39
- that.#attachCallbacks();
40
- delete that._mc;
35
+ getPlaceholders(target).forEach((property) => (this.data[property] = ''));
36
+ observe(this);
37
+ this.#attachCallbacks();
41
38
  }
42
39
  #attachCallbacks() {
43
- let that = this, target = that.target, hide = false;
44
- target
45
- .getAttributeNames()
40
+ let target = this.target, hide = false;
41
+ (!!target.getAttributeNames ? target.getAttributeNames() : [])
46
42
  .filter((attr) => target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g))
47
43
  .forEach((attr) => {
48
- let phs = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
49
- that.data.observe(((template) => (data) => {
44
+ let placeholders = new Set(target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g));
45
+ this.data.observe(((template) => (data) => {
50
46
  let result = template;
51
- phs.forEach((placeholder) => {
47
+ placeholders.forEach((placeholder) => {
52
48
  result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
53
49
  });
54
50
  target.setAttribute(attr, result);
@@ -61,26 +57,22 @@ class Placeholders extends DC {
61
57
  })
62
58
  .forEach((childNode) => {
63
59
  hide = true;
64
- let phs = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
65
- that.data.observe(((template) => (data) => {
60
+ let placeholders = new Set(childNode.nodeValue.match(/\{[^\{\}]*\}/g));
61
+ this.data.observe(((template) => (data) => {
66
62
  let result = template;
67
- phs.forEach((placeholder) => {
63
+ placeholders.forEach((placeholder) => {
68
64
  result = result.replace(placeholder, data[placeholder.replace(/[\{\}]/g, '')]);
69
65
  });
70
- if (Object.keys(data).some((key) => {
71
- return !!data[key];
72
- })) {
73
- if (!!that.oldDisplay) {
74
- target.style = that.oldDisplay;
75
- }
76
- else {
77
- target.removeAttribute('style');
78
- }
79
- delete that.oldDisplay;
66
+ if (!!this.oldDisplay) {
67
+ target.style = this.oldDisplay;
80
68
  }
69
+ else {
70
+ target.removeAttribute('style');
71
+ }
72
+ delete this.oldDisplay;
81
73
  childNode.nodeValue = result;
82
74
  })(childNode.nodeValue));
83
- that.oldDisplay = target.getAttribute('style)') || '';
75
+ this.oldDisplay = target.getAttribute('style') || '';
84
76
  if (hide &&
85
77
  !inputs.includes(target.constructor) &&
86
78
  target.tagName !== 'FIELDSET') {
@@ -89,20 +81,21 @@ class Placeholders extends DC {
89
81
  });
90
82
  }
91
83
  onData(ev) {
92
- let that = this, data = {};
93
- Object.keys(ev.data).forEach((key) => {
94
- if (that.data.hasOwnProperty(key))
95
- data[key] = ev.data[key];
84
+ let data = {};
85
+ Object.keys(ev.detail.data).forEach((key) => {
86
+ if (this.data.hasOwnProperty(key))
87
+ data[key] = ev.detail.data[key];
96
88
  });
97
- if (JSON.stringify(data) !== JSON.stringify(that.data))
98
- Object.assign(that.data, data);
89
+ if (JSON.stringify(data) !== JSON.stringify(this.data))
90
+ Object.assign(this.data, data);
99
91
  }
100
92
  }
101
93
  function getPlaceholderElements(target) {
102
- let elements = (target instanceof HTMLElement ? [target] : [])
94
+ let elements = [target]
103
95
  .concat([...target.querySelectorAll('*')])
104
96
  .filter((e) => !!getPlaceholders(e).length)
105
- .filter((e) => e.tagName !== 'STYLE');
97
+ .filter((e) => e?.tagName !== 'STYLE')
98
+ .reverse();
106
99
  return elements;
107
100
  }
108
101
  function makePlaceholders(element) {
@@ -133,45 +126,47 @@ function makeObservable(val) {
133
126
  set callbacks(callbacks) {
134
127
  this.#callbacks = callbacks;
135
128
  }
136
- observe(f) {
137
- this.#callbacks.push(f);
129
+ observe(callback) {
130
+ this.#callbacks.push(callback);
138
131
  return this;
139
132
  }
140
133
  bind(target) {
141
- const that = this, iso = isObservableObject(that.valueOf());
134
+ const iso = isObservableObject(this.valueOf());
142
135
  if (iso) {
143
136
  makePlaceholders(target);
144
137
  const placeholders = [
145
- ...target.querySelectorAll('[_mc]'),
146
- ].filter((e) => !!e?._mc?._placeholders);
138
+ target,
139
+ ...target.querySelectorAll('[data-mc]'),
140
+ ]
141
+ .filter((e) => !!e?._mc?._placeholders);
147
142
  const func = function callback(data) {
148
- let d = flattenObject(data);
149
- placeholders.forEach((e) => {
150
- if (!e)
143
+ let flattenedData = flattenObject(data);
144
+ placeholders.forEach((node) => {
145
+ if (!node)
151
146
  return;
152
- e._mc.trigger('data', d);
147
+ trigger(node, 'data', flattenedData);
153
148
  });
154
149
  };
155
- that.#callbacks.push(func);
156
- that.notify();
150
+ this.#callbacks.push(func);
151
+ this.notify();
157
152
  }
158
153
  else {
159
- console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof that.valueOf(), that);
154
+ console.warn('IGNORED - cannot bind a non-Object to the dom, IS:', typeof this.valueOf(), this);
160
155
  }
161
156
  return this;
162
157
  }
163
158
  notify(notify) {
164
- let that = this, data = isObservableObject(that.valueOf()) &&
165
- that.valueOf() instanceof Array === false
166
- ? structuredClone(Object.assign({}, that))
167
- : that.valueOf();
159
+ let data = isObservableObject(this.valueOf()) &&
160
+ this.valueOf() instanceof Array === false
161
+ ? structuredClone(Object.assign({}, this))
162
+ : this.valueOf();
168
163
  if (notify !== undefined) {
169
- that.#notify = notify;
164
+ this.#notify = notify;
170
165
  }
171
- that.#callbacks.forEach((f) => {
166
+ this.#callbacks.forEach((f) => {
172
167
  f(data);
173
168
  });
174
- return that;
169
+ return this;
175
170
  }
176
171
  };
177
172
  classRepo[ConstructorName] = ObservableClass;
@@ -1 +1 @@
1
- !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>x});var a=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;a()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>s.add(t)));class i{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var l=new Function("try {return this===window;}catch(e){ return false;}");let u=new Set;function d(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function f(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function m(t){return t&&t instanceof HTMLElement}function p(t,e,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),t.addEventListener(e,r,c)}function b(t,e,r={}){let n=t;if(!n._mc){let e=E?.debug;E.debug=!1,n._mc=new E(t),E.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),r}function g(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function h(t,e,r={},n="l"){let o=t?._mc;if(!o)return;let c=e instanceof i?new i(e.type,e.data,"l"):new i(e,r,"l"),a="string"!=typeof e?e:new i(e,r,n);[...Object.values(o)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&y(t,a)}function y(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=f(t,"",!0)?.[0].target;r&&E.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&E.trigger(t,e)}))}),0)}l()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>u.add(t)));class O{#n;constructor(t,e=!1){var r;this.#n=new WeakRef(t||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!l()||t.constructor===E)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),u.has("on"+a)&&p(e,a,(t=>{r.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends O{_mc={};constructor(t){super(t)}static trigger=h;trigger(t,e={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=t instanceof i?new i(t.type,t.data,"l"):new i(t,e,"l"),c="string"!=typeof t?t:new i(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&y(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof t?t:new i(t,e,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&y(n.target,o)}}}class E extends O{_mc={};constructor(t,e=!1){super(t)}static add=b;static remove=g;static trigger=h;trigger(t,e={},r){w.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return m(e)?f(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return m(e)?f(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!m(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=d([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return m(e)?d([...e.querySelectorAll("*[_mc]")],t):[]}}const v=new Map,_=new Map;function A(t){const e="./"+t.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",e),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",t),r.setAttribute("loading",""),p(r,"load",(t=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),p(r,"error",(t=>{console.error("could not load Custom Element code from",e)})),r}function j(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!v.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),r=(e.split("-").join("/"),A(e));p(r,"load",(()=>{v.set(e,customElements.get(t.tagName.toLowerCase()))})),v.set(e,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],r=e.filter((t=>!_.has(t)));r?.forEach((t=>{const e=A(t);p(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),r=e.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport { DC } from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${r}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;n.innerHTML=o,document.body.append(n)}),0);var e})),_.set(t,"loading"),document.head.append(e)}));const n=e.filter((t=>_.has(t)&&!_.get(t).length));n?.forEach((e=>{setTimeout((()=>{E.add(t,e,new(N.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let S=!1,T=null;function N(t=!0){return t?(S=t,T=new MutationObserver(j),setTimeout((()=>{T.observe(document.body,{childList:!0,subtree:!0}),j()}),5),window.autoload=window.autoload||N,S):(T?.disconnect(),T=null,S)}function M(t){return null!=t&&"object"==typeof t}function C(t){let e=new Set,r=/\{[^\{\}]*\}/g;return t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(r))).forEach((n=>{new Set(t.getAttribute(n)?.match(r)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}N.state={CEs:v,MCs:_};const L=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class k extends E{data={};oldDisplay="";constructor(t){super(t);let e=this;C(t).forEach((t=>e.data[t]="")),x(e),e.#o(),delete e._mc}#o(){let t=this,e=t.target,r=!1;e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(e.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;t.data.observe((o=e.getAttribute(r),t=>{let c=o;n.forEach((e=>{c=c.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.setAttribute(r,c)}))})),[...e.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;t.data.observe((c=n.nodeValue,r=>{let a=c;o.forEach((t=>{a=a.replace(t,r[t.replace(/[\{\}]/g,"")])})),Object.keys(r).some((t=>!!r[t]))&&(t.oldDisplay?e.style=t.oldDisplay:e.removeAttribute("style"),delete t.oldDisplay),n.nodeValue=a})),t.oldDisplay=e.getAttribute("style)")||"",r&&!L.includes(e.constructor)&&"FIELDSET"!==e.tagName&&(e.style.display="none")}))}onData(t){let e=this,r={};Object.keys(t.data).forEach((n=>{e.data.hasOwnProperty(n)&&(r[n]=t.data[n])})),JSON.stringify(r)!==JSON.stringify(e.data)&&Object.assign(e.data,r)}}const P={};function H(t){let e=t.constructor.name;return P[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#c=!0;#a=[];constructor(t){super(t),this.constructor.callbacks=[],M(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#a}set callbacks(t){this.#a=t}observe(t){return this.#a.push(t),this}bind(t){const e=this;if(M(e.valueOf())){!function(t){var e;(e=t,(e instanceof HTMLElement?[e]:[]).concat([...e.querySelectorAll("*")]).filter((t=>!!C(t).length)).filter((t=>"STYLE"!==t.tagName))).forEach((t=>{t?._mc?._placeholders||E.add(t,"_placeholders",new k(t))}))}(t);const r=[...t.querySelectorAll("[_mc]")].filter((t=>!!t?._mc?._placeholders)),o=function(t){let e=n(t);r.forEach((t=>{t&&t._mc.trigger("data",e)}))};e.#a.push(o),e.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof e.valueOf(),e);return this}notify(t){let e=this,r=M(e.valueOf())&&e.valueOf()instanceof Array==0?structuredClone(Object.assign({},e)):e.valueOf();return void 0!==t&&(e.#c=t),e.#a.forEach((t=>{t(r)})),e}};return P[r]=o,o}(t)}const x=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(H(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(M(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(M(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(H(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(H(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);return e})()));
1
+ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>A});var a=new Function("try {return this===window;}catch(e){ return false;}");function s(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function i(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function l(t){return t&&t instanceof HTMLElement}function u(t,e,r={}){let n=t;if(!n._mc){let e=g?.debug;g.debug=!1,n._mc=new g(t),g.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}function f(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}function d(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function b(t,e,r,n=!1){t.addEventListener(d(e),r,{capture:!1,once:n})}function h(t,e,r={},n="l"){const o="string"==typeof e?new CustomEvent(d(e),{detail:{data:r,bubble:n}}):e;n.length&&n.indexOf("l")>-1&&t.dispatchEvent(o),/[u|d]/.test(n)&&function(t,e){setTimeout((()=>{-1===e.detail.bubble.indexOf("l")&&(e.detail.bubble+="l"),e.detail.bubble.indexOf("u")>-1&&t.closest("[data-mc]")?.dispatchEvent(e),e.detail.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&g.trigger(t,e)}))}),0)}(t,o)}class p{_target;constructor(t,e=!1){var r;this._target=new WeakRef(t||{}),(r=this).constructor!==g&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!a()||t.constructor===g)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((t=>{let n=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),c=o.toLowerCase(),a=e=>{r[t](e)};e["on"+c]?e.addEventListener(c,a):b(e,o,a,n)}))}}(this)}get target(){return this._target.deref()}}class g extends p{constructor(t,e=!1){super(t)}static add=u;static remove=f;static trigger=h;off(t,e){!function(t,e,r){t.removeEventListener(d(e),r)}(this.target,t,e)}on(t,e){b(this.target,t,e)}one(t,e){!function(t,e,r){b(t,e,r,!0)}(this.target,t,e)}trigger(t,e={},r="l"){}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;return l(e)?s([...function(t){const e=Math.random().toString().replace(".",""),r='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const n=t.querySelectorAll(r);return t.removeAttribute("temp_id"),n}(e)],t):[]}descendants(t=""){let e=this?.target;return l(e)?s([...e.querySelectorAll("*[data-mc]")],t):[]}}function m(t){return null!=t&&"object"==typeof t}function y(t){let e=new Set,r=/\{[^\{\}]*\}/g;return(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(r))).forEach((e=>{let n=new Set(t.getAttribute(e)?.match(r));n.forEach((t=>n.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,"")))}new Set;const O=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class v extends g{data={};oldDisplay="";constructor(t){super(t),y(t).forEach((t=>this.data[t]="")),A(this),this.#t()}#t(){let t=this.target,e=!1;(t.getAttributeNames?t.getAttributeNames():[]).filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(t.getAttribute(e)?.match(/\{[^\{\}]*\}/g));var n;this.data.observe((n=t.getAttribute(e),o=>{let c=n;r.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),t.setAttribute(e,c)}))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{e=!0;let n=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));this.data.observe((e=>o=>{let c=e;n.forEach((t=>{c=c.replace(t,o[t.replace(/[\{\}]/g,"")])})),this.oldDisplay?t.style=this.oldDisplay:t.removeAttribute("style"),delete this.oldDisplay,r.nodeValue=c})(r.nodeValue)),this.oldDisplay=t.getAttribute("style")||"",e&&!O.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(t){let e={};Object.keys(t.detail.data).forEach((r=>{this.data.hasOwnProperty(r)&&(e[r]=t.detail.data[r])})),JSON.stringify(e)!==JSON.stringify(this.data)&&Object.assign(this.data,e)}}const E={};function j(t){let e=t.constructor.name;return E[e]||function(t){const e=t.constructor,r=e.name;let o=class extends e{#e=!0;#r=[];constructor(t){super(t),this.constructor.callbacks=[],m(t)&&Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]}))}get callbacks(){return this.#r}set callbacks(t){this.#r=t}observe(t){return this.#r.push(t),this}bind(t){if(m(this.valueOf())){!function(t){var e;(e=t,[e].concat([...e.querySelectorAll("*")]).filter((t=>!!y(t).length)).filter((t=>"STYLE"!==t?.tagName)).reverse()).forEach((t=>{t?._mc?._placeholders||g.add(t,"_placeholders",new v(t))}))}(t);const e=[t,...t.querySelectorAll("[data-mc]")].filter((t=>!!t?._mc?._placeholders)),r=function(t){let r=n(t);e.forEach((t=>{t&&h(t,"data",r)}))};this.#r.push(r),this.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof this.valueOf(),this);return this}notify(t){let e=m(this.valueOf())&&this.valueOf()instanceof Array==0?structuredClone(Object.assign({},this)):this.valueOf();return void 0!==t&&(this.#e=t),this.#r.forEach((t=>{t(e)})),this}};return E[r]=o,o}(t)}const A=(t,e)=>((e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if(t.hasOwnProperty(e)&&"function"!=typeof t[e]&&!t?.[e]?.constructor?.prototype?.observe){if("_"===e[0]||void 0===t?.[e])return t;let r=t[e],n=new(j(r))(r);Object.defineProperty(t,e,{enumerable:!0,get(){if(m(n.valueOf())){let t=structuredClone(Object.assign({},n));setTimeout(c((function(){o(structuredClone(Object.assign({},n)),t)||n.notify()}),0),0)}return n},set(t){if(typeof t==typeof n.valueOf())if(m(n.valueOf())&&n.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},n));void 0===n?.constructor?.prototype?.observe&&(n=new(j(t))(structuredClone(Object.assign({},t))),function(t,e){const r=Object.getOwnPropertyDescriptors(t);for(const[t,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(e,t,n)}(t,n),n.seal()),Object.assign(n,t),setTimeout(c((function(){o(structuredClone(Object.assign({},n)),e)||n.notify()}),0),0)}else{let e=n.valueOf(),r=n.callbacks;t!==e&&(n=new(j(t))(t),n.callbacks=r,n.notify())}else console.warn("IGNORED - cannot change observable types, IS:",typeof n.valueOf(),n,"- CANNOT BECOME:",typeof t)}}),t[e]=r}})),t);return e})()));
@@ -8,7 +8,7 @@ import {
8
8
  copyGettersSetters,
9
9
  } from './helpers.js';
10
10
 
11
- import { DC, HTMLMcElement, McEvent } from './MC.js';
11
+ import { DC, HTMLMcElement, trigger } from './MC.js';
12
12
 
13
13
  function isObservableObject(value: any): boolean {
14
14
  return value != null && typeof value === 'object';
@@ -21,12 +21,11 @@ function getPlaceholders(target: HTMLElement): string[] {
21
21
  regEx = /\{[^\{\}]*\}/g;
22
22
 
23
23
  // scan attributes
24
- target
25
- .getAttributeNames()
24
+ ( !!target.getAttributeNames ? target.getAttributeNames() : [] )
26
25
  .filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
27
26
  .forEach((attr) => {
28
- let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
29
- phs.forEach((placeholder) =>
27
+ let placeholders: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
28
+ placeholders.forEach((placeholder) =>
30
29
  placeholders.add(placeholder.replace(/[\{\}]/g, ''))
31
30
  );
32
31
  });
@@ -62,35 +61,31 @@ class Placeholders extends DC {
62
61
 
63
62
  constructor(target: HTMLElement) {
64
63
  super(target);
65
- let that = this;
66
- getPlaceholders(target).forEach((property) => (that.data[property] = ''));
67
- observe(that);
68
- that.#attachCallbacks();
69
- delete that._mc; // cleanup, not needed
64
+ getPlaceholders(target).forEach((property) => (this.data[property] = ''));
65
+ observe(this);
66
+ this.#attachCallbacks();
70
67
  }
71
68
 
72
69
  #attachCallbacks() {
73
- let that = this,
74
- target = that.target,
70
+ let target = this.target,
75
71
  hide: boolean = false;
76
72
 
77
- //console.log('attachCallbacks', that.target);
73
+ //console.log('attachCallbacks', this.target);
78
74
 
79
75
  // scan attributes
80
- target
81
- .getAttributeNames()
76
+ ( !!target.getAttributeNames ? target.getAttributeNames() : [] )
82
77
  .filter((attr: string) =>
83
78
  target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
84
79
  ) // extract placeholder(s)
85
80
  .forEach((attr: string) => {
86
- let phs: Set<string> = new Set(
81
+ let placeholders: Set<string> = new Set(
87
82
  target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
88
83
  );
89
84
  // attach callback
90
- that.data.observe(
85
+ this.data.observe(
91
86
  ((template: string) => (data: LooseObject) => {
92
87
  let result: string = template;
93
- phs.forEach((placeholder) => {
88
+ placeholders.forEach((placeholder) => {
94
89
  result = result.replace(
95
90
  placeholder,
96
91
  data[placeholder.replace(/[\{\}]/g, '')]
@@ -108,44 +103,41 @@ class Placeholders extends DC {
108
103
  return (
109
104
  // is text node and has placeholders
110
105
  childNode.nodeType === 3 &&
111
- ((childNode as any).nodeValue || '').match(/\{[^\{\}]*\}/g)
106
+ ((childNode as Node).nodeValue || '').match(/\{[^\{\}]*\}/g)
112
107
  );
113
108
  })
114
109
  .forEach((childNode) => {
115
110
  hide = true;
116
- let phs: Set<string> = new Set(
111
+ let placeholders: Set<string> = new Set(
117
112
  childNode.nodeValue.match(/\{[^\{\}]*\}/g)
118
113
  );
119
114
 
120
115
  // attach callback
121
- that.data.observe(
116
+ this.data.observe(
122
117
  ((template: string) => (data: LooseObject) => {
123
118
  let result: string = template;
124
- //console.log('text node "', template, '" callbach data:', data);
125
- phs.forEach((placeholder) => {
119
+ //console.log('text node "', template, '" callback data:', data);
120
+ placeholders.forEach((placeholder) => {
126
121
  result = result.replace(
127
122
  placeholder,
128
123
  data[placeholder.replace(/[\{\}]/g, '')]
129
124
  );
130
125
  });
131
- if (
132
- Object.keys(data).some((key) => {
133
- return !!data[key];
134
- })
135
- ) {
136
- if (!!that.oldDisplay) {
137
- target.style = that.oldDisplay;
138
- } else {
139
- target.removeAttribute('style');
140
- }
141
- delete that.oldDisplay;
126
+
127
+ if (!!this.oldDisplay) {
128
+ target.style = this.oldDisplay;
129
+ } else {
130
+ target.removeAttribute('style');
142
131
  }
132
+ delete this.oldDisplay;
133
+
143
134
  childNode.nodeValue = result;
144
135
  })(childNode.nodeValue)
145
136
  );
146
137
 
147
138
  // hide for now
148
- that.oldDisplay = target.getAttribute('style)') || '';
139
+ this.oldDisplay = target.getAttribute('style') || ''; // TBD allow null to indicate there was no old style attribute
140
+
149
141
  if (
150
142
  hide &&
151
143
  !inputs.includes((target as any).constructor) &&
@@ -156,27 +148,25 @@ class Placeholders extends DC {
156
148
  });
157
149
  }
158
150
 
159
- onData(ev: McEvent) {
160
- let that = this,
161
- data: LooseObject = {};
162
- Object.keys(ev.data).forEach((key) => {
163
- if (that.data.hasOwnProperty(key)) data[key] = ev.data[key];
151
+ onData(ev: CustomEvent) {
152
+ let data: LooseObject = {};
153
+ Object.keys(ev.detail.data).forEach((key) => {
154
+ if (this.data.hasOwnProperty(key)) data[key] = ev.detail.data[key];
164
155
  });
165
- //console.log('onData()', ev, data, that.data);
166
- if (JSON.stringify(data) !== JSON.stringify(that.data))
167
- Object.assign(that.data, data); // will trigger callbacks
156
+ //console.log( 'Placeholder onData', ev, data );
157
+ if (JSON.stringify(data) !== JSON.stringify(this.data))
158
+ Object.assign(this.data, data); // will trigger callbacks
168
159
  }
169
160
  }
170
161
 
171
162
  function getPlaceholderElements(
172
163
  target: HTMLElement | DocumentFragment | ShadowRoot
173
164
  ): HTMLElement[] {
174
- let elements: Array<HTMLElement> = (
175
- target instanceof HTMLElement ? [target] : []
176
- )
165
+ let elements: Array<Node> = [target]
177
166
  .concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
178
167
  .filter((e) => !!getPlaceholders(e as HTMLElement).length)
179
- .filter((e) => e.tagName !== 'STYLE');
168
+ .filter((e) => (e as HTMLElement)?.tagName !== 'STYLE')
169
+ .reverse(); // to start with inner elements
180
170
  //console.log('getPlaceholderElements', elements);
181
171
  return elements as HTMLElement[];
182
172
  }
@@ -232,40 +222,46 @@ function makeObservable(val: any): Class<typeof val>{
232
222
  this.#callbacks = callbacks
233
223
  }
234
224
 
235
- observe(f: Function) {
225
+ observe( callback: Function ) {
236
226
  //console.log('observe');
237
- this.#callbacks.push(f);
227
+ this.#callbacks.push( callback );
238
228
  return this;
239
229
  }
240
230
 
241
231
  bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
242
- const that = this,
243
- iso = isObservableObject(that.valueOf());
232
+ const iso = isObservableObject(this.valueOf());
244
233
  //console.log('bind', iso, target);
245
234
 
246
235
  if (iso) {
247
236
  makePlaceholders(target);
248
- const placeholders: unknown = [
249
- ...target.querySelectorAll('[_mc]'),
250
- ].filter((e) => !!(e as LooseObject)?._mc?._placeholders);
237
+ const placeholders: unknown =
238
+ [
239
+ target,
240
+ ...target.querySelectorAll('[data-mc]'),
241
+ ]
242
+ .filter(
243
+ (e) => !!(e as LooseObject)?._mc?._placeholders
244
+ );
245
+
251
246
  //console.log('placeholders:', target, placeholders);
247
+
252
248
  const func = function callback(data: LooseObject) {
253
249
  // avoid bubbling for speed
254
- let d = flattenObject(data);
255
- //console.log('inside callback', target, d);
256
- (placeholders as DC[]).forEach((e) => {
250
+ let flattenedData = flattenObject(data);
251
+ //console.log('inside placeholder callback', target, flattenedData);
252
+ (placeholders as Node[]).forEach((node) => {
257
253
  // console.log('trigger callback', e);
258
- if (!e) return;
259
- (e as any)._mc.trigger('data', d);
254
+ if (!node) return;
255
+ trigger(node as HTMLMcElement, 'data', flattenedData);
260
256
  });
261
257
  };
262
- (that as any).#callbacks.push(func);
263
- that.notify();
258
+ (this as any).#callbacks.push(func);
259
+ this.notify();
264
260
  } else {
265
261
  console.warn(
266
262
  'IGNORED - cannot bind a non-Object to the dom, IS:',
267
- typeof that.valueOf(),
268
- that
263
+ typeof this.valueOf(),
264
+ this
269
265
  );
270
266
  }
271
267
 
@@ -273,20 +269,19 @@ function makeObservable(val: any): Class<typeof val>{
273
269
  }
274
270
 
275
271
  notify(notify?: boolean) {
276
- let that = this,
277
- data =
278
- isObservableObject(that.valueOf()) &&
279
- that.valueOf() instanceof Array === false
280
- ? structuredClone(Object.assign({}, that))
281
- : that.valueOf();
272
+ let data =
273
+ isObservableObject(this.valueOf()) &&
274
+ this.valueOf() instanceof Array === false
275
+ ? structuredClone(Object.assign({}, this))
276
+ : this.valueOf();
282
277
 
283
278
  if (notify !== undefined) {
284
- that.#notify = notify;
279
+ this.#notify = notify;
285
280
  // return;
286
281
  }
287
282
 
288
- //if (that.#notify) console.log('notify', this, data);
289
- (that as any).#callbacks.forEach((f: Function) => {
283
+ //if (this.#notify) console.log('notify', this, data);
284
+ (this as any).#callbacks.forEach((f: Function) => {
290
285
  // console.log(
291
286
  // (this.constructor as any).callbacks,
292
287
  // 'notify: exec callback',
@@ -296,7 +291,7 @@ function makeObservable(val: any): Class<typeof val>{
296
291
  f(data);
297
292
  });
298
293
 
299
- return that;
294
+ return this;
300
295
  }
301
296
  };
302
297
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twobirds/microcomponents",
3
- "version": "0.0.82",
3
+ "version": "0.0.84",
4
4
  "description": "Micro Components Organization Class",
5
5
  "main": "./dist/microcomponents.ts",
6
6
  "types": "./dist/microcomponents.d.ts",
@@ -9,10 +9,11 @@
9
9
  "typedoc": "typedoc",
10
10
  "webpack": "webpack",
11
11
  "clean": "rm -rf build/*; rm -rf dist/*; rm -rf public/*;",
12
- "prep": "cp src/* build || true; mkdir public || true;",
13
- "copyToDist1": "cp -R assets/* public || true; cp dist/*.js public; cp -R build/* public; cp build/* public/test; cp build/*.js dist; cp public/microcomponents.min.js public/test; mv public/test.* public/test;",
14
- "copyToDist2": "mkdir public/src || true; cp -R src/*.ts public/src || true; cp -R assets/* public || true; cp -R build/*.ts* dist; cp *.svg dist; cp *.svg public/fiddle; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test; npm run typedoc;",
15
- "build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist1; npm run copyToDist2;"
12
+ "prep": "cp -R src/* build || true; mkdir public || true; npm run typedoc;",
13
+ "copyToDist": "cp build/*.js dist; cp public/microcomponents.min.js public/test; cp -R build/*.ts* dist; cp *.svg dist;",
14
+ "copyToPublic1": "cp -R assets/* public || true; cp dist/*.* public; cp dist/*.* public/test; mkdir public/src || true; cp -R build/* public/src || true; cp -R build/* public || true;",
15
+ "copyToPublic2": "cp -R build/test/* public/test; cp dist/MicroComponents.svg public; cp public/MicroComponents.svg public/test;",
16
+ "build": "npm run clean; npm run prep; tsc; npm run webpack; npm run copyToDist; npm run copyToPublic1; npm run copyToPublic2;"
16
17
  },
17
18
  "author": "",
18
19
  "license": "ISC",
package/public/MC.d.ts CHANGED
@@ -1,36 +1,37 @@
1
1
  import { LooseObject } from './helpers.js';
2
- import { McEvent } from './McEvent.js';
3
2
  export interface HTMLMcElement extends HTMLElement {
4
3
  _mc: LooseObject;
5
4
  }
6
- declare function addListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null, capture?: boolean, once?: boolean): void;
7
- declare function removeListener(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject | null): void;
8
- declare function trigger(target: HTMLElement, ev: McEvent | string, data?: any, bubble?: string): void;
5
+ declare function off(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
6
+ declare function on(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once?: boolean): void;
7
+ declare function one(domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject): void;
8
+ declare function trigger(domNode: HTMLElement, event: CustomEvent | string, data?: any, bubble?: string): void;
9
9
  declare class McBase {
10
- #private;
10
+ private _target;
11
11
  constructor(target?: {
12
12
  [key: string]: any;
13
13
  }, debug?: boolean);
14
14
  get target(): any;
15
15
  }
16
16
  declare class MC extends McBase {
17
- _mc?: LooseObject;
18
17
  constructor(target?: any);
19
18
  static trigger: typeof trigger;
20
- trigger(ev: McEvent | string, data?: any, bubble?: string): this | undefined;
19
+ trigger(ev: string, data?: any, bubble?: string): void;
21
20
  }
22
21
  declare class DC extends McBase {
23
- _mc?: LooseObject;
24
22
  constructor(target: HTMLElement, debug?: boolean);
25
23
  static add: Function;
26
24
  static remove: Function;
27
25
  static trigger: Function;
28
- trigger(ev: McEvent | string, data?: any, bubble?: string): void;
26
+ off(eventName: string, handler: EventListenerOrEventListenerObject): void;
27
+ on(eventName: string, handler: EventListenerOrEventListenerObject): void;
28
+ one(eventName: string, handler: EventListenerOrEventListenerObject): void;
29
+ trigger(ev: CustomEvent | string, data?: any, bubble?: string): void;
29
30
  parent(search?: string): any[];
30
31
  ancestors(search?: string): any[];
31
32
  children(search?: string): any[];
32
33
  descendants(search?: string): any[];
33
34
  }
34
35
  declare function autoload(enable?: boolean): boolean;
35
- export { addListener, removeListener, McBase, MC, DC, McEvent, autoload };
36
+ export { McBase, MC, DC, autoload, on, one, off, trigger };
36
37
  //# sourceMappingURL=MC.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA6KD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC"}
1
+ {"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiB3C,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA2HD,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAED,iBAAS,EAAE,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,EAAE,IAAI,GAAE,OAAe,QAEhH;AAED,iBAAS,GAAG,CAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC,QAE1F;AAGD,iBAAS,OAAO,CACf,OAAO,EAAE,WAAW,EACpB,KAAK,EAAE,WAAW,GAAG,MAAM,EAC3B,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAepB;AA4ED,cAAM,MAAM;IACX,OAAO,CAAC,OAAO,CAAe;gBAElB,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAUnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CAED;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAGxD;AAED,cAAM,EAAG,SAAQ,MAAM;gBACV,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,EAAE,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAIlE,GAAG,CAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,kCAAkC;IAInE,OAAO,CAAC,EAAE,EAAE,WAAW,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;IAOtE,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAQpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA+GD,iBAAS,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAmBjD;AAID,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC"}