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
|
<style include="cr-shared-style settings-shared">
:host {
display: flex;
flex-direction: column;
}
#newWord {
width: 100%;
--cr-input-width: var(--cr-default-input-max-width);
}
#newWord::part(row-container) {
justify-content: normal;
}
iron-list .word {
flex: 1;
}
</style>
<div class="cr-row first" on-keydown="onKeysPress_">
<cr-input id="newWord" value="{{newWordValue_}}"
placeholder="$i18n{addDictionaryWordLabel}"
invalid="[[isWordInvalid_(newWordValue_, words_.*)]]"
error-message="[[getErrorMessage_(newWordValue_, words_.*)]]"
spellcheck="false">
<cr-button on-click="onAddWordClick_" id="addWord" slot="suffix"
disabled$="[[disableAddButton_(newWordValue_, words_.*)]]">
$i18n{addDictionaryWordButton}
</cr-button>
</cr-input>
</div>
<div class="cr-row continuation">
<h2>$i18n{customDictionaryWords}</h2>
</div>
<div class="list-frame">
<template is="dom-if" if="[[hasWords_]]">
<iron-list id="list" items="[[words_]]" preserve-focus
scroll-target="[[subpageScrollTarget]]" risk-selection>
<template>
<div class="list-item">
<div id$="word[[index]]" class="word text-elide">[[item]]</div>
<cr-icon-button class="icon-clear" on-click="onRemoveWordClick_"
tabindex$="[[tabIndex]]"
title="$i18n{deleteDictionaryWordButton}"
aria-describedby$="word[[index]]">
</cr-icon-button>
</div>
</template>
</iron-list>
</template>
<div id="noWordsLabel" class="list-item" hidden$="[[hasWords_]]">
$i18n{noCustomDictionaryWordsFound}
</div>
</div>
|
