Skip to content

Commit cdab5bc

Browse files
HitkoDevHitkoDev
committed
chore: migrate to angular control flow
1 parent e3d977b commit cdab5bc

File tree

66 files changed

+663
-578
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

66 files changed

+663
-578
lines changed

‎packages/color-picker/src/lib/color-picker/color-picker.component.html‎

Lines changed: 314 additions & 291 deletions
Large diffs are not rendered by default.

‎packages/color-picker/src/lib/color-picker/color-picker.component.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,11 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewChecked
127127
}
128128
}
129129

130+
@HostListener('click', ['$event'])
131+
onClick(event: MouseEvent) {
132+
event.stopPropagation()
133+
}
134+
130135
@HostListener('document:mousedown', ['$event'])
131136
@HostListener('document:focusin', ['$event'])
132137
onFocusChange(event: MouseEvent | FocusEvent) {

‎packages/demo/src/app/app.component.html‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -36,30 +36,36 @@
3636
(@expandCollapseNav.done)="animationDone = true">
3737
<div class="position-sticky p-2 sidebar-sticky">
3838
<ul class="nav flex-column">
39+
@for (item of menuItems; track item) {
3940
<li class="nav-item"
40-
*ngFor="let item of menuItems"
4141
@blockInitialRenderAnimation>
4242
<a [routerLink]="item.link"
4343
class="nav-link"
4444
routerLinkActive="active"
4545
#active="routerLinkActive"
4646
(click)="toggle(true)">
4747
{{ item.label }}</a>
48-
<ul *ngIf="active.isActive && item.children?.length && item.children as submenu"
49-
class="nav flex-column"
48+
@if (active.isActive && item.children?.length && item.children; as submenu) {
49+
<ul class="nav flex-column"
5050
@expandCollapse>
51-
<li class="nav-item"
52-
*ngFor="let child of submenu"><a *ngIf="child.link"
53-
[routerLink]="[item.link, child.link]"
51+
@for (child of submenu; track child) {
52+
<li class="nav-item">@if (child.link) {
53+
<a [routerLink]="[item.link, child.link]"
5454
class="nav-link"
5555
routerLinkActive="active"
5656
(click)="toggle(true)">
57-
{{ child.label }}</a><a *ngIf="child.url"
58-
href="{{ child.url }}"
57+
{{ child.label }}</a>
58+
}@if (child.url) {
59+
<a href="{{ child.url }}"
5960
class="nav-link">
60-
{{ child.label }}</a></li>
61+
{{ child.label }}</a>
62+
}
63+
</li>
64+
}
6165
</ul>
66+
}
6267
</li>
68+
}
6369
</ul>
6470
</div>
6571
</nav>

‎packages/demo/src/app/code-block/code-block.component.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1-
<ng-container *ngIf="code">
2-
<pre><code [nxtHighlightAuto]="code"
3-
[languages]="languages ?? []"></code></pre>
4-
5-
<button *ngIf="copy"
6-
type="button"
7-
class="btn"
8-
[tooltip]="'Copied to clipboard'"
9-
[triggers]="''"
10-
#tooltip="bs-tooltip"
11-
appClipboard
12-
[text]="code"
13-
(clipboardSuccess)="show(tooltip)"><svg viewBox="0 0 16 16">
14-
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
15-
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
16-
</svg></button>
17-
</ng-container>
1+
@if (code) {
2+
<pre><code [nxtHighlightAuto]="code"
3+
[languages]="languages ?? []"></code></pre>
4+
@if (copy) {
5+
<button type="button"
6+
class="btn"
7+
[tooltip]="'Copied to clipboard'"
8+
[triggers]="''"
9+
#tooltip="bs-tooltip"
10+
appClipboard
11+
[text]="code"
12+
(clipboardSuccess)="show(tooltip)"><svg viewBox="0 0 16 16">
13+
<path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
14+
<path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
15+
</svg></button>
16+
}
17+
}

‎packages/demo/src/app/code-block/code-block.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { CommonModule } from '@angular/common'
21
import { Component, Input, ViewEncapsulation } from '@angular/core'
32
import { TooltipDirective, TooltipModule } from 'ngx-bootstrap/tooltip'
43
import { HighlightModule } from 'nxt-highlightjs'
@@ -7,7 +6,6 @@ import { ClipboardDirective } from './clipboard.directive'
76
@Component({
87
selector: 'app-code-block',
98
imports: [
10-
CommonModule,
119
ClipboardDirective,
1210
HighlightModule,
1311
TooltipModule

‎packages/demo/src/app/color-picker/color-picker/color-picker.component.html‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
<app-meta *ngIf="!loading"
2-
title="nxt-color-picker"
1+
@if (!loading) {
2+
<app-meta title="nxt-color-picker"
33
(done)="doneCb()"
44
description="A color picker widget for Angular with no dependencies."></app-meta>
5+
}
56
<app-content-wrap>
67
<h1>Angular color picker</h1>
78
<p>
@@ -30,18 +31,20 @@ <h2>Demo <div class="btn-group"
3031
<ul *dropdownMenu
3132
class="dropdown-menu"
3233
role="menu">
33-
<li *ngFor="let example of examples | async; trackBy exampleTrackBy; index as i"
34-
role="menuitem"><a class="dropdown-item"
34+
@for (example of examples | async; track example; let i = $index) {
35+
<li role="menuitem"><a class="dropdown-item"
3536
routerLink="."
3637
fragment="example-{{ i }}">{{ example.name }}</a></li>
38+
}
3739
</ul>
3840
</div>
3941
</h2>
4042

4143
<hr class="no-padding">
4244

43-
<app-example *ngFor="let example of examples | async; trackBy exampleTrackBy; index as i"
44-
[injector]="injector"
45+
@for (example of examples | async; track example; let i = $index) {
46+
<app-example [injector]="injector"
4547
[config]="example"
4648
id="example-{{ i }}"></app-example>
49+
}
4750
</app-content-wrap>

‎packages/demo/src/app/color-picker/color-picker/color-picker.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { OverlayContainer } from '@angular/cdk/overlay'
22
import { Platform } from '@angular/cdk/platform'
3-
import { CommonModule } from '@angular/common'
3+
44
import { Component, Injector, OnInit, PendingTasks, DOCUMENT } from '@angular/core'
55
import { RouterModule } from '@angular/router'
66
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'
@@ -14,7 +14,6 @@ import { WaitLoad } from '../../utils/wait-load.class'
1414
templateUrl: './color-picker.component.html',
1515
styleUrls: ['./color-picker.component.scss'],
1616
imports: [
17-
CommonModule,
1817
MetaDirective,
1918
ContentWrapComponent,
2019
RouterModule,

‎packages/demo/src/app/color-picker/examples/as-component/as-component.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
[(nxtColor)]="colors[selectedColor]"></ng-container>
55
</div>
66
<div>
7-
<div *ngFor="let color of colors; index as i"
8-
class="color-box"
7+
@for (color of colors; track color; let i = $index) {
8+
<div class="color-box"
99
[style.background]="color"
1010
(click)="selectedColor = i"
1111
(keydown.enter)="selectedColor = i"
1212
tabindex="0"></div>
13+
}
1314
</div>

‎packages/demo/src/app/color-picker/examples/as-component/as-component.component.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { CommonModule } from '@angular/common'
21
import { Component, ViewEncapsulation } from '@angular/core'
32
import { ColorPickerModule } from 'nxt-color-picker'
43

@@ -8,8 +7,7 @@ import { ColorPickerModule } from 'nxt-color-picker'
87
styleUrls: ['./as-component.component.scss'],
98
encapsulation: ViewEncapsulation.Emulated,
109
imports: [
11-
ColorPickerModule,
12-
CommonModule
10+
ColorPickerModule
1311
]
1412
})
1513
export class AsComponentComponent {

‎packages/demo/src/app/color-picker/getting-started/getting-started.component.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { CommonModule } from '@angular/common'
21
import { Component, ViewEncapsulation } from '@angular/core'
32
import { CodeBlockComponent } from '../../code-block/code-block.component'
43
import docs from '../documentation.json'
@@ -13,7 +12,6 @@ import { OutputsTableComponent } from '../../outputs-table/outputs-table.compone
1312
styleUrls: ['./getting-started.component.scss'],
1413
encapsulation: ViewEncapsulation.Emulated,
1514
imports: [
16-
CommonModule,
1715
MetaDirective,
1816
ContentWrapComponent,
1917
CodeBlockComponent,

0 commit comments

Comments
 (0)