govuk_publishing_components 65.1.0 → 65.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/component_guide/application.scss +13 -15
- data/app/assets/stylesheets/govuk_publishing_components/all-components.scss +0 -1
- data/app/assets/stylesheets/govuk_publishing_components/components/_contents-list.scss +25 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_details.scss +34 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/_heading.scss +1 -0
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_markdown-typography.scss +4 -0
- data/app/assets/stylesheets/govuk_publishing_components/specific-components.scss +0 -1
- data/app/controllers/govuk_publishing_components/applications_page_controller.rb +1 -1
- data/app/controllers/govuk_publishing_components/audit_controller.rb +0 -1
- data/app/models/govuk_publishing_components/component_doc.rb +10 -3
- data/app/models/govuk_publishing_components/component_wrapper_helper_options.rb +4 -2
- data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb +1 -1
- data/app/views/govuk_publishing_components/component_guide/component_doc/_preview.html.erb +2 -2
- data/app/views/govuk_publishing_components/component_guide/show.html.erb +47 -33
- data/app/views/govuk_publishing_components/components/_details.html.erb +4 -0
- data/app/views/govuk_publishing_components/components/_devolved_nations.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/_option_select.html.erb +2 -2
- data/app/views/govuk_publishing_components/components/docs/details.yml +16 -0
- data/lib/govuk_publishing_components/presenters/devolved_nations_helper.rb +13 -7
- data/lib/govuk_publishing_components/version.rb +1 -1
- data/node_modules/choices.js/README.md +140 -30
- data/node_modules/choices.js/package.json +10 -13
- data/node_modules/choices.js/public/assets/scripts/choices.js +144 -89
- data/node_modules/choices.js/public/assets/scripts/choices.min.js +2 -2
- data/node_modules/choices.js/public/assets/scripts/choices.mjs +144 -89
- data/node_modules/choices.js/public/assets/scripts/choices.search-basic.js +144 -86
- data/node_modules/choices.js/public/assets/scripts/choices.search-basic.min.js +2 -2
- data/node_modules/choices.js/public/assets/scripts/choices.search-basic.mjs +144 -86
- data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.js +139 -77
- data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.min.js +2 -2
- data/node_modules/choices.js/public/assets/scripts/choices.search-kmp.mjs +139 -77
- data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.js +137 -76
- data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.min.js +2 -2
- data/node_modules/choices.js/public/assets/scripts/choices.search-prefix.mjs +137 -76
- data/node_modules/choices.js/public/assets/styles/base.css +39 -9
- data/node_modules/choices.js/public/assets/styles/base.css.map +1 -1
- data/node_modules/choices.js/public/assets/styles/base.min.css +1 -1
- data/node_modules/choices.js/public/assets/styles/choices.css +93 -95
- data/node_modules/choices.js/public/assets/styles/choices.css.map +1 -1
- data/node_modules/choices.js/public/assets/styles/choices.min.css +1 -1
- data/node_modules/choices.js/public/types/src/scripts/choices.d.ts +11 -0
- data/node_modules/choices.js/public/types/src/scripts/components/container.d.ts +2 -0
- data/node_modules/choices.js/public/types/src/scripts/interfaces/choice-full.d.ts +2 -1
- data/node_modules/choices.js/public/types/src/scripts/interfaces/class-names.d.ts +2 -0
- data/node_modules/choices.js/public/types/src/scripts/interfaces/input-choice.d.ts +2 -1
- data/node_modules/choices.js/public/types/src/scripts/interfaces/options.d.ts +19 -3
- data/node_modules/choices.js/public/types/src/scripts/interfaces/store.d.ts +2 -1
- data/node_modules/choices.js/public/types/src/scripts/interfaces/types.d.ts +2 -1
- data/node_modules/choices.js/public/types/src/scripts/lib/utils.d.ts +3 -1
- data/node_modules/choices.js/src/scripts/choices.ts +110 -64
- data/node_modules/choices.js/src/scripts/components/container.ts +8 -0
- data/node_modules/choices.js/src/scripts/components/wrapped-select.ts +3 -1
- data/node_modules/choices.js/src/scripts/defaults.ts +12 -7
- data/node_modules/choices.js/src/scripts/interfaces/choice-full.ts +2 -1
- data/node_modules/choices.js/src/scripts/interfaces/class-names.ts +2 -0
- data/node_modules/choices.js/src/scripts/interfaces/event-choice.ts +1 -0
- data/node_modules/choices.js/src/scripts/interfaces/input-choice.ts +4 -2
- data/node_modules/choices.js/src/scripts/interfaces/options.ts +21 -3
- data/node_modules/choices.js/src/scripts/interfaces/store.ts +2 -1
- data/node_modules/choices.js/src/scripts/interfaces/types.ts +3 -1
- data/node_modules/choices.js/src/scripts/lib/utils.ts +27 -4
- data/node_modules/choices.js/src/scripts/search/kmp.ts +2 -1
- data/node_modules/choices.js/src/scripts/store/store.ts +4 -1
- data/node_modules/choices.js/src/scripts/templates.ts +6 -3
- data/node_modules/choices.js/src/styles/base.scss +42 -9
- data/node_modules/choices.js/src/styles/choices.scss +119 -93
- metadata +2 -3
- data/app/assets/stylesheets/govuk_publishing_components/components/helpers/_contents-list-helper.scss +0 -24
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
.choices {
|
|
5
5
|
position: relative;
|
|
6
6
|
overflow: hidden;
|
|
7
|
-
margin-bottom: 24px;
|
|
8
|
-
font-size: 16px;
|
|
7
|
+
margin-bottom: var(--choices-guttering, 24px);
|
|
8
|
+
font-size: var(--choices-font-size-lg, 16px);
|
|
9
9
|
}
|
|
10
10
|
.choices:focus {
|
|
11
11
|
outline: none;
|
|
@@ -16,36 +16,39 @@
|
|
|
16
16
|
.choices.is-open {
|
|
17
17
|
overflow: visible;
|
|
18
18
|
}
|
|
19
|
-
.choices.is-disabled .choices__inner,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
cursor: not-allowed;
|
|
19
|
+
.choices.is-disabled :is(.choices__inner, .choices__input) {
|
|
20
|
+
background-color: var(--choices-bg-color-disabled, #eaeaea);
|
|
21
|
+
cursor: not-allowed !important;
|
|
23
22
|
-webkit-user-select: none;
|
|
24
23
|
user-select: none;
|
|
25
24
|
}
|
|
26
25
|
.choices.is-disabled .choices__item {
|
|
27
26
|
cursor: not-allowed;
|
|
27
|
+
color: var(--choices-item-disabled-color, #fff);
|
|
28
28
|
}
|
|
29
29
|
.choices [hidden] {
|
|
30
|
-
|
|
30
|
+
position: absolute;
|
|
31
|
+
inset: 0;
|
|
32
|
+
pointer-events: none;
|
|
33
|
+
opacity: 0;
|
|
31
34
|
}
|
|
32
35
|
|
|
33
36
|
.choices[data-type*=select-one] {
|
|
34
37
|
cursor: pointer;
|
|
35
38
|
}
|
|
36
39
|
.choices[data-type*=select-one] .choices__inner {
|
|
37
|
-
padding-bottom: 7.5px;
|
|
40
|
+
padding-bottom: var(--choices-inner-one-padding, 7.5px);
|
|
38
41
|
}
|
|
39
42
|
.choices[data-type*=select-one] .choices__input {
|
|
40
43
|
display: block;
|
|
41
|
-
width: 100
|
|
42
|
-
padding: 10px;
|
|
43
|
-
border-bottom: 1px solid #ddd;
|
|
44
|
-
background-color: #fff;
|
|
44
|
+
width: var(--choices-width, 100%);
|
|
45
|
+
padding: var(--choices-dropdown-item-padding, 10px);
|
|
46
|
+
border-bottom: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
|
|
47
|
+
background-color: var(--choices-bg-color-dropdown, #fff);
|
|
45
48
|
margin: 0;
|
|
46
49
|
}
|
|
47
50
|
.choices[data-type*=select-one] .choices__button {
|
|
48
|
-
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==");
|
|
51
|
+
background-image: var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
|
|
49
52
|
padding: 0;
|
|
50
53
|
background-size: 8px;
|
|
51
54
|
position: absolute;
|
|
@@ -58,11 +61,11 @@
|
|
|
58
61
|
border-radius: 10em;
|
|
59
62
|
opacity: 0.25;
|
|
60
63
|
}
|
|
61
|
-
.choices[data-type*=select-one] .choices__button:hover,
|
|
62
|
-
opacity: 1;
|
|
64
|
+
.choices[data-type*=select-one] .choices__button:is(:hover, :focus) {
|
|
65
|
+
opacity: var(--choices-button-opacity-hover, 1);
|
|
63
66
|
}
|
|
64
67
|
.choices[data-type*=select-one] .choices__button:focus {
|
|
65
|
-
box-shadow: 0 0 0 2px #005F75;
|
|
68
|
+
box-shadow: 0 0 0 2px var(--choices-highlight-color, #005F75);
|
|
66
69
|
}
|
|
67
70
|
.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button {
|
|
68
71
|
display: none;
|
|
@@ -72,17 +75,17 @@
|
|
|
72
75
|
height: 0;
|
|
73
76
|
width: 0;
|
|
74
77
|
border-style: solid;
|
|
75
|
-
border-color: #333 transparent transparent transparent;
|
|
76
|
-
border-width: 5px;
|
|
78
|
+
border-color: var(--choices-text-color, #333) transparent transparent transparent;
|
|
79
|
+
border-width: var(--choices-arrow-size, 5px);
|
|
77
80
|
position: absolute;
|
|
78
|
-
right: 11.5px;
|
|
81
|
+
right: var(--choices-arrow-right, 11.5px);
|
|
79
82
|
top: 50%;
|
|
80
|
-
margin-top: -2.5px;
|
|
83
|
+
margin-top: var(--choices-arrow-margin-top, -2.5px);
|
|
81
84
|
pointer-events: none;
|
|
82
85
|
}
|
|
83
86
|
.choices[data-type*=select-one].is-open::after {
|
|
84
|
-
border-color: transparent transparent #333;
|
|
85
|
-
margin-top: -7.5px;
|
|
87
|
+
border-color: transparent transparent var(--choices-text-color, #333);
|
|
88
|
+
margin-top: var(--choices-arrow-margin-top-open, -7.5px);
|
|
86
89
|
}
|
|
87
90
|
.choices[data-type*=select-one][dir=rtl]::after {
|
|
88
91
|
left: 11.5px;
|
|
@@ -95,53 +98,49 @@
|
|
|
95
98
|
margin-right: 0;
|
|
96
99
|
}
|
|
97
100
|
|
|
98
|
-
.choices[data-type*=select-multiple] .choices__inner
|
|
99
|
-
.choices[data-type*=text] .choices__inner {
|
|
101
|
+
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__inner {
|
|
100
102
|
cursor: text;
|
|
101
103
|
}
|
|
102
|
-
.choices[data-type*=select-multiple] .choices__button
|
|
103
|
-
.choices[data-type*=text] .choices__button {
|
|
104
|
+
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button {
|
|
104
105
|
position: relative;
|
|
105
106
|
display: inline-block;
|
|
106
|
-
margin
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
.choices[data-type*=select-multiple] .choices__button:hover, .choices[data-type*=select-multiple] .choices__button:focus,
|
|
120
|
-
.choices[data-type*=text] .choices__button:hover,
|
|
121
|
-
.choices[data-type*=text] .choices__button:focus {
|
|
122
|
-
opacity: 1;
|
|
107
|
+
margin: 0 calc(var(--choices-button-offset, 8px) * -0.5) 0 var(--choices-button-offset, 8px);
|
|
108
|
+
padding-left: calc(var(--choices-button-offset, 8px) * 2);
|
|
109
|
+
border-left: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
|
|
110
|
+
background-image: var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));
|
|
111
|
+
background-size: var(--choices-button-dimension, 8px);
|
|
112
|
+
width: var(--choices-button-dimension, 8px);
|
|
113
|
+
line-height: var(--choices-button-line-height, 1);
|
|
114
|
+
border-radius: var(--choices-button-border-radius, 0);
|
|
115
|
+
opacity: var(--choices-button-opacity, 0.75);
|
|
116
|
+
}
|
|
117
|
+
.choices:is([data-type*=select-multiple], [data-type*=text]) .choices__button:is(:hover, :focus) {
|
|
118
|
+
--choices-button-opacity: var(--choices-button-opacity-hover, 1);
|
|
123
119
|
}
|
|
124
120
|
|
|
125
121
|
.choices__inner {
|
|
126
122
|
display: inline-block;
|
|
127
123
|
vertical-align: top;
|
|
128
|
-
width: 100
|
|
129
|
-
background-color: #f9f9f9;
|
|
130
|
-
padding: 7.5px 7.5px 3.75px;
|
|
131
|
-
border: 1px solid #ddd;
|
|
132
|
-
border-radius: 2.5px;
|
|
133
|
-
font-size: 14px;
|
|
134
|
-
min-height: 44px;
|
|
124
|
+
width: var(--choices-width, 100%);
|
|
125
|
+
background-color: var(--choices-bg-color, #f9f9f9);
|
|
126
|
+
padding: var(--choices-inner-padding, 7.5px 7.5px 3.75px);
|
|
127
|
+
border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
|
|
128
|
+
border-radius: var(--choices-border-radius, 2.5px);
|
|
129
|
+
font-size: var(--choices-font-size-md, 14px);
|
|
130
|
+
min-height: var(--choices-input-height, 44px);
|
|
135
131
|
overflow: hidden;
|
|
136
132
|
}
|
|
137
133
|
.is-focused .choices__inner, .is-open .choices__inner {
|
|
138
|
-
border-color: #
|
|
134
|
+
border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
|
|
139
135
|
}
|
|
140
136
|
.is-open .choices__inner {
|
|
141
|
-
border-radius: 2.5px 2.5px 0 0;
|
|
137
|
+
border-radius: var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px) 0 0;
|
|
138
|
+
}
|
|
139
|
+
.is-invalid .choices__inner {
|
|
140
|
+
border-color: var(--choices-invalid-color, #d33141);
|
|
142
141
|
}
|
|
143
142
|
.is-flipped.is-open .choices__inner {
|
|
144
|
-
border-radius: 0 0 2.5px 2.5px;
|
|
143
|
+
border-radius: 0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px);
|
|
145
144
|
}
|
|
146
145
|
|
|
147
146
|
.choices__list {
|
|
@@ -151,15 +150,15 @@
|
|
|
151
150
|
}
|
|
152
151
|
.choices__list--single {
|
|
153
152
|
display: inline-block;
|
|
154
|
-
padding: 4px 16px 4px 4px;
|
|
155
|
-
width: 100
|
|
153
|
+
padding: var(--choices-list-single-padding, 4px 16px 4px 4px);
|
|
154
|
+
width: var(--choices-width, 100%);
|
|
156
155
|
}
|
|
157
156
|
[dir=rtl] .choices__list--single {
|
|
158
157
|
padding-right: 4px;
|
|
159
158
|
padding-left: 16px;
|
|
160
159
|
}
|
|
161
160
|
.choices__list--single .choices__item {
|
|
162
|
-
width: 100
|
|
161
|
+
width: var(--choices-width, 100%);
|
|
163
162
|
}
|
|
164
163
|
|
|
165
164
|
.choices__list--multiple {
|
|
@@ -168,15 +167,15 @@
|
|
|
168
167
|
.choices__list--multiple .choices__item {
|
|
169
168
|
display: inline-block;
|
|
170
169
|
vertical-align: middle;
|
|
171
|
-
border-radius: 20px;
|
|
172
|
-
padding: 4px 10px;
|
|
173
|
-
font-size: 12px;
|
|
170
|
+
border-radius: var(--choices-border-radius-item, 20px);
|
|
171
|
+
padding: var(--choices-multiple-item-padding, 4px 10px);
|
|
172
|
+
font-size: var(--choices-font-size-sm, 12px);
|
|
174
173
|
font-weight: 500;
|
|
175
|
-
margin-right: 3.75px;
|
|
176
|
-
margin-bottom: 3.75px;
|
|
177
|
-
background-color: #005F75;
|
|
178
|
-
border: 1px solid #
|
|
179
|
-
color: #fff;
|
|
174
|
+
margin-right: var(--choices-multiple-item-margin, 3.75px);
|
|
175
|
+
margin-bottom: var(--choices-multiple-item-margin, 3.75px);
|
|
176
|
+
background-color: var(--choices-primary-color, #005F75);
|
|
177
|
+
border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
|
|
178
|
+
color: var(--choices-item-color, #fff);
|
|
180
179
|
word-break: break-all;
|
|
181
180
|
box-sizing: border-box;
|
|
182
181
|
}
|
|
@@ -185,28 +184,28 @@
|
|
|
185
184
|
}
|
|
186
185
|
[dir=rtl] .choices__list--multiple .choices__item {
|
|
187
186
|
margin-right: 0;
|
|
188
|
-
margin-left: 3.75px;
|
|
187
|
+
margin-left: var(--choices-multiple-item-margin, 3.75px);
|
|
189
188
|
}
|
|
190
189
|
.choices__list--multiple .choices__item.is-highlighted {
|
|
191
|
-
background-color: #
|
|
192
|
-
border: 1px solid #
|
|
190
|
+
background-color: color-mix(in srgb, var(--choices-primary-color, #005F75) 95%, var(--choices-darken, black));
|
|
191
|
+
border: 1px solid color-mix(in srgb, var(--choices-primary-color, #005F75) 90%, var(--choices-darken, black));
|
|
193
192
|
}
|
|
194
193
|
.is-disabled .choices__list--multiple .choices__item {
|
|
195
|
-
background-color: #
|
|
196
|
-
border: 1px solid #
|
|
194
|
+
background-color: color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 75%, var(--choices-darken, black));
|
|
195
|
+
border: 1px solid color-mix(in srgb, var(--choices-disabled-color, #eaeaea) 65%, var(--choices-darken, black));
|
|
197
196
|
}
|
|
198
197
|
|
|
199
198
|
.choices__list--dropdown, .choices__list[aria-expanded] {
|
|
200
199
|
display: none;
|
|
201
|
-
z-index: 1;
|
|
200
|
+
z-index: var(--choices-z-index, 1);
|
|
202
201
|
position: absolute;
|
|
203
|
-
width: 100
|
|
204
|
-
background-color: #fff;
|
|
205
|
-
border: 1px solid #ddd;
|
|
202
|
+
width: var(--choices-width, 100%);
|
|
203
|
+
background-color: var(--choices-bg-color-dropdown, #fff);
|
|
204
|
+
border: var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);
|
|
206
205
|
top: 100%;
|
|
207
206
|
margin-top: -1px;
|
|
208
|
-
border-bottom-left-radius: 2.5px;
|
|
209
|
-
border-bottom-right-radius: 2.5px;
|
|
207
|
+
border-bottom-left-radius: var(--choices-border-radius, 2.5px);
|
|
208
|
+
border-bottom-right-radius: var(--choices-border-radius, 2.5px);
|
|
210
209
|
overflow: hidden;
|
|
211
210
|
word-break: break-all;
|
|
212
211
|
}
|
|
@@ -214,7 +213,7 @@
|
|
|
214
213
|
display: block;
|
|
215
214
|
}
|
|
216
215
|
.is-open .choices__list--dropdown, .is-open .choices__list[aria-expanded] {
|
|
217
|
-
border-color: #
|
|
216
|
+
border-color: color-mix(in srgb, var(--choices-keyline-color, #ddd) 85%, var(--choices-darken, black));
|
|
218
217
|
}
|
|
219
218
|
.is-flipped .choices__list--dropdown, .is-flipped .choices__list[aria-expanded] {
|
|
220
219
|
top: auto;
|
|
@@ -232,40 +231,39 @@
|
|
|
232
231
|
}
|
|
233
232
|
.choices__list--dropdown .choices__item, .choices__list[aria-expanded] .choices__item {
|
|
234
233
|
position: relative;
|
|
235
|
-
padding: 10px;
|
|
236
|
-
font-size: 14px;
|
|
234
|
+
padding: var(--choices-dropdown-item-padding, 10px);
|
|
235
|
+
font-size: var(--choices-font-size-md, 14px);
|
|
237
236
|
}
|
|
238
237
|
[dir=rtl] .choices__list--dropdown .choices__item, [dir=rtl] .choices__list[aria-expanded] .choices__item {
|
|
239
238
|
text-align: right;
|
|
240
239
|
}
|
|
241
240
|
@media (min-width: 640px) {
|
|
242
|
-
.choices__list--dropdown .choices__item--selectable[data-select-text], .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
|
|
241
|
+
.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
|
|
243
242
|
padding-right: 100px;
|
|
244
243
|
}
|
|
245
|
-
.choices__list--dropdown .choices__item--selectable[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
|
|
244
|
+
.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
|
|
246
245
|
content: attr(data-select-text);
|
|
247
|
-
font-size: 12px;
|
|
248
|
-
opacity: 0;
|
|
246
|
+
font-size: var(--choices-font-size-sm, 12px);
|
|
249
247
|
position: absolute;
|
|
250
248
|
right: 10px;
|
|
251
249
|
top: 50%;
|
|
252
250
|
transform: translateY(-50%);
|
|
253
251
|
}
|
|
254
|
-
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text] {
|
|
252
|
+
[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text], [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text] {
|
|
255
253
|
text-align: right;
|
|
256
254
|
padding-left: 100px;
|
|
257
255
|
padding-right: 10px;
|
|
258
256
|
}
|
|
259
|
-
[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after {
|
|
257
|
+
[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after, [dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after {
|
|
260
258
|
right: auto;
|
|
261
259
|
left: 10px;
|
|
262
260
|
}
|
|
263
261
|
}
|
|
264
|
-
.choices__list--dropdown .choices__item--selectable.is-
|
|
265
|
-
|
|
262
|
+
.choices__list--dropdown .choices__item--selectable.is-selected::after, .choices__list[aria-expanded] .choices__item--selectable.is-selected::after {
|
|
263
|
+
content: none !important;
|
|
266
264
|
}
|
|
267
|
-
.choices__list--dropdown .choices__item--selectable.is-highlighted
|
|
268
|
-
|
|
265
|
+
.choices__list--dropdown .choices__item--selectable.is-selected, .choices__list[aria-expanded] .choices__item--selectable.is-selected, .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
|
|
266
|
+
background-color: var(--choices-highlighted-color, #f2f2f2);
|
|
269
267
|
}
|
|
270
268
|
|
|
271
269
|
.choices__item {
|
|
@@ -287,7 +285,7 @@
|
|
|
287
285
|
font-weight: 600;
|
|
288
286
|
font-size: 12px;
|
|
289
287
|
padding: 10px;
|
|
290
|
-
border-bottom: 1px solid #
|
|
288
|
+
border-bottom: 1px solid color-mix(in srgb, var(--choices-keyline-color, #ddd) 90%, var(--choices-lighten, white));
|
|
291
289
|
color: gray;
|
|
292
290
|
}
|
|
293
291
|
|
|
@@ -307,13 +305,13 @@
|
|
|
307
305
|
.choices__input {
|
|
308
306
|
display: inline-block;
|
|
309
307
|
vertical-align: baseline;
|
|
310
|
-
background-color: #f9f9f9;
|
|
311
|
-
font-size: 14px;
|
|
312
|
-
margin-bottom: 5px;
|
|
308
|
+
background-color: var(--choices-bg-color, #f9f9f9);
|
|
309
|
+
font-size: var(--choices-font-size-md, 14px);
|
|
310
|
+
margin-bottom: var(--choices-input-margin-bottom, 5px);
|
|
313
311
|
border: 0;
|
|
314
312
|
border-radius: 0;
|
|
315
|
-
max-width: 100
|
|
316
|
-
padding: 4px 0 4px 2px;
|
|
313
|
+
max-width: var(--choices-width, 100%);
|
|
314
|
+
padding: var(--choices-input-padding, 4px 0 4px 2px);
|
|
317
315
|
}
|
|
318
316
|
.choices__input:focus {
|
|
319
317
|
outline: 0;
|
|
@@ -332,7 +330,7 @@
|
|
|
332
330
|
}
|
|
333
331
|
|
|
334
332
|
.choices__placeholder {
|
|
335
|
-
opacity: 0.5;
|
|
333
|
+
opacity: var(--choices-placeholder-opacity, 0.5);
|
|
336
334
|
}
|
|
337
335
|
|
|
338
336
|
/* ===== End of Choices ====== */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/styles/choices.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAiDA;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;;AAIA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAIA;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;;;AAMJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;;AAOF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;;AAKA;EADF;IAEI;;EAEA;IACE;IACA;IACA;IACA;IACA;IACA;;EAGF;IACE;IACA;IACA;;EAEA;IACE;IACA;;;AAQN;EACE;;AAIJ;EAEE;;;AASN;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA,WArXqB;EAsXrB;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAIE;;AAGF;EAEE;EACA;EACA;;AAGF;EACE;EACA;;;AAIJ;EACE;;;AAGF","file":"choices.css"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.choices{position:relative;overflow:hidden;margin-bottom:24px;font-size:16px}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled .choices__inner,.choices.is-disabled .choices__input{background-color:#eaeaea;cursor:not-allowed;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed}.choices [hidden]{display:none!important}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:7.5px}.choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:10px;border-bottom:1px solid #ddd;background-color:#fff;margin:0}.choices[data-type*=select-one] .choices__button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:focus,.choices[data-type*=select-one] .choices__button:hover{opacity:1}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px #005f75}.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:#333 transparent transparent;border-width:5px;position:absolute;right:11.5px;top:50%;margin-top:-2.5px;pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent #333;margin-top:-7.5px}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices[data-type*=select-multiple] .choices__inner,.choices[data-type*=text] .choices__inner{cursor:text}.choices[data-type*=select-multiple] .choices__button,.choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin:0-4px 0 8px;padding-left:16px;border-left:1px solid #003642;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:.75;border-radius:0}.choices[data-type*=select-multiple] .choices__button:focus,.choices[data-type*=select-multiple] .choices__button:hover,.choices[data-type*=text] .choices__button:focus,.choices[data-type*=text] .choices__button:hover{opacity:1}.choices__inner{display:inline-block;vertical-align:top;width:100%;background-color:#f9f9f9;padding:7.5px 7.5px 3.75px;border:1px solid #ddd;border-radius:2.5px;font-size:14px;min-height:44px;overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:#b7b7b7}.is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:4px 16px 4px 4px;width:100%}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single .choices__item{width:100%}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:12px;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#005f75;border:1px solid #004a5c;color:#fff;word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.choices__list--multiple .choices__item.is-highlighted{background-color:#004a5c;border:1px solid #003642}.is-disabled .choices__list--multiple .choices__item{background-color:#aaa;border:1px solid #919191}.choices__list--dropdown,.choices__list[aria-expanded]{display:none;z-index:1;position:absolute;width:100%;background-color:#fff;border:1px solid #ddd;top:100%;margin-top:-1px;border-bottom-left-radius:2.5px;border-bottom-right-radius:2.5px;overflow:hidden;word-break:break-all}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{display:block}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:#b7b7b7}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:10px;font-size:14px}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable[data-select-text],.choices__list[aria-expanded] .choices__item--selectable[data-select-text]{padding-right:100px}.choices__list--dropdown .choices__item--selectable[data-select-text]::after,.choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after{content:attr(data-select-text);font-size:12px;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text],[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable[data-select-text]::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable[data-select-text]::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background-color:#f2f2f2}.choices__list--dropdown .choices__item--selectable.is-highlighted::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after{opacity:.5}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid #f7f7f7;color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:14px;margin-bottom:5px;border:0;border-radius:0;max-width:100%;padding:4px 0 4px 2px}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:.5}
|
|
1
|
+
.choices{position:relative;overflow:hidden;margin-bottom:var(--choices-guttering, 24px);font-size:var(--choices-font-size-lg, 16px)}.choices:focus{outline:0}.choices:last-child{margin-bottom:0}.choices.is-open{overflow:visible}.choices.is-disabled :is(.choices__inner,.choices__input){background-color:var(--choices-bg-color-disabled, #eaeaea);cursor:not-allowed!important;-webkit-user-select:none;user-select:none}.choices.is-disabled .choices__item{cursor:not-allowed;color:var(--choices-item-disabled-color, #fff)}.choices [hidden]{position:absolute;inset:0;pointer-events:none;opacity:0}.choices[data-type*=select-one]{cursor:pointer}.choices[data-type*=select-one] .choices__inner{padding-bottom:var(--choices-inner-one-padding, 7.5px)}.choices[data-type*=select-one] .choices__input{display:block;width:var(--choices-width, 100%);padding:var(--choices-dropdown-item-padding, 10px);border-bottom:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);background-color:var(--choices-bg-color-dropdown, #fff);margin:0}.choices[data-type*=select-one] .choices__button{background-image:var(--choices-icon-cross-inverse, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:.25}.choices[data-type*=select-one] .choices__button:is(:hover,:focus){opacity:var(--choices-button-opacity-hover, 1)}.choices[data-type*=select-one] .choices__button:focus{box-shadow:0 0 0 2px var(--choices-highlight-color, #005F75)}.choices[data-type*=select-one] .choices__item[data-placeholder] .choices__button{display:none}.choices[data-type*=select-one]::after{content:"";height:0;width:0;border-style:solid;border-color:var(--choices-text-color, #333) transparent transparent transparent;border-width:var(--choices-arrow-size, 5px);position:absolute;right:var(--choices-arrow-right, 11.5px);top:50%;margin-top:var(--choices-arrow-margin-top, -2.5px);pointer-events:none}.choices[data-type*=select-one].is-open::after{border-color:transparent transparent var(--choices-text-color, #333);margin-top:var(--choices-arrow-margin-top-open, -7.5px)}.choices[data-type*=select-one][dir=rtl]::after{left:11.5px;right:auto}.choices[data-type*=select-one][dir=rtl] .choices__button{right:auto;left:0;margin-left:25px;margin-right:0}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__inner{cursor:text}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__button{position:relative;display:inline-block;margin:0 calc(var(--choices-button-offset, 8px)*-.5)0 var(--choices-button-offset, 8px);padding-left:calc(var(--choices-button-offset, 8px)*2);border-left:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 90%,var(--choices-darken, black));background-image:var(--choices-icon-cross, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg=="));background-size:var(--choices-button-dimension, 8px);width:var(--choices-button-dimension, 8px);line-height:var(--choices-button-line-height, 1);border-radius:var(--choices-button-border-radius, 0);opacity:var(--choices-button-opacity, 0.75)}.choices:is([data-type*=select-multiple],[data-type*=text]) .choices__button:is(:hover,:focus){--choices-button-opacity:var(--choices-button-opacity-hover, 1)}.choices__inner{display:inline-block;vertical-align:top;width:var(--choices-width, 100%);background-color:var(--choices-bg-color, #f9f9f9);padding:var(--choices-inner-padding, 7.5px 7.5px 3.75px);border:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);border-radius:var(--choices-border-radius, 2.5px);font-size:var(--choices-font-size-md, 14px);min-height:var(--choices-input-height, 44px);overflow:hidden}.is-focused .choices__inner,.is-open .choices__inner{border-color:color-mix(in srgb,var(--choices-keyline-color, #ddd) 85%,var(--choices-darken, black))}.is-open .choices__inner{border-radius:var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px)0 0}.is-invalid .choices__inner{border-color:var(--choices-invalid-color, #d33141)}.is-flipped.is-open .choices__inner{border-radius:0 0 var(--choices-border-radius, 2.5px) var(--choices-border-radius, 2.5px)}.choices__list{margin:0;padding-left:0;list-style:none}.choices__list--single{display:inline-block;padding:var(--choices-list-single-padding, 4px 16px 4px 4px)}[dir=rtl] .choices__list--single{padding-right:4px;padding-left:16px}.choices__list--single,.choices__list--single .choices__item{width:var(--choices-width, 100%)}.choices__list--multiple{display:inline}.choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:var(--choices-border-radius-item, 20px);padding:var(--choices-multiple-item-padding, 4px 10px);font-size:var(--choices-font-size-sm, 12px);font-weight:500;margin-right:var(--choices-multiple-item-margin, 3.75px);margin-bottom:var(--choices-multiple-item-margin, 3.75px);background-color:var(--choices-primary-color, #005F75);border:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 95%,var(--choices-darken, black));color:var(--choices-item-color, #fff);word-break:break-all;box-sizing:border-box}.choices__list--multiple .choices__item[data-deletable]{padding-right:5px}[dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:var(--choices-multiple-item-margin, 3.75px)}.choices__list--multiple .choices__item.is-highlighted{background-color:color-mix(in srgb,var(--choices-primary-color, #005F75) 95%,var(--choices-darken, black));border:1px solid color-mix(in srgb,var(--choices-primary-color, #005F75) 90%,var(--choices-darken, black))}.is-disabled .choices__list--multiple .choices__item{background-color:color-mix(in srgb,var(--choices-disabled-color, #eaeaea) 75%,var(--choices-darken, black));border:1px solid color-mix(in srgb,var(--choices-disabled-color, #eaeaea) 65%,var(--choices-darken, black))}.choices__list--dropdown,.choices__list[aria-expanded]{display:none;z-index:var(--choices-z-index, 1);position:absolute;width:var(--choices-width, 100%);background-color:var(--choices-bg-color-dropdown, #fff);border:var(--choices-base-border, 1px solid) var(--choices-keyline-color, #ddd);top:100%;margin-top:-1px;border-bottom-left-radius:var(--choices-border-radius, 2.5px);border-bottom-right-radius:var(--choices-border-radius, 2.5px);overflow:hidden;word-break:break-all}.is-active.choices__list--dropdown,.is-active.choices__list[aria-expanded]{display:block}.is-open .choices__list--dropdown,.is-open .choices__list[aria-expanded]{border-color:color-mix(in srgb,var(--choices-keyline-color, #ddd) 85%,var(--choices-darken, black))}.is-flipped .choices__list--dropdown,.is-flipped .choices__list[aria-expanded]{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:.25rem .25rem 0 0}.choices__list--dropdown .choices__list,.choices__list[aria-expanded] .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.choices__list--dropdown .choices__item,.choices__list[aria-expanded] .choices__item{position:relative;padding:var(--choices-dropdown-item-padding, 10px);font-size:var(--choices-font-size-md, 14px)}[dir=rtl] .choices__list--dropdown .choices__item,[dir=rtl] .choices__list[aria-expanded] .choices__item{text-align:right}@media (min-width:640px){.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text],.choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]{padding-right:100px}.choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after{content:attr(data-select-text);font-size:var(--choices-font-size-sm, 12px);position:absolute;right:10px;top:50%;transform:translateY(-50%)}[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text],[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]{text-align:right;padding-left:100px;padding-right:10px}[dir=rtl] .choices__list--dropdown .choices__item--selectable.is-highlighted[data-select-text]::after,[dir=rtl] .choices__list[aria-expanded] .choices__item--selectable.is-highlighted[data-select-text]::after{right:auto;left:10px}}.choices__list--dropdown .choices__item--selectable.is-selected::after,.choices__list[aria-expanded] .choices__item--selectable.is-selected::after{content:none!important}.choices__list--dropdown .choices__item--selectable.is-highlighted,.choices__list--dropdown .choices__item--selectable.is-selected,.choices__list[aria-expanded] .choices__item--selectable.is-highlighted,.choices__list[aria-expanded] .choices__item--selectable.is-selected{background-color:var(--choices-highlighted-color, #f2f2f2)}.choices__item{cursor:default}.choices__item--selectable{cursor:pointer}.choices__item--disabled{cursor:not-allowed;-webkit-user-select:none;user-select:none;opacity:.5}.choices__heading{font-weight:600;font-size:12px;padding:10px;border-bottom:1px solid color-mix(in srgb,var(--choices-keyline-color, #ddd) 90%,var(--choices-lighten, white));color:gray}.choices__button{text-indent:-9999px;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.choices__button:focus,.choices__input:focus{outline:0}.choices__input{display:inline-block;vertical-align:baseline;background-color:var(--choices-bg-color, #f9f9f9);font-size:var(--choices-font-size-md, 14px);margin-bottom:var(--choices-input-margin-bottom, 5px);border:0;border-radius:0;max-width:var(--choices-width, 100%);padding:var(--choices-input-padding, 4px 0 4px 2px)}.choices__input::-webkit-search-cancel-button,.choices__input::-webkit-search-decoration,.choices__input::-webkit-search-results-button,.choices__input::-webkit-search-results-decoration{display:none}.choices__input::-ms-clear,.choices__input::-ms-reveal{display:none;width:0;height:0}[dir=rtl] .choices__input{padding-right:2px;padding-left:0}.choices__placeholder{opacity:var(--choices-placeholder-opacity, 0.5)}
|
|
@@ -155,6 +155,9 @@ declare class Choices {
|
|
|
155
155
|
_displayNotice(text: string, type: NoticeType, openDropdown?: boolean): void;
|
|
156
156
|
_clearNotice(): void;
|
|
157
157
|
_renderNotice(fragment?: DocumentFragment): void;
|
|
158
|
+
/**
|
|
159
|
+
* @deprecated Use utils.getChoiceForOutput
|
|
160
|
+
*/
|
|
158
161
|
_getChoiceForOutput(choice: ChoiceFull, keyCode?: number): EventChoice;
|
|
159
162
|
_triggerChange(value: any): void;
|
|
160
163
|
_handleButtonAction(element: HTMLElement): void;
|
|
@@ -193,6 +196,14 @@ declare class Choices {
|
|
|
193
196
|
_onFocus({ target }: Pick<FocusEvent, 'target'>): void;
|
|
194
197
|
_onBlur({ target }: Pick<FocusEvent, 'target'>): void;
|
|
195
198
|
_onFormReset(): void;
|
|
199
|
+
_onChange(event: Event & {
|
|
200
|
+
target: HTMLInputElement | HTMLSelectElement;
|
|
201
|
+
}): void;
|
|
202
|
+
_onInvalid(): void;
|
|
203
|
+
/**
|
|
204
|
+
* Removes any highlighted choice options
|
|
205
|
+
*/
|
|
206
|
+
_removeHighlightedChoices(): void;
|
|
196
207
|
_highlightChoice(el?: HTMLElement | null): void;
|
|
197
208
|
_addItem(item: ChoiceFull, withEvents?: boolean, userTriggered?: boolean): void;
|
|
198
209
|
_removeItem(item: ChoiceFull): void;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { StringUntrusted } from './string-untrusted';
|
|
2
|
+
import { StringPreEscaped } from './string-pre-escaped';
|
|
2
3
|
import { Types } from './types';
|
|
3
4
|
import { GroupFull } from './group-full';
|
|
4
5
|
export interface ChoiceFull {
|
|
@@ -8,7 +9,7 @@ export interface ChoiceFull {
|
|
|
8
9
|
itemEl?: HTMLElement;
|
|
9
10
|
choiceEl?: HTMLElement;
|
|
10
11
|
labelClass?: Array<string>;
|
|
11
|
-
labelDescription?: string;
|
|
12
|
+
labelDescription?: StringPreEscaped | StringUntrusted | string;
|
|
12
13
|
customProperties?: Types.CustomProperties;
|
|
13
14
|
disabled: boolean;
|
|
14
15
|
active: boolean;
|
|
@@ -50,6 +50,8 @@ export interface ClassNames {
|
|
|
50
50
|
flippedState: string | Array<string>;
|
|
51
51
|
/** @default ['is-loading'] */
|
|
52
52
|
loadingState: string | Array<string>;
|
|
53
|
+
/** @default ['is-invalid'] */
|
|
54
|
+
invalidState: string | Array<string>;
|
|
53
55
|
/** @default ['choices__notice'] */
|
|
54
56
|
notice: string | Array<string>;
|
|
55
57
|
/** @default ['choices__item--selectable', 'add-choice'] */
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { StringUntrusted } from './string-untrusted';
|
|
2
|
+
import { StringPreEscaped } from './string-pre-escaped';
|
|
2
3
|
import { Types } from './types';
|
|
3
4
|
export interface InputChoice {
|
|
4
5
|
id?: number;
|
|
5
6
|
highlighted?: boolean;
|
|
6
7
|
labelClass?: string | Array<string>;
|
|
7
|
-
labelDescription?: string;
|
|
8
|
+
labelDescription?: StringPreEscaped | StringUntrusted | string;
|
|
8
9
|
customProperties?: Types.CustomProperties;
|
|
9
10
|
disabled?: boolean;
|
|
10
11
|
active?: boolean;
|
|
@@ -186,7 +186,7 @@ export interface Options {
|
|
|
186
186
|
*
|
|
187
187
|
* @default
|
|
188
188
|
* ```
|
|
189
|
-
* (value, valueRaw) => `Remove item`;
|
|
189
|
+
* (value, valueRaw, item) => `Remove item`;
|
|
190
190
|
* ```
|
|
191
191
|
*/
|
|
192
192
|
removeItemIconText: string | Types.NoticeStringFunction;
|
|
@@ -200,7 +200,7 @@ export interface Options {
|
|
|
200
200
|
*
|
|
201
201
|
* @default
|
|
202
202
|
* ```
|
|
203
|
-
* (value, valueRaw) => `Remove item: ${value}`;
|
|
203
|
+
* (value, valueRaw, item) => `Remove item: ${value}`;
|
|
204
204
|
* ```
|
|
205
205
|
*/
|
|
206
206
|
removeItemLabelText: string | Types.NoticeStringFunction;
|
|
@@ -296,6 +296,14 @@ export interface Options {
|
|
|
296
296
|
* @default true
|
|
297
297
|
*/
|
|
298
298
|
searchChoices: boolean;
|
|
299
|
+
/**
|
|
300
|
+
* Whether disabled choices should be included in search results. If `true`, disabled choices will appear in search results but still cannot be selected.
|
|
301
|
+
*
|
|
302
|
+
* **Input types affected:** select-one, select-multiple
|
|
303
|
+
*
|
|
304
|
+
* @default false
|
|
305
|
+
*/
|
|
306
|
+
searchDisabledChoices: boolean;
|
|
299
307
|
/**
|
|
300
308
|
* The minimum length a search value should be before choices are searched.
|
|
301
309
|
*
|
|
@@ -431,6 +439,14 @@ export interface Options {
|
|
|
431
439
|
* @default 'auto';
|
|
432
440
|
*/
|
|
433
441
|
renderSelectedChoices: 'auto' | 'always' | boolean;
|
|
442
|
+
/**
|
|
443
|
+
* Whether selected choices should be removed from the list during search.
|
|
444
|
+
*
|
|
445
|
+
* **Input types affected:** select-multiple
|
|
446
|
+
*
|
|
447
|
+
* @default false;
|
|
448
|
+
*/
|
|
449
|
+
searchRenderSelectedChoices: boolean;
|
|
434
450
|
/**
|
|
435
451
|
* The text that is shown whilst choices are being populated via AJAX.
|
|
436
452
|
*
|
|
@@ -562,5 +578,5 @@ export interface Options {
|
|
|
562
578
|
* @default null
|
|
563
579
|
*/
|
|
564
580
|
callbackOnCreateTemplates: CallbackOnCreateTemplatesFn | null;
|
|
565
|
-
appendGroupInSearch:
|
|
581
|
+
appendGroupInSearch: boolean;
|
|
566
582
|
}
|
|
@@ -38,7 +38,8 @@ export interface Store {
|
|
|
38
38
|
*/
|
|
39
39
|
get activeChoices(): ChoiceFull[];
|
|
40
40
|
/**
|
|
41
|
-
* Get choices that can be searched (excluding placeholders
|
|
41
|
+
* Get choices that can be searched (excluding placeholders,
|
|
42
|
+
* optionally excluding disabled based on config)
|
|
42
43
|
*/
|
|
43
44
|
get searchableChoices(): ChoiceFull[];
|
|
44
45
|
/**
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { StringUntrusted } from './string-untrusted';
|
|
2
2
|
import { StringPreEscaped } from './string-pre-escaped';
|
|
3
|
+
import { EventChoice } from './event-choice';
|
|
3
4
|
export declare namespace Types {
|
|
4
5
|
type StrToEl = (str: string) => HTMLElement | HTMLInputElement | HTMLOptionElement;
|
|
5
6
|
type EscapeForTemplateFn = (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
|
|
6
7
|
type GetClassNamesFn = (s: string | Array<string>) => string;
|
|
7
8
|
type StringFunction = () => string;
|
|
8
|
-
type NoticeStringFunction = (value: string, valueRaw: string) => string;
|
|
9
|
+
type NoticeStringFunction = (value: string, valueRaw: string, item?: EventChoice) => string;
|
|
9
10
|
type NoticeLimitFunction = (maxItemCount: number) => string;
|
|
10
11
|
type FilterFunction = (value: string) => boolean;
|
|
11
12
|
type ValueCompareFunction = (value1: string, value2: string) => boolean;
|
|
@@ -3,15 +3,17 @@ import { StringUntrusted } from '../interfaces/string-untrusted';
|
|
|
3
3
|
import { StringPreEscaped } from '../interfaces/string-pre-escaped';
|
|
4
4
|
import { ChoiceFull } from '../interfaces/choice-full';
|
|
5
5
|
import { Types } from '../interfaces/types';
|
|
6
|
+
import { EventChoice } from '../interfaces';
|
|
6
7
|
export declare const generateId: (element: HTMLInputElement | HTMLSelectElement, prefix: string) => string;
|
|
7
8
|
export declare const getAdjacentEl: (startEl: HTMLElement, selector: string, direction?: number) => HTMLElement | null;
|
|
8
9
|
export declare const isScrolledIntoView: (element: HTMLElement, parent: HTMLElement, direction?: number) => boolean;
|
|
9
10
|
export declare const sanitise: <T>(value: T | StringUntrusted | StringPreEscaped | string) => T | string;
|
|
10
11
|
export declare const strToEl: (str: string) => Element;
|
|
11
|
-
export declare const resolveNoticeFunction: (fn: Types.NoticeStringFunction | string, value: string) => string;
|
|
12
12
|
export declare const resolveStringFunction: (fn: Types.StringFunction | string) => string;
|
|
13
13
|
export declare const unwrapStringForRaw: (s?: StringUntrusted | StringPreEscaped | string) => string;
|
|
14
14
|
export declare const unwrapStringForEscaped: (s?: StringUntrusted | StringPreEscaped | string) => string;
|
|
15
|
+
export declare const getChoiceForOutput: (choice: ChoiceFull, keyCode?: number) => EventChoice;
|
|
16
|
+
export declare const resolveNoticeFunction: (fn: Types.NoticeStringFunction | string, value: StringUntrusted | StringPreEscaped | string, item?: EventChoice) => string;
|
|
15
17
|
export declare const escapeForTemplate: (allowHTML: boolean, s: StringUntrusted | StringPreEscaped | string) => string;
|
|
16
18
|
export declare const setElementHtml: (el: HTMLElement, allowHtml: boolean, html: StringUntrusted | StringPreEscaped | string) => void;
|
|
17
19
|
export declare const sortByAlpha: ({ value, label }: Types.RecordToCompare, { value: value2, label: label2 }: Types.RecordToCompare) => number;
|