All files / features/templates default-select-templates.inline.html

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
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template id="option">
    <span data-value="$.value"><slot name="$.text"></slot></span>
</template>
<template id="option-list">
    <span data-value="$.value"><slot name="$.text"></slot></span>
</template>
<template id="single-select-input">
    <span class="selected-value">
        <button class="background-button"></button>
        <span class="option">
          <span class="option-content"><slot data-value="$.selectedOption" name="selected-option"></slot></span>
        </span>
        <span class="collapse-arrow" role="presentation"></span>
    </span>
</template>
<template id="multi-select-input">
    <span class="multi-input">
        <button class="background-button"></button>
        <span class="selected-options">
        <template data-each="$.selectedOptions">
            <span data-value="$.value" class="option multiselect-option">
                <span class="option-content"><slot data-value="$." name="selected-option"></slot></span>
                <button class="deselect-option" tabindex="-1"></button>
            </span>
        </template>
        </span>
        <a class="clear-button"></a>
        <i class="collapse-arrow" role="presentation"></i>
    </span>
</template>
<template id="multi-select-input--mobile">
    <span class="multi-input">
        <button class="background-button"></button>
        <span class="selected-options">
        <template data-each="$.selectedOptions">
            <span data-value="$.value" class="option multiselect-option">
                <span class="option-content"><slot data-value="$." name="selected-option"></slot></span>
            </span>
        </template>
        </span>
        <i class="collapse-arrow" role="presentation"></i>
    </span>
</template>
<template id="dropdown-list">
    <template data-each="$.ungroupedOptions">
        <li class="option-value" data-value="$.value" aria-selected="$.selected" data-focused="$?.focused">
            <label>
                <span class="option"><span class="option-content"><slot data-value="$." name="option"></slot></span></span>
                <input value="$.value" class="option-checked-indicator" type="$.checkedIndicatorType" checked="$?.selected">
            </label>
        </li>
    </template>
    <template data-each="$.optionGroups">
        <li class="option-group">
            <header>
                <slot name="$.groupName"></slot>
            </header>
            <ul class="value-list">
                <template data-each="$.options">
                    <li class="option-value" data-value="$.value" aria-selected="$.selected" data-focused="$?.focused">
                        <label>
                            <span class="option"><slot data-value="$." name="option"></slot></span>
                            <input value="$.value" class="option-checked-indicator" type="$.checkedIndicatorType" checked="$?.selected">
                        </label>
                    </li>
                </template>
            </ul>
        </li>
    </template>
    <span class="loading-notification"><slot name="loading-notification"></slot></span>
</template>
<template id="loading-notification">
    <div class="default-loader">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </div>
</template>