Windmillcode-Angular-CDK-Docs/index.html at main · WindMillCode/Windmillcode-Angular-CDK-Docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
<!DOCTYPE html><html lang="en" dir="ltr" data-theme="dark" data-has-toc data-has-sidebar class="astro-opzcwvd5"> <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><title>Windmillcode CDK | Windmillcode CDK</title><link rel="canonical" href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/"/><link rel="sitemap" href="/Windmillcode-Angular-CDK-Docs/sitemap-index.xml"/><link rel="shortcut icon" href="/Windmillcode-Angular-CDK-Docs/favicon.ico" type="image/x-icon"/><meta name="generator" content="Astro v5.14.1"/><meta name="generator" content="Starlight v0.36.0"/><meta property="og:title" content="Windmillcode CDK"/><meta property="og:type" content="article"/><meta property="og:url" content="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/"/><meta property="og:locale" content="en"/><meta property="og:description" content="The Windmillcode CDK Library"/><meta property="og:site_name" content="Windmillcode CDK"/><meta name="twitter:card" content="summary_large_image"/><meta name="description" content="The Windmillcode CDK Library"/><script>
	window.StarlightThemeProvider = (() => {
		const storedTheme =
			typeof localStorage !== 'undefined' && localStorage.getItem('starlight-theme');
		const theme =
			storedTheme ||
			(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
		document.documentElement.dataset.theme = theme === 'light' ? 'light' : 'dark';
		return {
			updatePickers(theme = storedTheme || 'auto') {
				document.querySelectorAll('starlight-theme-select').forEach((picker) => {
					const select = picker.querySelector('select');
					if (select) select.value = theme;
					/** @type {HTMLTemplateElement | null} */
					const tmpl = document.querySelector(`#theme-icons`);
					const newIcon = tmpl && tmpl.content.querySelector('.' + theme);
					if (newIcon) {
						const oldIcon = picker.querySelector('svg.label-icon');
						if (oldIcon) {
							oldIcon.replaceChildren(...newIcon.cloneNode(true).childNodes);
						}
					}
				});
			},
		};
	})();
</script><template id="theme-icons"><svg aria-hidden="true" class="light astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M5 12a1 1 0 0 0-1-1H3a1 1 0 0 0 0 2h1a1 1 0 0 0 1-1Zm.64 5-.71.71a1 1 0 0 0 0 1.41 1 1 0 0 0 1.41 0l.71-.71A1 1 0 0 0 5.64 17ZM12 5a1 1 0 0 0 1-1V3a1 1 0 0 0-2 0v1a1 1 0 0 0 1 1Zm5.66 2.34a1 1 0 0 0 .7-.29l.71-.71a1 1 0 1 0-1.41-1.41l-.66.71a1 1 0 0 0 0 1.41 1 1 0 0 0 .66.29Zm-12-.29a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.71-.71a1.004 1.004 0 1 0-1.43 1.41l.73.71ZM21 11h-1a1 1 0 0 0 0 2h1a1 1 0 0 0 0-2Zm-2.64 6A1 1 0 0 0 17 18.36l.71.71a1 1 0 0 0 1.41 0 1 1 0 0 0 0-1.41l-.76-.66ZM12 6.5a5.5 5.5 0 1 0 5.5 5.5A5.51 5.51 0 0 0 12 6.5Zm0 9a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7Zm0 3.5a1 1 0 0 0-1 1v1a1 1 0 0 0 2 0v-1a1 1 0 0 0-1-1Z"/></svg><svg aria-hidden="true" class="dark astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.64 13a1 1 0 0 0-1.05-.14 8.049 8.049 0 0 1-3.37.73 8.15 8.15 0 0 1-8.14-8.1 8.59 8.59 0 0 1 .25-2A1 1 0 0 0 8 2.36a10.14 10.14 0 1 0 14 11.69 1 1 0 0 0-.36-1.05Zm-9.5 6.69A8.14 8.14 0 0 1 7.08 5.22v.27a10.15 10.15 0 0 0 10.14 10.14 9.784 9.784 0 0 0 2.1-.22 8.11 8.11 0 0 1-7.18 4.32v-.04Z"/></svg><svg aria-hidden="true" class="auto astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg></template><link rel="stylesheet" href="/Windmillcode-Angular-CDK-Docs/_astro/print.DNXP8c50.css" media="print"><link rel="stylesheet" href="/Windmillcode-Angular-CDK-Docs/_astro/ZenMode.D4zMsZH1.css"><script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/page.7qqag-5g.js"></script></head> <body class="astro-opzcwvd5"> <a href="#_top" class="astro-7fdnisn7">Skip to content</a>  <div class="page sl-flex astro-ztav4ucq"> <header class="header astro-ztav4ucq"><div class="header astro-7zqm6dhp"> <div class="title-wrapper sl-flex astro-7zqm6dhp"> <a href="/Windmillcode-Angular-CDK-Docs/" class="site-title sl-flex astro-givy7tfk">  <span class="astro-givy7tfk" translate="no"> Windmillcode CDK </span> </a>  </div> <div class="sl-flex print:hidden astro-7zqm6dhp"> <site-search class=" astro-x4mjfac2" data-translations="{&#34;placeholder&#34;:&#34;Search&#34;}" data-mode="default" data-shortcuts="[]"> <button data-open-modal disabled aria-label="Search" aria-keyshortcuts="Control+K" class="astro-x4mjfac2"> <svg aria-hidden="true" class="astro-x4mjfac2 astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21.71 20.29 18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.39ZM11 18a7 7 0 1 1 0-14 7 7 0 0 1 0 14Z"/></svg> <span class="sl-hidden md:sl-block astro-x4mjfac2" aria-hidden="true">Search</span> <kbd class="sl-hidden md:sl-flex astro-x4mjfac2" style="display: none;"> <kbd class="astro-x4mjfac2">Ctrl</kbd><kbd class="astro-x4mjfac2">K</kbd> </kbd> </button> <dialog style="padding:0" aria-label="Search" class="astro-x4mjfac2"> <div class="dialog-frame sl-flex astro-x4mjfac2">  <button data-close-modal class="sl-flex md:sl-hidden astro-x4mjfac2"> Cancel </button> <div class="search-container astro-x4mjfac2"> <div id="starlight__search" class="astro-x4mjfac2"></div> </div> </div> </dialog> </site-search>  <script>
  (() => {
    const openBtn = document.querySelector("button[data-open-modal]");
    const shortcut = openBtn?.querySelector("kbd");
    if (!openBtn || !(shortcut instanceof HTMLElement)) return;
    const platformKey = shortcut.querySelector("kbd");
    if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
      platformKey.textContent = "⌘";
      openBtn.setAttribute("aria-keyshortcuts", "Meta+K");
    }
    shortcut.style.display = "";
  })();
</script> <script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/Search.astro_astro_type_script_index_0_lang.DUh-XzsW.js"></script>   </div> <div class="sl-hidden md:sl-flex print:hidden right-group astro-7zqm6dhp"> <div class="sl-flex social-icons astro-7zqm6dhp"> <a href="https://linktr.ee/windmillcode"> <button style="
      cursor: pointer;
    " class="bg-neutral-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-green-700 transition-colors">
Follow Us
</button> </a> <a style="
    text-decoration:unset;
  " href="/Windmillcode-Angular-CDK-Docs/donate"> <button style="
      color:var(--sl-color-text-accent);
      border: 1px solid #444c56;
      padding: 5px 12px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
    " class="hover:bg-red-900 bg-transparent"> <div style="
        margin-right:5px;
        color:red;
        display: flex;
      "> <svg width="1em" height="1em" data-icon="mdi:heart">   <symbol id="ai:mdi:heart" viewBox="0 0 24 24"><path fill="currentColor" d="m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z"/></symbol><use href="#ai:mdi:heart"></use>  </svg> </div>
Donate
</button> </a> <a href="/Windmillcode-Angular-CDK-Docs/feedback"> <button style="
      cursor: pointer;
    " class="bg-neutral-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-amber-700 transition-colors">
Feedback
</button> </a> <a href="https://github.com/WindMillCode/Windmillcode-Angular-CDK"> <button style="
      cursor: pointer;
    " class="bg-neutral-800 hover:bg-neutral-700 text-white font-bold py-2 px-4 rounded inline-flex items-center text-sm"> <div style="
        margin-right:6px;
        margin-top:1.6px;
        display: flex;
      "> <svg width="1em" height="1em" data-icon="mdi:github">   <symbol id="ai:mdi:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></symbol><use href="#ai:mdi:github"></use>  </svg> </div>
Star on GitHub
</button> </a> </div> <starlight-version-select class="astro-oaz4zyrt"> <label class="astro-oaz4zyrt"> <span class="sr-only astro-oaz4zyrt">Select version</span> <svg aria-hidden="true" class="icon label-icon astro-oaz4zyrt astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M11.328 0.198L11.328 0.198L12.924 0.198Q13.260 0.240 13.848 0.303Q14.436 0.366 14.772 0.450L14.772 0.450Q17.124 1.038 19.098 2.424L19.098 2.424Q20.694 3.642 21.576 5.028L21.576 5.028Q23.298 7.296 23.676 10.278L23.676 10.278Q23.676 10.404 23.739 10.698Q23.802 10.992 23.802 11.202L23.802 11.202L23.802 12.924Q23.760 13.176 23.697 13.659Q23.634 14.142 23.550 14.352L23.550 14.352Q22.920 16.914 21.597 18.804Q20.274 20.694 18.048 22.122L18.048 22.122Q16.788 22.794 15.822 23.130L15.822 23.130Q14.604 23.592 13.428 23.676L13.428 23.676Q13.302 23.676 13.050 23.739Q12.798 23.802 12.672 23.802L12.672 23.802L10.950 23.802Q10.698 23.760 10.215 23.697Q9.732 23.634 9.522 23.550L9.522 23.550Q6.960 22.920 5.070 21.597Q3.180 20.274 1.752 18.048L1.752 18.048Q1.080 16.788 0.744 15.822L0.744 15.822Q0.282 14.604 0.198 13.428L0.198 13.428Q0.282 13.344 0.240 13.071Q0.198 12.798 0.198 12.672L0.198 12.672L0.198 11.076Q0.240 10.740 0.303 10.152Q0.366 9.564 0.450 9.228L0.450 9.228Q1.038 6.876 2.424 4.902L2.424 4.902Q3.642 3.138 5.952 1.752L5.952 1.752Q8.052 0.492 10.278 0.324L10.278 0.324Q10.488 0.324 10.824 0.261Q11.160 0.198 11.328 0.198ZM2.172 12.252L2.172 12.252Q2.214 14.898 3.579 17.124Q4.944 19.350 7.212 20.673Q9.480 21.996 12.168 21.975Q14.856 21.954 17.145 20.589Q19.434 19.224 20.736 16.872Q22.038 14.520 21.996 11.748L21.996 11.748Q21.912 9.144 20.526 6.918Q19.140 4.692 16.872 3.432L16.872 3.432Q14.478 2.088 11.748 2.172L11.748 2.172Q9.144 2.214 6.918 3.558Q4.692 4.902 3.432 7.170L3.432 7.170Q2.088 9.522 2.172 12.252ZM12.546 11.958L12.546 12Q12.672 11.874 12.987 11.685Q13.302 11.496 13.428 11.328L13.428 11.328Q15.822 9.774 16.872 8.976L16.872 8.976L16.998 8.892Q17.124 8.808 17.124 8.724L17.124 8.724Q17.292 8.514 17.565 8.577Q17.838 8.640 18.027 8.829Q18.216 9.018 18.174 9.291Q18.132 9.564 17.922 9.774L17.922 9.774L15.780 11.244Q14.352 12.210 13.722 12.798L13.722 12.798L12.252 13.848Q11.958 14.016 11.643 13.890Q11.328 13.764 11.328 13.428L11.328 13.428L11.328 4.902Q11.328 4.272 11.874 4.272L11.874 4.272Q12.084 4.146 12.315 4.314Q12.546 4.482 12.546 4.776L12.546 4.776L12.546 12L12.546 11.958Z"/></svg> <select value="current" autocomplete="off" class="astro-oaz4zyrt"> <option selected value="/Windmillcode-Angular-CDK-Docs/" class="astro-oaz4zyrt">20.1.6000</option> <option value="/Windmillcode-Angular-CDK-Docs/20.1.5000/" class="astro-oaz4zyrt"> 20.1.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.4000/" class="astro-oaz4zyrt"> 20.1.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.3000/" class="astro-oaz4zyrt"> 20.1.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.2000/" class="astro-oaz4zyrt"> 20.1.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.1000/" class="astro-oaz4zyrt"> 20.1.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.0/" class="astro-oaz4zyrt"> 20.1.0 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.6000/" class="astro-oaz4zyrt"> 20.0.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.5000/" class="astro-oaz4zyrt"> 20.0.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.4000/" class="astro-oaz4zyrt"> 20.0.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.3000/" class="astro-oaz4zyrt"> 20.0.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.2000/" class="astro-oaz4zyrt"> 20.0.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.1000/" class="astro-oaz4zyrt"> 20.0.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.0/" class="astro-oaz4zyrt"> 20.0.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.14000/" class="astro-oaz4zyrt"> 19.2.14000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.13000/" class="astro-oaz4zyrt"> 19.2.13000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.12000/" class="astro-oaz4zyrt"> 19.2.12000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.11000/" class="astro-oaz4zyrt"> 19.2.11000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.10000/" class="astro-oaz4zyrt"> 19.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.10000/" class="astro-oaz4zyrt"> 19.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.9000/" class="astro-oaz4zyrt"> 19.2.9000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.8000/" class="astro-oaz4zyrt"> 19.2.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.7000/" class="astro-oaz4zyrt"> 19.2.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.6000/" class="astro-oaz4zyrt"> 19.2.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5100/" class="astro-oaz4zyrt"> 19.2.5100 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5001/" class="astro-oaz4zyrt"> 19.2.5001 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5000/" class="astro-oaz4zyrt"> 19.2.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.4000/" class="astro-oaz4zyrt"> 19.2.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.3000/" class="astro-oaz4zyrt"> 19.2.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.2000/" class="astro-oaz4zyrt"> 19.2.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.1000/" class="astro-oaz4zyrt"> 19.2.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.0/" class="astro-oaz4zyrt"> 19.2.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.8000/" class="astro-oaz4zyrt"> 19.1.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.7000/" class="astro-oaz4zyrt"> 19.1.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.6000/" class="astro-oaz4zyrt"> 19.1.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.5000/" class="astro-oaz4zyrt"> 19.1.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.4000/" class="astro-oaz4zyrt"> 19.1.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.3000/" class="astro-oaz4zyrt"> 19.1.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.2000/" class="astro-oaz4zyrt"> 19.1.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.1000/" class="astro-oaz4zyrt"> 19.1.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.0/" class="astro-oaz4zyrt"> 19.1.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.7000/" class="astro-oaz4zyrt"> 19.0.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.6000/" class="astro-oaz4zyrt"> 19.0.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.5000/" class="astro-oaz4zyrt"> 19.0.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.4000/" class="astro-oaz4zyrt"> 19.0.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.3000/" class="astro-oaz4zyrt"> 19.0.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.2000/" class="astro-oaz4zyrt"> 19.0.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.1000/" class="astro-oaz4zyrt"> 19.0.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.0/" class="astro-oaz4zyrt"> 19.0.0 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.12000/" class="astro-oaz4zyrt"> 18.2.12000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.11000/" class="astro-oaz4zyrt"> 18.2.11000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.10000/" class="astro-oaz4zyrt"> 18.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.9000/" class="astro-oaz4zyrt"> 18.2.9000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.8000/" class="astro-oaz4zyrt"> 18.2.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.7000/" class="astro-oaz4zyrt"> 18.2.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.6000/" class="astro-oaz4zyrt"> 18.2.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.5000/" class="astro-oaz4zyrt"> 18.2.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4200/" class="astro-oaz4zyrt"> 18.2.4200 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4100/" class="astro-oaz4zyrt"> 18.2.4100 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4000/" class="astro-oaz4zyrt"> 18.2.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.3200/" class="astro-oaz4zyrt"> 18.2.3200 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.3100/" class="astro-oaz4zyrt"> 18.2.3100 </option> </select> <svg aria-hidden="true" class="icon caret-icon astro-oaz4zyrt astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-version-select>  <script type="module">customElements.define("starlight-version-select",class extends HTMLElement{constructor(){super();const e=this.querySelector("select");e&&(e?.addEventListener("change",t=>{t.currentTarget instanceof HTMLSelectElement&&(globalThis.location.pathname=t.currentTarget.value)}),window.addEventListener("pageshow",t=>{if(!t.persisted)return;const n=e.querySelector("option[selected]")?.index;n!==e.selectedIndex&&(e.selectedIndex=n??0)}))}});</script> <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-pbeentkl"> <span class="sr-only astro-pbeentkl">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-pbeentkl astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select autocomplete="off" class="astro-pbeentkl"> <option value="dark" class="astro-pbeentkl">Dark</option><option value="light" class="astro-pbeentkl">Light</option><option value="auto" selected class="astro-pbeentkl">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-pbeentkl astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label>  </starlight-theme-select>  <script>
	StarlightThemeProvider.updatePickers();
</script> <script type="module">const r="starlight-theme",o=e=>e==="auto"||e==="dark"||e==="light"?e:"auto",c=()=>o(typeof localStorage<"u"&&localStorage.getItem(r));function n(e){typeof localStorage<"u"&&localStorage.setItem(r,e==="light"||e==="dark"?e:"")}const l=()=>matchMedia("(prefers-color-scheme: light)").matches?"light":"dark";function t(e){StarlightThemeProvider.updatePickers(e),document.documentElement.dataset.theme=e==="auto"?l():e,n(e)}matchMedia("(prefers-color-scheme: light)").addEventListener("change",()=>{c()==="auto"&&t("auto")});class s extends HTMLElement{constructor(){super(),t(c()),this.querySelector("select")?.addEventListener("change",a=>{a.currentTarget instanceof HTMLSelectElement&&t(o(a.currentTarget.value))})}}customElements.define("starlight-theme-select",s);</script> <script type="module">class s extends HTMLElement{constructor(){super();const e=this.querySelector("select");e&&(e.addEventListener("change",t=>{t.currentTarget instanceof HTMLSelectElement&&(window.location.pathname=t.currentTarget.value)}),window.addEventListener("pageshow",t=>{if(!t.persisted)return;const n=e.querySelector("option[selected]")?.index;n!==e.selectedIndex&&(e.selectedIndex=n??0)}))}}customElements.define("starlight-lang-select",s);</script> </div> </div> </header> <nav class="sidebar print:hidden astro-ztav4ucq" aria-label="Main"> <starlight-menu-button class="print:hidden astro-mtnuk2sv"> <button aria-expanded="false" aria-label="Menu" aria-controls="starlight__sidebar" class="sl-flex md:sl-hidden astro-mtnuk2sv"> <svg aria-hidden="true" class="open-menu astro-mtnuk2sv astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M3 8h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2Zm18 8H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Zm0-5H3a1 1 0 0 0 0 2h18a1 1 0 0 0 0-2Z"/></svg> <svg aria-hidden="true" class="close-menu astro-mtnuk2sv astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="m13.41 12 6.3-6.29a1.004 1.004 0 1 0-1.42-1.42L12 10.59l-6.29-6.3a1.004 1.004 0 0 0-1.42 1.42l6.3 6.29-6.3 6.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0l6.29-6.3 6.29 6.3a.999.999 0 0 0 1.42 0 1 1 0 0 0 0-1.42L13.41 12Z"/></svg> </button> </starlight-menu-button> <script type="module">class s extends HTMLElement{constructor(){super(),this.btn=this.querySelector("button"),this.btn.addEventListener("click",()=>this.toggleExpanded());const t=this.closest("nav");t&&t.addEventListener("keyup",e=>this.closeOnEscape(e))}setExpanded(t){this.setAttribute("aria-expanded",String(t)),document.body.toggleAttribute("data-mobile-menu-expanded",t)}toggleExpanded(){this.setExpanded(this.getAttribute("aria-expanded")!=="true")}closeOnEscape(t){t.code==="Escape"&&(this.setExpanded(!1),this.btn.focus())}}customElements.define("starlight-menu-button",s);</script>   <div id="starlight__sidebar" class="sidebar-pane astro-ztav4ucq"> <div class="sidebar-content sl-flex astro-ztav4ucq"> <script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/Sidebar.astro_astro_type_script_index_0_lang.CiQijoMN.js"></script> <div class="toggle-left-side-bar-btn max-md:hidden"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path fill="grey" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"></path> </svg> </div> <sl-sidebar-state-persist data-hash="1wdyakp" class="astro-ncgtabyq"> <script aria-hidden="true">
		(() => {
			try {
				if (!matchMedia('(min-width: 50em)').matches) return;
				/** @type {HTMLElement | null} */
				const target = document.querySelector('sl-sidebar-state-persist');
				const state = JSON.parse(sessionStorage.getItem('sl-sidebar-state') || '0');
				if (!target || !state || target.dataset.hash !== state.hash) return;
				window._starlightScrollRestore = state.scroll;
				customElements.define(
					'sl-sidebar-restore',
					class SidebarRestore extends HTMLElement {
						connectedCallback() {
							try {
								const idx = parseInt(this.dataset.index || '');
								const details = this.closest('details');
								if (details && typeof state.open[idx] === 'boolean') details.open = state.open[idx];
							} catch {}
						}
					}
				);
			} catch {}
		})();
	</script>  <ul class="top-level astro-zvot3af7"> <li class="astro-zvot3af7"> <details open class="astro-zvot3af7"> <summary class="astro-zvot3af7"> <span class="group-label astro-zvot3af7"> <span class="large astro-zvot3af7">For Use In Any Framework</span>  </span> <svg aria-hidden="true" class="caret astro-zvot3af7 astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <sl-sidebar-restore data-index="0"></sl-sidebar-restore> <ul class="astro-zvot3af7"> <li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/intro/wml-components-base" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Components Base</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/intro/wml-three" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Three</span>  </a> </li> </ul>  </details> </li><li class="astro-zvot3af7"> <details open class="astro-zvot3af7"> <summary class="astro-zvot3af7"> <span class="group-label astro-zvot3af7"> <span class="large astro-zvot3af7">Angular</span>  </span> <svg aria-hidden="true" class="caret astro-zvot3af7 astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1.25rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg> </summary> <sl-sidebar-restore data-index="1"></sl-sidebar-restore> <ul class="astro-zvot3af7"> <li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-accordion/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Accordion</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-angular-components-base/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Angular Components Base</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-button/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Button</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-carousel/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Carousel (3D)</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-chips/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Chips</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-field/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Field</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-file-manager/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML File Manager</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-form/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Form</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-infinite-dropdown/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Infinite Dropdown</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-input/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Input</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-mobile-nav/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Mobile Nav</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-notify/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Notify</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-options/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Options</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-panel/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Panel</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-popup/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Popup</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-schematics/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Schematics</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-select/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Select</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-slicebox/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Slicebox (3D)</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-table/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Table (Beta Unstable Unmaintainable)</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-tabs/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Tabs</span>  </a> </li><li class="astro-zvot3af7"> <a href="/Windmillcode-Angular-CDK-Docs/angular-components/wml-toggle/" aria-current="false" class="astro-zvot3af7"> <span class="astro-zvot3af7">WML Toggle</span>  </a> </li> </ul>  </details> </li> </ul>   <script aria-hidden="true">
		(() => {
			const scroller = document.getElementById('starlight__sidebar');
			if (!window._starlightScrollRestore || !scroller) return;
			scroller.scrollTop = window._starlightScrollRestore;
			delete window._starlightScrollRestore;
		})();
	</script> </sl-sidebar-state-persist>  <div class="md:sl-hidden"> <div class="mobile-preferences sl-flex astro-k6wfy2a3"> <div class="social-icons astro-k6wfy2a3"> <a href="https://linktr.ee/windmillcode"> <button style="
      cursor: pointer;
    " class="bg-neutral-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-green-700 transition-colors">
Follow Us
</button> </a> <a style="
    text-decoration:unset;
  " href="/Windmillcode-Angular-CDK-Docs/donate"> <button style="
      color:var(--sl-color-text-accent);
      border: 1px solid #444c56;
      padding: 5px 12px;
      font-size: 14px;
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
    " class="hover:bg-red-900 bg-transparent"> <div style="
        margin-right:5px;
        color:red;
        display: flex;
      "> <svg width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:heart">   <use href="#ai:mdi:heart"></use>  </svg> </div>
Donate
</button> </a> <a href="/Windmillcode-Angular-CDK-Docs/feedback"> <button style="
      cursor: pointer;
    " class="bg-neutral-600 text-white font-semibold py-2 px-6 rounded-full hover:bg-amber-700 transition-colors">
Feedback
</button> </a> <a href="https://github.com/WindMillCode/Windmillcode-Angular-CDK"> <button style="
      cursor: pointer;
    " class="bg-neutral-800 hover:bg-neutral-700 text-white font-bold py-2 px-4 rounded inline-flex items-center text-sm"> <div style="
        margin-right:6px;
        margin-top:1.6px;
        display: flex;
      "> <svg width="1em" height="1em" viewBox="0 0 24 24" data-icon="mdi:github">   <use href="#ai:mdi:github"></use>  </svg> </div>
Star on GitHub
</button> </a> </div> <starlight-version-select class="astro-oaz4zyrt"> <label class="astro-oaz4zyrt"> <span class="sr-only astro-oaz4zyrt">Select version</span> <svg aria-hidden="true" class="icon label-icon astro-oaz4zyrt astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M11.328 0.198L11.328 0.198L12.924 0.198Q13.260 0.240 13.848 0.303Q14.436 0.366 14.772 0.450L14.772 0.450Q17.124 1.038 19.098 2.424L19.098 2.424Q20.694 3.642 21.576 5.028L21.576 5.028Q23.298 7.296 23.676 10.278L23.676 10.278Q23.676 10.404 23.739 10.698Q23.802 10.992 23.802 11.202L23.802 11.202L23.802 12.924Q23.760 13.176 23.697 13.659Q23.634 14.142 23.550 14.352L23.550 14.352Q22.920 16.914 21.597 18.804Q20.274 20.694 18.048 22.122L18.048 22.122Q16.788 22.794 15.822 23.130L15.822 23.130Q14.604 23.592 13.428 23.676L13.428 23.676Q13.302 23.676 13.050 23.739Q12.798 23.802 12.672 23.802L12.672 23.802L10.950 23.802Q10.698 23.760 10.215 23.697Q9.732 23.634 9.522 23.550L9.522 23.550Q6.960 22.920 5.070 21.597Q3.180 20.274 1.752 18.048L1.752 18.048Q1.080 16.788 0.744 15.822L0.744 15.822Q0.282 14.604 0.198 13.428L0.198 13.428Q0.282 13.344 0.240 13.071Q0.198 12.798 0.198 12.672L0.198 12.672L0.198 11.076Q0.240 10.740 0.303 10.152Q0.366 9.564 0.450 9.228L0.450 9.228Q1.038 6.876 2.424 4.902L2.424 4.902Q3.642 3.138 5.952 1.752L5.952 1.752Q8.052 0.492 10.278 0.324L10.278 0.324Q10.488 0.324 10.824 0.261Q11.160 0.198 11.328 0.198ZM2.172 12.252L2.172 12.252Q2.214 14.898 3.579 17.124Q4.944 19.350 7.212 20.673Q9.480 21.996 12.168 21.975Q14.856 21.954 17.145 20.589Q19.434 19.224 20.736 16.872Q22.038 14.520 21.996 11.748L21.996 11.748Q21.912 9.144 20.526 6.918Q19.140 4.692 16.872 3.432L16.872 3.432Q14.478 2.088 11.748 2.172L11.748 2.172Q9.144 2.214 6.918 3.558Q4.692 4.902 3.432 7.170L3.432 7.170Q2.088 9.522 2.172 12.252ZM12.546 11.958L12.546 12Q12.672 11.874 12.987 11.685Q13.302 11.496 13.428 11.328L13.428 11.328Q15.822 9.774 16.872 8.976L16.872 8.976L16.998 8.892Q17.124 8.808 17.124 8.724L17.124 8.724Q17.292 8.514 17.565 8.577Q17.838 8.640 18.027 8.829Q18.216 9.018 18.174 9.291Q18.132 9.564 17.922 9.774L17.922 9.774L15.780 11.244Q14.352 12.210 13.722 12.798L13.722 12.798L12.252 13.848Q11.958 14.016 11.643 13.890Q11.328 13.764 11.328 13.428L11.328 13.428L11.328 4.902Q11.328 4.272 11.874 4.272L11.874 4.272Q12.084 4.146 12.315 4.314Q12.546 4.482 12.546 4.776L12.546 4.776L12.546 12L12.546 11.958Z"/></svg> <select value="current" autocomplete="off" class="astro-oaz4zyrt"> <option selected value="/Windmillcode-Angular-CDK-Docs/" class="astro-oaz4zyrt">20.1.6000</option> <option value="/Windmillcode-Angular-CDK-Docs/20.1.5000/" class="astro-oaz4zyrt"> 20.1.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.4000/" class="astro-oaz4zyrt"> 20.1.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.3000/" class="astro-oaz4zyrt"> 20.1.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.2000/" class="astro-oaz4zyrt"> 20.1.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.1000/" class="astro-oaz4zyrt"> 20.1.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.1.0/" class="astro-oaz4zyrt"> 20.1.0 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.6000/" class="astro-oaz4zyrt"> 20.0.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.5000/" class="astro-oaz4zyrt"> 20.0.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.4000/" class="astro-oaz4zyrt"> 20.0.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.3000/" class="astro-oaz4zyrt"> 20.0.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.2000/" class="astro-oaz4zyrt"> 20.0.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.1000/" class="astro-oaz4zyrt"> 20.0.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/20.0.0/" class="astro-oaz4zyrt"> 20.0.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.14000/" class="astro-oaz4zyrt"> 19.2.14000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.13000/" class="astro-oaz4zyrt"> 19.2.13000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.12000/" class="astro-oaz4zyrt"> 19.2.12000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.11000/" class="astro-oaz4zyrt"> 19.2.11000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.10000/" class="astro-oaz4zyrt"> 19.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.10000/" class="astro-oaz4zyrt"> 19.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.9000/" class="astro-oaz4zyrt"> 19.2.9000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.8000/" class="astro-oaz4zyrt"> 19.2.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.7000/" class="astro-oaz4zyrt"> 19.2.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.6000/" class="astro-oaz4zyrt"> 19.2.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5100/" class="astro-oaz4zyrt"> 19.2.5100 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5001/" class="astro-oaz4zyrt"> 19.2.5001 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.5000/" class="astro-oaz4zyrt"> 19.2.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.4000/" class="astro-oaz4zyrt"> 19.2.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.3000/" class="astro-oaz4zyrt"> 19.2.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.2000/" class="astro-oaz4zyrt"> 19.2.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.1000/" class="astro-oaz4zyrt"> 19.2.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.2.0/" class="astro-oaz4zyrt"> 19.2.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.8000/" class="astro-oaz4zyrt"> 19.1.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.7000/" class="astro-oaz4zyrt"> 19.1.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.6000/" class="astro-oaz4zyrt"> 19.1.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.5000/" class="astro-oaz4zyrt"> 19.1.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.4000/" class="astro-oaz4zyrt"> 19.1.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.3000/" class="astro-oaz4zyrt"> 19.1.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.2000/" class="astro-oaz4zyrt"> 19.1.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.1000/" class="astro-oaz4zyrt"> 19.1.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.1.0/" class="astro-oaz4zyrt"> 19.1.0 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.7000/" class="astro-oaz4zyrt"> 19.0.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.6000/" class="astro-oaz4zyrt"> 19.0.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.5000/" class="astro-oaz4zyrt"> 19.0.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.4000/" class="astro-oaz4zyrt"> 19.0.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.3000/" class="astro-oaz4zyrt"> 19.0.3000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.2000/" class="astro-oaz4zyrt"> 19.0.2000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.1000/" class="astro-oaz4zyrt"> 19.0.1000 </option><option value="/Windmillcode-Angular-CDK-Docs/19.0.0/" class="astro-oaz4zyrt"> 19.0.0 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.12000/" class="astro-oaz4zyrt"> 18.2.12000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.11000/" class="astro-oaz4zyrt"> 18.2.11000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.10000/" class="astro-oaz4zyrt"> 18.2.10000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.9000/" class="astro-oaz4zyrt"> 18.2.9000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.8000/" class="astro-oaz4zyrt"> 18.2.8000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.7000/" class="astro-oaz4zyrt"> 18.2.7000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.6000/" class="astro-oaz4zyrt"> 18.2.6000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.5000/" class="astro-oaz4zyrt"> 18.2.5000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4200/" class="astro-oaz4zyrt"> 18.2.4200 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4100/" class="astro-oaz4zyrt"> 18.2.4100 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.4000/" class="astro-oaz4zyrt"> 18.2.4000 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.3200/" class="astro-oaz4zyrt"> 18.2.3200 </option><option value="/Windmillcode-Angular-CDK-Docs/18.2.3100/" class="astro-oaz4zyrt"> 18.2.3100 </option> </select> <svg aria-hidden="true" class="icon caret-icon astro-oaz4zyrt astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label> </starlight-version-select>   <starlight-theme-select>  <label style="--sl-select-width: 6.25em" class="astro-pbeentkl"> <span class="sr-only astro-pbeentkl">Select theme</span> <svg aria-hidden="true" class="icon label-icon astro-pbeentkl astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M21 14h-1V7a3 3 0 0 0-3-3H7a3 3 0 0 0-3 3v7H3a1 1 0 0 0-1 1v2a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3v-2a1 1 0 0 0-1-1ZM6 7a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v7H6V7Zm14 10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-1h16v1Z"/></svg> <select autocomplete="off" class="astro-pbeentkl"> <option value="dark" class="astro-pbeentkl">Dark</option><option value="light" class="astro-pbeentkl">Light</option><option value="auto" selected class="astro-pbeentkl">Auto</option> </select> <svg aria-hidden="true" class="icon caret astro-pbeentkl astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"><path d="M17 9.17a1 1 0 0 0-1.41 0L12 12.71 8.46 9.17a1 1 0 1 0-1.41 1.42l4.24 4.24a1.002 1.002 0 0 0 1.42 0L17 10.59a1.002 1.002 0 0 0 0-1.42Z"/></svg> </label>  </starlight-theme-select>  <script>
	StarlightThemeProvider.updatePickers();
</script>   </div>  </div> </div> </div> </nav> <div class="main-frame astro-ztav4ucq">  <script type="module">const a=document.getElementById("starlight__sidebar"),n=a?.querySelector("sl-sidebar-state-persist"),o="sl-sidebar-state",i=()=>{let t=[];const e=n?.dataset.hash||"";try{const s=sessionStorage.getItem(o),r=JSON.parse(s||"{}");Array.isArray(r.open)&&r.hash===e&&(t=r.open)}catch{}return{hash:e,open:t,scroll:a?.scrollTop||0}},c=t=>{try{sessionStorage.setItem(o,JSON.stringify(t))}catch{}},d=()=>c(i()),l=(t,e)=>{const s=i();s.open[e]=t,c(s)};n?.addEventListener("click",t=>{if(!(t.target instanceof Element))return;const e=t.target.closest("summary")?.closest("details");if(!e)return;const s=e.querySelector("sl-sidebar-restore"),r=parseInt(s?.dataset.index||"");isNaN(r)||l(!e.open,r)});addEventListener("visibilitychange",()=>{document.visibilityState==="hidden"&&d()});addEventListener("pageHide",d);</script> <div class="lg:sl-flex astro-eq5ud5bl"> <aside class="right-sidebar-container print:hidden astro-eq5ud5bl"> <div class="right-sidebar astro-eq5ud5bl"> <div class="lg:sl-hidden astro-pijm4x57"><mobile-starlight-toc data-min-h="2" data-max-h="3" class="astro-skbk76o7"><nav aria-labelledby="starlight__on-this-page--mobile" class="astro-skbk76o7"><details id="starlight__mobile-toc" class="astro-skbk76o7"><summary id="starlight__on-this-page--mobile" class="sl-flex astro-skbk76o7"><span class="toggle sl-flex astro-skbk76o7">On this page<svg aria-hidden="true" class="caret astro-skbk76o7 astro-h24tda2y" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1rem;"><path d="m14.83 11.29-4.24-4.24a1 1 0 1 0-1.42 1.41L12.71 12l-3.54 3.54a1 1 0 0 0 0 1.41 1 1 0 0 0 .71.29 1 1 0 0 0 .71-.29l4.24-4.24a1.002 1.002 0 0 0 0-1.42Z"/></svg></span><span class="display-current astro-skbk76o7"></span></summary><div class="dropdown astro-skbk76o7"><ul class="isMobile astro-2gjq7f6a" style="--depth: 0;"> <li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#_top" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#features" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Features</span> </a> <ul class="isMobile astro-2gjq7f6a" style="--depth: 1;"> <li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#minimal-configurationinstallation" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Minimal Configuration/Installation</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#articulate-complex-thoughts-into-code-with-ease" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Articulate Complex Thoughts Into Code With Ease</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#feels-like-react" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Feels Like React</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#plug-and-play" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Plug And Play</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#constant-and-conforming-updates" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Constant and conforming updates :</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#extensive-component-collection" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Extensive Component Collection</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#customizable-and-themable" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Customizable and Themable</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#premium--enterprise" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">PREMIUM / ENTERPRISE</span> </a>  </li> </ul>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#caveats" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Caveats</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#packages" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Packages</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#getting-started" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Getting Started</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#documentation" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Documentation</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#contributing" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Contributing</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#license" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">License</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#contact" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Contact</span> </a>  </li> </ul> </div></details></nav></mobile-starlight-toc><script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/MobileTableOfContents.astro_astro_type_script_index_0_lang.C181hMzK.js"></script></div><div class="right-sidebar-panel sl-hidden lg:sl-block astro-pijm4x57"><div class="sl-container astro-pijm4x57"><script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/TableOfContents.astro_astro_type_script_index_0_lang.CpgP9-em.js"></script> <div class="toggle-right-side-bar-btn max-md:hidden"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <path fill="grey" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"></path> </svg> </div> <starlight-toc data-min-h="2" data-max-h="3"><nav aria-labelledby="starlight__on-this-page"><h2 id="starlight__on-this-page">On this page</h2><ul class="astro-2gjq7f6a" style="--depth: 0;"> <li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#_top" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Overview</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#features" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Features</span> </a> <ul class="astro-2gjq7f6a" style="--depth: 1;"> <li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#minimal-configurationinstallation" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Minimal Configuration/Installation</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#articulate-complex-thoughts-into-code-with-ease" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Articulate Complex Thoughts Into Code With Ease</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#feels-like-react" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Feels Like React</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#plug-and-play" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Plug And Play</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#constant-and-conforming-updates" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Constant and conforming updates :</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#extensive-component-collection" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Extensive Component Collection</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#customizable-and-themable" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">Customizable and Themable</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 1;"> <a href="#premium--enterprise" class="astro-2gjq7f6a" style="--depth: 1;"> <span class="astro-2gjq7f6a" style="--depth: 1;">PREMIUM / ENTERPRISE</span> </a>  </li> </ul>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#caveats" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Caveats</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#packages" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Packages</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#getting-started" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Getting Started</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#documentation" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Documentation</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#contributing" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Contributing</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#license" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">License</span> </a>  </li><li class="astro-2gjq7f6a" style="--depth: 0;"> <a href="#contact" class="astro-2gjq7f6a" style="--depth: 0;"> <span class="astro-2gjq7f6a" style="--depth: 0;">Contact</span> </a>  </li> </ul> </nav></starlight-toc><script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/TableOfContents.astro_astro_type_script_index_0_lang.CKWWgpjV.js"></script> <div class="starlight-view-modes-table-of-contents-container astro-pz6mzxhy"><h2 class="astro-pz6mzxhy">View Modes</h2><ul class="astro-pz6mzxhy"><li class="starlight-view-modes-table-of-contents-item astro-pz6mzxhy"><a href="/Windmillcode-Angular-CDK-Docs/zen-mode/" class="starlight-view-modes-switcher-a astro-pz6mzxhy">Switch to Zen Mode</a><script>
  (() => {
    const shortcuts = document.querySelectorAll("kbd:has(kbd)");
    for (const shortcut of shortcuts) {
      if (!(shortcut instanceof HTMLElement)) return;
      const platformKeys = shortcut.querySelectorAll("kbd");
      for (const platformKey of platformKeys) {
        if (platformKey && /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
          platformKey.textContent = platformKey.textContent
            .replace("Ctrl", "⌘")
            .replace("Shift", "⇧")
            .replace("Alt", "⌥");
        }
      }
      shortcut.style.display = "";
    }
  })();
</script></li></ul></div></div></div> </div> </aside> <div class="main-pane astro-eq5ud5bl">  <main data-pagefind-body class="astro-opzcwvd5" lang="en" dir="ltr">     <div class="content-panel astro-iwz2b66u"> <div class="sl-container astro-iwz2b66u"> <h1 id="_top" class="astro-ah76qp3y">Windmillcode CDK</h1>  <div class="starlight-view-modes-page-title-switcher astro-orzzrztl"> <a href="/Windmillcode-Angular-CDK-Docs/zen-mode/" class="sl-flex starlight-view-modes-social-link-a starlight-view-modes-switcher-a astro-pz6mzxhy"><span class="sr-only astro-pz6mzxhy">starlightViewModes.switchTo</span><svg aria-hidden="true" class="astro-pz6mzxhy astro-4wuitkz6" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" style="--sl-icon-size: 1em;"> <path d="M22 13a10 10 0 1 0-20 0c0 4.32 3.09 10 10 10 6.93 0 10-5.7 10-10zm-10 8a8.01 8.01 0 0 1 0-16 8.01 8.01 0 0 1 0 16zm3-4H9v-1.57l3.82-4.83H9V9h6v1.58l-3.79 4.84H15V17zM.8 8.71a4.99 4.99 0 0 1 6.91-6.9 12.04 12.04 0 0 0-6.9 6.9zM19 1a5 5 0 0 0-2.72.8 12.06 12.06 0 0 1 6.92 6.91A4.99 4.99 0 0 0 19 1z" /> </svg> </a><script type="module">function h(){const t=window.location.hash;document.querySelectorAll(".starlight-view-modes-switcher-a").forEach(e=>{e.href&&(e.href=e.href.split("#")[0]+t)})}h();window.addEventListener("hashchange",h);</script> </div>   </div> </div>  <div class="content-panel astro-iwz2b66u"> <div class="sl-container astro-iwz2b66u"> <div class="sl-markdown-content"> <p>Welcome to the Windmillcode Component Library, a comprehensive suite of  components and classes designed to help you build engaging, robust, and user-friendly web applications. This library, also known as the Windmillcode Component Development Kit (CDK), provides a collection of reusable UI components, each crafted with attention to detail and performance.</p>

<div class="sl-heading-wrapper level-h2"><h2 id="features">Features</h2><a class="sl-anchor-link" href="#features"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Features”</span></a></div>
<div class="sl-heading-wrapper level-h3"><h3 id="minimal-configurationinstallation"><a href="#mininal-confguration">Minimal Configuration/Installation</a></h3><a class="sl-anchor-link" href="#minimal-configurationinstallation"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Minimal Configuration/Installation”</span></a></div>
<ul>
<li>most libraries depend on Angular Material and compatibility issues appear as your projects get bigger. The basis of our components are vanilla js and stable typescript features so as your project grows if there are any configuration issues it (hopefully) wont be with us</li>
</ul>
<div class="sl-heading-wrapper level-h3"><h3 id="articulate-complex-thoughts-into-code-with-ease">Articulate Complex Thoughts Into Code With Ease</h3><a class="sl-anchor-link" href="#articulate-complex-thoughts-into-code-with-ease"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Articulate Complex Thoughts Into Code With Ease”</span></a></div>
<ul>
<li>How can we make our own flyout without grabbing a component. what if we want to remake a component from scratch down do mabye 90% of the very detail. By understanding that you can bind our classes to every element complex features that are rather wieldy or difficult to implement now have a uniform pattern which also for greater creativity on the part of the developer.</li>
</ul>
<div class="sl-heading-wrapper level-h3"><h3 id="feels-like-react">Feels Like React</h3><a class="sl-anchor-link" href="#feels-like-react"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Feels Like React”</span></a></div>
<ul>
<li>You have a component and you have your props and you also have setState. This design makes it easier for those with a React/Nextjs background to transition to Angular if using our library</li>
</ul>
<div class="sl-heading-wrapper level-h3"><h3 id="plug-and-play">Plug And Play</h3><a class="sl-anchor-link" href="#plug-and-play"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Plug And Play”</span></a></div>
<p>Angular can get rather a verbose language we aim to simplify angular with plug and play mentaility
With plug and play every compoonent has its props as in react
this props is a class and you simply pass the prop the to class to render the component</p>
<div class="expressive-code"><link rel="stylesheet" href="/Windmillcode-Angular-CDK-Docs/_astro/ec.v4551.css"><script type="module" src="/Windmillcode-Angular-CDK-Docs/_astro/ec.p1z7b.js"></script><figure class="frame has-title not-content"><figcaption class="header"><span class="title">app.component.ts</span></figcaption><pre data-language="ts"><code><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5D6376">// Standalone there are default values to see how the component works</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">props </span><span style="--0:#C792EA;--1:#8844AE">=</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">WMLInputZeroProps</span><span style="--0:#D6DEEB;--1:#403F53">({})</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5D6376">// To pass arguments/customize</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">props </span><span style="--0:#C792EA;--1:#8844AE">=</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">WMLInputZeroProps</span><span style="--0:#D6DEEB;--1:#403F53">({</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">datetime:</span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">WMLInputZeroDatetimeProps</span><span style="--0:#D6DEEB;--1:#403F53">({</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">type:</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">datetime</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">    </span></span><span style="--0:#D6DEEB;--1:#403F53">min </span><span style="--0:#C792EA;--1:#8844AE">=</span><span style="--0:#7FDBCA;--1:#096E72">new</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">Date</span><span style="--0:#D6DEEB;--1:#403F53">(</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">[YOUR BIRTHDAY FOR EXAMPLE]</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">)</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">})</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">})</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="// Standalone there are default values to see how the component worksprops = new WMLInputZeroProps({})// To pass arguments/customizeprops = new WMLInputZeroProps({  datetime:new WMLInputZeroDatetimeProps({    type:&#x22;datetime&#x22;,    min =new Date(&#x22;[YOUR BIRTHDAY FOR EXAMPLE]&#x22;)  })})"><div></div></button></div></figure></div>
<div class="expressive-code"><figure class="frame has-title not-content"><figcaption class="header"><span class="title">app.component.html</span></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;</span><span style="--0:#CAECE6">wml-input-zero</span><span style="--0:#7FDBCA"> </span></span><span style="--0:#C5E478;--1:#3B61B0">[props]</span><span style="--0:#7FDBCA;--1:#8844AE">=</span><span style="--0:#ECC48D;--1:#3B61B0">props</span><span style="--0:#7FDBCA;--1:#8844AE">></span></div></div><div class="ec-line"><div class="code"><span style="--1:#8844AE"><span style="--0:#7FDBCA">&#x3C;/</span><span style="--0:#CAECE6">wml-input-zero</span><span style="--0:#7FDBCA">></span></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<wml-input-zero [props]=props></wml-input-zero>"><div></div></button></div></figure></div>
<div class="sl-heading-wrapper level-h3"><h3 id="constant-and-conforming-updates">Constant and conforming updates :</h3><a class="sl-anchor-link" href="#constant-and-conforming-updates"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Constant and conforming updates :”</span></a></div>
<ul>
<li>Since around Angular 16.2 for every angular version  we create a new version of the library. The versions are based on @angular-core  This means that you can be sure that the library is always up to date with the latest angular version. down to the patch version. However as of 18.1.3 the library has been unified for production use</li>
</ul>
<div class="sl-heading-wrapper level-h3"><h3 id="extensive-component-collection">Extensive Component Collection</h3><a class="sl-anchor-link" href="#extensive-component-collection"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Extensive Component Collection”</span></a></div>
<p>Our library includes a wide array of components, ranging from UI elements like buttons and input fields to complex constructs like file upload and dropdowns. Each component is designed to be modular, making it easy to integrate into your existing Angular projects.</p>
<div class="sl-heading-wrapper level-h3"><h3 id="customizable-and-themable">Customizable and Themable</h3><a class="sl-anchor-link" href="#customizable-and-themable"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Customizable and Themable”</span></a></div>
<p>Components are designed to be easily customizable and themable, allowing you to align them with your application’s branding and design guidelines.Via modifying the css variables specific to each component you can get granular control over the look and feel of the components.</p>

<div class="sl-heading-wrapper level-h3"><h3 id="premium--enterprise">PREMIUM / ENTERPRISE</h3><a class="sl-anchor-link" href="#premium--enterprise"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “PREMIUM / ENTERPRISE”</span></a></div>
<p><strong>Internationalization</strong> - All components are i18n compatible under ngx-translate. Use the default en.json file in your project and update and pass the i18n strings to the appropriate keys in the props that are passed to the component
<a href="https://www.privjs.com/packages?search=windmillcode">View the premium version of the library</a></p>
<div class="sl-heading-wrapper level-h2"><h2 id="caveats">Caveats</h2><a class="sl-anchor-link" href="#caveats"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Caveats”</span></a></div>
<ul>
<li>fonts are not set so you can  set global fonts without worry of overrides</li>
<li>“All previous versions in the changelog dont exist All versions start at  18.1.3003, although there are plans for backporting to every patch version of angular. (non-guarantted) use  npm install —verbose [PACKAGE NAMES] —force for versions older than 18</li>
</ul>
<div class="sl-heading-wrapper level-h2"><h2 id="packages">Packages</h2><a class="sl-anchor-link" href="#packages"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Packages”</span></a></div>
<p>The Windmillcode CDK offers a diverse range of components, each designed to fulfill specific UI requirements in your Angular applications. Below is a list of available components along with brief descriptions:</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-components-base"><strong>WML Components Base</strong></a>:</li>
</ul>
<p>This is the foundational package that our whole library focuses on. Its foundation is the WMLUIProperty the very basic building block of any application meant to be used for all javascript frameworks not just Angular. From here the basis of pagination, animation ,  dynamic components, and more are built.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-angular-components-base"><strong>WML Angular Components Base</strong></a>:</li>
</ul>
<p>Extends WML Components Based to be custoized for angular developers. Useful to keep conformity within the codebase.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/intro/wml-three"><strong>WML Three</strong></a>:</li>
</ul>
<p>Three js is rather wieldy and not everything you need to create a scene is there for you this changes with our three.js library. Our classes handle the mathematics and physics implementations so you can focus on adding and placing objects in the scene</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-schematics"><strong>WML Schematics</strong></a>:</li>
</ul>
<p>Our own angular schematics to generate Angular classes according to our angular project template</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-accordion"><strong>WML Accordion</strong></a>:</li>
</ul>
<p>An accordion component that allows you to display content in a collapsible format. It’s useful for FAQs, lists, or any content that benefits from a compact presentation.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-button"><strong>WML Button</strong></a>:</li>
</ul>
<p>A customizable button component that can be used across your application, ensuring consistency and themability.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-carousel"><strong>WML Carousel</strong></a>:</li>
</ul>
<p>A carousel component that enables the display of multiple items in a sliding or rotating fashion, perfect for galleries or showcasing multiple products.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-chips"><strong>WML Chips</strong></a>:</li>
</ul>
<p>A component that represents input, attributes, or actions as compact elements, commonly used for tags, contact information, or interactive elements.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-field"><strong>WML Field</strong></a>:</li>
</ul>
<p>A field component, potentially for forms, providing a standardized way to input data.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-file-manager"><strong>WML File Manager</strong></a>:</li>
</ul>
<p>A comprehensive component for handling file interactions, including uploading, downloading(in backlog), and displaying file information.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-form"><strong>WML Form</strong></a>:</li>
</ul>
<p>A component or set of components designed to create consistent and functional forms, including various form controls.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-infinite-dropdown"><strong>WML Infinite Dropdown</strong></a>:</li>
</ul>
<p>A dropdown component that expands infinitely. Great for menus with a large amount of navigation content</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-input"><strong>WML Input</strong></a>:</li>
</ul>
<p>A versatile input component for forms, providing a uniform way to collect user input.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-mobile-nav"><strong>WML Mobile Nav</strong></a>:</li>
</ul>
<p>A navigation component designed specifically for mobile user interfaces, providing an optimized menu for smaller screens.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-notify"><strong>WML Notify</strong></a>:</li>
</ul>
<p>A notification component, allowing you to display alerts, messages, or other important information to users.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-options"><strong>WML Options</strong></a>:</li>
</ul>
<p>A component that  provides a set of selectable options, possibly as a more advanced dropdown or select component.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-panel"><strong>WML Panel</strong></a>:</li>
</ul>
<p>A flyout component component used to provide auxillary content, information or controls, often used in dashboards or as part of complex interfaces.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-penrose"><strong>WML Penrose</strong></a>:</li>
</ul>
<p>A custom loading component</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-popup"><strong>WML Popup</strong></a>:</li>
</ul>
<p>A component for displaying pop-up content, such as modals, dialogues, or tooltips.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-select"><strong>WML Select</strong></a>:</li>
</ul>
<p>A select component that provides a dropdown list of options for users to choose from.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-slicebox"><strong>WML Slicebox</strong></a>:</li>
</ul>
<p>based on <a href="https://tympanus.net/Development/Slicebox/">jquery slicebox</a>
more fluid way of implementing a carousel</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-table"><strong>WML Table</strong></a>:</li>
</ul>
<p>A table component designed for displaying tabular data, with features  including sorting, filtering, and pagination.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-tabs"><strong>WML Tabs</strong></a>:</li>
</ul>
<p>A component for creating tabbed interfaces, allowing users to switch between different views or content sections within the same context.</p>
<ul>
<li><a href="https://windmillcode.github.io/Windmillcode-Angular-CDK-Docs/angular-components/wml-toggle"><strong>WML Toggle</strong></a>:</li>
</ul>
<p>A toggle switch component, providing an intuitive way for users to make binary choices, such as enabling/disabling settings.</p>
<hr>
<p>Each component is crafted to address specific UI needs while ensuring consistency and ease of integration into your Angular projects. For more detailed information on each component, including usage examples and configuration options, refer to the library’s detailed documentation.</p>
<div class="sl-heading-wrapper level-h2"><h2 id="getting-started">Getting Started</h2><a class="sl-anchor-link" href="#getting-started"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Getting Started”</span></a></div>
<ul>
<li>Click on the any of the links of the component you need and install with npm, or your preferred package manager</li>
</ul>
<div class="sl-heading-wrapper level-h2"><h2 id="documentation">Documentation</h2><a class="sl-anchor-link" href="#documentation"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Documentation”</span></a></div>
<p>Each component is documented with details on how to use it, its input/output properties, and event emitters. To dive deeper into a specific component, refer to its README.md dedicated documentation section.</p>
<div class="sl-heading-wrapper level-h2"><h2 id="contributing"><a href="#contributing">Contributing</a></h2><a class="sl-anchor-link" href="#contributing"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Contributing”</span></a></div>
<p>** Work In Progress**
We welcome contributions to the Windmillcode CDK! Whether it’s adding new components, enhancing existing ones, or reporting bugs, your contributions are valuable to us. Please refer to our contribution guidelines before making a pull request.</p>
<ul>
<li>pull the desired repo</li>
<li>if its a components module replace free from free.module.ts with module ts</li>
<li>Terminal 1</li>
</ul>
<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#C5E478;--1:#3B61B0">cd</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">projects/[desired</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">project]</span></div></div><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">npx</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">ng</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">build</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#82AAFF;--1:#3B61B0">--watch</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd projects/[desired project]npx ng build --watch"><div></div></button></div></figure></div>
<ul>
<li>Terminal 2</li>
</ul>
<div class="expressive-code"><figure class="frame is-terminal not-content"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#919F9F;--1:#5F636F"># wait for project to appear in dist</span></div></div><div class="ec-line"><div class="code"><span style="--0:#C5E478;--1:#3B61B0">cd</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">dist/[desired</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">project]</span></div></div><div class="ec-line"><div class="code"><span style="--0:#82AAFF;--1:#3B61B0">npm</span><span style="--0:#D6DEEB;--1:#403F53"> </span><span style="--0:#ECC48D;--1:#3B61B0">link</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="cd dist/[desired project]npm link"><div></div></button></div></figure></div>
<p>in the consumer you need add the path to the dist in the consumers tsconfig.json</p>
<div class="expressive-code"><figure class="frame not-content"><figcaption class="header"></figcaption><pre data-language="json"><code><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">[FULL LIBRARY NAME FROM PACKAGE.JSON]</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent">    </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">[PATH TO REPO GENERATED DIST]/[LIBRAY FOLDER NAME]</span><span style="--0:#D9F5DD;--1:#111111">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#D6DEEB;--1:#403F53">  </span></span><span style="--0:#D6DEEB;--1:#403F53">],</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#919F9F;--1:#5D6376">// EXAMPLE</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">@windmillcode/angular-wml-slicebox</span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#D6DEEB;--1:#403F53">: [</span></div></div><div class="ec-line"><div class="code"><span class="indent">  </span><span style="--0:#D9F5DD;--1:#111111">"</span><span style="--0:#ECC48D;--1:#984E4D">../../../../windmillcode-Angular-CDK/dist/wml-slicebox</span><span style="--0:#D9F5DD;--1:#111111">"</span></div></div><div class="ec-line"><div class="code"><span style="--0:#D6DEEB;--1:#403F53">],</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="  &#x22;[FULL LIBRARY NAME FROM PACKAGE.JSON]&#x22;: [    &#x22;[PATH TO REPO GENERATED DIST]/[LIBRAY FOLDER NAME]&#x22;  ],  // EXAMPLE&#x22;@windmillcode/angular-wml-slicebox&#x22;: [  &#x22;../../../../windmillcode-Angular-CDK/dist/wml-slicebox&#x22;],"><div></div></button></div></figure></div>
<div class="sl-heading-wrapper level-h2"><h2 id="license">License</h2><a class="sl-anchor-link" href="#license"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “License”</span></a></div>
<p>The Windmillcode CDK is licensed with <a href="https://github.com/WindMillCode/Windmillcode-Angular-CDK/blob/main/LICENSE">Creative Commons Attribution 4.0 International Public License</a>.</p>
<div class="sl-heading-wrapper level-h2"><h2 id="contact">Contact</h2><a class="sl-anchor-link" href="#contact"><span aria-hidden="true" class="sl-anchor-icon"><svg width="16" height="16" viewBox="0 0 24 24"><path fill="currentcolor" d="m12.11 15.39-3.88 3.88a2.52 2.52 0 0 1-3.5 0 2.47 2.47 0 0 1 0-3.5l3.88-3.88a1 1 0 0 0-1.42-1.42l-3.88 3.89a4.48 4.48 0 0 0 6.33 6.33l3.89-3.88a1 1 0 1 0-1.42-1.42Zm8.58-12.08a4.49 4.49 0 0 0-6.33 0l-3.89 3.88a1 1 0 0 0 1.42 1.42l3.88-3.88a2.52 2.52 0 0 1 3.5 0 2.47 2.47 0 0 1 0 3.5l-3.88 3.88a1 1 0 1 0 1.42 1.42l3.88-3.89a4.49 4.49 0 0 0 0-6.33ZM8.83 15.17a1 1 0 0 0 1.1.22 1 1 0 0 0 .32-.22l4.92-4.92a1 1 0 0 0-1.42-1.42l-4.92 4.92a1 1 0 0 0 0 1.42Z"></path></svg></span><span class="sr-only">Section titled “Contact”</span></a></div>
<p>If you have any questions or feedback here is our <a href="/Windmillcode-Angular-CDK-Docs/feedback">feedback form</a>. You can also connect with us on any or all <a href="https://linktr.ee/windmillcode">social media of your preference</a>. We’re always looking to improve our library and help the developer community.</p>
<p>Enjoy building with the Windmillcode CDK!</p> </div> <footer class="sl-flex astro-laokmzp5"> <div class="meta sl-flex astro-laokmzp5">   </div> <div class="pagination-links print:hidden astro-bohuaa4h" dir="ltr">   </div>   </footer>  </div> </div>   </main> </div> </div>  </div> </div>  </body></html>