| <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> |