Skip to content

Commit 6ca6472

Browse files
Akshat55Akshat55
authored
feat: migrate to new control flow syntax (#3072)
Signed-off-by: Akshat Patel <[email protected]>
1 parent 8f4af0f commit 6ca6472

File tree

131 files changed

+3011
-2547
lines changed

Some content is hidden

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

131 files changed

+3011
-2547
lines changed

‎src/accordion/accordion-item.component.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,27 @@ import {
1818
(click)="toggleExpanded()"
1919
class="cds--accordion__heading">
2020
<svg cdsIcon="chevron--right" size="16" class="cds--accordion__arrow"></svg>
21-
<p *ngIf="!isTemplate(title)"
22-
class="cds--accordion__title"
23-
[ngClass]="{
24-
'cds--skeleton__text': skeleton
25-
}">
26-
{{!skeleton ? title : null}}
27-
</p>
28-
<ng-template
29-
*ngIf="isTemplate(title)"
30-
[ngTemplateOutlet]="title"
31-
[ngTemplateOutletContext]="context">
32-
</ng-template>
21+
@if (isTemplate(title)) {
22+
<ng-template [ngTemplateOutlet]="title" [ngTemplateOutletContext]="context" />
23+
} @else {
24+
<p
25+
class="cds--accordion__title"
26+
[ngClass]="{
27+
'cds--skeleton__text': skeleton
28+
}">
29+
{{!skeleton ? title : null}}
30+
</p>
31+
}
3332
</button>
3433
<div class="cds--accordion__wrapper">
3534
<div [id]="id" class="cds--accordion__content">
36-
<ng-content *ngIf="!skeleton; else skeletonTemplate"></ng-content>
37-
<ng-template #skeletonTemplate>
35+
@if (skeleton) {
3836
<p class="cds--skeleton__text" style="width: 90%"></p>
3937
<p class="cds--skeleton__text" style="width: 80%"></p>
4038
<p class="cds--skeleton__text" style="width: 95%"></p>
41-
</ng-template>
39+
} @else {
40+
<ng-content />
41+
}
4242
</div>
4343
</div>
4444
`,

‎src/accordion/accordion.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { AccordionItem } from "./accordion-item.component";
3131
'cds--layout--size-lg': size === 'lg'
3232
}"
3333
role="list">
34-
<ng-content></ng-content>
34+
<ng-content />
3535
</div>
3636
`
3737
})

‎src/breadcrumb/breadcrumb-item.component.ts‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@ import { Router } from "@angular/router";
1212
@Component({
1313
selector: "cds-breadcrumb-item, ibm-breadcrumb-item",
1414
template: `
15-
<a
16-
class="cds--link"
17-
[href]="(skeleton ? '/#' : href)"
18-
(click)="navigate($event)"
19-
[attr.aria-current]="(current ? ariaCurrent : null)"
20-
*ngIf="useTemplate(); else content">
21-
<ng-container *ngTemplateOutlet="content"></ng-container>
22-
</a>
23-
<ng-template #content>
24-
<ng-content></ng-content>
25-
</ng-template>`
15+
@if (useTemplate()) {
16+
<a
17+
class="cds--link"
18+
[href]="(skeleton ? '/#' : href)"
19+
(click)="navigate($event)"
20+
[attr.aria-current]="(current ? ariaCurrent : null)">
21+
<ng-container *ngTemplateOutlet="content" />
22+
</a>
23+
} @else {
24+
<ng-content />
25+
}
26+
`
2627
})
2728
export class BreadcrumbItemComponent {
2829
@Input() set href(v: string) {

‎src/breadcrumb/breadcrumb.component.ts‎

Lines changed: 93 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -29,102 +29,99 @@ const MINIMUM_OVERFLOW_THRESHOLD = 4;
2929
@Component({
3030
selector: "cds-breadcrumb, ibm-breadcrumb",
3131
template: `
32-
<nav #nav class="cds--breadcrumb"
33-
[ngClass]="{
34-
'cds--skeleton' : skeleton,
35-
'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
36-
}"
37-
[attr.aria-label]="ariaLabel">
38-
<ng-template [ngIf]="shouldShowContent">
39-
<ng-content></ng-content>
40-
</ng-template>
41-
<ng-template [ngIf]="!shouldShowOverflow">
42-
<cds-breadcrumb-item
43-
*ngFor="let item of items"
44-
[href]="item.href"
45-
[route]="item.route"
46-
[routeExtras]="item.routeExtras"
47-
[current]="item.current"
48-
[ariaCurrent]="item.ariaCurrent"
49-
(navigation)="navigation.emit($event)">
50-
<ng-container *ngIf="!item.template">{{item.content}}</ng-container>
51-
<ng-template
52-
*ngIf="item.template"
53-
[ngTemplateOutlet]="item.template"
54-
[ngTemplateOutletContext]="{ $implicit: item }">
55-
</ng-template>
56-
</cds-breadcrumb-item>
57-
</ng-template>
58-
<ng-template [ngIf]="shouldShowOverflow">
59-
<cds-breadcrumb-item
60-
[href]="first?.href"
61-
[route]="first?.route"
62-
[routeExtras]="first?.routeExtras"
63-
[current]="first?.current"
64-
[ariaCurrent]="first?.ariaCurrent"
65-
(navigation)="navigation.emit($event)">
66-
<ng-container *ngIf="!first?.template">{{first?.content}}</ng-container>
67-
<ng-template
68-
*ngIf="first?.template"
69-
[ngTemplateOutlet]="first?.template"
70-
[ngTemplateOutletContext]="{ $implicit: first }">
71-
</ng-template>
72-
</cds-breadcrumb-item>
73-
<cds-breadcrumb-item>
74-
<ng-template #overflowMenuTrigger>
75-
<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>
76-
</ng-template>
77-
<cds-overflow-menu
78-
[customTrigger]="overflowMenuTrigger"
79-
triggerClass="cds--btn--icon-only"
80-
[description]="description"
81-
[autoAlign]="autoAlign">
82-
<li class="cds--overflow-menu-options__option"
83-
*ngFor="let item of overflowItems">
84-
<a class="cds--overflow-menu-options__btn"
85-
href="{{item?.href}}"
86-
(click)="navigate($event, item)"
87-
style="text-decoration: none;">
88-
<ng-container *ngIf="!item?.template">{{item?.content}}</ng-container>
89-
<ng-template
90-
*ngIf="item?.template"
91-
[ngTemplateOutlet]="item?.template"
92-
[ngTemplateOutletContext]="{ $implicit: item }">
93-
</ng-template>
94-
</a>
95-
</li>
96-
</cds-overflow-menu>
97-
</cds-breadcrumb-item>
98-
<cds-breadcrumb-item
99-
[href]="secondLast?.href"
100-
[route]="secondLast?.route"
101-
[routeExtras]="secondLast?.routeExtras"
102-
[current]="secondLast?.current"
103-
[ariaCurrent]="secondLast?.ariaCurrent"
104-
(navigation)="navigation.emit($event)">
105-
<ng-container *ngIf="!secondLast?.template">{{secondLast?.content}}</ng-container>
106-
<ng-template
107-
*ngIf="secondLast?.template"
108-
[ngTemplateOutlet]="secondLast?.template"
109-
[ngTemplateOutletContext]="{ $implicit: secondLast }">
110-
</ng-template>
111-
</cds-breadcrumb-item>
112-
<cds-breadcrumb-item
113-
[href]="last?.href"
114-
[route]="last?.route"
115-
[routeExtras]="last?.routeExtras"
116-
[current]="last?.current"
117-
[ariaCurrent]="last?.ariaCurrent"
118-
(navigation)="navigation.emit($event)">
119-
<ng-container *ngIf="!last?.template">{{last?.content}}</ng-container>
120-
<ng-template
121-
*ngIf="last?.template"
122-
[ngTemplateOutlet]="last?.template"
123-
[ngTemplateOutletContext]="{ $implicit: last }">
124-
</ng-template>
125-
</cds-breadcrumb-item>
126-
</ng-template>
127-
</nav>`
32+
<nav #nav class="cds--breadcrumb"
33+
[ngClass]="{
34+
'cds--skeleton' : skeleton,
35+
'cds--breadcrumb--no-trailing-slash' : noTrailingSlash
36+
}"
37+
[attr.aria-label]="ariaLabel">
38+
@if (shouldShowContent) {
39+
<ng-content />
40+
}
41+
@if (shouldShowOverflow) {
42+
<cds-breadcrumb-item
43+
[href]="first?.href"
44+
[route]="first?.route"
45+
[routeExtras]="first?.routeExtras"
46+
[current]="first?.current"
47+
[ariaCurrent]="first?.ariaCurrent"
48+
(navigation)="navigation.emit($event)">
49+
@if (first?.template) {
50+
<ng-template [ngTemplateOutlet]="first?.template" [ngTemplateOutletContext]="{ $implicit: first }" />
51+
} @else {
52+
{{first?.content}}
53+
}
54+
</cds-breadcrumb-item>
55+
<cds-breadcrumb-item>
56+
<ng-template #overflowMenuTrigger>
57+
<svg class="cds--overflow-menu__icon" cdsIcon="overflow-menu--horizontal" size="16"></svg>
58+
</ng-template>
59+
<cds-overflow-menu
60+
[customTrigger]="overflowMenuTrigger"
61+
triggerClass="cds--btn--icon-only"
62+
[description]="description"
63+
[autoAlign]="autoAlign">
64+
@for (item of overflowItems; track item) {
65+
<li class="cds--overflow-menu-options__option">
66+
<a class="cds--overflow-menu-options__btn"
67+
href="{{item?.href}}"
68+
(click)="navigate($event, item)"
69+
style="text-decoration: none;">
70+
@if (item?.template) {
71+
<ng-template [ngTemplateOutlet]="item?.template" [ngTemplateOutletContext]="{ $implicit: item }" />
72+
} @else {
73+
{{item?.content}}
74+
}
75+
</a>
76+
</li>
77+
}
78+
</cds-overflow-menu>
79+
</cds-breadcrumb-item>
80+
<cds-breadcrumb-item
81+
[href]="secondLast?.href"
82+
[route]="secondLast?.route"
83+
[routeExtras]="secondLast?.routeExtras"
84+
[current]="secondLast?.current"
85+
[ariaCurrent]="secondLast?.ariaCurrent"
86+
(navigation)="navigation.emit($event)">
87+
@if (secondLast?.template) {
88+
<ng-template [ngTemplateOutlet]="secondLast?.template" [ngTemplateOutletContext]="{ $implicit: secondLast }" />
89+
} @else {
90+
{{secondLast?.content}}
91+
}
92+
</cds-breadcrumb-item>
93+
<cds-breadcrumb-item
94+
[href]="last?.href"
95+
[route]="last?.route"
96+
[routeExtras]="last?.routeExtras"
97+
[current]="last?.current"
98+
[ariaCurrent]="last?.ariaCurrent"
99+
(navigation)="navigation.emit($event)">
100+
@if (last?.template) {
101+
<ng-template [ngTemplateOutlet]="last?.template" [ngTemplateOutletContext]="{ $implicit: last }" />
102+
} @else {
103+
{{last?.content}}
104+
}
105+
</cds-breadcrumb-item>
106+
} @else {
107+
@for (item of items; track item) {
108+
<cds-breadcrumb-item
109+
[href]="item.href"
110+
[route]="item.route"
111+
[routeExtras]="item.routeExtras"
112+
[current]="item.current"
113+
[ariaCurrent]="item.ariaCurrent"
114+
(navigation)="navigation.emit($event)">
115+
@if (item.template) {
116+
<ng-template [ngTemplateOutlet]="item.template" [ngTemplateOutletContext]="{ $implicit: item }" />
117+
} @else {
118+
{{item.content}}
119+
}
120+
</cds-breadcrumb-item>
121+
}
122+
}
123+
</nav>
124+
`
128125
})
129126
export class Breadcrumb implements AfterContentInit {
130127
@ContentChildren(BreadcrumbItemComponent) children: QueryList<BreadcrumbItemComponent>;

‎src/button/button-set.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Component, HostBinding } from "@angular/core";
1111
*/
1212
@Component({
1313
selector: "cds-button-set, ibm-button-set",
14-
template: "<ng-content></ng-content>"
14+
template: "<ng-content />"
1515
})
1616
export class ButtonSet {
1717
@HostBinding("class.cds--btn-set") buttonSetClass = true;

‎src/button/icon-button.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ import { ButtonSize, ButtonType } from "./button.types";
5050
(click)="emitClickEvent($event)"
5151
(focus)="focus.emit($event)"
5252
(blur)="blur.emit($event)">
53-
<ng-content></ng-content>
53+
<ng-content />
5454
</button>
5555
</cds-tooltip>
5656
`

‎src/checkbox/checkbox.component.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ export enum CheckboxState {
5757
'cds--skeleton' : skeleton
5858
}">
5959
<span [ngClass]="{'cds--visually-hidden' : hideLabel}" class="cds--checkbox-label-text">
60-
<ng-content></ng-content>
60+
<ng-content />
6161
</span>
6262
</label>
6363
</div>

0 commit comments

Comments
 (0)