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
|
<style include="print-preview-shared">
:host {
margin-top: 0 !important;
}
:host([is-pin-valid]) #pinValue {
--cr-input-error-display: none;
}
/* Margin = standard margin (16px) - error field margin (8px) */
:host(:not([is-pin-valid])) #customInputWrapper {
margin-bottom: 8px;
}
#pinValue {
--cr-form-field-label-height: 100%;
cursor: default;
}
:host #title {
align-self: baseline;
}
</style>
<print-preview-settings-section>
<div slot="title"></div>
<div slot="controls" class="checkbox">
<cr-checkbox id="pin" on-change="onPinChange_"
disabled="[[checkboxDisabled_]]" aria-labelledby="pin-label">
<span id="pin-label">$i18n{optionPin}</span>
</cr-checkbox>
</div>
</print-preview-settings-section>
<cr-collapse opened="[[pinEnabled_]]"
on-transitionend="onCollapseChanged_">
<print-preview-settings-section id="customInputWrapper">
<div slot="title"></div>
<div slot="controls">
<cr-input id="pinValue" type="text" pattern="[0-9]{4}" minlength="4"
maxlength="4" data-timeout-delay="250" aria-labelledby="pin"
placeholder="$i18n{pinPlaceholder}" spellcheck="false"
disabled$="[[inputDisabled_(pinEnabled_, isPinValid, disabled)]]"
error-message="[[getPinErrorMessage_(isPinValid)]]" required
auto-validate>
</cr-input>
</div>
</print-preview-settings-section>
</cr-collapse>
|
