@nx/angular 19.6.0-canary.20240808-333ab77 → 19.6.0-canary.20240813-c72ba9b

Sign up to get free protection for your applications and to get access to all the features.
@@ -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 {}