Skip to content

Commit 1f5f6f6

Browse files
lukasmattalukasmatta
committed
Finish migration manually
1 parent ae906f6 commit 1f5f6f6

File tree

9 files changed

+561
-510
lines changed

9 files changed

+561
-510
lines changed

‎projects/composition/src/app/components/service-docs-viewer/service-docs-viewer.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h1>{{ serviceData.name }}</h1>
1515
<p>{{ serviceData.description }}</p>
1616
<!-- Methods -->
1717
@if (
18-
serviceData.methods?.values && serviceData.methods.values.length > 0
18+
serviceData.methods.values && serviceData.methods.values.length > 0
1919
) {
2020
<div>
2121
<h2>Methods</h2>

‎projects/composition/src/app/pages/table-page/table-page.component.html‎

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,20 @@
3838
</cps-table>
3939
</cps-tab>
4040
<cps-tab label="Table 2">
41-
<cps-table
42-
*ngIf="selectedTabIndex === 1"
43-
[showGlobalFilter]="true"
44-
[data]="dataVirtual"
45-
[columns]="colsVirtual"
46-
[sortable]="true"
47-
[virtualScroll]="true"
48-
[showColumnsToggleBtn]="true"
49-
scrollHeight="500px"
50-
toolbarTitle="Sortable table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled"
51-
[filterableByColumns]="true"
52-
[resizableColumns]="true">
53-
</cps-table>
41+
@if (selectedTabIndex === 1) {
42+
<cps-table
43+
[showGlobalFilter]="true"
44+
[data]="dataVirtual"
45+
[columns]="colsVirtual"
46+
[sortable]="true"
47+
[virtualScroll]="true"
48+
[showColumnsToggleBtn]="true"
49+
scrollHeight="500px"
50+
toolbarTitle="Sortable table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled"
51+
[filterableByColumns]="true"
52+
[resizableColumns]="true">
53+
</cps-table>
54+
}
5455
</cps-tab>
5556
<cps-tab label="Table 3">
5657
<cps-table
@@ -109,25 +110,38 @@
109110
toolbarIconColor="success"
110111
toolbarTitle="Table with toolbar icon, external columns toggle, unstriped selectable and expandable rows">
111112
<ng-template #header>
112-
<th
113-
*ngFor="let scol of selCols"
114-
[cpsTColSortable]="scol.field"
115-
[cpsTColFilter]="scol.field"
116-
[filterType]="scol.filterType">
117-
{{ scol.header }}
118-
</th>
113+
@for (scol of selCols; track scol) {
114+
<th
115+
[cpsTColSortable]="scol.field"
116+
[cpsTColFilter]="scol.field"
117+
[filterType]="scol.filterType">
118+
{{ scol.header }}
119+
</th>
120+
}
119121
</ng-template>
120122

121123
<ng-template let-item #body>
122-
<ng-container *ngFor="let scol of selCols" [ngSwitch]="scol.field">
123-
<td *ngSwitchCase="'a'">{{ item.a | uppercase }}</td>
124-
<td *ngSwitchCase="'b'">{{ item.b | date: 'MM/dd/yyyy' }}</td>
125-
<td *ngSwitchCase="'c'">{{ item.c | percent }}</td>
126-
<td *ngSwitchCase="'d'" [style.color]="item.d ? 'green' : 'red'">
127-
{{ item.d ? '&#10004;' : '&#10008;' }}
128-
</td>
129-
<td *ngSwitchCase="'e'">{{ item.e }}</td>
130-
</ng-container>
124+
@for (scol of selCols; track scol) {
125+
@switch (scol.field) {
126+
@case ('a') {
127+
<td>{{ item.a | uppercase }}</td>
128+
}
129+
@case ('b') {
130+
<td>{{ item.b | date: 'MM/dd/yyyy' }}</td>
131+
}
132+
@case ('c') {
133+
<td>{{ item.c | percent }}</td>
134+
}
135+
@case ('d') {
136+
<td [style.color]="item.d ? 'green' : 'red'">
137+
{{ item.d ? '&#10004;' : '&#10008;' }}
138+
</td>
139+
}
140+
@case ('e') {
141+
<td>{{ item.e }}</td>
142+
}
143+
}
144+
}
131145
</ng-template>
132146

133147
<ng-template let-item #rowexpansion>

‎projects/composition/src/app/pages/table-page/table-page.component.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
32
import { FormsModule } from '@angular/forms';
43
import {
54
CpsTableComponent,
@@ -19,11 +18,14 @@ import {
1918
import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
2019

2120
import ComponentData from '../../api-data/cps-table.json';
21+
import { DatePipe, PercentPipe, UpperCasePipe } from '@angular/common';
2222

2323
@Component({
2424
selector: 'app-table-page',
2525
imports: [
26-
CommonModule,
26+
DatePipe,
27+
UpperCasePipe,
28+
PercentPipe,
2729
FormsModule,
2830
CpsTableComponent,
2931
CpsTableColumnSortableDirective,

‎projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html‎

Lines changed: 52 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -68,24 +68,27 @@
6868
</cps-tree-table>
6969
</cps-tab>
7070
<cps-tab label="Tree table 2">
71-
<cps-tree-table
72-
*ngIf="selectedTabIndex === 1"
73-
[showGlobalFilter]="true"
74-
[data]="dataVirtual"
75-
[columns]="colsVirtual"
76-
[sortable]="true"
77-
[virtualScroll]="true"
78-
[showColumnsToggleBtn]="true"
79-
[filterableByColumns]="true"
80-
[resizableColumns]="true"
81-
scrollHeight="500px"
82-
toolbarTitle="Sortable tree table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled">
83-
<ng-template #colgroup>
84-
<colgroup>
85-
<col *ngFor="let col of colsVirtual" />
86-
</colgroup>
87-
</ng-template>
88-
</cps-tree-table>
71+
@if (selectedTabIndex === 1) {
72+
<cps-tree-table
73+
[showGlobalFilter]="true"
74+
[data]="dataVirtual"
75+
[columns]="colsVirtual"
76+
[sortable]="true"
77+
[virtualScroll]="true"
78+
[showColumnsToggleBtn]="true"
79+
[filterableByColumns]="true"
80+
[resizableColumns]="true"
81+
scrollHeight="500px"
82+
toolbarTitle="Sortable tree table with resizable columns, virtual scroller, global filter, internal columns toggle and with column filtering enabled">
83+
<ng-template #colgroup>
84+
<colgroup>
85+
@for (col of colsVirtual; track col) {
86+
<col />
87+
}
88+
</colgroup>
89+
</ng-template>
90+
</cps-tree-table>
91+
}
8992
</cps-tab>
9093
<cps-tab label="Tree table 3">
9194
<cps-tree-table
@@ -143,29 +146,40 @@
143146
toolbarIconColor="success"
144147
toolbarTitle="Tree table with toolbar icon, external columns toggle and unstriped selectable rows">
145148
<ng-template #header>
146-
<th
147-
*ngFor="let scol of selCols"
148-
[cpsTTColSortable]="scol.field"
149-
[cpsTTColFilter]="scol.field"
150-
[filterType]="scol.filterType">
151-
{{ scol.header }}
152-
</th>
149+
@for (scol of selCols; track scol) {
150+
<th
151+
[cpsTTColSortable]="scol.field"
152+
[cpsTTColFilter]="scol.field"
153+
[filterType]="scol.filterType">
154+
{{ scol.header }}
155+
</th>
156+
}
153157
</ng-template>
154158

155159
<ng-template #body let-rowNode let-rowData="rowData">
156-
<ng-container *ngFor="let scol of selCols" [ngSwitch]="scol.field">
157-
<td *ngSwitchCase="'name'" [cpsTTRowToggler]="rowNode">
158-
{{ rowData.name }}
159-
</td>
160-
<td *ngSwitchCase="'size'">{{ rowData.size }}</td>
161-
<td *ngSwitchCase="'modified'">{{ rowData.modified | date }}</td>
162-
<td
163-
*ngSwitchCase="'encrypted'"
164-
[style.color]="rowData.encrypted ? 'green' : 'red'">
165-
{{ rowData.encrypted ? '&#10004;' : '&#10008;' }}
166-
</td>
167-
<td *ngSwitchCase="'importance'">{{ rowData.importance }}</td>
168-
</ng-container>
160+
@for (scol of selCols; track scol) {
161+
@switch (scol.field) {
162+
@case ('name') {
163+
<td [cpsTTRowToggler]="rowNode">
164+
{{ rowData.name }}
165+
</td>
166+
}
167+
@case ('size') {
168+
<td>{{ rowData.size }}</td>
169+
}
170+
@case ('modified') {
171+
<td>{{ rowData.modified | date }}</td>
172+
}
173+
@case ('encrypted') {
174+
<td [style.color]="rowData.encrypted ? 'green' : 'red'">
175+
{{ rowData.encrypted ? '&#10004;' : '&#10008;' }}
176+
</td>
177+
}
178+
@case ('importance') {
179+
<td>{{ rowData.importance }}</td>
180+
}
181+
}
182+
}
169183
</ng-template>
170184
</cps-tree-table>
171185
</cps-tab>
@@ -180,8 +194,6 @@
180194
toolbarTitle="Tree table with nested header and small toolbar">
181195
<ng-template #nestedHeader>
182196
<tr>
183-
<!-- MANUALLY ADD FIRST HEADER WITH CHECKBOX, SINCE THE TABLE IS SELECTABLE -->
184-
<!-- FOR EMBEDDED SIMPLE HEADER THIS IS DONE AUTOMATICALLY -->
185197
<th rowspan="2" cpsTTHdrSelectable></th>
186198
<th colspan="2">Section 1</th>
187199
<th colspan="3">Section 2</th>

‎projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Component, OnInit } from '@angular/core';
2-
import { CommonModule } from '@angular/common';
32
import { FormsModule } from '@angular/forms';
43
import {
54
CpsTreeTableComponent,
@@ -19,11 +18,12 @@ import {
1918

2019
import ComponentData from '../../api-data/cps-tree-table.json';
2120
import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
21+
import { DatePipe } from '@angular/common';
2222

2323
@Component({
2424
selector: 'app-tree-table-page',
2525
imports: [
26-
CommonModule,
26+
DatePipe,
2727
FormsModule,
2828
CpsTreeTableComponent,
2929
CpsTreetableRowTogglerDirective,

‎projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@if (option.tooltip) {
1+
@if (option?.tooltip) {
22
<div
33
class="cps-radio-group-content-button"
4-
[cpsTooltip]="option.tooltip"
4+
[cpsTooltip]="option?.tooltip || ''"
55
tooltipCloseDelay="0"
66
tooltipPosition="bottom">
77
<ng-container

‎projects/cps-ui-kit/src/lib/components/cps-radio-group/cps-radio-button/cps-radio-button.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class CpsRadioButtonComponent {
2222
* An option.
2323
* @group Props
2424
*/
25-
@Input() option!: CpsRadioOption;
25+
@Input() option?: CpsRadioOption;
2626

2727
/**
2828
* Determines whether the radio button is checked.
@@ -63,8 +63,8 @@ export class CpsRadioButtonComponent {
6363

6464
updateValue(event: Event): void {
6565
event.preventDefault();
66-
if (this.option.disabled) return;
67-
this.updateValueEvent.emit(this.option.value);
66+
if (this.option?.disabled) return;
67+
this.updateValueEvent.emit(this.option?.value);
6868
}
6969

7070
onBlur() {

0 commit comments

Comments
 (0)