@twobirds/microcomponents 0.0.64 → 0.0.66

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 (119) hide show
  1. package/.vscode/settings.json +1 -1
  2. package/assets/documentation/MC.md +146 -28
  3. package/assets/documentation/elements.md +4 -2
  4. package/assets/documentation/observables.md +2 -0
  5. package/assets/test.html +1 -1
  6. package/dist/MC.d.ts.map +1 -1
  7. package/dist/MC.min.js +20 -15
  8. package/dist/MC.ts +23 -16
  9. package/dist/elements.min.js +1 -1
  10. package/dist/formvValues.min.js +1 -1
  11. package/dist/microcomponents.min.js +1 -1
  12. package/dist/observables.d.ts.map +1 -1
  13. package/dist/observables.min.js +1 -1
  14. package/dist/observables.ts +0 -3
  15. package/dist/selectors.min.js +1 -1
  16. package/package.json +4 -4
  17. package/public/MC.js +20 -15
  18. package/public/MC.js.map +1 -1
  19. package/public/MC.min.js +20 -15
  20. package/public/assets/highlight.css +99 -0
  21. package/public/assets/icons.js +18 -0
  22. package/public/assets/icons.svg +1 -0
  23. package/public/assets/main.js +60 -0
  24. package/public/assets/navigation.js +1 -0
  25. package/public/assets/search.js +1 -0
  26. package/public/assets/style.css +1493 -0
  27. package/public/classes/MC.DC.html +12 -0
  28. package/public/classes/MC.MC.html +6 -0
  29. package/public/classes/MC.McBase.html +3 -0
  30. package/public/classes/MC.McEvent.html +9 -0
  31. package/public/elements.min.js +1 -1
  32. package/public/formvValues.min.js +1 -1
  33. package/public/functions/MC.addListener.html +1 -0
  34. package/public/functions/MC.autoload.html +1 -0
  35. package/public/functions/MC.removeListener.html +1 -0
  36. package/public/functions/elements.defineCE.html +1 -0
  37. package/public/functions/elements.getCE.html +1 -0
  38. package/public/functions/formValues.formValues.html +1 -0
  39. package/public/functions/observables.observe.html +1 -0
  40. package/public/functions/selectors._d.html +1 -0
  41. package/public/functions/selectors._t.html +1 -0
  42. package/public/hierarchy.html +1 -0
  43. package/public/index.html +56 -0
  44. package/public/interfaces/MC.HTMLMcElement.html +758 -0
  45. package/public/interfaces/selectors.DSelector.html +50 -0
  46. package/public/interfaces/selectors.TSelector.html +34 -0
  47. package/public/microcomponents.min.js +1 -1
  48. package/public/modules/MC.html +9 -0
  49. package/public/modules/elements.html +3 -0
  50. package/public/modules/formValues.html +2 -0
  51. package/public/modules/observables.html +3 -0
  52. package/public/modules/selectors.html +7 -0
  53. package/public/modules.html +6 -0
  54. package/public/observables.js.map +1 -1
  55. package/public/observables.min.js +1 -1
  56. package/public/selectors.min.js +1 -1
  57. package/public/types/observables.Observable.html +1 -0
  58. package/public/types/selectors.selection.html +1 -0
  59. package/public/types/selectors.singleSelector.html +1 -0
  60. package/src/MC.ts +23 -16
  61. package/src/observables.ts +0 -3
  62. package/src/test/testmc.ts +7 -1
  63. package/webpack.config.js +2 -2
  64. package/assets/documentation/comparision.md +0 -0
  65. package/assets/documentation/how_tos.md +0 -0
  66. package/assets/documentation/introduction.md +0 -0
  67. package/assets/documentation/proposal_draft.md +0 -37
  68. package/public/3d.html +0 -42
  69. package/public/documentation/MC.md +0 -470
  70. package/public/documentation/ajaxian-1.png +0 -0
  71. package/public/documentation/ajaxian-2.png +0 -0
  72. package/public/documentation/ajaxian-3.png +0 -0
  73. package/public/documentation/comparision.md +0 -0
  74. package/public/documentation/elements.md +0 -276
  75. package/public/documentation/functional_requirements.md +0 -8
  76. package/public/documentation/history.md +0 -436
  77. package/public/documentation/how_tos.md +0 -0
  78. package/public/documentation/introduction.md +0 -0
  79. package/public/documentation/magic.md +0 -29
  80. package/public/documentation/observables.md +0 -105
  81. package/public/documentation/proposal_draft.md +0 -37
  82. package/public/documentation/rnd0023-1.jpg +0 -0
  83. package/public/documentation/rnd0023-2.jpg +0 -0
  84. package/public/documentation/rnd0023-3.jpg +0 -0
  85. package/public/documentation/tB_react.md +0 -207
  86. package/public/documentation/usage.md +0 -142
  87. package/public/documentation/why.md +0 -25
  88. package/public/fiddle/MicroComponents.svg +0 -15
  89. package/public/fiddle/fiddle.css +0 -0
  90. package/public/fiddle/fiddle.js +0 -0
  91. package/public/fiddle/index.html +0 -0
  92. package/public/grandparent.css +0 -13
  93. package/public/my-tag.css +0 -19
  94. package/public/src/MC.ts +0 -598
  95. package/public/src/McEvent.ts +0 -96
  96. package/public/src/autoloader.ts +0 -98
  97. package/public/src/elements.ts +0 -76
  98. package/public/src/formValues.ts +0 -233
  99. package/public/src/helpers.ts +0 -149
  100. package/public/src/microcomponents.ts +0 -8
  101. package/public/src/observables.ts +0 -404
  102. package/public/src/selectors.ts +0 -1634
  103. package/public/src/test.ts +0 -193
  104. package/public/test/child.js +0 -15
  105. package/public/test/child.js.map +0 -1
  106. package/public/test/grandchild.js +0 -15
  107. package/public/test/grandchild.js.map +0 -1
  108. package/public/test/grandparent.js +0 -15
  109. package/public/test/grandparent.js.map +0 -1
  110. package/public/test/greatgrandchild.js +0 -29
  111. package/public/test/greatgrandchild.js.map +0 -1
  112. package/public/test/parent.js +0 -15
  113. package/public/test/parent.js.map +0 -1
  114. package/public/test/testform.js +0 -141
  115. package/public/test/testform.js.map +0 -1
  116. package/public/test/testmc.js +0 -10
  117. package/public/test/testmc.js.map +0 -1
  118. package/public/test.html +0 -27
  119. /package/public/{MicroComponents.svg → media/MicroComponents.svg} +0 -0
@@ -1,3 +1,3 @@
1
1
  {
2
- "CodeGPT.apiKey": "Ollama"
2
+ "CodeGPT.apiKey": "CodeGPT Plus Beta"
3
3
  }
@@ -1,4 +1,6 @@
1
- # Microcomponent Framework Documentation <span style="float:right; height:1em;"><img height="24px" src="./MicroComponents.svg" /></span>
1
+ ![logo](./MicroComponents.svg)
2
+
3
+ # Micro Component Documentation
2
4
 
3
5
  This document details a lightweight JavaScript framework for creating and managing "microcomponents" (MCs) associated with DOM elements or other microcomponents. It allows you to define reusable components and attach them to build complex functionalities.
4
6
 
@@ -19,7 +21,7 @@ The framework exports 2 main classes:
19
21
  - [DOM Traversal](#dom-traversal)
20
22
  - [Autoloading Concept](#autoloading-concept)
21
23
  - [Important Rule](#important-rule)
22
- - [Framework Classes](#framework-classes)
24
+ - [Classes](#classes)
23
25
  - [Not Exported: `McBase` (Superclass)](#not-exported-mcbase-superclass)
24
26
  - [Exported: `MC` Class](#exported-mc-class)
25
27
  - [Exported: `DC` Class](#exported-dc-class)
@@ -35,28 +37,11 @@ The framework exports 2 main classes:
35
37
  - [Auto-attaching DOM Listeners](#auto-attaching-dom-listeners)
36
38
  - [Lifecycle Events](#lifecycle-events)
37
39
  - [Init](#init)
38
- - [Destroy (TBD)](#destroy-tbd)
39
- - [Helper Functions (Internal)](#helper-functions-internal)
40
- - [`isBrowser()`](#isbrowser)
41
- - [`nativeEventNames`](#nativeeventnames)
42
- - [`getMicroComponents(...)`](#getmicrocomponents)
43
- - [`traverseNodes(...)`](#traversenodes)
44
- - [`isDOM(...)`](#isdom)
45
- - [`addListener(...)`](#addlistener)
46
- - [`removeListener(...)`](#removelistener)
47
- - [`add(...)`](#add)
48
- - [`remove(...)`](#remove)
49
- - [`trigger(...)`](#trigger)
50
- - [`init(...)`](#init-helper)
51
- - [`autoAttachListeners(...)`](#autoattachlisteners)
52
- - [`bubbleEvent(...)`](#bubbleevent)
53
- - [Autoloading Implementation](#autoloading-implementation)
54
- - [`autoload(enable?)`](#autoload)
55
- - [`loadit()`](#loadit)
56
40
  - [Interfaces and Types](#interfaces-and-types)
57
41
  - [`LooseObject`](#looseobject)
58
42
  - [`McEvent`](#mcevent)
59
43
  - [`HTMLMcElement`](#htmlmcelement)
44
+ - [Autoloading](#auto-loading)
60
45
 
61
46
  ## Usage Guidance
62
47
 
@@ -122,7 +107,7 @@ An optional feature (`autoload()`) that automatically detects specific HTML tags
122
107
 
123
108
  **Your own application code MUST NOT overwrite the core properties and methods provided by the `McBase`, `MC`, and `DC` classes (like `_mc`, `target`, `trigger`, `parent`, etc.). Doing so may break framework functionality.**
124
109
 
125
- ## Framework Classes
110
+ ## Classes
126
111
 
127
112
  ### Not Exported: `McBase` (Superclass)
128
113
 
@@ -454,17 +439,150 @@ class MyLifecycleComponent extends DC {
454
439
  }
455
440
  }
456
441
  ```
442
+ ## Auto Loading
443
+
444
+ `autoload()` provides a **progressive enhancement** strategy. It allows you to declare custom elements or special micro components in your HTML without needing to include all their JavaScript code upfront.
445
+
446
+ The necessary code is fetched and executed only when these components actually appear in the DOM, potentially improving initial page load time and resource usage.
447
+
448
+ ### Enabling
449
+
450
+ - If you call **`autoload(true)`** (or just **`autoload()`** as true is the parameter default), it initializes a MutationObserver.
451
+ This observer watches the document.body for any changes to its child elements or subtree (e.g., when new elements are added to the page).
452
+
453
+ **./autoload.html**
454
+ ```html
455
+ <!DOCTYPE html>
456
+ <html lang="en">
457
+ <head>
458
+ <meta charset="UTF-8" />
459
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
460
+ <title>Humble Beginnings</title>
461
+ <script src="./microcomponents.min.js"></script>
462
+ <script>
463
+ Object.assign(window, microcomponents); // make system global
464
+ autoload(true); // automatically load web components that are undefined
465
+ </script>
466
+ </head>
467
+ <body>
468
+ <div _mc="test-mymc"></div> <!--- example of a auto-loading micro component --->
469
+ <test-component></test-component> <!--- example of a auto-loading custom element --->
470
+ </body>
471
+ </html>
457
472
 
458
- #### Destroy (TBD)
473
+ ```
459
474
 
460
- Method Name: oneDestroy(event) (Proposed)
475
+ **./test/mymc.ts**
476
+ ```typescript
477
+ 'use strict';
478
+ import { DC, LooseObject } from '../microcomponents.js';
461
479
 
462
- Triggered: When a component is removed (e.g., via DC.remove or potentially parent removal).
480
+ export default class myMC extends DC {
481
+ constructor(target: HTMLElement) {
482
+ super(target);
483
+ delete this._mc; // not needed
484
+ }
463
485
 
464
- Execution Order:
486
+ oneInit() {
487
+ // console.log('testmc connected to DOM');
488
+ }
489
+ }
490
+ ```
465
491
 
466
- Expected to run synchronously, starting from the deepest nested components upwards, finally calling oneDestroy on the component being removed itself.
492
+ **./test/component.ts**
493
+ ```typescript
494
+ 'use strict';
495
+ import { DC, defineCE } from '.././microcomponents.js';
467
496
 
468
- Requirement:
497
+ defineCE(
498
+ 'test-component',
499
+
500
+ class extends DC {
501
+ data: unknown;
502
+
503
+ constructor(target: HTMLElement) {
504
+ super(target);
505
+
506
+ const that = this; // to help minification, you can use 'this' throughout the constructor as well
507
+
508
+ delete that._mc; // no inner classes needed
509
+
510
+ let shadow = (that as DC).target.attachShadow({ mode: 'open' });
511
+ shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
512
+
513
+ }
514
+
515
+ get template() {
516
+ return /*html*/ `
517
+ <span>Hello World</span>
518
+ `;
519
+ }
520
+
521
+ get css() {
522
+ return /*css*/ `
523
+ div {
524
+ background-color: cyan;
525
+ }`;
526
+ }
527
+ }
528
+ );
529
+ ```
530
+
531
+ **Page HTML after loading**
532
+ ```HTML
533
+ (...)
534
+ <div _mc=""></div> <!--- _mc component definition now empty to avoid re-loading --->
535
+ <test-component></test-component> <!--- the custom element is initialized now --->
536
+ (...)
537
+ ```
538
+
539
+ ### Disabling:
540
+
541
+ - If you call **`autoload(false)`**, it disconnects the observer, stopping the automatic loading feature:
542
+
543
+ ```typescript
544
+ autoload(false);
545
+ ```
546
+
547
+ ### Loading Mechanism:
548
+
549
+ When enabled and changes are detected in the DOM, the a callback function is triggered. This function scans the DOM for two types of components that might not yet be defined:
550
+
551
+ - **Undefined Custom Elements:** It looks for HTML elements whose tag names haven't been defined via customElements.define() (e.g., `<my-custom-tag>`).
552
+
553
+ For an element like `<my-custom-tag>`, it will attempt to load a script from a path derived from the tag name, such as **`./my/custom/tag.js`**. The loaded script is expected to then define this custom element.
554
+
555
+ - **Undefined Micro Components:** It looks for HTML elements that have an **`_mc`** attribute that is not empty, e.g., **`<div _mc="my-component my-other">`**.
556
+
557
+ **For each component name** listed in the **`_mc`** attribute (like **`my-component`**), it will attempt to load a script from a path like **`./my/component.js`**.
558
+
559
+ **These scripts are expected to `export default class {...}`** (usually extending DC from your code) that defines the behavior of this micro component.
560
+
561
+ **In general:**
562
+
563
+ - For each undefined component found, it dynamically creates a **`<script type="module">`** tag in the **`head`** of the document, and sets its src attribute to the appropriate path.
564
+
565
+ - The src of the script is determined by converting the component name (e.g., **`my-component`**) into a path (e.g., **`./my/component.js`**).
566
+
567
+ - These script tags are appended to the `<head>` of the document to initiate loading.
568
+
569
+ ### Internal Callbacks and Instantiation:
570
+
571
+ - **Custom Elements:**
572
+ Once the script for a custom element loads and defines the element (using customElements.define()), the browser automatically handles upgrading any existing instances of that tag.
573
+
574
+ - **Micro Components:**
575
+ When a script for an _mc component loads successfully, a another callback is executed. This callback:
576
+ - Stores the loaded component class in an internal repository to avoid unnecessary reloading.
577
+ - Finds all HTMLElement in the DOM that declared this _mc component.
578
+ - Instantiates the component class and adds it to the HTMLElement.
579
+ - Removes the component's name from the _mc attribute to prevent re-processing.
580
+
581
+ ### State Tracking:
582
+
583
+ `autoload()` internally uses two Map() objects:
584
+
585
+ - **`CEs`** (for Custom Elements that are currently loading)
586
+ - **`MCs`** (for Micro Components), to keep track of components that are currently loading or have been loaded. This prevents attempting to load the same component multiple times.
469
587
 
470
- - Would require defining a method named `oneDestroy` in your class.
588
+ These maps are exposed for debugging purposes. You can access them via `autoload.state` which returns an object with `CEs` and `MCs` properties.
@@ -1,4 +1,6 @@
1
- # Custom Elements <span style="float:right; height:1em;"><img height="24px" src="https://gitlab.com/twoBirds/microcomponents/-/raw/main/MicroComponents.svg" /></span>
1
+ ![logo](./MicroComponents.svg)
2
+
3
+ # Custom Elements
2
4
 
3
5
  Custom Elements provides two funktions:
4
6
  - **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).
@@ -22,7 +24,7 @@ Before:
22
24
  defineCE(
23
25
  // equivalent to and internally using customElementRegistry.define()
24
26
  "my-tag",
25
- class MyTag extends DC {
27
+ class extends DC {
26
28
 
27
29
  constructor(target, data = {} ) {
28
30
  super(target);
@@ -1,3 +1,5 @@
1
+ ![logo](./MicroComponents.svg)
2
+
1
3
  # Observables Documentation
2
4
 
3
5
  This module provides utilities for observing and binding data to DOM elements using placeholders. It supports reactive updates when data changes.
package/assets/test.html CHANGED
@@ -21,7 +21,7 @@
21
21
  </head>
22
22
  <body>
23
23
  <test-grandparent></test-grandparent>
24
- <test-testform _mc="test-testmc"></test-testform>
24
+ <test-testform _mc="test-testmc" language="en"></test-testform>
25
25
  Open the debugger, read console, then:<br />
26
26
  </body>
27
27
  </html>
package/dist/MC.d.ts.map CHANGED
@@ -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;AAsKD,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAgBxD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}
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,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAgBxD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}
package/dist/MC.min.js CHANGED
@@ -428,20 +428,26 @@ function onLoadCallback(script) {
428
428
  se.async = true;
429
429
  se.setAttribute('type', 'module');
430
430
  const code = `
431
- import _ from "${importFileName}";
432
- import {DC} from "./microcomponents.js";
433
431
 
434
- const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
432
+ import _ from "${importFileName}";
433
+ import {DC} from "./microcomponents.js";
435
434
 
436
- elements.forEach((element) => {
437
- autoload.state.MCs.set( '${elementName}', _ ); // add class to MCs repository
438
- DC.add(element, _.name, new _(element)); // add instance to DOM
439
- element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); // remove name from elements "_mc" attribute
440
- });
435
+ const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
436
+
437
+ elements.forEach((element) => {
438
+ // add class to MCs repository
439
+ autoload.state.MCs.set( '${elementName}', _ );
440
+ // add instance to HTMLElement
441
+ DC.add(element, _.name, new _(element));
442
+ // remove instance name from elements "_mc" attribute
443
+ element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
444
+ });
445
+
446
+ setTimeout( () => {
447
+ document.body.querySelector('script[name="${elementName}]"')?.remove();
448
+ },0);
441
449
 
442
- setTimeout( () => {
443
- document.body.querySelector('script[name="${elementName}]"')?.remove();
444
- },0);`;
450
+ `;
445
451
  se.innerHTML = code;
446
452
  document.body.append(se);
447
453
  }, 0);
@@ -474,13 +480,12 @@ function loadUndefinedMicroComponents() {
474
480
  const elementsAlreadyLoaded = elements.filter(m => MCs.has(m) && !MCs.get(m).length);
475
481
  elementsAlreadyLoaded?.forEach(elementName => {
476
482
  setTimeout(() => {
477
- console.log('attaching', elementName, autoload.state.MCs.get(elementName));
478
483
  DC.add(el, elementName, new (autoload.state.MCs.get(elementName))(el));
479
- el.setAttribute('_mc', el
480
- .getAttribute('_mc')
484
+ const newAttribute = el.getAttribute('_mc')
481
485
  .replace('${elementName}', '')
482
486
  .replace(/\w\w/g, ' ')
483
- .trim());
487
+ .trim() || '_mc';
488
+ el.setAttribute('_mc');
484
489
  }, 5);
485
490
  });
486
491
  });
package/dist/MC.ts CHANGED
@@ -489,20 +489,26 @@ function onLoadCallback( script: HTMLScriptElement ) {
489
489
 
490
490
  // --- autoload script
491
491
  const code = /*javascript*/`
492
- import _ from "${importFileName}";
493
- import {DC} from "./microcomponents.js";
494
492
 
495
- const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
493
+ import _ from "${importFileName}";
494
+ import {DC} from "./microcomponents.js";
496
495
 
497
- elements.forEach((element) => {
498
- autoload.state.MCs.set( '${elementName}', _ ); // add class to MCs repository
499
- DC.add(element, _.name, new _(element)); // add instance to DOM
500
- element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); // remove name from elements "_mc" attribute
501
- });
496
+ const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
502
497
 
503
- setTimeout( () => {
504
- document.body.querySelector('script[name="${elementName}]"')?.remove();
505
- },0);`;
498
+ elements.forEach((element) => {
499
+ // add class to MCs repository
500
+ autoload.state.MCs.set( '${elementName}', _ );
501
+ // add instance to HTMLElement
502
+ DC.add(element, _.name, new _(element));
503
+ // remove instance name from elements "_mc" attribute
504
+ element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
505
+ });
506
+
507
+ setTimeout( () => {
508
+ document.body.querySelector('script[name="${elementName}]"')?.remove();
509
+ },0);
510
+
511
+ `;
506
512
  // --- end autoload script
507
513
 
508
514
  se.innerHTML = code;
@@ -558,14 +564,15 @@ function loadUndefinedMicroComponents() {
558
564
  // MCs that are already loaded will trigger the onLoadCallback manually
559
565
  elementsAlreadyLoaded?.forEach( elementName => {
560
566
  setTimeout( ()=>{
561
- console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
567
+ //console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
562
568
  DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
563
- el.setAttribute('_mc', (el as any)
564
- .getAttribute('_mc')
569
+
570
+ const newAttribute = (el as any).getAttribute('_mc')
565
571
  .replace('${elementName}', '')
566
572
  .replace( /\w\w/g, ' ')
567
- .trim()
568
- ); // remove name from elements "_mc" attribute
573
+ .trim() || '_mc';
574
+
575
+ (el as any).setAttribute('_mc', ); // set new "_mc" attribute
569
576
  }, 5);
570
577
  });
571
578
  });
@@ -1 +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,n)=>{for(var r in n)e.o(n,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:n[r]})},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:()=>j,getCE:()=>M});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>r.add(e)));class o{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var c=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function i(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const r=e?._mc;!t&&r?n=n.concat(Object.values(e._mc)):t&&r&&r[t]&&n.push(r[t])}})),n}function a(e,t,n=!0){let r=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&r.push(e._mc[t]):r=r.concat(Object.values(e._mc)),n))return r;e=e.parentNode}return r}function l(e){return e&&e instanceof HTMLElement}function u(e,t,n,r=!1,o=!1){let c={once:!1};r&&(c.capture=r),o&&(c.once=o),e.addEventListener(t,n,c)}function m(e,t,n={}){let r=e;if(!r._mc){let t=h?.debug;h.debug=!1,r._mc=new h(e),h.debug=t,delete r._mc._mc}const o=r._mc;return t.length&&!o[t]&&(o[t]=n,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),n}function d(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,n={},r="l"){let c=e?._mc;if(!c)return;let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,n,"l"),i="string"!=typeof t?t:new o(t,n,r);[...Object.values(c)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(s)})),/[ud]/.test(i.bubble)&&f(e,i)}function f(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=a(e,"",!0)?.[0].target;n&&h.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&h.trigger(e,t)}))}),0)}c()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>s.add(e)));class g{#r;constructor(e,t=!1){var n;this.#r=new WeakRef(e||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!c()||e.constructor===h)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((r=>{let o=/^one/.test(r),c=r.replace(/^on[e]{0,1}/,""),i=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[r].bind(n)(e)}}),s.has("on"+i)&&u(t,i,(e=>{n.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends g{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,t,"l"),s="string"!=typeof e?e:new o(e,t,n);return[...Object.getOwnPropertyNames(r)].forEach((e=>{r[e]?.trigger&&"function"==typeof r[e]?.trigger&&r[e]?.trigger(c)})),void(/[ud]/.test(s.bubble)&&f(r.target,s))}if(r instanceof b||r instanceof h){const r=this,c="string"!=typeof e?e:new o(e,t,n),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof r[s]||(r[s](c),r.hasOwnProperty(s)&&delete r[s])),c.stopped||"l"===c.bubble)return r;/[ud]/.test(c.bubble)&&f(r.target,c)}}}class h extends g{_mc={};constructor(e,t=!1){super(e)}static add=m;static remove=d;static trigger=p;trigger(e,t={},n){b.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return l(t)?a(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return l(t)?a(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!l(t))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const o=i([...t.querySelectorAll(r)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return l(t)?i([...t.querySelectorAll("*[_mc]")],e):[]}}const y=new Map,w=new Map;function _(e){const t="./"+e.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",t),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",e),n.setAttribute("loading",""),u(n,"load",(e=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(e=>{console.error("could not load Custom Element code from",t)})),n}function E(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!y.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),n=(t.split("-").join("/"),_(t));u(n,"load",(()=>{y.set(t,customElements.get(e.tagName.toLowerCase()))})),y.set(t,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],n=t.filter((e=>!w.has(e)));n?.forEach((e=>{const t=_(e);u(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),n=t.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const o=`\nimport _ from "${e}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${n}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n},0);`;r.innerHTML=o,document.body.append(r)}),0);var t})),w.set(e,"loading"),document.head.append(t)}));const r=t.filter((e=>w.has(e)&&!w.get(e).length));r?.forEach((t=>{setTimeout((()=>{console.log("attaching",t,v.state.MCs.get(t)),h.add(e,t,new(v.state.MCs.get(t))(e)),e.setAttribute("_mc",e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let A=!1,C=null;function v(e=!0){return e?(A=e,C=new MutationObserver(E),setTimeout((()=>{C.observe(document.body,{childList:!0,subtree:!0}),E()}),5),A):(C?.disconnect(),C=null,A)}v.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){h.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function j(e,t,n=[]){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 r=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})}(r,class extends O{instance;constructor(e){super();let n=new t(this,e);h.add(this,r,n)}static get observedAttributes(){return n}}))}function M(e){return customElements.get(e)}return t})()));
1
+ !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},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={};t.r(e),t.d(e,{defineCE:()=>j,getCE:()=>M});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>r.add(t)));class o{#t;#e=!1;#n=!1;constructor(t,e={},n="l"){this.#t=t,this.data=e,this.bubble=n}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#n}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var c=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function i(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function a(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function l(t){return t&&t instanceof HTMLElement}function u(t,e,n,r=!1,o=!1){let c={once:!1};r&&(c.capture=r),o&&(c.once=o),t.addEventListener(e,n,c)}function m(t,e,n={}){let r=t;if(!r._mc){let e=h?.debug;h.debug=!1,r._mc=new h(t),h.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),n}function d(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,n={},r="l"){let c=t?._mc;if(!c)return;let s=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),i="string"!=typeof e?e:new o(e,n,r);[...Object.values(c)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(s)})),/[ud]/.test(i.bubble)&&f(t,i)}function f(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=a(t,"",!0)?.[0].target;n&&h.trigger(n,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&h.trigger(t,e)}))}),0)}c()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>s.add(t)));class g{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!c()||t.constructor===h)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((r=>{let o=/^one/.test(r),c=r.replace(/^on[e]{0,1}/,""),i=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),s.has("on"+i)&&u(e,i,(t=>{n.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends g{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),s="string"!=typeof t?t:new o(t,e,n);return[...Object.getOwnPropertyNames(r)].forEach((t=>{r[t]?.trigger&&"function"==typeof r[t]?.trigger&&r[t]?.trigger(c)})),void(/[ud]/.test(s.bubble)&&f(r.target,s))}if(r instanceof b||r instanceof h){const r=this,c="string"!=typeof t?t:new o(t,e,n),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof r[s]||(r[s](c),r.hasOwnProperty(s)&&delete r[s])),c.stopped||"l"===c.bubble)return r;/[ud]/.test(c.bubble)&&f(r.target,c)}}}class h extends g{_mc={};constructor(t,e=!1){super(t)}static add=m;static remove=d;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?a(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?a(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';e.setAttribute("temp_id",n);const o=i([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?i([...e.querySelectorAll("*[_mc]")],t):[]}}const y=new Map,w=new Map;function _(t){const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",t),n.setAttribute("loading",""),u(n,"load",(t=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(t=>{console.error("could not load Custom Element code from",e)})),n}function E(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!y.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),n=(e.split("-").join("/"),_(e));u(n,"load",(()=>{y.set(e,customElements.get(t.tagName.toLowerCase()))})),y.set(e,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],n=e.filter((t=>!w.has(t)));n?.forEach((t=>{const e=_(t);u(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),n=e.getAttribute("name"),r=document.createElement("script");r.async=!0,r.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*="${n}"]')).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( '${n}', _ );\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('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=o,document.body.append(r)}),0);var e})),w.set(t,"loading"),document.head.append(e)}));const r=e.filter((t=>w.has(t)&&!w.get(t).length));r?.forEach((e=>{setTimeout((()=>{h.add(t,e,new(C.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let A=!1,v=null;function C(t=!0){return t?(A=t,v=new MutationObserver(E),setTimeout((()=>{v.observe(document.body,{childList:!0,subtree:!0}),E()}),5),A):(v?.disconnect(),v=null,A)}C.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(t,e,n){h.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:n})}}function j(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends O{instance;constructor(t){super();let n=new e(this,t);h.add(this,r,n)}static get observedAttributes(){return n}}))}function M(t){return customElements.get(t)}return e})()));
@@ -1 +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.formValues=t():e.formValues=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={};function r(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var o;(o=e[n])&&o.constructor&&o.constructor===Object?t[n]=r(e[n]):t[n]=e[n]})),t}function n(e,t=!0){let o={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=n(e[t],!1);for(const e in r)o[t+"."+e]=r[e]}else o[t]=e[t]})),t?r(o):o}function o(e,t){return JSON.stringify(n(e))===JSON.stringify(n(t))}function c(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function s(e,t){const r=Object.getOwnPropertyDescriptors(e);for(const[e,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(t,e,n)}e.r(t),e.d(t,{formValues:()=>J});var a=new Function("try {return this===window;}catch(e){ return false;}");let l=new Set;a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>l.add(e)));class i{#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 u=new Function("try {return this===window;}catch(e){ return false;}");let f=new Set;function d(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 m(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 p(e){return e&&e instanceof HTMLElement}function b(e,t,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),e.addEventListener(t,r,c)}function g(e,t,r={}){let n=e;if(!n._mc){let t=E?.debug;E.debug=!1,n._mc=new E(e),E.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function h(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 y(e,t,r={},n="l"){let o=e?._mc;if(!o)return;let c=t instanceof i?new i(t.type,t.data,"l"):new i(t,r,"l"),s="string"!=typeof t?t:new i(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&O(e,s)}function O(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=m(e,"",!0)?.[0].target;r&&E.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&E.trigger(e,t)}))}),0)}u()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>f.add(e)));class v{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!u()||e.constructor===E)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),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),f.has("on"+s)&&b(t,s,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};constructor(e){super(e)}static trigger=y;trigger(e,t={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=e instanceof i?new i(e.type,e.data,"l"):new i(e,t,"l"),c="string"!=typeof e?e:new i(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof e?e:new i(e,t,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)&&O(n.target,o)}}}class E extends v{_mc={};constructor(e,t=!1){super(e)}static add=g;static remove=h;static trigger=y;trigger(e,t={},r){w.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return p(t)?m(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return p(t)?m(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!p(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=d([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return p(t)?d([...t.querySelectorAll("*[_mc]")],e):[]}}const A=new Map,_=new Map;function j(e){const t="./"+e.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",t),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",e),r.setAttribute("loading",""),b(r,"load",(e=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),b(r,"error",(e=>{console.error("could not load Custom Element code from",t)})),r}function S(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),r=(t.split("-").join("/"),j(t));b(r,"load",(()=>{A.set(t,customElements.get(e.tagName.toLowerCase()))})),A.set(t,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],r=t.filter((e=>!_.has(e)));r?.forEach((e=>{const t=j(e);b(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),r=t.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\nimport _ from "${e}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${r}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n},0);`;n.innerHTML=o,document.body.append(n)}),0);var t})),_.set(e,"loading"),document.head.append(t)}));const n=t.filter((e=>_.has(e)&&!_.get(e).length));n?.forEach((t=>{setTimeout((()=>{console.log("attaching",t,N.state.MCs.get(t)),E.add(e,t,new(N.state.MCs.get(t))(e)),e.setAttribute("_mc",e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let T=!1,k=null;function N(e=!0){return e?(T=e,k=new MutationObserver(S),setTimeout((()=>{k.observe(document.body,{childList:!0,subtree:!0}),S()}),5),T):(k?.disconnect(),k=null,T)}function C(e){return null!=e&&"object"==typeof e}function M(e){let t=new Set,r=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(r))).forEach((n=>{new Set(e.getAttribute(n)?.match(r)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(r))).forEach((e=>{(e.nodeValue||"").match(r).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}N.state={CEs:A,MCs:_};const L=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends E{data={};oldDisplay="";constructor(e){super(e);let t=this;M(e).forEach((e=>t.data[e]="")),P(t),t.#o(),delete t._mc}#o(){let e=this,t=e.target,r=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(t.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=t.getAttribute(r),e=>{let c=o;n.forEach((t=>{c=c.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(r,c)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;e.data.observe((c=n.nodeValue,r=>{let s=c;o.forEach((e=>{s=s.replace(e,r[e.replace(/[\{\}]/g,"")])})),Object.keys(r).some((e=>!!r[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),n.nodeValue=s})),e.oldDisplay=t.getAttribute("style)")||"",r&&!L.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,r={};Object.keys(e.data).forEach((n=>{t.data.hasOwnProperty(n)&&(r[n]=e.data[n])})),JSON.stringify(r)!==JSON.stringify(t.data)&&Object.assign(t.data,r)}}const P=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let r,a=e[t];if(!a.prototype)switch(typeof a){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=a instanceof Array?Array:Object;break;default:return}let l=class extends r{#c=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!M(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||E.add(e,"_placeholders",new x(e))}))}(e);const r=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),o=function(e){let t=n(e);r.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(o),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,r=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#c=e),t.constructor.callbacks.forEach((e=>{e(r)})),t}},i=new l(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(i.valueOf())){let e=structuredClone(Object.assign({},i));setTimeout(c((function(){o(structuredClone(Object.assign({},i)),e)||i.notify()}),0),0)}return i},set(e){if(typeof e==typeof i.valueOf())if(C(i.valueOf())&&i.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},i));i instanceof l==0&&(i=new l(structuredClone(Object.assign({},e))),s(e,i),i.seal()),Object.assign(i,e),setTimeout(c((function(){o(structuredClone(Object.assign({},i)),t)||i.notify()}),0),0)}else{let t=i.valueOf(),r=i.constructor.callbacks;i=new l(e),i.constructor.callbacks=r,e!==t&&i.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof i.valueOf(),i,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class q{constructor(e){}}class D extends q{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class H extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class V extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class I extends q{#s;#a=!1;constructor(e){super(e),this.#s=e,this.#a=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#a?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.value=e}}const F=e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let n=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":n=new D(e);break;case"checkbox":n=new H(e);break;default:n=new V(e)}break;case"select":n=new I(e);break;case"textarea":n=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}n&&(E.add(e,t,n),Object.defineProperty(r,t,{enumerable:!0,configurable:!0,get:()=>n.val,set:e=>{n.val!==e&&(n.val=e)}}))}})),r};function J(e,t,r){let n=F(r);e[t]=Object.assign({},n),P(e,t),s(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{b(r,"keyup",(r=>{e[t].notify()})),b(r,"change",(r=>{e[t].notify()})),b(r,"select",(r=>{e[t].notify()}))}))}return t})()));
1
+ !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.formValues=t():e.formValues=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={};function r(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var o;(o=e[n])&&o.constructor&&o.constructor===Object?t[n]=r(e[n]):t[n]=e[n]})),t}function n(e,t=!0){let o={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=n(e[t],!1);for(const e in r)o[t+"."+e]=r[e]}else o[t]=e[t]})),t?r(o):o}function o(e,t){return JSON.stringify(n(e))===JSON.stringify(n(t))}function c(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function s(e,t){const r=Object.getOwnPropertyDescriptors(e);for(const[e,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(t,e,n)}e.r(t),e.d(t,{formValues:()=>J});var a=new Function("try {return this===window;}catch(e){ return false;}");let i=new Set;a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>i.add(e)));class l{#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 u=new Function("try {return this===window;}catch(e){ return false;}");let f=new Set;function d(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 m(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 p(e){return e&&e instanceof HTMLElement}function b(e,t,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),e.addEventListener(t,r,c)}function g(e,t,r={}){let n=e;if(!n._mc){let t=E?.debug;E.debug=!1,n._mc=new E(e),E.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function h(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 y(e,t,r={},n="l"){let o=e?._mc;if(!o)return;let c=t instanceof l?new l(t.type,t.data,"l"):new l(t,r,"l"),s="string"!=typeof t?t:new l(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&O(e,s)}function O(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=m(e,"",!0)?.[0].target;r&&E.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&E.trigger(e,t)}))}),0)}u()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>f.add(e)));class v{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!u()||e.constructor===E)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),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),f.has("on"+s)&&b(t,s,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};constructor(e){super(e)}static trigger=y;trigger(e,t={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=e instanceof l?new l(e.type,e.data,"l"):new l(e,t,"l"),c="string"!=typeof e?e:new l(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof e?e:new l(e,t,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)&&O(n.target,o)}}}class E extends v{_mc={};constructor(e,t=!1){super(e)}static add=g;static remove=h;static trigger=y;trigger(e,t={},r){w.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return p(t)?m(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return p(t)?m(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!p(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=d([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return p(t)?d([...t.querySelectorAll("*[_mc]")],e):[]}}const A=new Map,_=new Map;function j(e){const t="./"+e.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",t),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",e),r.setAttribute("loading",""),b(r,"load",(e=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),b(r,"error",(e=>{console.error("could not load Custom Element code from",t)})),r}function S(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),r=(t.split("-").join("/"),j(t));b(r,"load",(()=>{A.set(t,customElements.get(e.tagName.toLowerCase()))})),A.set(t,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],r=t.filter((e=>!_.has(e)));r?.forEach((e=>{const t=j(e);b(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),r=t.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${e}";\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 t})),_.set(e,"loading"),document.head.append(t)}));const n=t.filter((e=>_.has(e)&&!_.get(e).length));n?.forEach((t=>{setTimeout((()=>{E.add(e,t,new(N.state.MCs.get(t))(e)),e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),e.setAttribute("_mc")}),5)}))}))}let T=!1,k=null;function N(e=!0){return e?(T=e,k=new MutationObserver(S),setTimeout((()=>{k.observe(document.body,{childList:!0,subtree:!0}),S()}),5),T):(k?.disconnect(),k=null,T)}function C(e){return null!=e&&"object"==typeof e}function L(e){let t=new Set,r=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(r))).forEach((n=>{new Set(e.getAttribute(n)?.match(r)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(r))).forEach((e=>{(e.nodeValue||"").match(r).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}N.state={CEs:A,MCs:_};const M=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends E{data={};oldDisplay="";constructor(e){super(e);let t=this;L(e).forEach((e=>t.data[e]="")),P(t),t.#o(),delete t._mc}#o(){let e=this,t=e.target,r=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(t.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=t.getAttribute(r),e=>{let c=o;n.forEach((t=>{c=c.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(r,c)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;e.data.observe((c=n.nodeValue,r=>{let s=c;o.forEach((e=>{s=s.replace(e,r[e.replace(/[\{\}]/g,"")])})),Object.keys(r).some((e=>!!r[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),n.nodeValue=s})),e.oldDisplay=t.getAttribute("style)")||"",r&&!M.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,r={};Object.keys(e.data).forEach((n=>{t.data.hasOwnProperty(n)&&(r[n]=e.data[n])})),JSON.stringify(r)!==JSON.stringify(t.data)&&Object.assign(t.data,r)}}const P=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let r,a=e[t];if(!a.prototype)switch(typeof a){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=a instanceof Array?Array:Object;break;default:return}let i=class extends r{#c=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!L(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||E.add(e,"_placeholders",new x(e))}))}(e);const r=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),o=function(e){let t=n(e);r.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(o),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,r=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#c=e),t.constructor.callbacks.forEach((e=>{e(r)})),t}},l=new i(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(c((function(){o(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(C(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof i==0&&(l=new i(structuredClone(Object.assign({},e))),s(e,l),l.seal()),Object.assign(l,e),setTimeout(c((function(){o(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),r=l.constructor.callbacks;l=new i(e),l.constructor.callbacks=r,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class q{constructor(e){}}class H extends q{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class D extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class V extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class I extends q{#s;#a=!1;constructor(e){super(e),this.#s=e,this.#a=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#a?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.value=e}}const F=e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let n=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":n=new H(e);break;case"checkbox":n=new D(e);break;default:n=new V(e)}break;case"select":n=new I(e);break;case"textarea":n=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}n&&(E.add(e,t,n),Object.defineProperty(r,t,{enumerable:!0,configurable:!0,get:()=>n.val,set:e=>{n.val!==e&&(n.val=e)}}))}})),r};function J(e,t,r){let n=F(r);e[t]=Object.assign({},n),P(e,t),s(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{b(r,"keyup",(r=>{e[t].notify()})),b(r,"change",(r=>{e[t].notify()})),b(r,"select",(r=>{e[t].notify()}))}))}return t})()));