Skip to content

Commit 91eb7bc

Browse files
crisbetocrisbeto
committed
main - b775bd4 refactor(cdk/stepper): convert more internal state to signals
1 parent 3df3526 commit 91eb7bc

File tree

3 files changed

+168
-10
lines changed

3 files changed

+168
-10
lines changed

‎docs-content/api-docs/cdk-stepper.html‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,56 @@ <h4 id="CdkStep" class="docs-header-link docs-api-h4 docs-api-class-name">
223223

224224
<tr class="docs-api-properties-row">
225225
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
226-
<code>interacted: false</code>
226+
<code>index: signal(-1)</code>
227+
</p>
228+
</td>
229+
<td class="docs-api-property-description"><p>Current index of the step within the stepper.</p>
230+
</td>
231+
</tr>
232+
233+
234+
235+
236+
237+
<tr class="docs-api-properties-row">
238+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
239+
<code>indicatorType: computed&lt;StepState&gt;(() =&gt; {
240+
const selected = this.isSelected();
241+
const completed = this.completed;
242+
const defaultState = this._state() ?? STEP_STATE.NUMBER;
243+
const editable = this._editable();
244+
if (this._showError() &amp;&amp; this.hasError &amp;&amp; !selected) {
245+
return STEP_STATE.ERROR;
246+
}
247+
if (this._displayDefaultIndicatorType) {
248+
if (!completed || selected) {
249+
return STEP_STATE.NUMBER;
250+
}
251+
return editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
252+
}
253+
else {
254+
if (completed &amp;&amp; !selected) {
255+
return STEP_STATE.DONE;
256+
}
257+
else if (completed &amp;&amp; selected) {
258+
return defaultState;
259+
}
260+
return editable &amp;&amp; selected ? STEP_STATE.EDIT : defaultState;
261+
}
262+
})</code>
263+
</p>
264+
</td>
265+
<td class="docs-api-property-description"><p>Type of indicator that should be shown for the step.</p>
266+
</td>
267+
</tr>
268+
269+
270+
271+
272+
273+
<tr class="docs-api-properties-row">
274+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
275+
<code>interacted: boolean</code>
227276
</p>
228277
</td>
229278
<td class="docs-api-property-description"><p>Whether user has attempted to move away from the step.</p>
@@ -234,6 +283,36 @@ <h4 id="CdkStep" class="docs-header-link docs-api-h4 docs-api-class-name">
234283

235284

236285

286+
<tr class="docs-api-properties-row">
287+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
288+
<code>isNavigable: computed&lt;boolean&gt;(() =&gt; {
289+
const isSelected = this.isSelected();
290+
const isCompleted = this.completed;
291+
return isCompleted || isSelected || !this._stepper.linear;
292+
})</code>
293+
</p>
294+
</td>
295+
<td class="docs-api-property-description"><p>Whether the user can navigate to the step.</p>
296+
</td>
297+
</tr>
298+
299+
300+
301+
302+
303+
<tr class="docs-api-properties-row">
304+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
305+
<code>isSelected: computed&lt;boolean&gt;(() =&gt; this._stepper.selectedIndex === this.index())</code>
306+
</p>
307+
</td>
308+
<td class="docs-api-property-description"><p>Whether the step is selected.</p>
309+
</td>
310+
</tr>
311+
312+
313+
314+
315+
237316
<tr class="docs-api-properties-row">
238317
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
239318
<code>stepLabel: CdkStepLabel</code>

‎docs-content/api-docs/material-stepper.html‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -326,7 +326,56 @@ <h4 id="MatStep" class="docs-header-link docs-api-h4 docs-api-class-name">
326326

327327
<tr class="docs-api-properties-row">
328328
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
329-
<code>interacted: false</code>
329+
<code>index: signal(-1)</code>
330+
</p>
331+
</td>
332+
<td class="docs-api-property-description"><p>Current index of the step within the stepper.</p>
333+
</td>
334+
</tr>
335+
336+
337+
338+
339+
340+
<tr class="docs-api-properties-row">
341+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
342+
<code>indicatorType: computed&lt;StepState&gt;(() =&gt; {
343+
const selected = this.isSelected();
344+
const completed = this.completed;
345+
const defaultState = this._state() ?? STEP_STATE.NUMBER;
346+
const editable = this._editable();
347+
if (this._showError() &amp;&amp; this.hasError &amp;&amp; !selected) {
348+
return STEP_STATE.ERROR;
349+
}
350+
if (this._displayDefaultIndicatorType) {
351+
if (!completed || selected) {
352+
return STEP_STATE.NUMBER;
353+
}
354+
return editable ? STEP_STATE.EDIT : STEP_STATE.DONE;
355+
}
356+
else {
357+
if (completed &amp;&amp; !selected) {
358+
return STEP_STATE.DONE;
359+
}
360+
else if (completed &amp;&amp; selected) {
361+
return defaultState;
362+
}
363+
return editable &amp;&amp; selected ? STEP_STATE.EDIT : defaultState;
364+
}
365+
})</code>
366+
</p>
367+
</td>
368+
<td class="docs-api-property-description"><p>Type of indicator that should be shown for the step.</p>
369+
</td>
370+
</tr>
371+
372+
373+
374+
375+
376+
<tr class="docs-api-properties-row">
377+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
378+
<code>interacted: boolean</code>
330379
</p>
331380
</td>
332381
<td class="docs-api-property-description"><p>Whether user has attempted to move away from the step.</p>
@@ -337,6 +386,36 @@ <h4 id="MatStep" class="docs-header-link docs-api-h4 docs-api-class-name">
337386

338387

339388

389+
<tr class="docs-api-properties-row">
390+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
391+
<code>isNavigable: computed&lt;boolean&gt;(() =&gt; {
392+
const isSelected = this.isSelected();
393+
const isCompleted = this.completed;
394+
return isCompleted || isSelected || !this._stepper.linear;
395+
})</code>
396+
</p>
397+
</td>
398+
<td class="docs-api-property-description"><p>Whether the user can navigate to the step.</p>
399+
</td>
400+
</tr>
401+
402+
403+
404+
405+
406+
<tr class="docs-api-properties-row">
407+
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
408+
<code>isSelected: computed&lt;boolean&gt;(() =&gt; this._stepper.selectedIndex === this.index())</code>
409+
</p>
410+
</td>
411+
<td class="docs-api-property-description"><p>Whether the step is selected.</p>
412+
</td>
413+
</tr>
414+
415+
416+
417+
418+
340419
<tr class="docs-api-properties-row">
341420
<td class="docs-api-properties-name-cell"><p class="docs-api-property-name">
342421
<code>stepLabel: MatStepLabel</code>

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@angular/components-examples",
3-
"version": "20.1.0-next.0+sha-eb9abc3",
3+
"version": "20.1.0-next.0+sha-b775bd4",
44
"description": "Angular Components Examples",
55
"private": true,
66
"repository": {
@@ -259,15 +259,15 @@
259259
},
260260
"homepage": "https://github.com/angular/components#readme",
261261
"peerDependencies": {
262-
"@angular/cdk": "20.1.0-next.0+sha-eb9abc3",
263-
"@angular/cdk-experimental": "20.1.0-next.0+sha-eb9abc3",
262+
"@angular/cdk": "20.1.0-next.0+sha-b775bd4",
263+
"@angular/cdk-experimental": "20.1.0-next.0+sha-b775bd4",
264264
"@angular/core": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
265265
"@angular/common": "^20.0.0-0 || ^20.1.0-0 || ^20.2.0-0 || ^20.3.0-0 || ^21.0.0-0",
266-
"@angular/material": "20.1.0-next.0+sha-eb9abc3",
267-
"@angular/material-experimental": "20.1.0-next.0+sha-eb9abc3",
268-
"@angular/material-moment-adapter": "20.1.0-next.0+sha-eb9abc3",
269-
"@angular/material-luxon-adapter": "20.1.0-next.0+sha-eb9abc3",
270-
"@angular/material-date-fns-adapter": "20.1.0-next.0+sha-eb9abc3"
266+
"@angular/material": "20.1.0-next.0+sha-b775bd4",
267+
"@angular/material-experimental": "20.1.0-next.0+sha-b775bd4",
268+
"@angular/material-moment-adapter": "20.1.0-next.0+sha-b775bd4",
269+
"@angular/material-luxon-adapter": "20.1.0-next.0+sha-b775bd4",
270+
"@angular/material-date-fns-adapter": "20.1.0-next.0+sha-b775bd4"
271271
},
272272
"devDependencies": {
273273
"@angular/cdk": "workspace:*",

0 commit comments

Comments
 (0)