blob: 88202ccb1df28ed215fe7de9951ee0eef0699db1 [file] [log] [blame]
<style include="cr-actionable-row-style settings-shared iron-flex">
:host {
padding: 0 var(--cr-section-padding);
}
:host([elide-label]),
:host([elide-label]) #outerRow,
:host([elide-label]) #outerRow > div.flex {
min-width: 0;
}
:host([elide-label]) .label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#outerRow {
align-items: center;
display: flex;
min-height: var(--settings-row-two-line-min-height);
width: 100%;
}
#outerRow[noSubLabel] {
min-height: var(--settings-row-min-height);
}
#labelWrapper {
padding: var(--cr-section-vertical-padding) 0;
}
#labelWrapper,
::slotted([slot='more-actions']) {
margin-inline-end: var(--settings-control-label-spacing) !important;
}
cr-policy-pref-indicator {
margin-inline-end: var(--settings-controlled-by-spacing);
}
</style>
<div id="outerRow" noSubLabel$="[[!subLabel]]">
<div class="flex" id="labelWrapper" hidden$="[[!label]]">
<div class="label" aria-hidden="true">[[label]]</div>
<div class="secondary label" id="sub-label">
<template is="dom-if" if="[[subLabelIcon]]">
<span id="sub-label-icon" aria-hidden="true">
<iron-icon slot="icon" icon="[[subLabelIcon]]">
</iron-icon>
</span>
</template>
<span id="sub-label-text" aria-hidden="true">
[[subLabel]]
</span>
<template is="dom-if" if="[[learnMoreUrl]]">
<a id="learn-more" href="[[learnMoreUrl]]" target="_blank"
aria-labelledby="sub-label-text learn-more"
on-click="onLearnMoreClicked_">
$i18n{learnMore}
</a>
</template>
</div>
</div>
<slot name="more-actions"></slot>
<template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]">
<cr-policy-pref-indicator pref="[[pref]]" icon-aria-label="[[label]]">
</cr-policy-pref-indicator>
</template>
<cr-toggle id="control" checked="{{checked}}"
on-change="onChange_"
aria-label$="[[getAriaLabel_(label, ariaLabel)]]"
aria-describedby="sub-label-text"
disabled="[[controlDisabled(disabled, pref)]]">
</cr-toggle>
</div>