1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
|
<style include="settings-shared cr-radio-button-style">
:host {
display: block;
}
:host([disabled]) {
opacity: 1;
}
cr-policy-pref-indicator,
:host([disabled]) cr-expand-button {
pointer-events: auto;
}
:host([disabled]) .disc-wrapper {
opacity: var(--cr-disabled-opacity);
}
:host([disabled]) #labelWrapper {
opacity: 1;
}
cr-collapse {
margin-inline-end: 0;
margin-inline-start: calc(var(--cr-radio-button-label-spacing, 20px)
+ var(--cr-radio-button-size));
}
.disc-wrapper {
margin-inline-end: var(--cr-radio-button-label-spacing, 20px);
}
.separator {
margin-inline-end: 0;
min-height: calc(var(--settings-collapse-toggle-min-height, 48px) / 2);
}
#borderWrapper {
align-items: center;
border-top: var(--settings-collapse-separator-line);
display: flex;
min-height: var(--settings-collapse-toggle-min-height);
width: 100%;
}
#buttonIcon {
padding-inline-end: 6px;
}
#labelWrapper {
--cr-radio-button-label-spacing: 0;
}
#radioCollapse {
align-items: center;
display: flex;
}
slot[name='noSelectionCollapse'] {
cursor: auto;
}
</style>
<div id="radioCollapse">
<div aria-checked$="[[getAriaChecked_(checked)]]"
aria-disabled$="[[getAriaDisabled_(disabled)]]"
aria-labelledby="label"
aria-describedby="sub-label"
class="disc-wrapper"
id="button"
role="radio"
tabindex$="[[buttonTabIndex_]]"
on-focus="onRadioFocus_"
on-keydown="onInputKeydown_">
<div class="disc-border"></div>
<div class="disc"></div>
</div>
<div id="borderWrapper">
<cr-icon id="buttonIcon" icon="[[icon]]" hidden$="[[!icon]]"></cr-icon>
<div id="labelWrapper" class="cr-padded-text">
<div id="label" aria-hidden="true">
[[label]]
<slot name="label"></slot>
</div>
<div hidden$="[[!subLabel]]" id="sub-label" class="secondary">
[[subLabel]]
<slot name="sub-label"></slot>
</div>
</div>
<template is="dom-if" if="[[pref]]">
<cr-policy-pref-indicator pref="[[pref]]"
icon-aria-label="[[indicatorAriaLabel]]"
associated-value="[[name]]" on-focus="onNonRadioFocus_">
</cr-policy-pref-indicator>
</template>
<div hidden$="[[noCollapse]]" class="separator"></div>
<cr-expand-button id="expandButton" no-hover
aria-label="[[expandAriaLabel]]"
hidden$="[[noCollapse]]" expanded="{{expanded}}"
on-click="onExpandClicked_"
on-focus="onNonRadioFocus_">
</cr-expand-button>
</div>
</div>
<cr-collapse opened="[[expanded]]">
<slot name="collapse"></slot>
<slot name="noSelectionCollapse"></slot>
</cr-collapse>
|
