@twobirds/microcomponents 0.0.34 → 0.0.37

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 (118) hide show
  1. package/README.md +40 -27
  2. package/assets/documentation/{MicroComponents.md → MC.md} +17 -17
  3. package/assets/documentation/comparision.md +0 -0
  4. package/assets/documentation/elements.md +276 -0
  5. package/assets/documentation/magic.md +10 -68
  6. package/dist/MC.d.ts +2 -3
  7. package/dist/MC.d.ts.map +1 -1
  8. package/dist/MC.min.js +45 -43
  9. package/dist/MC.ts +173 -175
  10. package/dist/autoloader.ts +1 -1
  11. package/dist/{customElements.d.ts → elements.d.ts} +1 -1
  12. package/dist/elements.d.ts.map +1 -0
  13. package/dist/elements.min.js +1 -0
  14. package/dist/{customElements.ts → elements.ts} +23 -14
  15. package/dist/helpers.d.ts +6 -4
  16. package/dist/helpers.d.ts.map +1 -1
  17. package/dist/helpers.ts +95 -128
  18. package/dist/microcomponents.d.ts +3 -3
  19. package/dist/microcomponents.d.ts.map +1 -1
  20. package/dist/microcomponents.min.js +1 -1
  21. package/dist/microcomponents.ts +3 -3
  22. package/dist/{customObservables.d.ts → observables.d.ts} +3 -3
  23. package/dist/observables.d.ts.map +1 -0
  24. package/dist/observables.min.js +1 -0
  25. package/dist/observables.ts +354 -0
  26. package/dist/{customSelectors.d.ts → selectors.d.ts} +1 -1
  27. package/dist/selectors.d.ts.map +1 -0
  28. package/dist/selectors.min.js +1 -0
  29. package/dist/test.ts +133 -157
  30. package/klemmstein.png +0 -0
  31. package/package.json +52 -52
  32. package/public/MC.js +46 -44
  33. package/public/MC.js.map +1 -1
  34. package/public/MC.min.js +45 -43
  35. package/public/assets/search.js +1 -1
  36. package/public/autoloader.js +1 -1
  37. package/public/autoloader.js.map +1 -1
  38. package/public/classes/{DC.html → MC.DC.html} +60 -59
  39. package/public/classes/{MC.html → MC.MC.html} +41 -35
  40. package/public/classes/{McBase.html → MC.McBase.html} +28 -20
  41. package/public/classes/{McEvent.html → MC.McEvent.html} +48 -42
  42. package/public/documentation/{MicroComponents.md → MC.md} +17 -17
  43. package/public/documentation/comparision.md +0 -0
  44. package/public/documentation/elements.md +276 -0
  45. package/public/documentation/magic.md +10 -68
  46. package/public/{customElements.js → elements.js} +9 -10
  47. package/public/elements.js.map +1 -0
  48. package/public/elements.min.js +1 -0
  49. package/public/functions/{addListener.html → MC.addListener.html} +18 -12
  50. package/public/functions/{removeListener.html → MC.removeListener.html} +18 -12
  51. package/public/functions/elements.defineCE.html +78 -0
  52. package/public/functions/elements.getCE.html +63 -0
  53. package/public/functions/formValues.formValues.html +68 -0
  54. package/public/functions/observables.observe.html +65 -0
  55. package/public/functions/selectors._d.html +69 -0
  56. package/public/functions/selectors._t.html +69 -0
  57. package/public/helpers.js +66 -89
  58. package/public/helpers.js.map +1 -1
  59. package/public/index.html +48 -33
  60. package/public/interfaces/{HTMLMcElement.html → MC.HTMLMcElement.html} +601 -595
  61. package/public/interfaces/selectors.DSelector.html +1013 -0
  62. package/public/interfaces/selectors.TSelector.html +712 -0
  63. package/public/microcomponents.js +3 -3
  64. package/public/microcomponents.js.map +1 -1
  65. package/public/microcomponents.min.js +1 -1
  66. package/public/modules/MC.html +78 -0
  67. package/public/modules/elements.html +62 -0
  68. package/public/modules/formValues.html +60 -0
  69. package/public/modules/observables.html +65 -0
  70. package/public/modules/selectors.html +76 -0
  71. package/public/modules.html +11 -23
  72. package/public/observables.js +255 -0
  73. package/public/observables.js.map +1 -0
  74. package/public/observables.min.js +1 -0
  75. package/public/{customSelectors.js → selectors.js} +1 -1
  76. package/public/selectors.js.map +1 -0
  77. package/public/selectors.min.js +1 -0
  78. package/public/src/MC.ts +376 -0
  79. package/public/src/McEvent.ts +96 -0
  80. package/public/src/autoloader.ts +98 -0
  81. package/{src/customElements.ts → public/src/elements.ts} +23 -14
  82. package/public/src/formValues.ts +275 -0
  83. package/public/src/helpers.ts +140 -0
  84. package/public/src/microcomponents.ts +8 -0
  85. package/public/src/observables.ts +354 -0
  86. package/public/src/test.ts +187 -0
  87. package/public/test.js +99 -115
  88. package/public/test.js.map +1 -1
  89. package/public/types/observables.Observable.html +91 -0
  90. package/public/types/selectors.selection.html +58 -0
  91. package/public/types/selectors.singleSelector.html +58 -0
  92. package/src/MC.ts +173 -175
  93. package/src/autoloader.ts +1 -1
  94. package/src/elements.ts +76 -0
  95. package/src/helpers.ts +95 -128
  96. package/src/microcomponents.ts +3 -3
  97. package/src/observables.ts +354 -0
  98. package/src/selectors.ts +1634 -0
  99. package/src/test.ts +133 -157
  100. package/typedoc.json +1 -1
  101. package/webpack.config.js +9 -9
  102. package/dist/customElements.d.ts.map +0 -1
  103. package/dist/customElements.min.js +0 -1
  104. package/dist/customObservables.d.ts.map +0 -1
  105. package/dist/customObservables.min.js +0 -1
  106. package/dist/customObservables.ts +0 -348
  107. package/dist/customSelectors.d.ts.map +0 -1
  108. package/dist/customSelectors.min.js +0 -1
  109. package/public/customElements.js.map +0 -1
  110. package/public/customElements.min.js +0 -1
  111. package/public/customObservables.js +0 -256
  112. package/public/customObservables.js.map +0 -1
  113. package/public/customObservables.min.js +0 -1
  114. package/public/customSelectors.js.map +0 -1
  115. package/public/customSelectors.min.js +0 -1
  116. package/src/customObservables.ts +0 -348
  117. /package/dist/{customSelectors.ts → selectors.ts} +0 -0
  118. /package/{src/customSelectors.ts → public/src/selectors.ts} +0 -0
@@ -0,0 +1,276 @@
1
+ # Custom Elements <span style="float:right; height:1em;"><img height="24px" src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" /></span>
2
+
3
+ Custom Elements provides two funktions:
4
+ - **defineCE()** lets you define a custom tag and add functionality to it. Internally it uses [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
5
+ - **getCE()** retrieves a custom element constructor from the web component registry via [CustomElementRegistry.get()](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/get).
6
+
7
+ # Prerequisites
8
+
9
+ You should at least know Micro Components **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass usage, since your own class code extends from it and uses its static functions. It is recommended that you have read and understood the **[Micro Component documentation](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads)**, since custom elements is just an extension that internally uses micro components.
10
+
11
+ # Usage
12
+
13
+ ## Create a Custom Element
14
+
15
+ Before:
16
+
17
+ ```html
18
+ <body></body>
19
+ ```
20
+
21
+ ```javascript
22
+ defineCE(
23
+ // equivalent to and internally using customElementRegistry.define()
24
+ "my-tag",
25
+ class MyTag extends DC {
26
+
27
+ constructor(target, data = {} ) {
28
+ super(target);
29
+ this.data = data;
30
+ target.innerHTML = "Hello World";
31
+ }
32
+ }
33
+ );
34
+
35
+ let MyTag = getCE("my-tag"),
36
+ data = { a: 1 },
37
+ myTag = new MyTag( data );
38
+
39
+ /*
40
+ HINT:
41
+ At this point the web component is not yet attached to the DOM.
42
+ But you can perform any operation on it, e.g. calling methods on its inner micro components.
43
+ */
44
+
45
+ document.body.append( myTag );
46
+ ```
47
+
48
+ After:
49
+ ```html
50
+ <body>
51
+ <my-tag _mc>Hello World</my-tag>
52
+ </body>
53
+ ```
54
+
55
+ ### **Hints**
56
+ - Your code extends the **[DC](https://gitlab.com/twoBirds/microcomponents/-/blob/main/assets/documentation/MicroComponents.md?ref_type=heads#dc-class-extends-mcbase)** superclass. This superclass provides methods to traverse the DOM and select other micro components contained in HTML elements.
57
+ - it is essential to understand that your web component code is only one of the numerous micro components that can reside inside `<my-tag>`
58
+ - After you created a custom element, the custom element will contain a **property `<my-tag>._mc`** which contains your class instance.
59
+ - Also the custom element then has an **attribute '_mc'** which will indicate that at least one micro component is attached to it.
60
+ - Note that you can hand over data natively via parameters, when handling custom elements in above way.
61
+ - The native way of usage, simply adding the tag to the template, is still possible. You have to use attributes then to hand in data.
62
+
63
+
64
+ ## Web Component Lifecycle Events
65
+
66
+ ```javascript
67
+ defineCE(
68
+ "my-tag",
69
+ class MyTag extends DC {
70
+
71
+ constructor(target) {
72
+ super(target);
73
+ target.setAttribute('my-attribute', 'change me');
74
+ }
75
+
76
+ /*
77
+ web component specific event handlers
78
+ */
79
+
80
+ onConnected(ev) {
81
+ console.info("MyTag .onConnected() handler", ev);
82
+ }
83
+
84
+ onAttributeChanged(ev) {
85
+ console.info("MyTag .onAttributeChanged() handler", ev);
86
+ }
87
+
88
+ onAdopted(ev) {
89
+ console.info("MyTag .onAdopted() handler", ev);
90
+ }
91
+
92
+ onDisconnected(ev) {
93
+ console.info("MyTag .onDisconnected() handler", ev);
94
+ }
95
+ },
96
+ ['my-attribute'] // DOM node attributes to observe
97
+ );
98
+
99
+ let MyTag = getCE("my-tag"),
100
+ myTag = new MyTag();
101
+
102
+ document.body.append( myTag );
103
+ ```
104
+
105
+ You can use your Web Component constructor to add other modules to the `<my-tag>` DOM node:
106
+
107
+ ```javascript
108
+
109
+ class OtherModule extends DC {
110
+
111
+ constructor(target) {
112
+ super(target);
113
+ }
114
+
115
+ onConnected(ev) {
116
+ console.info("[OtherModule] .onConnected() handler", ev);
117
+ }
118
+ }
119
+
120
+ defineCE(
121
+ "my-tag",
122
+ class MyTag extends DC {
123
+
124
+ constructor(target) {
125
+ super(target);
126
+ DC.add( target, 'otherModule', new OtherModule(target) );
127
+ // equivalent:
128
+ // target._mc.otherModule = new OtherModule(target);
129
+ }
130
+
131
+ onConnected(ev) {
132
+ console.info("[MyTag] .onConnected() handler", ev);
133
+ }
134
+ }
135
+ );
136
+
137
+
138
+ let MyTag = getCE("my-tag");
139
+
140
+ document.body.append( new MyTag() );
141
+ ```
142
+
143
+ ### **Hints**
144
+ - You can add as many other micro components to the DOM node as you like.
145
+ - The native web component lifecycle events will be triggered on **all** micro components.
146
+ - The event parameter handed over is an internal event instance, that contains the original native event in its `data` property.
147
+
148
+ ## Native Event Handlers
149
+
150
+ Native event handlers will be auto-attached, when the method name follows one of these two schemes:
151
+
152
+ - **on[A-Z]...**: e.g. **onClick(){ ... }** will be called when the native event is triggered
153
+ - **one[A-Z]...**: e.g. **oneClick(){ ... }** will be called **once** only when the native event is triggered. Subsequent events will be ignored.
154
+
155
+ ```javascript
156
+ defineCE(
157
+ "my-tag",
158
+ class MyTag extends DC {
159
+
160
+ constructor(target) {
161
+ super(target);
162
+ target.innerHTML = "Click Me";
163
+ }
164
+
165
+ /*
166
+ native event handlers
167
+ */
168
+ onClick(ev) {
169
+ console.info("MyTag .onClick() handler", ev);
170
+ }
171
+ }
172
+ );
173
+
174
+ let MyTag = getCE("my-tag");
175
+
176
+ document.body.append( new MyTag() );
177
+ ```
178
+
179
+ ### **Hints**
180
+ - The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the MC contains a matching named handler.
181
+ - The event parameter handed over is an internal event instance, that contains the original native event in its .data property.
182
+
183
+ ## Lifecycle Event Handlers
184
+
185
+ Currently there is only one lifecycle event handler: the **oneInit(){ ... }** method you provide with your class.
186
+
187
+ This method is triggered asynchronous via a timeout after you made a new instance of your class.
188
+
189
+ ```javascript
190
+ defineCE(
191
+ "my-tag",
192
+ class MyTag extends DC {
193
+
194
+ constructor(target) {
195
+ super(target);
196
+ target.innerHTML = "Hello World";
197
+ }
198
+
199
+ /*
200
+ lifecycle event handlers
201
+ */
202
+ oneInit(ev) {
203
+ console.info("MyTag .onInit() handler", ev);
204
+ }
205
+ }
206
+ );
207
+
208
+ let MyTag = getCE("my-tag");
209
+
210
+ document.body.append( new MyTag() );
211
+ ```
212
+
213
+ ### **Hints**
214
+ - The native web component lifecycle events will be triggered on **all** micro components contained in the custom element, provided the specific micro component contains a matching named handler.
215
+ - The event parameter handed over is an internal event instance that contains no data.
216
+
217
+ ## Custom Events
218
+
219
+ ```javascript
220
+ defineCE(
221
+ "my-tag",
222
+ class MyTag extends DC {
223
+
224
+ constructor(target) {
225
+ super(target);
226
+ target.innerHTML = "Hello World";
227
+ }
228
+
229
+ /*
230
+ custom event handlers
231
+ */
232
+ onSpecialEvent(ev) {
233
+ console.log('MyTag .onSpecialEvent() handler', ev);
234
+ }
235
+ }
236
+ );
237
+
238
+ let MyTag = getCE("my-tag");
239
+
240
+ document.body.append( new MyTag() );
241
+
242
+ document
243
+ .querySelector( 'my-tag' )
244
+ ?._mc
245
+ .MyTag
246
+ .trigger('specialEvent');
247
+
248
+ /*
249
+ Alternatives:
250
+ */
251
+
252
+ document
253
+ .querySelector( 'my-tag' )
254
+ ?._mc
255
+ .trigger('specialEvent'); // ...on all micro components contained in <my-tag>
256
+
257
+ /*
258
+ traversing the DOM:
259
+ <my-tag>
260
+ <my-inner-tag />
261
+ </my-tag>
262
+ */
263
+
264
+ // <my-tag> method:
265
+ onSpecialEvent(ev){
266
+ console.log( ev.data );
267
+ }
268
+
269
+ // <my-inner-tag> method:
270
+ sendSpecialEvent(){
271
+ this.trigger( 'specialEvent', "Hello World", 'u' ); // 'u' = bubble up.
272
+ }
273
+ ```
274
+
275
+ ### **Hints**
276
+ - The event parameter handed over is an internal event instance, that contains the payload in its .data property.
@@ -1,63 +1,12 @@
1
- # Additional concepts: how to make the magic happen...
2
-
3
- **Micro Components** can literally be anything you can put into an object as a property.
4
-
5
- Here are some examples of what **Micro Components** can really archieve.
6
-
7
-
8
- ## The MC() class can be used as a selector of its own, even if you dont attach a micro component yourself
9
-
10
- Since MC is a class you instanciate with a target element as your selection root element, and you can do this:
11
-
12
- ```javascript
13
- const myElement = document.getElementById('myDiv');
14
-
15
- // find the nearst MC parent elements to this HTMLElement
16
- const myParent = ( new MC( myElement ) ).parent();
17
- ```
18
-
19
- ## Since MC() is a class, you can extend your own micro components with it and have the selectors nicely available
20
-
21
- Here is some typical usage:
22
-
23
- ```javascript
24
- class MyMicroComponent extends MC {
25
-
26
- constructor( target ){
27
- super(target);
28
- }
29
-
30
- showParents(){
31
- console.log( this.parents() ); // Logs all anchestor micro components
32
- }
33
- }
34
-
35
- let myDiv = document.querySelector('div');
36
-
37
- MC.add( myDiv, 'my_micro_component', new MyMicroComponent( myDiv ) );
38
-
39
- // TADA!
40
- myDiv
41
- ._mc
42
- .my_micro_component
43
- .showParents();
44
- ```
45
-
46
- As you can see, without any effort you have a **second structural layer that hovers over the DOM**.
47
-
48
- The browser knows nothing of this, except that there may be _mc properties on some HTMLElements.
49
-
50
- It doesnt get more standard compliant than that.
51
-
52
-
53
- ## Things I already did with this, in my own framework twoBirds, or in apps that I developed with it:
1
+ # Things I already did with this...
54
2
 
55
3
  - `encapsulated and modular 3D rendering` in an HTMLElement viewport.
56
- - `Data Driven Workflow` with micro components using tB specific observables.
4
+ - `Data Driven Workflow` with micro components using observables.
57
5
  - `DOM handling` in general, lots of `UI functionality`
58
- - `2 way Data Binding` between forms and observable objects representing the form data
59
6
  - `1 way Data Binding` from data observables to the DOM
60
- - `Loose Coupling` via my own event objects
7
+ - `2 way Data Binding` between forms and observables representing the form data
8
+ - `progressive enhancement` / `graceful degradation` on standard websites
9
+ - `Loose Coupling` via custom event objects
61
10
  - `Rule Engines`
62
11
  - `Complex Runtime Templating` without JSX or virtual DOM
63
12
  - `Single Page Applications`
@@ -65,23 +14,16 @@ It doesnt get more standard compliant than that.
65
14
  - `Electron Apps`
66
15
  - `Progressive Web Apps`
67
16
  - `Complex Native Web Components`, that comprised of a set of modular `UI` and `business logic` micro components
68
- - this ran on the `server` also, in standalone linux nodeJs processes. I removed this some time ago because I didnt want server and client code in one library. Now its easy to make a server variant of the micro component code if required.
17
+
18
+ - `server side` structure in general.
69
19
 
70
20
 
71
21
  Funny stuff:
72
22
 
73
- - `Vending Machine Frontends`
74
- - some `Simulators`
75
- - `UI for ocean going container ships`
23
+ - `Vending Machine Frontend` ( selling lottery tickets )
24
+ - `UI for ocean going container ships` ( a wave impact stress simulator frontend )
76
25
 
77
26
 
78
27
  Not from me, but somehow based on my ideas:
79
28
 
80
- - `SpaceX` uses web components as an interface in their `Dragon Capsule`. I kind of regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Anyway, much later the [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had then. So in a way, this already goes to space.
81
-
82
-
83
-
84
- This list is far from complete, I used this as a core principle for 20 years. All of the above is modular, so you can use it together.
85
-
86
-
87
- **Whatever functionality you can do with Javascript, you can encapsule it in a micro component and reuse in any framework that allows for DOM access**.
29
+ - `SpaceX` uses web components as an interface in their `Dragon Capsule`. I regard myself to be a co-inventor of web components, since I announced my idea on ajaxian.com in 2007. Much later, [User defined built in elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#customized_built-in_elements) were a copy of what I already had back then. So in a way, this already goes to space.
@@ -1,32 +1,32 @@
1
1
  "use strict";
2
- import { DC } from './MC.js';
3
- import { kebabToPascal } from './helpers.js';
2
+ import { DC } from "./MC.js";
3
+ import { kebabToPascal } from "./helpers.js";
4
4
  class CeBaseClass extends HTMLElement {
5
5
  constructor() {
6
6
  super();
7
7
  }
8
8
  connectedCallback() {
9
- DC.trigger(this, 'Connected');
9
+ DC.trigger(this, "Connected");
10
10
  }
11
11
  disconnectedCallback() {
12
- DC.trigger(this, 'Disconnected');
12
+ DC.trigger(this, "Disconnected");
13
13
  }
14
14
  adoptedCallback() {
15
- DC.trigger(this, 'Adopted');
15
+ DC.trigger(this, "Adopted");
16
16
  }
17
17
  attributeChangedCallback(name, oldValue, newValue) {
18
- DC.trigger(this, 'AttributeChanged', { name, oldValue, newValue });
18
+ DC.trigger(this, "AttributeChanged", { name, oldValue, newValue });
19
19
  }
20
20
  }
21
21
  function createNamedClass(name, ClassBody) {
22
- return Object.defineProperty(ClassBody, 'name', { value: name });
22
+ return Object.defineProperty(ClassBody, "name", { value: name });
23
23
  }
24
24
  export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
25
25
  if (customElements.get(tagName)) {
26
26
  console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
27
27
  return;
28
28
  }
29
- if (!tagName.includes('-')) {
29
+ if (!tagName.includes("-")) {
30
30
  throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
31
31
  }
32
32
  let name = kebabToPascal(tagName);
@@ -42,8 +42,7 @@ export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
42
42
  }
43
43
  }));
44
44
  }
45
- ;
46
45
  export function getCE(tagName) {
47
46
  return customElements.get(tagName);
48
47
  }
49
- //# sourceMappingURL=customElements.js.map
48
+ //# sourceMappingURL=elements.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAY,SAAQ,WAAW;IACpC;QACC,KAAK,EAAE,CAAC;IACT,CAAC;IAED,iBAAiB;QACf,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;IACxC,CAAC;IAED,oBAAoB;QAClB,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;IAC3C,CAAC;IAED,eAAe;QACb,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IACtC,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAa,EAAE,QAAa;QACjE,EAAU,CAAC,OAAO,CAAC,IAAI,EAAE,kBAAkB,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC7E,CAAC;CACD;AAED,SAAS,gBAAgB,CACxB,IAAY,EACZ,SAAwC;IAExC,OAAO,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;AAClE,CAAC;AAED,MAAM,UAAU,QAAQ,CACvB,OAAe,EACf,eAA8C,EAC9C,qBAA+B,EAAE;IAEjC,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QACjC,OAAO,CAAC,IAAI,CAAC,4BAA4B,OAAO,uBAAuB,CAAC,CAAC;QACzE,OAAO;IACR,CAAC;IAED,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC5B,MAAM,IAAI,KAAK,CACd,sEAAsE,CACtE,CAAC;IACH,CAAC;IAED,IAAI,IAAI,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IAElC,cAAc,CAAC,MAAM,CACpB,OAAO,EACP,gBAAgB,CACf,IAAI,EACJ,KAAM,SAAQ,WAAW;QACxB,QAAQ,CAAM;QAEd,YAAY,IAAU;YACrB,KAAK,EAAE,CAAC;YACR,IAAI,QAAQ,GAAG,IAAI,eAAe,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;YAC9C,EAAU,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;QACvC,CAAC;QAED,MAAM,KAAK,kBAAkB;YAC5B,OAAO,kBAAkB,CAAC;QAC3B,CAAC;KACD,CACD,CACD,CAAC;AACH,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,OAAe;IACpC,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,CAAC"}
@@ -0,0 +1 @@
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.elements=t():e.elements=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};e.r(t),e.d(t,{defineCE:()=>h,getCE:()=>y});var r=new Function("try {return this===window;}catch(e){ return false;}");let n=new Set;r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>n.add(e)));class o{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var i=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function s(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function a(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function u(e){return e&&e instanceof HTMLElement}function l(e,t,r={}){let n=e;if(!n._mc){let t=g?.debug;g.debug=!1,n._mc=new g(e),g.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&e.setAttribute("_mc","")),r}function d(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={}){let n=e?._mc;n&&[...Object.values(n)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(t,r)}))}i()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>c.add(e)));class f{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==g&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!i()||e.constructor===g)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),i=n.replace(/^on[e]{0,1}/,""),s=i.toLowerCase();o&&Object.defineProperty(e,"on"+i,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),c.has("on"+s)&&function(e,t,r,n=!1,o=!1){let i={once:!1};n&&(i.capture=n),o&&(i.once=o),e.addEventListener(t,r,i)}(t,s,(e=>{r.trigger(i,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class m extends f{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r){let n=this;if(r=r||"l",n.constructor!==m&&n.constructor!==g){if(n instanceof m||n instanceof g){const n=this,c="string"!=typeof e?e:new o(e,t,r),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof n[s]||(n[s](c),n.hasOwnProperty(s)&&delete n[s])),c.stopped||"l"===c.bubble)return n;i()&&/[ud]/.test(c.bubble)&&n instanceof m&&setTimeout((()=>{-1===c.bubble.indexOf("l")&&(c.bubble+="l"),c.bubble.indexOf("u")>-1&&n.parent().forEach((e=>{e instanceof m&&e.trigger(c)})),c.bubble.indexOf("d")>-1&&n.children().forEach((e=>{e instanceof m&&e.trigger(c)}))}),0)}}else[...Object.getOwnPropertyNames(n)].forEach((o=>{n[o]?.trigger&&"function"==typeof n[o]?.trigger&&n[o]?.trigger(e,t,r)}))}}class g extends f{_mc={};constructor(e,t=!1){super(e)}static add=l;static remove=d;static trigger=p;trigger(e,t={},r){m.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return u(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return u(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!u(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=s([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return u(t)?s([...t.querySelectorAll("*[_mc]")],e):[]}}class b extends HTMLElement{constructor(){super()}connectedCallback(){g.trigger(this,"Connected")}disconnectedCallback(){g.trigger(this,"Disconnected")}adoptedCallback(){g.trigger(this,"Adopted")}attributeChangedCallback(e,t,r){g.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:r})}}function h(e,t,r=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let n=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(n,class extends b{instance;constructor(e){super();let r=new t(this,e);g.add(this,n,r)}static get observedAttributes(){return r}}))}function y(e){return customElements.get(e)}return t})()));
@@ -13,10 +13,11 @@
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
15
  <li><a href="../modules.html">Micro Components</a></li>
16
- <li><a href="addListener.html">addListener</a></li></ul>
16
+ <li><a href="../modules/MC.html">MC</a></li>
17
+ <li><a href="MC.addListener.html">addListener</a></li></ul>
17
18
  <h1>Function addListener</h1></div>
18
19
  <section class="tsd-panel">
19
- <ul class="tsd-signatures tsd-kind-function">
20
+ <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
20
21
  <li class="tsd-signature tsd-anchor-link" id="addListener">add<wbr/>Listener<span class="tsd-signature-symbol">(</span>domNode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Node</span>, eventName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span>, capture<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span>, once<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#addListener" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
21
22
  <li class="tsd-description">
22
23
  <div class="tsd-parameters">
@@ -34,7 +35,7 @@
34
35
  <h5>once: <span class="tsd-signature-type">boolean</span><span class="tsd-signature-symbol"> = false</span></h5></li></ul></div>
35
36
  <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
36
37
  <ul>
37
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9be2b9b/src/MC.ts#L62">src/MC.ts:62</a></li></ul></aside></li></ul></section></div>
38
+ <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/MC.ts#L62">src/MC.ts:62</a></li></ul></aside></li></ul></section></div>
38
39
  <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
39
40
  <div class="tsd-navigation settings">
40
41
  <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
@@ -54,17 +55,22 @@
54
55
  <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
55
56
  <div class="tsd-accordion-details">
56
57
  <ul>
57
- <li><a href="../modules.html">Micro <wbr/>Components</a>
58
- <ul></ul></li></ul></div></details></nav>
58
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
59
+ <ul>
60
+ <li class="current tsd-kind-module"><a href="../modules/MC.html">MC</a></li>
61
+ <li class="tsd-kind-module"><a href="../modules/elements.html">elements</a></li>
62
+ <li class="tsd-kind-module"><a href="../modules/formValues.html">form<wbr/>Values</a></li>
63
+ <li class="tsd-kind-module"><a href="../modules/observables.html">observables</a></li>
64
+ <li class="tsd-kind-module"><a href="../modules/selectors.html">selectors</a></li></ul></li></ul></div></details></nav>
59
65
  <nav class="tsd-navigation secondary menu-sticky">
60
66
  <ul>
61
- <li class="tsd-kind-class"><a href="../classes/DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
62
- <li class="tsd-kind-class"><a href="../classes/MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
63
- <li class="tsd-kind-class"><a href="../classes/McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
64
- <li class="tsd-kind-class"><a href="../classes/McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
65
- <li class="tsd-kind-interface"><a href="../interfaces/HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
66
- <li class="current tsd-kind-function"><a href="addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
67
- <li class="tsd-kind-function"><a href="removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
67
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
68
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
69
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
70
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
71
+ <li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/MC.HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
72
+ <li class="current tsd-kind-function tsd-parent-kind-module"><a href="MC.addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
73
+ <li class="tsd-kind-function tsd-parent-kind-module"><a href="MC.removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
68
74
  <div class="container tsd-generator">
69
75
  <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
70
76
  <div class="overlay"></div><script src="../assets/main.js"></script></body></html>
@@ -13,10 +13,11 @@
13
13
  <div class="tsd-page-title">
14
14
  <ul class="tsd-breadcrumb">
15
15
  <li><a href="../modules.html">Micro Components</a></li>
16
- <li><a href="removeListener.html">removeListener</a></li></ul>
16
+ <li><a href="../modules/MC.html">MC</a></li>
17
+ <li><a href="MC.removeListener.html">removeListener</a></li></ul>
17
18
  <h1>Function removeListener</h1></div>
18
19
  <section class="tsd-panel">
19
- <ul class="tsd-signatures tsd-kind-function">
20
+ <ul class="tsd-signatures tsd-kind-function tsd-parent-kind-module">
20
21
  <li class="tsd-signature tsd-anchor-link" id="removeListener">remove<wbr/>Listener<span class="tsd-signature-symbol">(</span>domNode<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">Node</span>, eventName<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">string</span>, handler<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span><span class="tsd-signature-symbol">)</span><span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">void</span><a href="#removeListener" aria-label="Permalink" class="tsd-anchor-icon"><svg class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none" id="icon-anchor-a"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" id="icon-anchor-b"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" id="icon-anchor-c"></path></svg></a></li>
21
22
  <li class="tsd-description">
22
23
  <div class="tsd-parameters">
@@ -30,7 +31,7 @@
30
31
  <h5>handler: <span class="tsd-signature-type">null</span><span class="tsd-signature-symbol"> | </span><span class="tsd-signature-type">EventListenerOrEventListenerObject</span></h5></li></ul></div>
31
32
  <h4 class="tsd-returns-title">Returns <span class="tsd-signature-type">void</span></h4><aside class="tsd-sources">
32
33
  <ul>
33
- <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/9be2b9b/src/MC.ts#L79">src/MC.ts:79</a></li></ul></aside></li></ul></section></div>
34
+ <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/84a05c1/src/MC.ts#L79">src/MC.ts:79</a></li></ul></aside></li></ul></section></div>
34
35
  <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
35
36
  <div class="tsd-navigation settings">
36
37
  <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
@@ -50,17 +51,22 @@
50
51
  <h3><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M4.93896 8.531L12 15.591L19.061 8.531L16.939 6.409L12 11.349L7.06098 6.409L4.93896 8.531Z" fill="var(--color-text)"></path></svg> Modules</h3></summary>
51
52
  <div class="tsd-accordion-details">
52
53
  <ul>
53
- <li><a href="../modules.html">Micro <wbr/>Components</a>
54
- <ul></ul></li></ul></div></details></nav>
54
+ <li class="current"><a href="../modules.html">Micro <wbr/>Components</a>
55
+ <ul>
56
+ <li class="current tsd-kind-module"><a href="../modules/MC.html">MC</a></li>
57
+ <li class="tsd-kind-module"><a href="../modules/elements.html">elements</a></li>
58
+ <li class="tsd-kind-module"><a href="../modules/formValues.html">form<wbr/>Values</a></li>
59
+ <li class="tsd-kind-module"><a href="../modules/observables.html">observables</a></li>
60
+ <li class="tsd-kind-module"><a href="../modules/selectors.html">selectors</a></li></ul></li></ul></div></details></nav>
55
61
  <nav class="tsd-navigation secondary menu-sticky">
56
62
  <ul>
57
- <li class="tsd-kind-class"><a href="../classes/DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
58
- <li class="tsd-kind-class"><a href="../classes/MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
59
- <li class="tsd-kind-class"><a href="../classes/McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
60
- <li class="tsd-kind-class"><a href="../classes/McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
61
- <li class="tsd-kind-interface"><a href="../interfaces/HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
62
- <li class="tsd-kind-function"><a href="addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
63
- <li class="current tsd-kind-function"><a href="removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
63
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.DC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-class)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-128-path"></rect><path d="M11.898 16.1201C11.098 16.1201 10.466 15.8961 10.002 15.4481C9.53803 15.0001 9.30603 14.3841 9.30603 13.6001V9.64012C9.30603 8.85612 9.53803 8.24012 10.002 7.79212C10.466 7.34412 11.098 7.12012 11.898 7.12012C12.682 7.12012 13.306 7.34812 13.77 7.80412C14.234 8.25212 14.466 8.86412 14.466 9.64012H13.386C13.386 9.14412 13.254 8.76412 12.99 8.50012C12.734 8.22812 12.37 8.09212 11.898 8.09212C11.426 8.09212 11.054 8.22412 10.782 8.48812C10.518 8.75212 10.386 9.13212 10.386 9.62812V13.6001C10.386 14.0961 10.518 14.4801 10.782 14.7521C11.054 15.0161 11.426 15.1481 11.898 15.1481C12.37 15.1481 12.734 15.0161 12.99 14.7521C13.254 14.4801 13.386 14.0961 13.386 13.6001H14.466C14.466 14.3761 14.234 14.9921 13.77 15.4481C13.306 15.8961 12.682 16.1201 11.898 16.1201Z" fill="var(--color-text)" id="icon-128-text"></path></svg>DC</a></li>
64
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.MC.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>MC</a></li>
65
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McBase.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Base</a></li>
66
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/MC.McEvent.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-128-path"></use><use href="#icon-128-text"></use></svg>Mc<wbr/>Event</a></li>
67
+ <li class="tsd-kind-interface tsd-parent-kind-module"><a href="../interfaces/MC.HTMLMcElement.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-interface)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-256-path"></rect><path d="M9.51 16V15.016H11.298V8.224H9.51V7.24H14.19V8.224H12.402V15.016H14.19V16H9.51Z" fill="var(--color-text)" id="icon-256-text"></path></svg>HTMLMc<wbr/>Element</a></li>
68
+ <li class="tsd-kind-function tsd-parent-kind-module"><a href="MC.addListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-function)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-64-path"></rect><path d="M9.39 16V7.24H14.55V8.224H10.446V11.128H14.238V12.112H10.47V16H9.39Z" fill="var(--color-text)" id="icon-64-text"></path></svg>add<wbr/>Listener</a></li>
69
+ <li class="current tsd-kind-function tsd-parent-kind-module"><a href="MC.removeListener.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-64-path"></use><use href="#icon-64-text"></use></svg>remove<wbr/>Listener</a></li></ul></nav></div></div>
64
70
  <div class="container tsd-generator">
65
71
  <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
66
72
  <div class="overlay"></div><script src="../assets/main.js"></script></body></html>