Skip to content

Commit b201c74

Browse files
xidedixxidedix
committed
refactor(app): control-flow-migration, move imports of DOCUMENT from @angular/common to @angular/core 
1 parent e9fbd2b commit b201c74

15 files changed

+194
-159
lines changed

‎projects/coreui-angular/src/lib/aside/app-aside.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding } from '@angular/core';
2-
import { DOCUMENT } from '@angular/common';
1+
import { Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding, DOCUMENT } from '@angular/core';
2+
33

44
import { asideMenuCssClasses } from '../shared';
55

‎projects/coreui-angular/src/lib/breadcrumb/app-breadcrumb.component.ts‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
2-
import {AsyncPipe, DOCUMENT, NgClass, NgForOf, NgIf} from '@angular/common';
1+
import { Component, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2, DOCUMENT } from '@angular/core';
2+
import { AsyncPipe, NgClass } from '@angular/common';
33

44
import { AppBreadcrumbService } from './app-breadcrumb.service';
55
import { Replace } from '../shared';
@@ -9,16 +9,21 @@ import { RouterLink } from '@angular/router';
99
@Component({
1010
selector: 'app-breadcrumb',
1111
template: `
12-
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last = last>
13-
<li class="breadcrumb-item"
14-
*ngIf="breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)"
12+
@for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
13+
@if (breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)) {
14+
<li class="breadcrumb-item"
1515
[ngClass]="{active: last}">
16-
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
17-
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
18-
</li>
19-
</ng-template>
20-
`,
21-
imports: [NgIf, NgClass, RouterLink, NgForOf, AsyncPipe]
16+
@if (!last) {
17+
<a [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
18+
}
19+
@if (last) {
20+
<span [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
21+
}
22+
</li>
23+
}
24+
}
25+
`,
26+
imports: [NgClass, RouterLink, AsyncPipe]
2227
})
2328
export class AppBreadcrumbComponent implements OnInit, OnDestroy {
2429
@Input() fixed?: boolean;

‎projects/coreui-angular/src/lib/breadcrumb/cui-breadcrumb.component.html‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
<ol class="breadcrumb">
2-
<ng-template ngFor let-breadcrumb [ngForOf]="breadcrumbs | async" let-last = last>
3-
<li class="breadcrumb-item"
4-
*ngIf="breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)"
2+
@for (breadcrumb of breadcrumbs | async; track breadcrumb; let last = $last) {
3+
@if (breadcrumb.label.title && (breadcrumb.url.slice(-1) == '/' || last)) {
4+
<li class="breadcrumb-item"
55
[ngClass]="{active: last}">
6-
<a *ngIf="!last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
7-
<span *ngIf="last" [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
8-
</li>
9-
</ng-template>
6+
@if (!last) {
7+
<a [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</a>
8+
}
9+
@if (last) {
10+
<span [routerLink]="breadcrumb.url">{{breadcrumb.label.title}}</span>
11+
}
12+
</li>
13+
}
14+
}
1015
<ng-content />
1116
</ol>

‎projects/coreui-angular/src/lib/breadcrumb/cui-breadcrumb.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
2-
import { DOCUMENT, NgIf, NgClass, AsyncPipe, NgForOf } from '@angular/common';
1+
import { Component, Inject, Input, OnDestroy, OnInit, Renderer2, DOCUMENT } from '@angular/core';
2+
import { NgClass, AsyncPipe } from '@angular/common';
33
import { RouterLink } from '@angular/router';
44
import { Observable } from 'rxjs';
55

@@ -9,7 +9,7 @@ import { AppBreadcrumbService } from './app-breadcrumb.service';
99
// tslint:disable-next-line:component-selector
1010
selector: 'cui-breadcrumb',
1111
templateUrl: './cui-breadcrumb.component.html',
12-
imports: [NgIf, NgClass, RouterLink, AsyncPipe, NgForOf]
12+
imports: [NgClass, RouterLink, AsyncPipe]
1313
})
1414
export class CuiBreadcrumbComponent implements OnInit, OnDestroy {
1515
@Input() fixed?: boolean;

‎projects/coreui-angular/src/lib/footer/app-footer.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
2-
import { DOCUMENT } from '@angular/common';
1+
import { Component, HostBinding, Inject, Input, OnDestroy, OnInit, Renderer2, DOCUMENT } from '@angular/core';
2+
33

44
@Component({
55
selector: 'app-footer, cui-footer',

‎projects/coreui-angular/src/lib/header/app-header.component.html‎

Lines changed: 27 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,44 @@
1-
<ng-template [ngIf]="mobileSidebarToggler != false">
1+
@if (mobileSidebarToggler != false) {
22
<button class="navbar-toggler {{sidebarTogglerMobileClass}}" type="button" appSidebarToggler>
33
<span class="navbar-toggler-icon"></span>
44
</button>
5-
</ng-template>
5+
}
66
<a class="navbar-brand" [routerLink]="navbarBrandRouterLink">
7-
<ng-template [ngIf]="navbarBrandImg">
8-
<img *ngIf="navbarBrand"
9-
[appHtmlAttr]="navbarBrand"
10-
[ngClass]="'navbar-brand'">
11-
<img *ngIf="navbarBrandFull"
12-
[appHtmlAttr]="navbarBrandFull"
13-
[ngClass]="'navbar-brand-full'">
14-
<img *ngIf="navbarBrandMinimized"
15-
[appHtmlAttr]="navbarBrandMinimized"
16-
[ngClass]="'navbar-brand-minimized'">
17-
</ng-template>
18-
<ng-template [ngIf]="!navbarBrandImg">
7+
@if (navbarBrandImg) {
8+
@if (navbarBrand) {
9+
<img
10+
[appHtmlAttr]="navbarBrand"
11+
[ngClass]="'navbar-brand'">
12+
}
13+
@if (navbarBrandFull) {
14+
<img
15+
[appHtmlAttr]="navbarBrandFull"
16+
[ngClass]="'navbar-brand-full'">
17+
}
18+
@if (navbarBrandMinimized) {
19+
<img
20+
[appHtmlAttr]="navbarBrandMinimized"
21+
[ngClass]="'navbar-brand-minimized'">
22+
}
23+
}
24+
@if (!navbarBrandImg) {
1925
<div class="navbar-brand-full" [innerHTML]="navbarBrandText.text"></div>
2026
<div class="navbar-brand-minimized" [innerHTML]="navbarBrandText.icon"></div>
21-
</ng-template>
27+
}
2228
</a>
23-
<ng-template [ngIf]="sidebarToggler != false">
29+
@if (sidebarToggler != false) {
2430
<button class="navbar-toggler {{sidebarTogglerClass}}" type="button" [appSidebarToggler]="sidebarToggler">
2531
<span class="navbar-toggler-icon"></span>
2632
</button>
27-
</ng-template>
33+
}
2834
<ng-content />
29-
<ng-template [ngIf]="asideMenuToggler != false">
35+
@if (asideMenuToggler != false) {
3036
<button class="navbar-toggler {{asideTogglerClass}}" type="button" [appAsideMenuToggler]="asideMenuToggler">
3137
<span class="navbar-toggler-icon"></span>
3238
</button>
33-
</ng-template>
34-
<ng-template [ngIf]="mobileAsideMenuToggler != false">
39+
}
40+
@if (mobileAsideMenuToggler != false) {
3541
<button class="navbar-toggler {{asideTogglerMobileClass}}" type="button" appAsideMenuToggler>
3642
<span class="navbar-toggler-icon"></span>
3743
</button>
38-
</ng-template>
44+
}

‎projects/coreui-angular/src/lib/header/app-header.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import { Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding } from '@angular/core';
2-
import { DOCUMENT, NgClass, NgIf } from '@angular/common';
1+
import { Component, Input, OnInit, OnDestroy, Inject, Renderer2, HostBinding, DOCUMENT } from '@angular/core';
2+
import { NgClass } from '@angular/common';
33
import { RouterLink } from '@angular/router';
44
import { AsideToggleDirective, HtmlAttributesDirective, SidebarToggleDirective } from '../shared';
55

66
@Component({
77
selector: 'app-header, cui-header',
88
templateUrl: './app-header.component.html',
99
standalone: true,
10-
imports: [RouterLink, NgIf, NgClass, SidebarToggleDirective, HtmlAttributesDirective, AsideToggleDirective]
10+
imports: [RouterLink, NgClass, SidebarToggleDirective, HtmlAttributesDirective, AsideToggleDirective]
1111
})
1212
export class AppHeaderComponent implements OnInit, OnDestroy {
1313

‎projects/coreui-angular/src/lib/shared/layout/layout.directive.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2 } from '@angular/core';
2-
import { DOCUMENT } from '@angular/common';
1+
import { Directive, ElementRef, HostListener, Inject, Input, OnInit, Renderer2, DOCUMENT } from '@angular/core';
2+
33

44
import { asideMenuCssClasses, sidebarCssClasses } from '../classes';
55
import { ClassToggler } from '../toggle-classes';

‎projects/coreui-angular/src/lib/shared/toggle-classes.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { Inject, Injectable, Renderer2 } from '@angular/core';
2-
import { DOCUMENT } from '@angular/common';
1+
import { Inject, Injectable, Renderer2, DOCUMENT } from '@angular/core';
2+
33

44
const RemoveClasses = (NewClassNames: string[]) => {
55
const MatchClasses = NewClassNames.map((Class) => document.body.classList.contains(Class));

‎projects/coreui-angular/src/lib/sidebar/app-sidebar-nav/app-sidebar-nav-items.component.ts‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Component, Inject, Input, Renderer2, forwardRef } from '@angular/core';
1+
import { Component, Inject, Input, Renderer2, forwardRef, DOCUMENT } from '@angular/core';
22
import { Router } from '@angular/router';
3-
import { DOCUMENT, NgClass, NgFor, NgIf, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common';
3+
import { NgClass } from '@angular/common';
44

55
import { SidebarNavHelper } from '../app-sidebar-nav.service';
66
import { INavData } from '../app-sidebar-nav';
@@ -21,54 +21,54 @@ export abstract class DropdownToken { }
2121
@Component({
2222
selector: 'app-sidebar-nav-items, cui-sidebar-nav-items',
2323
template: `
24-
<ng-container *ngFor="let item of items">
25-
<ng-container [ngSwitch]="helper.itemType(item)">
26-
<app-sidebar-nav-dropdown
27-
*ngSwitchCase="'dropdown'"
28-
[item]="item"
29-
[class.open]="helper.isActive(router, item)"
30-
[ngClass]="item | appSidebarNavItemClass"
31-
appNavDropdown>
32-
</app-sidebar-nav-dropdown>
33-
<app-sidebar-nav-divider
34-
*ngSwitchCase="'divider'"
35-
[item]="item"
36-
[ngClass]="item | appSidebarNavItemClass"
37-
[appHtmlAttr]="item.attributes">
38-
</app-sidebar-nav-divider>
39-
<app-sidebar-nav-title
40-
*ngSwitchCase="'title'"
41-
[item]="item"
42-
[ngClass]="item | appSidebarNavItemClass"
43-
[appHtmlAttr]="item.attributes">
44-
</app-sidebar-nav-title>
45-
<app-sidebar-nav-label
46-
*ngSwitchCase="'label'"
47-
[item]="item"
48-
class="nav-item"
49-
[ngClass]="item | appSidebarNavItemClass">
50-
</app-sidebar-nav-label>
51-
<ng-container
52-
*ngSwitchCase="'empty'">
53-
</ng-container>
54-
<app-sidebar-nav-link
55-
*ngSwitchDefault
56-
[item]="item"
57-
class="nav-item"
58-
[ngClass]="item | appSidebarNavItemClass"
59-
(linkClick)="hideMobile()"
60-
>
61-
</app-sidebar-nav-link>
62-
</ng-container>
63-
</ng-container>
64-
`,
24+
@for (item of items; track item) {
25+
@switch (helper.itemType(item)) {
26+
@case ('dropdown') {
27+
<app-sidebar-nav-dropdown
28+
[item]="item"
29+
[class.open]="helper.isActive(router, item)"
30+
[ngClass]="item | appSidebarNavItemClass"
31+
appNavDropdown>
32+
</app-sidebar-nav-dropdown>
33+
}
34+
@case ('divider') {
35+
<app-sidebar-nav-divider
36+
[item]="item"
37+
[ngClass]="item | appSidebarNavItemClass"
38+
[appHtmlAttr]="item.attributes">
39+
</app-sidebar-nav-divider>
40+
}
41+
@case ('title') {
42+
<app-sidebar-nav-title
43+
[item]="item"
44+
[ngClass]="item | appSidebarNavItemClass"
45+
[appHtmlAttr]="item.attributes">
46+
</app-sidebar-nav-title>
47+
}
48+
@case ('label') {
49+
<app-sidebar-nav-label
50+
[item]="item"
51+
class="nav-item"
52+
[ngClass]="item | appSidebarNavItemClass">
53+
</app-sidebar-nav-label>
54+
}
55+
@case ('empty') {
56+
}
57+
@default {
58+
<app-sidebar-nav-link
59+
[item]="item"
60+
class="nav-item"
61+
[ngClass]="item | appSidebarNavItemClass"
62+
(linkClick)="hideMobile()"
63+
>
64+
</app-sidebar-nav-link>
65+
}
66+
}
67+
}
68+
`,
6569
standalone: true,
6670
// providers: [{provide: DropdownToken, useExisting: forwardRef(()=> AppSidebarNavDropdownComponent)}],
6771
imports: [
68-
NgFor,
69-
NgSwitch,
70-
NgSwitchCase,
71-
NgSwitchDefault,
7272
NgClass,
7373
HtmlAttributesDirective,
7474
AppSidebarNavItemClassPipe,
@@ -77,8 +77,8 @@ export abstract class DropdownToken { }
7777
AppSidebarNavLabelComponent,
7878
AppSidebarNavTitleComponent,
7979
AppSidebarNavDividerComponent,
80-
NavDropdownDirective,
81-
]
80+
NavDropdownDirective
81+
]
8282
})
8383
export class AppSidebarNavItemsComponent {
8484

@@ -111,24 +111,28 @@ export class AppSidebarNavItemsComponent {
111111
selector: 'app-sidebar-nav-dropdown, cui-sidebar-nav-dropdown',
112112
template: `
113113
<a class="nav-link nav-dropdown-toggle"
114-
appNavDropdownToggle
115-
[appHtmlAttr]="item.attributes">
116-
<i *ngIf="helper.hasIcon(item)" [ngClass]="item | appSidebarNavIcon"></i>
114+
appNavDropdownToggle
115+
[appHtmlAttr]="item.attributes">
116+
@if (helper.hasIcon(item)) {
117+
<i [ngClass]="item | appSidebarNavIcon"></i>
118+
}
117119
<ng-container>{{item.name}}</ng-container>
118-
<span *ngIf="helper.hasBadge(item)" [ngClass]="item | appSidebarNavBadge">{{ item.badge?.text }}</span>
120+
@if (helper.hasBadge(item)) {
121+
<span [ngClass]="item | appSidebarNavBadge">{{ item.badge?.text }}</span>
122+
}
119123
</a>
120124
<app-sidebar-nav-items
121125
class="nav-dropdown-items"
122126
[items]="item.children ?? []">
123127
</app-sidebar-nav-items>
124-
`,
128+
`,
125129
styles: [
126130
'.nav-dropdown-toggle { cursor: pointer; }',
127131
'.nav-dropdown-items { display: block; }'
128132
],
129133
providers: [SidebarNavHelper],
130134
standalone: true,
131-
imports: [NgIf, NgClass, HtmlAttributesDirective, AppSidebarNavBadgePipe, AppSidebarNavIconPipe, AppSidebarNavItemsComponent, NavDropdownToggleDirective]
135+
imports: [NgClass, HtmlAttributesDirective, AppSidebarNavBadgePipe, AppSidebarNavIconPipe, AppSidebarNavItemsComponent, NavDropdownToggleDirective]
132136
})
133137
export class AppSidebarNavDropdownComponent {
134138
@Input() item: INavData = {};

0 commit comments

Comments
 (0)