Skip to content

Commit 9a82d30

Browse files
tcoiletcoile
committed
docs: partial disabled example
1 parent d4a98fa commit 9a82d30

File tree

5 files changed

+146
-11
lines changed

5 files changed

+146
-11
lines changed

‎apps/demo-app/src/app/content/ui/combobox-content/disabled/disabled.component.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<button (click)="disabled = !disabled">toggle disabled option</button>
2+
<hsi-ui-combobox [disabled]="disabled">
3+
@if (externalLabel) {
4+
<hsi-ui-combobox-label
5+
>Select New England states to view data</hsi-ui-combobox-label
6+
>
7+
}
8+
@if (countLabel) {
9+
<hsi-ui-textbox [selectedCountLabel]="countLabel">
10+
<p boxLabel>Select states</p>
11+
<span
12+
aria-hidden="true"
13+
class="material-symbols-outlined expand-more"
14+
boxIcon
15+
>
16+
expand_more
17+
</span>
18+
</hsi-ui-textbox>
19+
} @else {
20+
<hsi-ui-textbox [dynamicLabel]="dynamicLabel" [customLabel]="customLabel">
21+
@if (multiSelect) {
22+
<p boxLabel>Select states</p>
23+
} @else {
24+
<p boxLabel>Select a state</p>
25+
}
26+
<span
27+
aria-hidden="true"
28+
class="material-symbols-outlined expand-more"
29+
boxIcon
30+
>
31+
expand_more
32+
</span>
33+
</hsi-ui-textbox>
34+
}
35+
@if (selectAll || icons) {
36+
<hsi-ui-listbox
37+
[isMultiSelect]="multiSelect"
38+
(valueChanges)="onSelection($event)"
39+
>
40+
<hsi-ui-select-all-listbox-option>
41+
@if (icons) {
42+
<span
43+
aria-hidden="true"
44+
class="material-symbols-outlined icon checkbox"
45+
selectedIcon
46+
>
47+
check_box
48+
</span>
49+
}
50+
@if (icons) {
51+
<span
52+
unselectedIcon
53+
aria-hidden="true"
54+
class="material-symbols-outlined icon checkbox"
55+
>
56+
check_box_outline_blank
57+
</span>
58+
}
59+
Select all</hsi-ui-select-all-listbox-option
60+
>
61+
@for (option of options; track option.id) {
62+
<hsi-ui-listbox-option>
63+
@if (icons) {
64+
<span
65+
aria-hidden="true"
66+
class="material-symbols-outlined icon checkbox"
67+
selectedIcon
68+
>
69+
check_box
70+
</span>
71+
}
72+
@if (icons) {
73+
<span
74+
unselectedIcon
75+
aria-hidden="true"
76+
class="material-symbols-outlined icon checkbox"
77+
>
78+
check_box_outline_blank
79+
</span>
80+
}
81+
{{ option.displayName }}
82+
</hsi-ui-listbox-option>
83+
}
84+
</hsi-ui-listbox>
85+
} @else {
86+
@if (groups) {
87+
<hsi-ui-listbox
88+
[isMultiSelect]="multiSelect"
89+
(valueChanges)="onSelection($event)"
90+
>
91+
<hsi-ui-listbox-group>
92+
<hsi-ui-listbox-label>New England states</hsi-ui-listbox-label>
93+
<hsi-ui-select-all-listbox-option
94+
>Select all</hsi-ui-select-all-listbox-option
95+
>
96+
@for (option of options; track option.id) {
97+
<hsi-ui-listbox-option
98+
>{{ option.displayName }}
99+
</hsi-ui-listbox-option>
100+
}
101+
</hsi-ui-listbox-group>
102+
<hsi-ui-listbox-group>
103+
<hsi-ui-listbox-label>Mid-Atlantic states</hsi-ui-listbox-label>
104+
<hsi-ui-select-all-listbox-option
105+
>Select all</hsi-ui-select-all-listbox-option
106+
>
107+
@for (option of midAtlanticOptions; track option.id) {
108+
<hsi-ui-listbox-option
109+
>{{ option.displayName }}
110+
</hsi-ui-listbox-option>
111+
}
112+
</hsi-ui-listbox-group>
113+
</hsi-ui-listbox>
114+
} @else {
115+
<hsi-ui-listbox
116+
[isMultiSelect]="multiSelect"
117+
(valueChanges)="onSelection($event)"
118+
>
119+
@for (option of options; track option.id) {
120+
<hsi-ui-listbox-option>
121+
{{ option.displayName }}
122+
</hsi-ui-listbox-option>
123+
}
124+
</hsi-ui-listbox>
125+
}
126+
}
127+
</hsi-ui-combobox>

‎apps/demo-app/src/app/content/ui/combobox-content/disabled/disabled.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.hsi-ui-combobox.disabled {
2+
opacity: 0.6;
3+
--hsi-ui-combobox-hover-cursor: not-allowed;
4+
}
5+
6+
.hsi-ui-combobox {
7+
--hsi-ui-combobox-hover-cursor: pointer;
8+
}

‎apps/demo-app/src/app/content/ui/combobox-content/disabled/disabled.component.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ChangeDetectionStrategy, Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-disabled',
5+
imports: [],
6+
templateUrl: './disabled.html',
7+
styleUrl: './disabled.scss',
8+
changeDetection: ChangeDetectionStrategy.OnPush,
9+
})
10+
export class Disabled { }

‎apps/demo-app/src/app/content/ui/combobox-content/minimal-implementation/minimal-implementation.component.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
<button (click)="disabled = !disabled">toggle disabled</button>
2-
<hsi-ui-combobox [disabled]="disabled">
1+
<hsi-ui-combobox>
32
@if (externalLabel) {
43
<hsi-ui-combobox-label
54
>Select New England states to view data</hsi-ui-combobox-label

‎apps/demo-app/src/app/content/ui/combobox-content/minimal-implementation/minimal-implementation.component.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +0,0 @@
1-
.hsi-ui-combobox.disabled {
2-
opacity: 0.6;
3-
4-
--hsi-ui-combobox-hover-cursor: not-allowed;
5-
}
6-
7-
.hsi-ui-combobox {
8-
--hsi-ui-combobox-hover-cursor: pointer;
9-
}

0 commit comments

Comments
 (0)