@twobirds/microcomponents 0.0.1

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.
@@ -0,0 +1,62 @@
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
2
+ <div class="tsd-toolbar-contents container">
3
+ <div class="table-cell" id="tsd-search" data-base="..">
4
+ <div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
5
+ <div class="field">
6
+ <div id="tsd-toolbar-links"></div></div>
7
+ <ul class="results">
8
+ <li class="state loading">Preparing search index...</li>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
10
+ <div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
11
+ <div class="container container-main">
12
+ <div class="col-8 col-content">
13
+ <div class="tsd-page-title">
14
+ <ul class="tsd-breadcrumb">
15
+ <li><a href="../modules.html">microcomponents</a></li>
16
+ <li><a href="microcomponents.html">microcomponents</a></li></ul>
17
+ <h1>Module microcomponents</h1></div><aside class="tsd-sources">
18
+ <ul>
19
+ <li>Defined in <a href="https://gitlab.com/twoBirds/microcomponents/-/blob/1c55793/src/microcomponents.ts#L1">src/microcomponents.ts:1</a></li></ul></aside>
20
+ <section class="tsd-panel-group">
21
+ <section class="tsd-panel tsd-typography"></section></section>
22
+ <section class="tsd-panel-group tsd-index-group">
23
+ <section class="tsd-panel tsd-index-panel">
24
+ <h3 class="tsd-index-heading uppercase">Index</h3>
25
+ <section class="tsd-index-section">
26
+ <h3 class="tsd-index-heading">Classes</h3>
27
+ <div class="tsd-index-list"><a href="../classes/microcomponents.MC.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><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><span>MC</span></a>
28
+ </div></section>
29
+ <section class="tsd-index-section">
30
+ <h3 class="tsd-index-heading">Interfaces</h3>
31
+ <div class="tsd-index-list"><a href="../interfaces/microcomponents.HTMLElementMc.html" class="tsd-index-link tsd-kind-interface tsd-parent-kind-module"><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><span>HTMLElement<wbr/>Mc</span></a>
32
+ </div></section></section></section></div>
33
+ <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
34
+ <div class="tsd-navigation settings">
35
+ <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
36
+ <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> Settings</h3></summary>
37
+ <div class="tsd-accordion-details">
38
+ <div class="tsd-filter-visibility">
39
+ <h4 class="uppercase">Member Visibility</h4><form>
40
+ <ul id="tsd-filter-options">
41
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
42
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
43
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
44
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
45
+ <div class="tsd-theme-toggle">
46
+ <h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
47
+ <nav class="tsd-navigation primary">
48
+ <details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
49
+ <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>
50
+ <div class="tsd-accordion-details">
51
+ <ul>
52
+ <li class="current"><a href="../modules.html">microcomponents</a>
53
+ <ul>
54
+ <li class="current selected tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
55
+ <li class="tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
56
+ <nav class="tsd-navigation secondary menu-sticky">
57
+ <ul>
58
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/microcomponents.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-interface tsd-parent-kind-module"><a href="../interfaces/microcomponents.HTMLElementMc.html" class="tsd-index-link"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-256-path"></use><use href="#icon-256-text"></use></svg>HTMLElement<wbr/>Mc</a></li></ul></nav></div></div>
60
+ <div class="container tsd-generator">
61
+ <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
62
+ <div class="overlay"></div><script src="../assets/main.js"></script></body></html>
@@ -0,0 +1,60 @@
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents.es3 | microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
2
+ <div class="tsd-toolbar-contents container">
3
+ <div class="table-cell" id="tsd-search" data-base="..">
4
+ <div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
5
+ <div class="field">
6
+ <div id="tsd-toolbar-links"></div></div>
7
+ <ul class="results">
8
+ <li class="state loading">Preparing search index...</li>
9
+ <li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">microcomponents</a></div>
10
+ <div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
11
+ <div class="container container-main">
12
+ <div class="col-8 col-content">
13
+ <div class="tsd-page-title">
14
+ <ul class="tsd-breadcrumb">
15
+ <li><a href="../modules.html">microcomponents</a></li>
16
+ <li><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul>
17
+ <h1>Module microcomponents.es3</h1></div>
18
+ <section class="tsd-panel-group">
19
+ <section class="tsd-panel tsd-typography"></section></section>
20
+ <section class="tsd-panel-group tsd-index-group">
21
+ <section class="tsd-panel tsd-index-panel">
22
+ <h3 class="tsd-index-heading uppercase">Index</h3>
23
+ <section class="tsd-index-section">
24
+ <h3 class="tsd-index-heading">Classes</h3>
25
+ <div class="tsd-index-list"><a href="../classes/microcomponents_es3.MC.html" class="tsd-index-link tsd-kind-class tsd-parent-kind-module"><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><span>MC</span></a>
26
+ </div></section>
27
+ <section class="tsd-index-section">
28
+ <h3 class="tsd-index-heading">Functions</h3>
29
+ <div class="tsd-index-list"><a href="../functions/microcomponents_es3.__isEmpty.html" class="tsd-index-link tsd-kind-function tsd-parent-kind-module"><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><span>__is<wbr/>Empty</span></a>
30
+ </div></section></section></section></div>
31
+ <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
32
+ <div class="tsd-navigation settings">
33
+ <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
34
+ <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> Settings</h3></summary>
35
+ <div class="tsd-accordion-details">
36
+ <div class="tsd-filter-visibility">
37
+ <h4 class="uppercase">Member Visibility</h4><form>
38
+ <ul id="tsd-filter-options">
39
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
40
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
41
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
42
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
43
+ <div class="tsd-theme-toggle">
44
+ <h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
45
+ <nav class="tsd-navigation primary">
46
+ <details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
47
+ <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>
48
+ <div class="tsd-accordion-details">
49
+ <ul>
50
+ <li class="current"><a href="../modules.html">microcomponents</a>
51
+ <ul>
52
+ <li class="tsd-kind-module"><a href="microcomponents.html">microcomponents</a></li>
53
+ <li class="current selected tsd-kind-module"><a href="microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav>
54
+ <nav class="tsd-navigation secondary menu-sticky">
55
+ <ul>
56
+ <li class="tsd-kind-class tsd-parent-kind-module"><a href="../classes/microcomponents_es3.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>
57
+ <li class="tsd-kind-function tsd-parent-kind-module"><a href="../functions/microcomponents_es3.__isEmpty.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>__is<wbr/>Empty</a></li></ul></nav></div></div>
58
+ <div class="container tsd-generator">
59
+ <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
60
+ <div class="overlay"></div><script src="../assets/main.js"></script></body></html>
@@ -0,0 +1,48 @@
1
+ <!DOCTYPE html><html class="default" lang="en"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>microcomponents</title><meta name="description" content="Documentation for microcomponents"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os"</script><header class="tsd-page-toolbar">
2
+ <div class="tsd-toolbar-contents container">
3
+ <div class="table-cell" id="tsd-search" data-base=".">
4
+ <div class="field"><label for="tsd-search-field" class="tsd-widget tsd-toolbar-icon search no-caption"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M15.7824 13.833L12.6666 10.7177C12.5259 10.5771 12.3353 10.499 12.1353 10.499H11.6259C12.4884 9.39596 13.001 8.00859 13.001 6.49937C13.001 2.90909 10.0914 0 6.50048 0C2.90959 0 0 2.90909 0 6.49937C0 10.0896 2.90959 12.9987 6.50048 12.9987C8.00996 12.9987 9.39756 12.4863 10.5008 11.6239V12.1332C10.5008 12.3332 10.5789 12.5238 10.7195 12.6644L13.8354 15.7797C14.1292 16.0734 14.6042 16.0734 14.8948 15.7797L15.7793 14.8954C16.0731 14.6017 16.0731 14.1267 15.7824 13.833ZM6.50048 10.499C4.29094 10.499 2.50018 8.71165 2.50018 6.49937C2.50018 4.29021 4.28781 2.49976 6.50048 2.49976C8.71001 2.49976 10.5008 4.28708 10.5008 6.49937C10.5008 8.70852 8.71314 10.499 6.50048 10.499Z" fill="var(--color-text)"></path></svg></label><input type="text" id="tsd-search-field" aria-label="Search"/></div>
5
+ <div class="field">
6
+ <div id="tsd-toolbar-links"></div></div>
7
+ <ul class="results">
8
+ <li class="state loading">Preparing search index...</li>
9
+ <li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">microcomponents</a></div>
10
+ <div class="table-cell" id="tsd-widgets"><a href="#" class="tsd-widget tsd-toolbar-icon menu no-caption" data-toggle="menu" aria-label="Menu"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="1" y="3" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="7" width="14" height="2" fill="var(--color-text)"></rect><rect x="1" y="11" width="14" height="2" fill="var(--color-text)"></rect></svg></a></div></div></header>
11
+ <div class="container container-main">
12
+ <div class="col-8 col-content">
13
+ <div class="tsd-page-title">
14
+ <h2>microcomponents</h2></div>
15
+ <section class="tsd-panel-group tsd-index-group">
16
+ <section class="tsd-panel tsd-index-panel">
17
+ <h3 class="tsd-index-heading uppercase">Index</h3>
18
+ <section class="tsd-index-section">
19
+ <h3 class="tsd-index-heading">Modules</h3>
20
+ <div class="tsd-index-list"><a href="modules/microcomponents.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><rect fill="var(--color-icon-background)" stroke="var(--color-ts-namespace)" stroke-width="1.5" x="1" y="1" width="22" height="22" rx="6" id="icon-4-path"></rect><path d="M9.33 16V7.24H10.77L13.446 14.74C13.43 14.54 13.41 14.296 13.386 14.008C13.37 13.712 13.354 13.404 13.338 13.084C13.33 12.756 13.326 12.448 13.326 12.16V7.24H14.37V16H12.93L10.266 8.5C10.282 8.692 10.298 8.936 10.314 9.232C10.33 9.52 10.342 9.828 10.35 10.156C10.366 10.476 10.374 10.784 10.374 11.08V16H9.33Z" fill="var(--color-text)" id="icon-4-text"></path></svg><span>microcomponents</span></a>
21
+ <a href="modules/microcomponents_es3.html" class="tsd-index-link tsd-kind-module"><svg class="tsd-kind-icon" width="24" height="24" viewBox="0 0 24 24"><use href="#icon-4-path"></use><use href="#icon-4-text"></use></svg><span>microcomponents.es3</span></a>
22
+ </div></section></section></section></div>
23
+ <div class="col-4 col-menu menu-sticky-wrap menu-highlight">
24
+ <div class="tsd-navigation settings">
25
+ <details class="tsd-index-accordion"><summary class="tsd-accordion-summary">
26
+ <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> Settings</h3></summary>
27
+ <div class="tsd-accordion-details">
28
+ <div class="tsd-filter-visibility">
29
+ <h4 class="uppercase">Member Visibility</h4><form>
30
+ <ul id="tsd-filter-options">
31
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-protected" name="protected"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Protected</span></label></li>
32
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-private" name="private"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Private</span></label></li>
33
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-inherited" name="inherited" checked/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>Inherited</span></label></li>
34
+ <li class="tsd-filter-item"><label class="tsd-filter-input"><input type="checkbox" id="tsd-filter-external" name="external"/><svg width="32" height="32" viewBox="0 0 32 32" aria-hidden="true"><rect class="tsd-checkbox-background" width="30" height="30" x="1" y="1" rx="6" fill="none"></rect><path class="tsd-checkbox-checkmark" d="M8.35422 16.8214L13.2143 21.75L24.6458 10.25" stroke="none" stroke-width="3.5" stroke-linejoin="round" fill="none"></path></svg><span>External</span></label></li></ul></form></div>
35
+ <div class="tsd-theme-toggle">
36
+ <h4 class="uppercase">Theme</h4><select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></div></div></details></div>
37
+ <nav class="tsd-navigation primary">
38
+ <details class="tsd-index-accordion" open><summary class="tsd-accordion-summary">
39
+ <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>
40
+ <div class="tsd-accordion-details">
41
+ <ul>
42
+ <li class="current selected"><a href="modules.html">microcomponents</a>
43
+ <ul>
44
+ <li class="selected tsd-kind-module"><a href="modules/microcomponents.html">microcomponents</a></li>
45
+ <li class="tsd-kind-module"><a href="modules/microcomponents_es3.html">microcomponents.es3</a></li></ul></li></ul></div></details></nav></div></div>
46
+ <div class="container tsd-generator">
47
+ <p>Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a></p></div>
48
+ <div class="overlay"></div><script src="assets/main.js"></script></body></html>
@@ -0,0 +1,87 @@
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:
54
+
55
+ - `encapsuled and modular 3D rendering` in an HTMLElement viewport.
56
+ - `Data Driven Workflow` with micro components using tB specific observables.
57
+ - `DOM handling` in general, lots of `UI functionality`
58
+ - `2 way Data Binding` between forms and observable objects representing the form data
59
+ - `1 way Data Binding` from data observables to the DOM
60
+ - `Loose Coupling` via my own event objects
61
+ - `Rule Engines`
62
+ - `Complex Runtime Templating` without JSX or virtual DOM
63
+ - `Single Page Applications`
64
+ - `Micro Frontends`
65
+ - `Electron Apps`
66
+ - `Progressive Web Apps`
67
+ - `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.
69
+
70
+
71
+ Funny stuff:
72
+
73
+ - `Vending Machine Frontends`
74
+ - some `Simulators`
75
+ - `UI for ocean going container ships`
76
+
77
+
78
+ Not from me, but somehow based on my ideas:
79
+
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**.
@@ -0,0 +1,110 @@
1
+ # Micro Component Management
2
+
3
+ This system allows you to attach, manage, and interact with micro components.
4
+
5
+ **Micro Components** can literally be anything you can put into an object as a property.
6
+
7
+ Also it has selectors to find micro components in the DOM. It consists of a single class `MC`.
8
+
9
+ ## Summary of MC() Methods
10
+
11
+ Static Methods:
12
+ - **`MC.add( domElement, key, microcomponent)`**: Add another micro component to an element's existing micro component container.
13
+ - **`MC.remove( domElement, key)`**: Remove a micro component from an element’s container.
14
+
15
+ Selector methods with an optional search string, returning an array of micro components:
16
+ - **`myElement._mc.siblings(search?)`**: Retrieve micro components attached to the same element.
17
+ - **`myElement._mc.parent(search?)`**: Retrieve micro components attached to the closest parent element that has an `_mc` attribute.
18
+ - **`myElement._mc.parents(search?)`**: Retrieve micro components attached to ancestor elements that have an `_mc` attribute.
19
+ - **`myElement._mc.children(search?)`**: Retrieve micro components attached to nearest child elements that have an `_mc` attribute.
20
+ - **`myElement._mc.descendants(search?)`**: Retrieve micro components attached to all descendant elements that have an `_mc` attribute.
21
+
22
+ **Micro Components** will most likely be **class instances** that expose inner methods **or an observable collection** for data driven workflows, e.g. business process logic.
23
+
24
+ ## Typical Workflow
25
+
26
+ 1. **Attach micro components** to elements using `MC.add()`.
27
+ 2. **Access** micro components by their property key or navigating through DOM (e.g., `siblings()`, `parents()`, `children()`, etc.) **and use their inner functionality**.
28
+ 3. **Manipulate** micro components by adding or removing them as needed or change their properties/call their methods.
29
+
30
+ ## 1. Attaching Micro Components to DOM Elements
31
+
32
+ To attach a micro component to an HTML element, use the `MC.add()` static function.
33
+
34
+ ### Example Usage:
35
+ ```javascript
36
+ var myElement = document.getElementById('myDiv');
37
+
38
+ // Attach a micro component (most often a class instance, here a simple object for simplicity) with a specific key
39
+ MC.add( myElement, 'myComponent', { name: 'example' } );
40
+ ```
41
+
42
+ - After you added a micro component using this function, the HTMLElement will contain a property `_mc` which is an class instance that offers some methods.
43
+ - Also the HTMLElement then has an attribute _mc which will indicate that at least one micro component is attached to this dom element.
44
+
45
+ ## 2. Removing Micro Components
46
+
47
+ Micro components can be removed using the `MC.remove()` static method.
48
+
49
+ ### Removing a Micro component:
50
+ ```javascript
51
+ MC.remove( myDomElement, 'myComponent');
52
+ ```
53
+
54
+ **When all micro components are removed** (the _mc object has no more properties), the `_mc` **attribute is also removed** from the HTML element. The `_mc` **property persists**.
55
+
56
+
57
+ ## 3. Retrieving Sibling Micro components
58
+
59
+ The `.siblings()` method retrieves all micro components attached to the same DOM element.
60
+
61
+ ### Example:
62
+ ```javascript
63
+ var siblings = myElement._mc.siblings();
64
+ console.log(siblings); // Logs an array of sibling micro components
65
+ ```
66
+
67
+ To retrieve a specific micro component by its key:
68
+ ```javascript
69
+ var specificSibling = myElement._mc.siblings('anotherComponent');
70
+ ```
71
+
72
+
73
+ - **The following methods hop over HTMLElements that contain no micro component.**
74
+
75
+
76
+ ## 4. Navigating Parent and Ancestor Micro components
77
+
78
+ The `_mc.parent()` and `_mc.parents()` methods allow you to retrieve micro components attached to parent elements.
79
+
80
+ ### Example:
81
+ ```javascript
82
+ var parentMc = myElement._mc.parent();
83
+ console.log(parentMc); // Logs micro components closest nachestor that has microcomponents
84
+
85
+ var allAncestorsMc = myElement._mc.parents();
86
+ console.log(allAncestorsMc); // Logs all ancestor micro components up to document
87
+ ```
88
+
89
+ To retrieve a specific micro component attached to the parent or ancestors:
90
+ ```javascript
91
+ var specificAncestorMc = myElement._mc.parents('myComponent');
92
+ ```
93
+
94
+ ## 5. Retrieving Child and Descendant Micro components
95
+
96
+ The `_mc.children()` and `_mc.descendants()` methods retrieve micro components attached to child elements or any descendants.
97
+
98
+ ### Example:
99
+ ```javascript
100
+ var childMicro components = myElement._mc.children();
101
+ console.log(childMicro components); // Logs an array of nearest child micro components
102
+
103
+ var descendantMicro components = myElement._mc.descendants();
104
+ console.log(descendantMicro components); // Logs micro components attached to all descendants
105
+ ```
106
+
107
+ To search for a specific micro component by key:
108
+ ```javascript
109
+ var specificMc = myElement._mc.<someComponent>;
110
+ ```
package/package.json ADDED
@@ -0,0 +1,19 @@
1
+ {
2
+ "name": "@twobirds/microcomponents",
3
+ "version": "0.0.1",
4
+ "description": "Micro Components Organization Class",
5
+ "main": "microcomponents.js",
6
+ "sideEffects": false,
7
+ "scripts": {
8
+ "build": "tsc; npm run minify; npm run copyToDist; typedoc;",
9
+ "minify": "jsmin -o build/microcomponents.es3.min.js ./src/microcomponents.es3.js;jsmin -o build/microcomponents.min.js build/microcomponents.js;",
10
+ "copyToDist": "cp build/* dist; cp MicroComponents.svg dist"
11
+ },
12
+ "author": "",
13
+ "license": "ISC",
14
+ "devDependencies": {
15
+ "jsmin": "^1.0.1",
16
+ "typedoc": "^0.23.24",
17
+ "typescript": "^5.6.2"
18
+ }
19
+ }
@@ -0,0 +1,106 @@
1
+ "use strict";
2
+
3
+ function __isEmpty(obj) {
4
+ if (!obj) return false;
5
+ for (var key in obj) {
6
+ if (obj.hasOwnProperty(key) && key !== "_target") {
7
+ return false;
8
+ }
9
+ }
10
+ return true;
11
+ }
12
+
13
+ function MC(target) {
14
+ this._target = target;
15
+ }
16
+
17
+ // static functions, chainable
18
+ MC.add = function (domElement, key, element) {
19
+ if (key && typeof key === "string" && domElement && !domElement._mc[key]) {
20
+ domElement.mc[key] = element;
21
+ domElement.setAttribute("_mc", "");
22
+ }
23
+ return this;
24
+ };
25
+
26
+ MC.remove = function (domElement, key) {
27
+ delete domElement._mc[key];
28
+ if (isEmpty(this)) {
29
+ this._target.removeAttribute("_mc");
30
+ }
31
+ return this;
32
+ };
33
+
34
+ // other methods, not chainable
35
+ MC.prototype.siblings = function (search) {
36
+ var mcValues = [];
37
+ if (this._target._mc) {
38
+ for (var key in this._target._mc) {
39
+ if (
40
+ key !== "_target" &&
41
+ this._target._mc.hasOwnProperty(key) &&
42
+ (!search || key === search)
43
+ ) {
44
+ mcValues.push(this._target._mc[key]);
45
+ }
46
+ }
47
+ }
48
+ return mcValues;
49
+ };
50
+
51
+ MC.prototype.parent = function (search) {
52
+ var mcValues = [];
53
+ var current = this._target.parentNode;
54
+ while (current) {
55
+ if (current._mc) {
56
+ return current._mc.siblings(search);
57
+ }
58
+ current = current.parentNode;
59
+ }
60
+ return mcValues;
61
+ };
62
+
63
+ MC.prototype.parents = function (search) {
64
+ var mcValues = [];
65
+ var current = this._target.parentNode;
66
+ while (current) {
67
+ if (current._mc) {
68
+ mcValues = mcValues.concat(current._mc.siblings(search));
69
+ }
70
+ current = current.parentNode;
71
+ }
72
+ return mcValues;
73
+ };
74
+
75
+ MC.prototype.children = function (search) {
76
+ var mcValues = [];
77
+ function traverseTree(element) {
78
+ var children = element.children;
79
+ for (var i = 0; i < children.length; i++) {
80
+ var child = children[i];
81
+ if (child._mc) {
82
+ mcValues = mcValues.concat(child._mc.siblings(search));
83
+ continue;
84
+ }
85
+ traverseTree(child);
86
+ }
87
+ }
88
+ traverseTree(this._target);
89
+ return mcValues;
90
+ };
91
+
92
+ MC.prototype.descendants = function (search) {
93
+ var mcValues = [];
94
+ function traverseTree(element) {
95
+ var children = element.children;
96
+ for (var i = 0; i < children.length; i++) {
97
+ var child = children[i];
98
+ if (child._mc) {
99
+ mcValues = mcValues.concat(child._mc.siblings(search));
100
+ }
101
+ traverseTree(child);
102
+ }
103
+ }
104
+ traverseTree(this._target);
105
+ return mcValues;
106
+ };