@nx/angular 19.5.7 → 19.6.0-beta.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,810 @@
1
+ import { Component, ViewEncapsulation } from '@angular/core';
2
+
3
+ @Component({
4
+ selector: '<%= nxWelcomeSelector %>',
5
+ template: `
6
+ <!--
7
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
8
+ This is a starter component and can be deleted.
9
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
10
+ Delete this file and get started with your project!
11
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
12
+ -->
13
+ <style>
14
+ html {
15
+ -webkit-text-size-adjust: 100%;
16
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
17
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
18
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
19
+ 'Noto Color Emoji';
20
+ line-height: 1.5;
21
+ tab-size: 4;
22
+ scroll-behavior: smooth;
23
+ }
24
+ body {
25
+ font-family: inherit;
26
+ line-height: inherit;
27
+ margin: 0;
28
+ }
29
+ h1,
30
+ h2,
31
+ p,
32
+ pre {
33
+ margin: 0;
34
+ }
35
+ *,
36
+ ::before,
37
+ ::after {
38
+ box-sizing: border-box;
39
+ border-width: 0;
40
+ border-style: solid;
41
+ border-color: currentColor;
42
+ }
43
+ h1,
44
+ h2 {
45
+ font-size: inherit;
46
+ font-weight: inherit;
47
+ }
48
+ a {
49
+ color: inherit;
50
+ text-decoration: inherit;
51
+ }
52
+ pre {
53
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
54
+ 'Liberation Mono', 'Courier New', monospace;
55
+ }
56
+ svg {
57
+ display: block;
58
+ vertical-align: middle;
59
+ }
60
+ svg {
61
+ shape-rendering: auto;
62
+ text-rendering: optimizeLegibility;
63
+ }
64
+ pre {
65
+ background-color: rgba(55, 65, 81, 1);
66
+ border-radius: 0.25rem;
67
+ color: rgba(229, 231, 235, 1);
68
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
69
+ 'Liberation Mono', 'Courier New', monospace;
70
+ overflow: auto;
71
+ padding: 0.5rem 0.75rem;
72
+ }
73
+ .shadow {
74
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
75
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
76
+ }
77
+ .rounded {
78
+ border-radius: 1.5rem;
79
+ }
80
+ .wrapper {
81
+ width: 100%;
82
+ }
83
+ .container {
84
+ margin-left: auto;
85
+ margin-right: auto;
86
+ max-width: 768px;
87
+ padding-bottom: 3rem;
88
+ padding-left: 1rem;
89
+ padding-right: 1rem;
90
+ color: rgba(55, 65, 81, 1);
91
+ width: 100%;
92
+ }
93
+ #welcome {
94
+ margin-top: 2.5rem;
95
+ }
96
+ #welcome h1 {
97
+ font-size: 3rem;
98
+ font-weight: 500;
99
+ letter-spacing: -0.025em;
100
+ line-height: 1;
101
+ }
102
+ #welcome span {
103
+ display: block;
104
+ font-size: 1.875rem;
105
+ font-weight: 300;
106
+ line-height: 2.25rem;
107
+ margin-bottom: 0.5rem;
108
+ }
109
+ #hero {
110
+ align-items: center;
111
+ background-color: hsla(214, 62%, 21%, 1);
112
+ border: none;
113
+ box-sizing: border-box;
114
+ color: rgba(55, 65, 81, 1);
115
+ display: grid;
116
+ grid-template-columns: 1fr;
117
+ margin-top: 3.5rem;
118
+ }
119
+ #hero .text-container {
120
+ color: rgba(255, 255, 255, 1);
121
+ padding: 3rem 2rem;
122
+ }
123
+ #hero .text-container h2 {
124
+ font-size: 1.5rem;
125
+ line-height: 2rem;
126
+ position: relative;
127
+ }
128
+ #hero .text-container h2 svg {
129
+ color: hsla(162, 47%, 50%, 1);
130
+ height: 2rem;
131
+ left: -0.25rem;
132
+ position: absolute;
133
+ top: 0;
134
+ width: 2rem;
135
+ }
136
+ #hero .text-container h2 span {
137
+ margin-left: 2.5rem;
138
+ }
139
+ #hero .text-container a {
140
+ background-color: rgba(255, 255, 255, 1);
141
+ border-radius: 0.75rem;
142
+ color: rgba(55, 65, 81, 1);
143
+ display: inline-block;
144
+ margin-top: 1.5rem;
145
+ padding: 1rem 2rem;
146
+ text-decoration: inherit;
147
+ }
148
+ #hero .logo-container {
149
+ display: none;
150
+ justify-content: center;
151
+ padding-left: 2rem;
152
+ padding-right: 2rem;
153
+ }
154
+ #hero .logo-container svg {
155
+ color: rgba(255, 255, 255, 1);
156
+ width: 66.666667%;
157
+ }
158
+ #middle-content {
159
+ align-items: flex-start;
160
+ display: grid;
161
+ grid-template-columns: 1fr;
162
+ margin-top: 3.5rem;
163
+ }
164
+ #middle-content #middle-left-content {
165
+ display: flex;
166
+ flex-direction: column;
167
+ gap: 2rem;
168
+ }
169
+
170
+ #learning-materials {
171
+ padding: 2.5rem 2rem;
172
+ }
173
+ #learning-materials h2 {
174
+ font-weight: 500;
175
+ font-size: 1.25rem;
176
+ letter-spacing: -0.025em;
177
+ line-height: 1.75rem;
178
+ padding-left: 1rem;
179
+ padding-right: 1rem;
180
+ }
181
+ .list-item-link {
182
+ align-items: center;
183
+ border-radius: 0.75rem;
184
+ display: flex;
185
+ margin-top: 1rem;
186
+ padding: 1rem;
187
+ transition-property: background-color, border-color, color, fill, stroke,
188
+ opacity, box-shadow, transform, filter, backdrop-filter,
189
+ -webkit-backdrop-filter;
190
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
191
+ transition-duration: 150ms;
192
+ width: 100%;
193
+ }
194
+ .list-item-link svg:first-child {
195
+ margin-right: 1rem;
196
+ height: 1.5rem;
197
+ transition-property: background-color, border-color, color, fill, stroke,
198
+ opacity, box-shadow, transform, filter, backdrop-filter,
199
+ -webkit-backdrop-filter;
200
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
201
+ transition-duration: 150ms;
202
+ width: 1.5rem;
203
+ }
204
+ .list-item-link > span {
205
+ flex-grow: 1;
206
+ font-weight: 400;
207
+ transition-property: background-color, border-color, color, fill, stroke,
208
+ opacity, box-shadow, transform, filter, backdrop-filter,
209
+ -webkit-backdrop-filter;
210
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
211
+ }
212
+ .list-item-link > span > span {
213
+ color: rgba(107, 114, 128, 1);
214
+ display: block;
215
+ flex-grow: 1;
216
+ font-size: 0.75rem;
217
+ font-weight: 300;
218
+ line-height: 1rem;
219
+ transition-property: background-color, border-color, color, fill, stroke,
220
+ opacity, box-shadow, transform, filter, backdrop-filter,
221
+ -webkit-backdrop-filter;
222
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
223
+ }
224
+ .list-item-link svg:last-child {
225
+ height: 1rem;
226
+ transition-property: all;
227
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
228
+ transition-duration: 150ms;
229
+ width: 1rem;
230
+ }
231
+ .list-item-link:hover {
232
+ color: rgba(255, 255, 255, 1);
233
+ background-color: hsla(162, 55%, 33%, 1);
234
+ }
235
+ .list-item-link:hover > span > span {
236
+ color: rgba(243, 244, 246, 1);
237
+ }
238
+ .list-item-link:hover svg:last-child {
239
+ transform: translateX(0.25rem);
240
+ }
241
+
242
+ .button-pill {
243
+ padding: 1.5rem 2rem;
244
+ margin-bottom: 2rem;
245
+ transition-duration: 300ms;
246
+ transition-property: background-color, border-color, color, fill, stroke,
247
+ opacity, box-shadow, transform, filter, backdrop-filter,
248
+ -webkit-backdrop-filter;
249
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
250
+ align-items: center;
251
+ display: flex;
252
+ }
253
+ .button-pill svg {
254
+ transition-property: background-color, border-color, color, fill, stroke,
255
+ opacity, box-shadow, transform, filter, backdrop-filter,
256
+ -webkit-backdrop-filter;
257
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
258
+ transition-duration: 150ms;
259
+ flex-shrink: 0;
260
+ width: 3rem;
261
+ }
262
+ .button-pill > span {
263
+ letter-spacing: -0.025em;
264
+ font-weight: 400;
265
+ font-size: 1.125rem;
266
+ line-height: 1.75rem;
267
+ padding-left: 1rem;
268
+ padding-right: 1rem;
269
+ }
270
+ .button-pill span span {
271
+ display: block;
272
+ font-size: 0.875rem;
273
+ font-weight: 300;
274
+ line-height: 1.25rem;
275
+ }
276
+ .button-pill:hover svg,
277
+ .button-pill:hover {
278
+ color: rgba(255, 255, 255, 1) !important;
279
+ }
280
+ .nx-console:hover {
281
+ background-color: rgba(0, 122, 204, 1);
282
+ }
283
+ .nx-console svg {
284
+ color: rgba(0, 122, 204, 1);
285
+ }
286
+ .nx-console-jetbrains {
287
+ margin-top: 2rem;
288
+ }
289
+ .nx-console-jetbrains:hover {
290
+ background-color: rgba(255, 49, 140, 1);
291
+ }
292
+ .nx-console-jetbrains svg {
293
+ color: rgba(255, 49, 140, 1);
294
+ }
295
+ #nx-repo:hover {
296
+ background-color: rgba(24, 23, 23, 1);
297
+ }
298
+ #nx-repo svg {
299
+ color: rgba(24, 23, 23, 1);
300
+ }
301
+ #nx-cloud {
302
+ margin-bottom: 2rem;
303
+ margin-top: 2rem;
304
+ padding: 2.5rem 2rem;
305
+ }
306
+ #nx-cloud > div {
307
+ align-items: center;
308
+ display: flex;
309
+ }
310
+ #nx-cloud > div svg {
311
+ border-radius: 0.375rem;
312
+ flex-shrink: 0;
313
+ width: 3rem;
314
+ }
315
+ #nx-cloud > div h2 {
316
+ font-size: 1.125rem;
317
+ font-weight: 400;
318
+ letter-spacing: -0.025em;
319
+ line-height: 1.75rem;
320
+ padding-left: 1rem;
321
+ padding-right: 1rem;
322
+ }
323
+ #nx-cloud > div h2 span {
324
+ display: block;
325
+ font-size: 0.875rem;
326
+ font-weight: 300;
327
+ line-height: 1.25rem;
328
+ }
329
+ #nx-cloud p {
330
+ font-size: 1rem;
331
+ line-height: 1.5rem;
332
+ margin-top: 1rem;
333
+ }
334
+ #nx-cloud pre {
335
+ margin-top: 1rem;
336
+ }
337
+ #nx-cloud a {
338
+ border-radius: 0.75rem;
339
+ color: white;
340
+ background-color: hsla(214, 62%, 21%, 1);
341
+ display: inline-block;
342
+ margin-top: 1.5rem;
343
+ padding: 0.5rem 1rem;
344
+ text-align:left;
345
+ text-decoration: inherit;
346
+ }
347
+
348
+ #commands {
349
+ padding: 2.5rem 2rem;
350
+ margin-top: 3.5rem;
351
+ }
352
+ #commands h2 {
353
+ font-size: 1.25rem;
354
+ font-weight: 400;
355
+ letter-spacing: -0.025em;
356
+ line-height: 1.75rem;
357
+ padding-left: 1rem;
358
+ padding-right: 1rem;
359
+ }
360
+ #commands p {
361
+ font-size: 1rem;
362
+ font-weight: 300;
363
+ line-height: 1.5rem;
364
+ margin-top: 1rem;
365
+ padding-left: 1rem;
366
+ padding-right: 1rem;
367
+ }
368
+ details {
369
+ align-items: center;
370
+ display: flex;
371
+ margin-top: 1rem;
372
+ padding-left: 1rem;
373
+ padding-right: 1rem;
374
+ width: 100%;
375
+ }
376
+ details pre > span {
377
+ color: rgba(181, 181, 181, 1);
378
+ }
379
+ summary {
380
+ border-radius: 0.5rem;
381
+ display: flex;
382
+ font-weight: 400;
383
+ padding: 0.5rem;
384
+ cursor: pointer;
385
+ transition-property: background-color, border-color, color, fill, stroke,
386
+ opacity, box-shadow, transform, filter, backdrop-filter,
387
+ -webkit-backdrop-filter;
388
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
389
+ transition-duration: 150ms;
390
+ }
391
+ summary:hover {
392
+ background-color: rgba(243, 244, 246, 1);
393
+ }
394
+ summary svg {
395
+ height: 1.5rem;
396
+ margin-right: 1rem;
397
+ width: 1.5rem;
398
+ }
399
+ #love {
400
+ color: rgba(107, 114, 128, 1);
401
+ font-size: 0.875rem;
402
+ line-height: 1.25rem;
403
+ margin-top: 3.5rem;
404
+ opacity: 0.6;
405
+ text-align: center;
406
+ }
407
+ #love svg {
408
+ color: rgba(252, 165, 165, 1);
409
+ width: 1.25rem;
410
+ height: 1.25rem;
411
+ display: inline;
412
+ margin-top: -0.25rem;
413
+ }
414
+ @media screen and (min-width: 768px) {
415
+ #hero {
416
+ grid-template-columns: repeat(2, minmax(0, 1fr));
417
+ }
418
+ #hero .logo-container {
419
+ display: flex;
420
+ }
421
+ #middle-content {
422
+ grid-template-columns: repeat(2, minmax(0, 1fr));
423
+ gap: 4rem;
424
+ }
425
+ }
426
+ </style>
427
+ <div class="wrapper">
428
+ <div class="container">
429
+ <!-- WELCOME -->
430
+ <div id="welcome">
431
+ <h1>
432
+ <span> Hello there, </span>
433
+ Welcome <%= appName %> 👋
434
+ </h1>
435
+ </div>
436
+ <!-- HERO -->
437
+ <div id="hero" class="rounded">
438
+ <div class="text-container">
439
+ <h2>
440
+ <svg
441
+ fill="none"
442
+ stroke="currentColor"
443
+ viewBox="0 0 24 24"
444
+ xmlns="http://www.w3.org/2000/svg"
445
+ >
446
+ <path
447
+ stroke-linecap="round"
448
+ stroke-linejoin="round"
449
+ stroke-width="2"
450
+ d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
451
+ />
452
+ </svg>
453
+ <span>You&apos;re up and running</span>
454
+ </h2>
455
+ <a href="#commands"> What&apos;s next? </a>
456
+ </div>
457
+ <div class="logo-container">
458
+ <svg
459
+ fill="currentColor"
460
+ role="img"
461
+ viewBox="0 0 24 24"
462
+ xmlns="http://www.w3.org/2000/svg"
463
+ >
464
+ <path
465
+ d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z"
466
+ />
467
+ </svg>
468
+ </div>
469
+ </div>
470
+ <!-- MIDDLE CONTENT -->
471
+ <div id="middle-content">
472
+ <div id="middle-left-content">
473
+ <div id="learning-materials" class="rounded shadow">
474
+ <h2>Learning materials</h2>
475
+ <a href="https://nx.dev/getting-started/intro?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
476
+ <svg
477
+ fill="none"
478
+ stroke="currentColor"
479
+ viewBox="0 0 24 24"
480
+ xmlns="http://www.w3.org/2000/svg"
481
+ >
482
+ <path
483
+ stroke-linecap="round"
484
+ stroke-linejoin="round"
485
+ stroke-width="2"
486
+ d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
487
+ />
488
+ </svg>
489
+ <span>
490
+ Documentation
491
+ <span> Everything is in there </span>
492
+ </span>
493
+ <svg
494
+ fill="none"
495
+ stroke="currentColor"
496
+ viewBox="0 0 24 24"
497
+ xmlns="http://www.w3.org/2000/svg"
498
+ >
499
+ <path
500
+ stroke-linecap="round"
501
+ stroke-linejoin="round"
502
+ stroke-width="2"
503
+ d="M9 5l7 7-7 7"
504
+ />
505
+ </svg>
506
+ </a>
507
+ <a href="https://nx.dev/blog/?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
508
+ <svg
509
+ fill="none"
510
+ stroke="currentColor"
511
+ viewBox="0 0 24 24"
512
+ xmlns="http://www.w3.org/2000/svg"
513
+ >
514
+ <path
515
+ stroke-linecap="round"
516
+ stroke-linejoin="round"
517
+ stroke-width="2"
518
+ d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
519
+ />
520
+ </svg>
521
+ <span>
522
+ Blog
523
+ <span> Changelog, features & events </span>
524
+ </span>
525
+ <svg
526
+ fill="none"
527
+ stroke="currentColor"
528
+ viewBox="0 0 24 24"
529
+ xmlns="http://www.w3.org/2000/svg"
530
+ >
531
+ <path
532
+ stroke-linecap="round"
533
+ stroke-linejoin="round"
534
+ stroke-width="2"
535
+ d="M9 5l7 7-7 7"
536
+ />
537
+ </svg>
538
+ </a>
539
+ <a href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1" target="_blank" rel="noreferrer" class="list-item-link">
540
+ <svg
541
+ role="img"
542
+ viewBox="0 0 24 24"
543
+ fill="currentColor"
544
+ xmlns="http://www.w3.org/2000/svg"
545
+ >
546
+ <title>YouTube</title>
547
+ <path
548
+ d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
549
+ />
550
+ </svg>
551
+ <span>
552
+ YouTube channel
553
+ <span> Nx Show, talks & tutorials </span>
554
+ </span>
555
+ <svg
556
+ fill="none"
557
+ stroke="currentColor"
558
+ viewBox="0 0 24 24"
559
+ xmlns="http://www.w3.org/2000/svg"
560
+ >
561
+ <path
562
+ stroke-linecap="round"
563
+ stroke-linejoin="round"
564
+ stroke-width="2"
565
+ d="M9 5l7 7-7 7"
566
+ />
567
+ </svg>
568
+ </a>
569
+ <a href="<%= tutorialUrl %>" target="_blank" rel="noreferrer" class="list-item-link">
570
+ <svg
571
+ fill="none"
572
+ stroke="currentColor"
573
+ viewBox="0 0 24 24"
574
+ xmlns="http://www.w3.org/2000/svg"
575
+ >
576
+ <path
577
+ stroke-linecap="round"
578
+ stroke-linejoin="round"
579
+ stroke-width="2"
580
+ d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
581
+ />
582
+ </svg>
583
+ <span>
584
+ Interactive tutorials
585
+ <span> Create an app, step-by-step </span>
586
+ </span>
587
+ <svg
588
+ fill="none"
589
+ stroke="currentColor"
590
+ viewBox="0 0 24 24"
591
+ xmlns="http://www.w3.org/2000/svg"
592
+ >
593
+ <path
594
+ stroke-linecap="round"
595
+ stroke-linejoin="round"
596
+ stroke-width="2"
597
+ d="M9 5l7 7-7 7"
598
+ />
599
+ </svg>
600
+ </a>
601
+ </div>
602
+ <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
603
+ <svg
604
+ fill="currentColor"
605
+ role="img"
606
+ viewBox="0 0 24 24"
607
+ xmlns="http://www.w3.org/2000/svg"
608
+ >
609
+ <path
610
+ d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
611
+ />
612
+ </svg>
613
+ <span>
614
+ Nx is open source
615
+ <span> Love Nx? Give us a star! </span>
616
+ </span>
617
+ </a>
618
+ </div>
619
+ <div id="other-links">
620
+ <a class="button-pill rounded shadow nx-console" href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project" target="_blank" rel="noreferrer">
621
+ <svg
622
+ fill="currentColor"
623
+ role="img"
624
+ viewBox="0 0 24 24"
625
+ xmlns="http://www.w3.org/2000/svg"
626
+ >
627
+ <title>Visual Studio Code</title>
628
+ <path
629
+ d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z"
630
+ />
631
+ </svg>
632
+ <span>
633
+ Install Nx Console for VSCode
634
+ <span>The official VSCode extension for Nx.</span>
635
+ </span>
636
+ </a>
637
+ <a
638
+ class="button-pill rounded shadow nx-console-jetbrains"
639
+ href="https://plugins.jetbrains.com/plugin/21060-nx-console"
640
+ target="_blank"
641
+ rel="noreferrer"
642
+ >
643
+ <svg
644
+ height="48"
645
+ width="48"
646
+ viewBox="20 20 60 60"
647
+ xmlns="http://www.w3.org/2000/svg"
648
+ >
649
+ <path d="m22.5 22.5h60v60h-60z" />
650
+ <g fill="#fff">
651
+ <path d="m29.03 71.25h22.5v3.75h-22.5z" />
652
+ <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
653
+ <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
654
+ <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
655
+ <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
656
+ <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
657
+ <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
658
+ <path d="m56.46 43.05h2.6v9.37h-2.6z" />
659
+ <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
660
+ <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
661
+ </g>
662
+ </svg>
663
+ <span>
664
+ Install Nx Console for JetBrains
665
+ <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
666
+ </span>
667
+ </a>
668
+ <div id="nx-cloud" class="rounded shadow">
669
+ <div>
670
+ <svg id="nx-cloud-logo" role="img" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="transparent" viewBox="0 0 24 24">
671
+ <path stroke-width="2" d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z" />
672
+ <path stroke-width="2" d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z" />
673
+ </svg>
674
+ <h2>
675
+ Nx Cloud
676
+ <span>
677
+ Enable faster CI & better DX
678
+ </span>
679
+ </h2>
680
+ </div>
681
+ <p>
682
+ Your Nx Cloud remote cache setup is almost complete.
683
+ </p>
684
+
685
+ <a
686
+ href="<%= connectCloudUrl %>"
687
+ target="_blank"
688
+ rel="noreferrer"
689
+ >
690
+ Click here to finish
691
+ </a>
692
+ </div>
693
+ </div>
694
+ </div>
695
+ <!-- COMMANDS -->
696
+ <div id="commands" class="rounded shadow">
697
+ <h2>Next steps</h2>
698
+ <p>Here are some things you can do with Nx:</p>
699
+ <details>
700
+ <summary>
701
+ <svg
702
+ fill="none"
703
+ stroke="currentColor"
704
+ viewBox="0 0 24 24"
705
+ xmlns="http://www.w3.org/2000/svg"
706
+ >
707
+ <path
708
+ stroke-linecap="round"
709
+ stroke-linejoin="round"
710
+ stroke-width="2"
711
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
712
+ />
713
+ </svg>
714
+ Build, test and lint your app
715
+ </summary>
716
+ <pre><span># Build</span>
717
+ nx build <%= appName %>
718
+ <span># Test</span>
719
+ nx test <%= appName %>
720
+ <span># Lint</span>
721
+ nx lint <%= appName %>
722
+ <span># Run them together!</span>
723
+ nx run-many -p <%= appName %> -t build test lint</pre>
724
+ </details>
725
+ <details>
726
+ <summary>
727
+ <svg
728
+ fill="none"
729
+ stroke="currentColor"
730
+ viewBox="0 0 24 24"
731
+ xmlns="http://www.w3.org/2000/svg"
732
+ >
733
+ <path
734
+ strokeLinecap="round"
735
+ strokeLinejoin="round"
736
+ strokeWidth="2"
737
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
738
+ />
739
+ </svg>
740
+ View project details
741
+ </summary>
742
+ <pre>nx show project <%= appName %></pre>
743
+ </details>
744
+
745
+ <details>
746
+ <summary>
747
+ <svg
748
+ fill="none"
749
+ stroke="currentColor"
750
+ viewBox="0 0 24 24"
751
+ xmlns="http://www.w3.org/2000/svg"
752
+ >
753
+ <path
754
+ stroke-linecap="round"
755
+ stroke-linejoin="round"
756
+ stroke-width="2"
757
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
758
+ />
759
+ </svg>
760
+ View interactive project graph
761
+ </summary>
762
+ <pre>nx graph</pre>
763
+ </details>
764
+
765
+ <details>
766
+ <summary>
767
+ <svg
768
+ fill="none"
769
+ stroke="currentColor"
770
+ viewBox="0 0 24 24"
771
+ xmlns="http://www.w3.org/2000/svg"
772
+ >
773
+ <path
774
+ stroke-linecap="round"
775
+ stroke-linejoin="round"
776
+ stroke-width="2"
777
+ d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
778
+ />
779
+ </svg>
780
+ Add UI library
781
+ </summary>
782
+ <pre><span># Generate UI lib</span>
783
+ nx g &#64;nx/angular:lib ui
784
+ <span># Add a component</span>
785
+ nx g &#64;nx/angular:component ui/src/lib/button</pre>
786
+ </details>
787
+ </div>
788
+ <p id="love">
789
+ Carefully crafted with
790
+ <svg
791
+ fill="currentColor"
792
+ stroke="none"
793
+ viewBox="0 0 24 24"
794
+ xmlns="http://www.w3.org/2000/svg"
795
+ >
796
+ <path
797
+ stroke-linecap="round"
798
+ stroke-linejoin="round"
799
+ stroke-width="2"
800
+ d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
801
+ />
802
+ </svg>
803
+ </p>
804
+ </div>
805
+ </div>
806
+ `,
807
+ styles: [],
808
+ encapsulation: ViewEncapsulation.None,
809
+ })
810
+ export class NxWelcomeComponent {}