@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,813 @@
1
+ import { Component, ViewEncapsulation } from '@angular/core';
2
+ import { CommonModule } from '@angular/common';
3
+
4
+ @Component({
5
+ selector: '<%= nxWelcomeSelector %>',
6
+ standalone: true,
7
+ imports: [CommonModule],
8
+ template: `
9
+ <!--
10
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
11
+ This is a starter component and can be deleted.
12
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
13
+ Delete this file and get started with your project!
14
+ * * * * * * * * * * * * * * * * * * * * * * * * * * * *
15
+ -->
16
+ <style>
17
+ html {
18
+ -webkit-text-size-adjust: 100%;
19
+ font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
20
+ 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
21
+ 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
22
+ 'Noto Color Emoji';
23
+ line-height: 1.5;
24
+ tab-size: 4;
25
+ scroll-behavior: smooth;
26
+ }
27
+ body {
28
+ font-family: inherit;
29
+ line-height: inherit;
30
+ margin: 0;
31
+ }
32
+ h1,
33
+ h2,
34
+ p,
35
+ pre {
36
+ margin: 0;
37
+ }
38
+ *,
39
+ ::before,
40
+ ::after {
41
+ box-sizing: border-box;
42
+ border-width: 0;
43
+ border-style: solid;
44
+ border-color: currentColor;
45
+ }
46
+ h1,
47
+ h2 {
48
+ font-size: inherit;
49
+ font-weight: inherit;
50
+ }
51
+ a {
52
+ color: inherit;
53
+ text-decoration: inherit;
54
+ }
55
+ pre {
56
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
57
+ 'Liberation Mono', 'Courier New', monospace;
58
+ }
59
+ svg {
60
+ display: block;
61
+ vertical-align: middle;
62
+ }
63
+ svg {
64
+ shape-rendering: auto;
65
+ text-rendering: optimizeLegibility;
66
+ }
67
+ pre {
68
+ background-color: rgba(55, 65, 81, 1);
69
+ border-radius: 0.25rem;
70
+ color: rgba(229, 231, 235, 1);
71
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
72
+ 'Liberation Mono', 'Courier New', monospace;
73
+ overflow: auto;
74
+ padding: 0.5rem 0.75rem;
75
+ }
76
+ .shadow {
77
+ box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
78
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
79
+ }
80
+ .rounded {
81
+ border-radius: 1.5rem;
82
+ }
83
+ .wrapper {
84
+ width: 100%;
85
+ }
86
+ .container {
87
+ margin-left: auto;
88
+ margin-right: auto;
89
+ max-width: 768px;
90
+ padding-bottom: 3rem;
91
+ padding-left: 1rem;
92
+ padding-right: 1rem;
93
+ color: rgba(55, 65, 81, 1);
94
+ width: 100%;
95
+ }
96
+ #welcome {
97
+ margin-top: 2.5rem;
98
+ }
99
+ #welcome h1 {
100
+ font-size: 3rem;
101
+ font-weight: 500;
102
+ letter-spacing: -0.025em;
103
+ line-height: 1;
104
+ }
105
+ #welcome span {
106
+ display: block;
107
+ font-size: 1.875rem;
108
+ font-weight: 300;
109
+ line-height: 2.25rem;
110
+ margin-bottom: 0.5rem;
111
+ }
112
+ #hero {
113
+ align-items: center;
114
+ background-color: hsla(214, 62%, 21%, 1);
115
+ border: none;
116
+ box-sizing: border-box;
117
+ color: rgba(55, 65, 81, 1);
118
+ display: grid;
119
+ grid-template-columns: 1fr;
120
+ margin-top: 3.5rem;
121
+ }
122
+ #hero .text-container {
123
+ color: rgba(255, 255, 255, 1);
124
+ padding: 3rem 2rem;
125
+ }
126
+ #hero .text-container h2 {
127
+ font-size: 1.5rem;
128
+ line-height: 2rem;
129
+ position: relative;
130
+ }
131
+ #hero .text-container h2 svg {
132
+ color: hsla(162, 47%, 50%, 1);
133
+ height: 2rem;
134
+ left: -0.25rem;
135
+ position: absolute;
136
+ top: 0;
137
+ width: 2rem;
138
+ }
139
+ #hero .text-container h2 span {
140
+ margin-left: 2.5rem;
141
+ }
142
+ #hero .text-container a {
143
+ background-color: rgba(255, 255, 255, 1);
144
+ border-radius: 0.75rem;
145
+ color: rgba(55, 65, 81, 1);
146
+ display: inline-block;
147
+ margin-top: 1.5rem;
148
+ padding: 1rem 2rem;
149
+ text-decoration: inherit;
150
+ }
151
+ #hero .logo-container {
152
+ display: none;
153
+ justify-content: center;
154
+ padding-left: 2rem;
155
+ padding-right: 2rem;
156
+ }
157
+ #hero .logo-container svg {
158
+ color: rgba(255, 255, 255, 1);
159
+ width: 66.666667%;
160
+ }
161
+ #middle-content {
162
+ align-items: flex-start;
163
+ display: grid;
164
+ grid-template-columns: 1fr;
165
+ margin-top: 3.5rem;
166
+ }
167
+ #middle-content #middle-left-content {
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: 2rem;
171
+ }
172
+ #learning-materials {
173
+ padding: 2.5rem 2rem;
174
+ }
175
+ #learning-materials h2 {
176
+ font-weight: 500;
177
+ font-size: 1.25rem;
178
+ letter-spacing: -0.025em;
179
+ line-height: 1.75rem;
180
+ padding-left: 1rem;
181
+ padding-right: 1rem;
182
+ }
183
+ .list-item-link {
184
+ align-items: center;
185
+ border-radius: 0.75rem;
186
+ display: flex;
187
+ margin-top: 1rem;
188
+ padding: 1rem;
189
+ transition-property: background-color, border-color, color, fill, stroke,
190
+ opacity, box-shadow, transform, filter, backdrop-filter,
191
+ -webkit-backdrop-filter;
192
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
193
+ transition-duration: 150ms;
194
+ width: 100%;
195
+ }
196
+ .list-item-link svg:first-child {
197
+ margin-right: 1rem;
198
+ height: 1.5rem;
199
+ transition-property: background-color, border-color, color, fill, stroke,
200
+ opacity, box-shadow, transform, filter, backdrop-filter,
201
+ -webkit-backdrop-filter;
202
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
203
+ transition-duration: 150ms;
204
+ width: 1.5rem;
205
+ }
206
+ .list-item-link > span {
207
+ flex-grow: 1;
208
+ font-weight: 400;
209
+ transition-property: background-color, border-color, color, fill, stroke,
210
+ opacity, box-shadow, transform, filter, backdrop-filter,
211
+ -webkit-backdrop-filter;
212
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
213
+ }
214
+ .list-item-link > span > span {
215
+ color: rgba(107, 114, 128, 1);
216
+ display: block;
217
+ flex-grow: 1;
218
+ font-size: 0.75rem;
219
+ font-weight: 300;
220
+ line-height: 1rem;
221
+ transition-property: background-color, border-color, color, fill, stroke,
222
+ opacity, box-shadow, transform, filter, backdrop-filter,
223
+ -webkit-backdrop-filter;
224
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
225
+ }
226
+ .list-item-link svg:last-child {
227
+ height: 1rem;
228
+ transition-property: all;
229
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
230
+ transition-duration: 150ms;
231
+ width: 1rem;
232
+ }
233
+ .list-item-link:hover {
234
+ color: rgba(255, 255, 255, 1);
235
+ background-color: hsla(162, 55%, 33%, 1);
236
+ }
237
+
238
+ .list-item-link:hover > span > span {
239
+ color: rgba(243, 244, 246, 1);
240
+ }
241
+ .list-item-link:hover svg:last-child {
242
+ transform: translateX(0.25rem);
243
+ }
244
+
245
+ .button-pill {
246
+ padding: 1.5rem 2rem;
247
+ margin-bottom: 2rem;
248
+ transition-duration: 300ms;
249
+ transition-property: background-color, border-color, color, fill, stroke,
250
+ opacity, box-shadow, transform, filter, backdrop-filter,
251
+ -webkit-backdrop-filter;
252
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
253
+ align-items: center;
254
+ display: flex;
255
+ }
256
+ .button-pill svg {
257
+ transition-property: background-color, border-color, color, fill, stroke,
258
+ opacity, box-shadow, transform, filter, backdrop-filter,
259
+ -webkit-backdrop-filter;
260
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
261
+ transition-duration: 150ms;
262
+ flex-shrink: 0;
263
+ width: 3rem;
264
+ }
265
+ .button-pill > span {
266
+ letter-spacing: -0.025em;
267
+ font-weight: 400;
268
+ font-size: 1.125rem;
269
+ line-height: 1.75rem;
270
+ padding-left: 1rem;
271
+ padding-right: 1rem;
272
+ }
273
+ .button-pill span span {
274
+ display: block;
275
+ font-size: 0.875rem;
276
+ font-weight: 300;
277
+ line-height: 1.25rem;
278
+ }
279
+ .button-pill:hover svg,
280
+ .button-pill:hover {
281
+ color: rgba(255, 255, 255, 1) !important;
282
+ }
283
+ .nx-console:hover {
284
+ background-color: rgba(0, 122, 204, 1);
285
+ }
286
+ .nx-console svg {
287
+ color: rgba(0, 122, 204, 1);
288
+ }
289
+ .nx-console-jetbrains {
290
+ margin-top: 2rem;
291
+ }
292
+ .nx-console-jetbrains:hover {
293
+ background-color: rgba(255, 49, 140, 1);
294
+ }
295
+ .nx-console-jetbrains svg {
296
+ color: rgba(255, 49, 140, 1);
297
+ }
298
+ #nx-repo:hover {
299
+ background-color: rgba(24, 23, 23, 1);
300
+ }
301
+ #nx-repo svg {
302
+ color: rgba(24, 23, 23, 1);
303
+ }
304
+ #nx-cloud {
305
+ margin-bottom: 2rem;
306
+ margin-top: 2rem;
307
+ padding: 2.5rem 2rem;
308
+ }
309
+ #nx-cloud > div {
310
+ align-items: center;
311
+ display: flex;
312
+ }
313
+ #nx-cloud > div svg {
314
+ border-radius: 0.375rem;
315
+ flex-shrink: 0;
316
+ width: 3rem;
317
+ }
318
+ #nx-cloud > div h2 {
319
+ font-size: 1.125rem;
320
+ font-weight: 400;
321
+ letter-spacing: -0.025em;
322
+ line-height: 1.75rem;
323
+ padding-left: 1rem;
324
+ padding-right: 1rem;
325
+ }
326
+ #nx-cloud > div h2 span {
327
+ display: block;
328
+ font-size: 0.875rem;
329
+ font-weight: 300;
330
+ line-height: 1.25rem;
331
+ }
332
+ #nx-cloud p {
333
+ font-size: 1rem;
334
+ line-height: 1.5rem;
335
+ margin-top: 1rem;
336
+ }
337
+ #nx-cloud pre {
338
+ margin-top: 1rem;
339
+ }
340
+ #nx-cloud a {
341
+ border-radius: 0.75rem;
342
+ color: white;
343
+ background-color: hsla(214, 62%, 21%, 1);
344
+ display: inline-block;
345
+ margin-top: 1.5rem;
346
+ padding: 0.5rem 1rem;
347
+ text-align:left;
348
+ text-decoration: inherit;
349
+ }
350
+
351
+ #commands {
352
+ padding: 2.5rem 2rem;
353
+ margin-top: 3.5rem;
354
+ }
355
+ #commands h2 {
356
+ font-size: 1.25rem;
357
+ font-weight: 400;
358
+ letter-spacing: -0.025em;
359
+ line-height: 1.75rem;
360
+ padding-left: 1rem;
361
+ padding-right: 1rem;
362
+ }
363
+ #commands p {
364
+ font-size: 1rem;
365
+ font-weight: 300;
366
+ line-height: 1.5rem;
367
+ margin-top: 1rem;
368
+ padding-left: 1rem;
369
+ padding-right: 1rem;
370
+ }
371
+ details {
372
+ align-items: center;
373
+ display: flex;
374
+ margin-top: 1rem;
375
+ padding-left: 1rem;
376
+ padding-right: 1rem;
377
+ width: 100%;
378
+ }
379
+ details pre > span {
380
+ color: rgba(181, 181, 181, 1);
381
+ }
382
+ summary {
383
+ border-radius: 0.5rem;
384
+ display: flex;
385
+ font-weight: 400;
386
+ padding: 0.5rem;
387
+ cursor: pointer;
388
+ transition-property: background-color, border-color, color, fill, stroke,
389
+ opacity, box-shadow, transform, filter, backdrop-filter,
390
+ -webkit-backdrop-filter;
391
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
392
+ transition-duration: 150ms;
393
+ }
394
+ summary:hover {
395
+ background-color: rgba(243, 244, 246, 1);
396
+ }
397
+ summary svg {
398
+ height: 1.5rem;
399
+ margin-right: 1rem;
400
+ width: 1.5rem;
401
+ }
402
+ #love {
403
+ color: rgba(107, 114, 128, 1);
404
+ font-size: 0.875rem;
405
+ line-height: 1.25rem;
406
+ margin-top: 3.5rem;
407
+ opacity: 0.6;
408
+ text-align: center;
409
+ }
410
+ #love svg {
411
+ color: rgba(252, 165, 165, 1);
412
+ width: 1.25rem;
413
+ height: 1.25rem;
414
+ display: inline;
415
+ margin-top: -0.25rem;
416
+ }
417
+ @media screen and (min-width: 768px) {
418
+ #hero {
419
+ grid-template-columns: repeat(2, minmax(0, 1fr));
420
+ }
421
+ #hero .logo-container {
422
+ display: flex;
423
+ }
424
+ #middle-content {
425
+ grid-template-columns: repeat(2, minmax(0, 1fr));
426
+ gap: 4rem
427
+ }
428
+ }
429
+ </style>
430
+ <div class="wrapper">
431
+ <div class="container">
432
+ <!-- WELCOME -->
433
+ <div id="welcome">
434
+ <h1>
435
+ <span> Hello there, </span>
436
+ Welcome <%= appName %> 👋
437
+ </h1>
438
+ </div>
439
+ <!-- HERO -->
440
+ <div id="hero" class="rounded">
441
+ <div class="text-container">
442
+ <h2>
443
+ <svg
444
+ fill="none"
445
+ stroke="currentColor"
446
+ viewBox="0 0 24 24"
447
+ xmlns="http://www.w3.org/2000/svg"
448
+ >
449
+ <path
450
+ stroke-linecap="round"
451
+ stroke-linejoin="round"
452
+ stroke-width="2"
453
+ 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"
454
+ />
455
+ </svg>
456
+ <span>You&apos;re up and running</span>
457
+ </h2>
458
+ <a href="#commands"> What&apos;s next? </a>
459
+ </div>
460
+ <div class="logo-container">
461
+ <svg
462
+ fill="currentColor"
463
+ role="img"
464
+ viewBox="0 0 24 24"
465
+ xmlns="http://www.w3.org/2000/svg"
466
+ >
467
+ <path
468
+ 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"
469
+ />
470
+ </svg>
471
+ </div>
472
+ </div>
473
+ <!-- MIDDLE CONTENT -->
474
+ <div id="middle-content">
475
+ <div id="middle-left-content">
476
+ <div id="learning-materials" class="rounded shadow">
477
+ <h2>Learning materials</h2>
478
+ <a href="https://nx.dev/getting-started/intro?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
479
+ <svg
480
+ fill="none"
481
+ stroke="currentColor"
482
+ viewBox="0 0 24 24"
483
+ xmlns="http://www.w3.org/2000/svg"
484
+ >
485
+ <path
486
+ stroke-linecap="round"
487
+ stroke-linejoin="round"
488
+ stroke-width="2"
489
+ 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"
490
+ />
491
+ </svg>
492
+ <span>
493
+ Documentation
494
+ <span> Everything is in there </span>
495
+ </span>
496
+ <svg
497
+ fill="none"
498
+ stroke="currentColor"
499
+ viewBox="0 0 24 24"
500
+ xmlns="http://www.w3.org/2000/svg"
501
+ >
502
+ <path
503
+ stroke-linecap="round"
504
+ stroke-linejoin="round"
505
+ stroke-width="2"
506
+ d="M9 5l7 7-7 7"
507
+ />
508
+ </svg>
509
+ </a>
510
+ <a href="https://nx.dev/blog?utm_source=nx-project" target="_blank" rel="noreferrer" class="list-item-link">
511
+ <svg
512
+ fill="none"
513
+ stroke="currentColor"
514
+ viewBox="0 0 24 24"
515
+ xmlns="http://www.w3.org/2000/svg"
516
+ >
517
+ <path
518
+ stroke-linecap="round"
519
+ stroke-linejoin="round"
520
+ stroke-width="2"
521
+ 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"
522
+ />
523
+ </svg>
524
+ <span>
525
+ Blog
526
+ <span> Changelog, features & events </span>
527
+ </span>
528
+ <svg
529
+ fill="none"
530
+ stroke="currentColor"
531
+ viewBox="0 0 24 24"
532
+ xmlns="http://www.w3.org/2000/svg"
533
+ >
534
+ <path
535
+ stroke-linecap="round"
536
+ stroke-linejoin="round"
537
+ stroke-width="2"
538
+ d="M9 5l7 7-7 7"
539
+ />
540
+ </svg>
541
+ </a>
542
+ <a href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1" target="_blank" rel="noreferrer" class="list-item-link">
543
+ <svg
544
+ role="img"
545
+ viewBox="0 0 24 24"
546
+ fill="currentColor"
547
+ xmlns="http://www.w3.org/2000/svg"
548
+ >
549
+ <title>YouTube</title>
550
+ <path
551
+ 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"
552
+ />
553
+ </svg>
554
+ <span>
555
+ YouTube channel
556
+ <span> Nx Show, talks & tutorials </span>
557
+ </span>
558
+ <svg
559
+ fill="none"
560
+ stroke="currentColor"
561
+ viewBox="0 0 24 24"
562
+ xmlns="http://www.w3.org/2000/svg"
563
+ >
564
+ <path
565
+ stroke-linecap="round"
566
+ stroke-linejoin="round"
567
+ stroke-width="2"
568
+ d="M9 5l7 7-7 7"
569
+ />
570
+ </svg>
571
+ </a>
572
+ <a href="<%= tutorialUrl %>" target="_blank" rel="noreferrer" class="list-item-link">
573
+ <svg
574
+ fill="none"
575
+ stroke="currentColor"
576
+ viewBox="0 0 24 24"
577
+ xmlns="http://www.w3.org/2000/svg"
578
+ >
579
+ <path
580
+ stroke-linecap="round"
581
+ stroke-linejoin="round"
582
+ stroke-width="2"
583
+ 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"
584
+ />
585
+ </svg>
586
+ <span>
587
+ Interactive tutorials
588
+ <span> Create an app, step-by-step </span>
589
+ </span>
590
+ <svg
591
+ fill="none"
592
+ stroke="currentColor"
593
+ viewBox="0 0 24 24"
594
+ xmlns="http://www.w3.org/2000/svg"
595
+ >
596
+ <path
597
+ stroke-linecap="round"
598
+ stroke-linejoin="round"
599
+ stroke-width="2"
600
+ d="M9 5l7 7-7 7"
601
+ />
602
+ </svg>
603
+ </a>
604
+ </div>
605
+ <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
606
+ <svg
607
+ fill="currentColor"
608
+ role="img"
609
+ viewBox="0 0 24 24"
610
+ xmlns="http://www.w3.org/2000/svg"
611
+ >
612
+ <path
613
+ 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"
614
+ />
615
+ </svg>
616
+ <span>
617
+ Nx is open source
618
+ <span> Love Nx? Give us a star! </span>
619
+ </span>
620
+ </a>
621
+ </div>
622
+ <div id="other-links">
623
+ <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">
624
+ <svg
625
+ fill="currentColor"
626
+ role="img"
627
+ viewBox="0 0 24 24"
628
+ xmlns="http://www.w3.org/2000/svg"
629
+ >
630
+ <title>Visual Studio Code</title>
631
+ <path
632
+ 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"
633
+ />
634
+ </svg>
635
+ <span>
636
+ Install Nx Console for VSCode
637
+ <span>The official VSCode extension for Nx.</span>
638
+ </span>
639
+ </a>
640
+ <a
641
+ class="button-pill rounded shadow nx-console-jetbrains"
642
+ href="https://plugins.jetbrains.com/plugin/21060-nx-console"
643
+ target="_blank"
644
+ rel="noreferrer"
645
+ >
646
+ <svg
647
+ height="48"
648
+ width="48"
649
+ viewBox="20 20 60 60"
650
+ xmlns="http://www.w3.org/2000/svg"
651
+ >
652
+ <path d="m22.5 22.5h60v60h-60z" />
653
+ <g fill="#fff">
654
+ <path d="m29.03 71.25h22.5v3.75h-22.5z" />
655
+ <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" />
656
+ <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
657
+ <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
658
+ <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" />
659
+ <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" />
660
+ <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" />
661
+ <path d="m56.46 43.05h2.6v9.37h-2.6z" />
662
+ <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
663
+ <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" />
664
+ </g>
665
+ </svg>
666
+ <span>
667
+ Install Nx Console for JetBrains
668
+ <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
669
+ </span>
670
+ </a>
671
+ <div id="nx-cloud" class="rounded shadow">
672
+ <div>
673
+ <svg id="nx-cloud-logo" role="img" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="transparent" viewBox="0 0 24 24">
674
+ <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" />
675
+ <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" />
676
+ </svg>
677
+ <h2>
678
+ Nx Cloud
679
+ <span>
680
+ Enable faster CI & better DX
681
+ </span>
682
+ </h2>
683
+ </div>
684
+ <p>
685
+ Your Nx Cloud remote cache setup is almost complete.
686
+ </p>
687
+
688
+ <a
689
+ href="<%= connectCloudUrl %>"
690
+ target="_blank"
691
+ rel="noreferrer"
692
+ >
693
+ Click here to finish
694
+ </a>
695
+ </div>
696
+ </div>
697
+ </div>
698
+ <!-- COMMANDS -->
699
+ <div id="commands" class="rounded shadow">
700
+ <h2>Next steps</h2>
701
+ <p>Here are some things you can do with Nx:</p>
702
+ <details>
703
+ <summary>
704
+ <svg
705
+ fill="none"
706
+ stroke="currentColor"
707
+ viewBox="0 0 24 24"
708
+ xmlns="http://www.w3.org/2000/svg"
709
+ >
710
+ <path
711
+ stroke-linecap="round"
712
+ stroke-linejoin="round"
713
+ stroke-width="2"
714
+ 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"
715
+ />
716
+ </svg>
717
+ Build, test and lint your app
718
+ </summary>
719
+ <pre><span># Build</span>
720
+ nx build
721
+ <span># Test</span>
722
+ nx test
723
+ <span># Lint</span>
724
+ nx lint
725
+ <span># Run them together!</span>
726
+ nx run-many -t build test lint</pre>
727
+ </details>
728
+ <details>
729
+ <summary>
730
+ <svg
731
+ fill="none"
732
+ stroke="currentColor"
733
+ viewBox="0 0 24 24"
734
+ xmlns="http://www.w3.org/2000/svg"
735
+ >
736
+ <path
737
+ strokeLinecap="round"
738
+ strokeLinejoin="round"
739
+ strokeWidth="2"
740
+ 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"
741
+ />
742
+ </svg>
743
+ View project details
744
+ </summary>
745
+ <pre>nx show project <%= appName %></pre>
746
+ </details>
747
+
748
+ <details>
749
+ <summary>
750
+ <svg
751
+ fill="none"
752
+ stroke="currentColor"
753
+ viewBox="0 0 24 24"
754
+ xmlns="http://www.w3.org/2000/svg"
755
+ >
756
+ <path
757
+ stroke-linecap="round"
758
+ stroke-linejoin="round"
759
+ stroke-width="2"
760
+ 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"
761
+ />
762
+ </svg>
763
+ View interactive project graph
764
+ </summary>
765
+ <pre>nx graph</pre>
766
+ </details>
767
+
768
+ <details>
769
+ <summary>
770
+ <svg
771
+ fill="none"
772
+ stroke="currentColor"
773
+ viewBox="0 0 24 24"
774
+ xmlns="http://www.w3.org/2000/svg"
775
+ >
776
+ <path
777
+ stroke-linecap="round"
778
+ stroke-linejoin="round"
779
+ stroke-width="2"
780
+ 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"
781
+ />
782
+ </svg>
783
+ Add UI library
784
+ </summary>
785
+ <pre><span># Generate UI lib</span>
786
+ nx g &#64;nx/angular:lib ui
787
+ <span># Add a component</span>
788
+ nx g &#64;nx/angular:component ui/src/lib/button</pre>
789
+ </details>
790
+ </div>
791
+ <p id="love">
792
+ Carefully crafted with
793
+ <svg
794
+ fill="currentColor"
795
+ stroke="none"
796
+ viewBox="0 0 24 24"
797
+ xmlns="http://www.w3.org/2000/svg"
798
+ >
799
+ <path
800
+ stroke-linecap="round"
801
+ stroke-linejoin="round"
802
+ stroke-width="2"
803
+ 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"
804
+ />
805
+ </svg>
806
+ </p>
807
+ </div>
808
+ </div>
809
+ `,
810
+ styles: [],
811
+ encapsulation: ViewEncapsulation.None,
812
+ })
813
+ export class NxWelcomeComponent {}