Skip to content

Commit f0c342b

Browse files
wagnermacielwagnermaciel
committed
test(cdk-experimental/listbox): add use case examples for the listbox
1 parent d0716cd commit f0c342b

File tree

32 files changed

+1106
-100
lines changed

32 files changed

+1106
-100
lines changed

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!-- Active Descendant -->
2+
<div class="example-container">
3+
<ul
4+
cdkListbox
5+
focusMode="activedescendant"
6+
class="example-listbox"
7+
aria-labelledby="active-descendant-label"
8+
>
9+
<label class="example-label" id="active-descendant-label">Active Descendant Fruits</label>
10+
@for (fruit of fruits; track fruit) {
11+
<li
12+
class="example-option"
13+
[value]="fruit"
14+
cdkOption
15+
#option="cdkOption"
16+
>
17+
<mat-pseudo-checkbox
18+
[state]="option.pattern.selected() ? 'checked' : 'unchecked'"
19+
></mat-pseudo-checkbox>
20+
<span>{{ fruit }}</span>
21+
</li>
22+
}
23+
</ul>
24+
</div>

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-active-descendant/cdk-listbox-active-descendant-example.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {Component} from '@angular/core';
2+
import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
3+
import {MatPseudoCheckbox} from '@angular/material/core';
4+
5+
/**
6+
* @title Listbox with active descendant.
7+
*/
8+
@Component({
9+
selector: 'cdk-listbox-active-descendant-example',
10+
exportAs: 'cdkListboxActiveDescendantExample',
11+
templateUrl: 'cdk-listbox-active-descendant-example.html',
12+
styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
13+
standalone: true,
14+
imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
15+
})
16+
export class CdkListboxActiveDescendantExample {
17+
fruits = [
18+
'Apple',
19+
'Apricot',
20+
'Banana',
21+
'Blackberry',
22+
'Blueberry',
23+
'Cantaloupe',
24+
'Cherry',
25+
'Clementine',
26+
'Cranberry',
27+
'Dates',
28+
'Figs',
29+
'Grapes',
30+
'Grapefruit',
31+
'Guava',
32+
'Kiwi',
33+
'Kumquat',
34+
'Lemon',
35+
'Lime',
36+
'Mandarin',
37+
'Mango',
38+
'Nectarine',
39+
'Orange',
40+
'Papaya',
41+
'Passion',
42+
'Peach',
43+
'Pear',
44+
'Pineapple',
45+
'Plum',
46+
'Pomegranate',
47+
'Raspberries',
48+
'Strawberry',
49+
'Tangerine',
50+
'Watermelon',
51+
];
52+
}

‎src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.css renamed to ‎src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.css

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
gap: 4px;
1010
margin: 0;
1111
padding: 8px;
12-
max-height: 50vh;
12+
max-height: 300px;
1313
border: 1px solid var(--mat-sys-outline);
1414
border-radius: var(--mat-sys-corner-extra-small);
1515
display: flex;
@@ -31,6 +31,14 @@
3131
display: block;
3232
}
3333

34+
.example-listbox[aria-disabled='true'] {
35+
opacity: 0.5;
36+
}
37+
38+
.example-listbox[aria-disabled='true'] .example-option {
39+
pointer-events: none;
40+
}
41+
3442
.example-label {
3543
padding: 16px;
3644
flex-shrink: 0;

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.html

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<div class="example-listbox-controls">
2+
<mat-checkbox [formControl]="wrap">Wrap</mat-checkbox>
3+
<mat-checkbox [formControl]="multi">Multi</mat-checkbox>
4+
<mat-checkbox [formControl]="disabled">Disabled</mat-checkbox>
5+
<mat-checkbox [formControl]="readonly">Readonly</mat-checkbox>
6+
<mat-checkbox [formControl]="skipDisabled">Skip Disabled</mat-checkbox>
7+
8+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
9+
<mat-label>Selection</mat-label>
10+
<mat-select [(value)]="selection" multiple>
11+
@for (fruit of fruits; track fruit) {
12+
<mat-option [value]="fruit">{{fruit}}</mat-option>
13+
}
14+
</mat-select>
15+
</mat-form-field>
16+
17+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
18+
<mat-label>Disabled Options</mat-label>
19+
<mat-select [(value)]="disabledOptions" multiple>
20+
@for (fruit of fruits; track fruit) {
21+
<mat-option [value]="fruit">{{fruit}}</mat-option>
22+
}
23+
</mat-select>
24+
</mat-form-field>
25+
26+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
27+
<mat-label>Orientation</mat-label>
28+
<mat-select [(value)]="orientation">
29+
<mat-option value="vertical">Vertical</mat-option>
30+
<mat-option value="horizontal">Horizontal</mat-option>
31+
</mat-select>
32+
</mat-form-field>
33+
34+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
35+
<mat-label>Selection strategy</mat-label>
36+
<mat-select [(value)]="selectionMode">
37+
<mat-option value="explicit">Explicit</mat-option>
38+
<mat-option value="follow">Follow Focus</mat-option>
39+
</mat-select>
40+
</mat-form-field>
41+
42+
<mat-form-field subscriptSizing="dynamic" appearance="outline">
43+
<mat-label>Focus strategy</mat-label>
44+
<mat-select [(value)]="focusMode">
45+
<mat-option value="roving tabindex">Roving Tabindex</mat-option>
46+
<mat-option value="activedescendant">Active Descendant</mat-option>
47+
</mat-select>
48+
</mat-form-field>
49+
</div>
50+
51+
<!-- #docregion listbox -->
52+
<ul
53+
cdkListbox
54+
[value]="selection"
55+
[wrap]="wrap.value"
56+
[multi]="multi.value"
57+
[readonly]="readonly.value"
58+
[disabled]="disabled.value"
59+
[skipDisabled]="skipDisabled.value"
60+
[orientation]="orientation"
61+
[focusMode]="focusMode"
62+
[selectionMode]="selectionMode"
63+
class="example-listbox"
64+
>
65+
<label class="example-label" id="fruit-example-label">List of Fruits</label>
66+
67+
@for (fruit of fruits; track fruit) {
68+
@let optionDisabled = disabledOptions.includes(fruit);
69+
70+
<li
71+
class="example-option"
72+
[disabled]="optionDisabled"
73+
[value]="fruit"
74+
cdkOption
75+
#option="cdkOption"
76+
>
77+
<mat-pseudo-checkbox
78+
[disabled]="optionDisabled"
79+
[state]="option.pattern.selected() ? 'checked' : 'unchecked'"
80+
></mat-pseudo-checkbox>
81+
<span>{{ fruit }}</span>
82+
</li>
83+
}
84+
</ul>
85+
<!-- #enddocregion listbox -->

‎src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.ts renamed to ‎src/components-examples/cdk-experimental/listbox/cdk-listbox-configurable/cdk-listbox-configurable-example.ts

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,13 @@ import {MatSelectModule} from '@angular/material/select';
66
import {FormControl, ReactiveFormsModule} from '@angular/forms';
77
import {MatPseudoCheckbox} from '@angular/material/core';
88

9-
/** @title Listbox using UI Patterns. */
9+
/** @title Configurable Listbox. */
1010
@Component({
11-
selector: 'cdk-listbox-example',
12-
exportAs: 'cdkListboxExample',
13-
templateUrl: 'cdk-listbox-example.html',
14-
styleUrl: 'cdk-listbox-example.css',
11+
selector: 'cdk-listbox-configurable-example',
12+
exportAs: 'cdkListboxConfigurableExample',
13+
templateUrl: 'cdk-listbox-configurable-example.html',
14+
styleUrl: 'cdk-listbox-configurable-example.css',
15+
standalone: true,
1516
imports: [
1617
CdkListbox,
1718
CdkOption,
@@ -22,7 +23,7 @@ import {MatPseudoCheckbox} from '@angular/material/core';
2223
MatPseudoCheckbox,
2324
],
2425
})
25-
export class CdkListboxExample {
26+
export class CdkListboxConfigurableExample {
2627
orientation: 'vertical' | 'horizontal' = 'vertical';
2728
focusMode: 'roving' | 'activedescendant' = 'roving';
2829
selectionMode: 'explicit' | 'follow' = 'explicit';

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!-- Disabled Options are Focusable -->
2+
<div class="example-container">
3+
<ul
4+
cdkListbox
5+
[skipDisabled]="false"
6+
class="example-listbox"
7+
aria-labelledby="disabled-focusable-label"
8+
>
9+
<label class="example-label" id="disabled-focusable-label">Disabled Focusable Fruits</label>
10+
@for (fruit of fruits; track fruit; let i = $index) {
11+
<li
12+
class="example-option"
13+
[value]="fruit"
14+
[disabled]="i % 2 === 0"
15+
cdkOption
16+
#option="cdkOption"
17+
>
18+
<mat-pseudo-checkbox
19+
[state]="option.pattern.selected() ? 'checked' : 'unchecked'"
20+
></mat-pseudo-checkbox>
21+
<span>{{ fruit }}</span>
22+
</li>
23+
}
24+
</ul>
25+
</div>

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-focusable/cdk-listbox-disabled-focusable-example.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {Component} from '@angular/core';
2+
import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
3+
import {MatPseudoCheckbox} from '@angular/material/core';
4+
5+
/**
6+
* @title Listbox with focusable disabled options.
7+
*/
8+
@Component({
9+
selector: 'cdk-listbox-disabled-focusable-example',
10+
exportAs: 'cdkListboxDisabledFocusableExample',
11+
templateUrl: 'cdk-listbox-disabled-focusable-example.html',
12+
styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
13+
standalone: true,
14+
imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
15+
})
16+
export class CdkListboxDisabledFocusableExample {
17+
fruits = [
18+
'Apple',
19+
'Apricot',
20+
'Banana',
21+
'Blackberry',
22+
'Blueberry',
23+
'Cantaloupe',
24+
'Cherry',
25+
'Clementine',
26+
'Cranberry',
27+
'Dates',
28+
'Figs',
29+
'Grapes',
30+
'Grapefruit',
31+
'Guava',
32+
'Kiwi',
33+
'Kumquat',
34+
'Lemon',
35+
'Lime',
36+
'Mandarin',
37+
'Mango',
38+
'Nectarine',
39+
'Orange',
40+
'Papaya',
41+
'Passion',
42+
'Peach',
43+
'Pear',
44+
'Pineapple',
45+
'Plum',
46+
'Pomegranate',
47+
'Raspberries',
48+
'Strawberry',
49+
'Tangerine',
50+
'Watermelon',
51+
];
52+
}

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!-- Disabled Options are Skipped -->
2+
<div class="example-container">
3+
<ul
4+
cdkListbox
5+
[skipDisabled]="true"
6+
class="example-listbox"
7+
aria-labelledby="disabled-skipped-label"
8+
>
9+
<label class="example-label" id="disabled-skipped-label">Disabled Skipped Fruits</label>
10+
@for (fruit of fruits; track fruit; let i = $index) {
11+
<li
12+
class="example-option"
13+
[value]="fruit"
14+
[disabled]="i % 2 === 0"
15+
cdkOption
16+
#option="cdkOption"
17+
>
18+
<mat-pseudo-checkbox
19+
[state]="option.pattern.selected() ? 'checked' : 'unchecked'"
20+
></mat-pseudo-checkbox>
21+
<span>{{ fruit }}</span>
22+
</li>
23+
}
24+
</ul>
25+
</div>

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled-skipped/cdk-listbox-disabled-skipped-example.ts

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {Component} from '@angular/core';
2+
import {CdkListbox, CdkOption} from '@angular/cdk-experimental/listbox';
3+
import {MatPseudoCheckbox} from '@angular/material/core';
4+
5+
/**
6+
* @title Listbox with skipped disabled options.
7+
*/
8+
@Component({
9+
selector: 'cdk-listbox-disabled-skipped-example',
10+
exportAs: 'cdkListboxDisabledSkippedExample',
11+
templateUrl: 'cdk-listbox-disabled-skipped-example.html',
12+
styleUrl: '../cdk-listbox-configurable/cdk-listbox-configurable-example.css',
13+
standalone: true,
14+
imports: [CdkListbox, CdkOption, MatPseudoCheckbox],
15+
})
16+
export class CdkListboxDisabledSkippedExample {
17+
fruits = [
18+
'Apple',
19+
'Apricot',
20+
'Banana',
21+
'Blackberry',
22+
'Blueberry',
23+
'Cantaloupe',
24+
'Cherry',
25+
'Clementine',
26+
'Cranberry',
27+
'Dates',
28+
'Figs',
29+
'Grapes',
30+
'Grapefruit',
31+
'Guava',
32+
'Kiwi',
33+
'Kumquat',
34+
'Lemon',
35+
'Lime',
36+
'Mandarin',
37+
'Mango',
38+
'Nectarine',
39+
'Orange',
40+
'Papaya',
41+
'Passion',
42+
'Peach',
43+
'Pear',
44+
'Pineapple',
45+
'Plum',
46+
'Pomegranate',
47+
'Raspberries',
48+
'Strawberry',
49+
'Tangerine',
50+
'Watermelon',
51+
];
52+
}

‎src/components-examples/cdk-experimental/listbox/cdk-listbox-disabled/cdk-listbox-disabled-example.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<div class="example-container">
2+
<ul
3+
cdkListbox
4+
[disabled]="true"
5+
class="example-listbox"
6+
aria-labelledby="disabled-label"
7+
>
8+
<label class="example-label" id="disabled-label">Disabled Fruits</label>
9+
@for (fruit of fruits; track fruit) {
10+
<li
11+
class="example-option"
12+
[value]="fruit"
13+
cdkOption
14+
#option="cdkOption"
15+
>
16+
<mat-pseudo-checkbox
17+
[state]="option.pattern.selected() ? 'checked' : 'unchecked'"
18+
></mat-pseudo-checkbox>
19+
<span>{{ fruit }}</span>
20+
</li>
21+
}
22+
</ul>
23+
</div>

0 commit comments

Comments
 (0)