vgapp 0.1.3 → 0.1.5

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +15 -1
  2. package/README.md +2 -1
  3. package/app/modules/vgcollapse/js/vgcollapse.js +2 -1
  4. package/app/modules/vgmodal/js/vgmodal.js +6 -3
  5. package/app/modules/vgselect/js/vgselect.js +108 -9
  6. package/app/modules/vgselect/scss/_variables.scss +53 -47
  7. package/app/modules/vgselect/scss/vgselect.css +16 -3
  8. package/app/modules/vgselect/scss/vgselect.css.map +1 -1
  9. package/app/modules/vgselect/scss/vgselect.scss +19 -2
  10. package/app/modules/vgsidebar/js/vgsidebar.js +26 -16
  11. package/build/vgapp.css +1 -1
  12. package/build/vgapp.css.map +1 -1
  13. package/build/vgapp.js +1 -1
  14. package/build/vgapp.js.map +1 -1
  15. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,4 +1,18 @@
1
- # VEGAS-NAV 0.1.3 (Март, 10, 2025)
1
+ # VEGAS-NAV 0.1.5 (Март, 12, 2025)
2
+ ## Модуль VGSelect
3
+ ### Добавлено:
4
+ * data-placeholder
5
+
6
+ ### Исправлено:
7
+ * Открытие и закрытие списка
8
+
9
+ ## Для модулей VGSidebar и VGModal
10
+ ### Добавлено:
11
+ * Событие после аякс запроса NAME_KEY.loaded
12
+
13
+ # VEGAS-NAV 0.1.3 - 0.1.4 (Март, 10, 2025)
2
14
  * Перенесен плагин (<a href="https://github.com/vegas-dev/vegas-select">VGSelect</a>) в модуль VGSelect
3
15
  * для модулей VGSidebar и VGModal добавлена возможность собирать параметры с кнопки вызова элемента
16
+ * в модуль VGSidebar добавлен класс vg-sidebar-open в тело документа
4
17
  * исправлены некоторые ошибки
18
+
package/README.md CHANGED
@@ -1 +1,2 @@
1
- # VEGAS APP 0.1.3
1
+ # VEGAS APP
2
+ [FUNC.TRUE?!](http://func-true.ru)
package/app/modules/vgcollapse/js/vgcollapse.js CHANGED
@@ -35,7 +35,8 @@ class VGCollapse extends BaseModule {
35
35
  ajax: {
36
36
  route: '',
37
37
  target: '',
38
- method: 'get'
38
+ method: 'get',
39
+ loader: false,
39
40
  }
40
41
  }, params));
41
42
 
package/app/modules/vgmodal/js/vgmodal.js CHANGED
@@ -24,13 +24,14 @@ const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="modal"]';
24
24
  const CLASS_NAME_OPEN = 'vg-modal-open';
25
25
  const CLASS_NAME_SHOW = 'show';
26
26
  const CLASS_NAME_FADE = 'fade';
27
- const CLASS_NAME_STATIC = 'vg-modal-static'
27
+ const CLASS_NAME_STATIC = 'vg-modal-static';
28
28
 
29
29
  const EVENT_KEY_HIDE = `${NAME_KEY}.hide`;
30
30
  const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
31
31
  const EVENT_KEY_SHOW = `${NAME_KEY}.show`;
32
32
  const EVENT_KEY_SHOWN = `${NAME_KEY}.shown`;
33
- const EVENT_KEY_RESIZE = `${NAME_KEY}.resize`
33
+ const EVENT_KEY_RESIZE = `${NAME_KEY}.resize`;
34
+ const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
34
35
 
35
36
  const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
36
37
  const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
@@ -138,7 +139,9 @@ class VGModal extends BaseModule {
138
139
  if (isDisabled(_this._element)) return;
139
140
 
140
141
  this._params = this._getParams(relatedTarget, this._params);
141
- this._route();
142
+ _this._route(function (status, data) {
143
+ EventHandler.trigger(_this._element, EVENT_KEY_LOADED, {stats: status, data: data});
144
+ });
142
145
 
143
146
  const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
144
147
  if (showEvent.defaultPrevented) return;
package/app/modules/vgselect/js/vgselect.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import BaseModule from "../../base-module";
2
- import {isEmptyObj, mergeDeepObject, transliterate} from "../../../utils/js/functions";
2
+ import {isDisabled, isEmptyObj, mergeDeepObject, noop, transliterate} from "../../../utils/js/functions";
3
3
  import {Manipulator} from "../../../utils/js/dom/manipulator";
4
4
  import EventHandler from "../../../utils/js/dom/event";
5
+ import Selectors from "../../../utils/js/dom/selectors";
5
6
 
6
7
  /**
7
8
  * Constants
@@ -9,6 +10,8 @@ import EventHandler from "../../../utils/js/dom/event";
9
10
  const NAME = 'select';
10
11
  const NAME_KEY = 'vg.select';
11
12
 
13
+ const CLASS_NAME_SHOW = 'show';
14
+ const CLASS_NAME_ACTIVE = 'active';
12
15
  const CLASS_NAME_CONTAINER = 'vg-select';
13
16
  const CLASS_NAME_DROPDOWN = 'vg-select-dropdown';
14
17
  const CLASS_NAME_LIST = 'vg-select-list';
@@ -16,10 +19,18 @@ const CLASS_NAME_OPTION = 'vg-select-list--option';
16
19
  const CLASS_NAME_OPTGROUP = 'vg-select-list--optgroup';
17
20
  const CLASS_NAME_OPTGROUP_TITLE = 'vg-select-list--optgroup-title';
18
21
  const CLASS_NAME_CURRENT = 'vg-select-current';
22
+ const CLASS_NAME_PLACEHOLDER = 'vg-select-current--placeholder';
19
23
  const CLASS_NAME_SEARCH = 'vg-select-search';
20
- const CLASS_NAME_SELECTED = 'selected';
21
24
 
25
+ const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
22
26
  const EVENT_KEY_CHANGE = `${NAME_KEY}.change`;
27
+ const EVENT_KEY_HIDE = `${NAME_KEY}.hide`;
28
+ const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
29
+ const EVENT_KEY_SHOW = `${NAME_KEY}.show`;
30
+ const EVENT_KEY_SHOWN = `${NAME_KEY}.shown`;
31
+
32
+ const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="select"]';
33
+
23
34
 
24
35
  let observerTimout;
25
36
 
@@ -28,8 +39,17 @@ class VGSelect extends BaseModule {
28
39
  super(element, params);
29
40
 
30
41
  this._params = this._getParams(element, mergeDeepObject({
31
- search: false
42
+ search: false,
43
+ placeholder: '',
44
+ ajax: {
45
+ route: '',
46
+ target: '',
47
+ method: 'get',
48
+ loader: false,
49
+ }
32
50
  }, params));
51
+
52
+ this._drop = Selectors.find('.' + CLASS_NAME_DROPDOWN, this._element);
33
53
  }
34
54
 
35
55
  static get NAME() {
@@ -40,6 +60,62 @@ class VGSelect extends BaseModule {
40
60
  return NAME_KEY;
41
61
  }
42
62
 
63
+ toggle(relatedTarget) {
64
+ return !this._isShown() ? this.show(relatedTarget) : this.hide();
65
+ }
66
+
67
+ show(relatedTarget) {
68
+ if (isDisabled(this._element)) return;
69
+
70
+ const showEvent = EventHandler.trigger(this._element, EVENT_KEY_SHOW, { relatedTarget })
71
+ if (showEvent.defaultPrevented) return;
72
+
73
+ if ('ontouchstart' in document.documentElement) {
74
+ for (const element of [].concat(...document.body.children)) {
75
+ EventHandler.on(element, 'mouseover', noop);
76
+ }
77
+ }
78
+
79
+ this._element.classList.add(CLASS_NAME_SHOW);
80
+
81
+ const completeCallBack = () => {
82
+ this._element.classList.add(CLASS_NAME_ACTIVE);
83
+ EventHandler.trigger(this._element, EVENT_KEY_SHOWN, { relatedTarget });
84
+ }
85
+
86
+ this._queueCallback(completeCallBack, this._drop, true, 50)
87
+ }
88
+
89
+ hide() {
90
+ if (isDisabled(this._element) || !this._isShown()) return;
91
+
92
+ this._completeHide();
93
+ }
94
+
95
+ _completeHide() {
96
+ const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE, {})
97
+ if (hideEvent.defaultPrevented) return;
98
+
99
+ this._element.classList.remove(CLASS_NAME_ACTIVE);
100
+ //this._element.setAttribute('aria-expanded', 'false');
101
+
102
+ if ('ontouchstart' in document.documentElement) {
103
+ for (const element of [].concat(...document.body.children)) {
104
+ EventHandler.off(element, 'mouseover', noop);
105
+ }
106
+ }
107
+
108
+ const completeCallback = () => {
109
+ this._element.classList.remove(CLASS_NAME_SHOW);
110
+ EventHandler.trigger(this._element, EVENT_KEY_HIDDEN, {});
111
+ }
112
+ this._queueCallback(completeCallback, this._element, true, 10);
113
+ }
114
+
115
+ _isShown() {
116
+ return this._element.classList.contains(CLASS_NAME_SHOW);
117
+ }
118
+
43
119
  build(isRebuild, elm = null) {
44
120
  const _this = this;
45
121
  let element = this._element;
@@ -54,9 +130,15 @@ class VGSelect extends BaseModule {
54
130
 
55
131
  element.parentElement.style.position = 'relative';
56
132
 
57
- let option_selected = element.options[element.selectedIndex].innerText,
133
+ let option_selected,
58
134
  options = element.options;
59
135
 
136
+ if (_this._params.placeholder && element.selectedIndex === 0) {
137
+ option_selected = '<span class="'+ CLASS_NAME_PLACEHOLDER +'">' + _this._params.placeholder + '<span>';
138
+ } else {
139
+ option_selected = element.options[element.selectedIndex].innerText;
140
+ }
141
+
60
142
  // Создаем основной элемент с классами селекта
61
143
  let classes = Manipulator.get(element,'class'),
62
144
  select = document.createElement('div');
@@ -79,7 +161,9 @@ class VGSelect extends BaseModule {
79
161
  // Создаем элемент с отображением выбранного варианта
80
162
  let current = document.createElement('div');
81
163
  current.classList.add(CLASS_NAME_CURRENT);
82
- current.innerText = option_selected.trim();
164
+ Manipulator.set(current, 'data-vg-toggle', 'select');
165
+ Manipulator.set(current, 'aria-expanded', 'false');
166
+ current.innerHTML = option_selected.trim();
83
167
  select.append(current);
84
168
 
85
169
  // Создаем элемент выпадающего списка
@@ -157,8 +241,6 @@ class VGSelect extends BaseModule {
157
241
  if (_this._params.search) {
158
242
  this.search(select);
159
243
  }
160
-
161
- this._addEventListeners(select);
162
244
  }
163
245
 
164
246
  destroy(select) {
@@ -197,8 +279,6 @@ class VGSelect extends BaseModule {
197
279
  }
198
280
 
199
281
  search(select) {
200
- const _this = this;
201
-
202
282
  let dropdown = select.querySelector('.' + CLASS_NAME_DROPDOWN);
203
283
 
204
284
  let search_container = document.createElement('div');
@@ -338,4 +418,23 @@ class VGSelect extends BaseModule {
338
418
  }
339
419
  }
340
420
 
421
+ EventHandler.on(document, EVENT_KEY_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function () {
422
+ const target = this.closest('.' + CLASS_NAME_CONTAINER);
423
+
424
+ Manipulator.set(this, 'aria-expanded', true);
425
+
426
+ EventHandler.one(target, EVENT_KEY_HIDDEN, () => {
427
+ Manipulator.set(this, 'aria-expanded', false);
428
+ })
429
+
430
+ const alreadyOpen = Selectors.find('.vg-select.show')
431
+ if (alreadyOpen && alreadyOpen !== target) {
432
+ VGSelect.getInstance(alreadyOpen).hide();
433
+ }
434
+
435
+ const instance = VGSelect.getOrCreateInstance(target);
436
+ instance.toggle(this);
437
+ });
438
+
439
+
341
440
  export default VGSelect;
package/app/modules/vgselect/scss/_variables.scss CHANGED
@@ -1,54 +1,60 @@
1
1
  $select-current-map: (
2
- background-color: white,
3
- color: black,
4
- border-width: 1px,
5
- border-style: solid,
6
- border-color: #dddddd,
7
- border-radius: 5px,
8
- padding-left: 16px,
9
- padding-right: 40px,
10
- padding-top: 16px,
11
- padding-bottom: 16px,
12
- line-height: 1.1,
13
- font-size: 16px,
14
- z-index: 10,
2
+ background-color: white,
3
+ color: black,
4
+ border-width: 1px,
5
+ border-style: solid,
6
+ border-color: #dddddd,
7
+ border-radius: 5px,
8
+ padding-left: 16px,
9
+ padding-right: 40px,
10
+ padding-top: 16px,
11
+ padding-bottom: 16px,
12
+ line-height: 1.1,
13
+ font-size: 16px,
14
+ z-index: 10,
15
15
  ) !default;
16
16
 
17
+ $select-placeholder-map: (
18
+ placehoder-color: rgba(0, 0, 0, .32),
19
+ placehoder-font-size: 16px,
20
+ );
21
+
17
22
  $select-current-svg: '<svg aria-hidden="true" focusable="false" data-prefix="fa-light" data-icon="chevron-down" class="svg-inline--fa fa-chevron-down fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z" fill="gray"/></svg>' !default;
18
23
 
19
24
  $select-dropdown-map: (
20
- background-color: white,
21
- color: black,
22
- border-width: 1px,
23
- border-style: solid,
24
- border-color: #dddddd,
25
- border-radius: $border-radius,
26
- box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11),
27
- z-index: 15,
25
+ background-color: white,
26
+ color: black,
27
+ border-width: 1px,
28
+ border-style: solid,
29
+ border-color: #dddddd,
30
+ border-radius: $border-radius,
31
+ box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11),
32
+ z-index: 15,
28
33
  ) !default;
29
34
 
30
35
  $select-list-map: (
31
- background-color: transparent,
32
- color: black,
33
- padding-left: 8px,
34
- padding-right: 8px,
35
- padding-top: 8px,
36
- padding-bottom: 8px,
37
- border-bottom-width: 1px,
38
- border-bottom-style: solid,
39
- border-bottom-color: #f5f5f5,
36
+ background-color: transparent,
37
+ color: black,
38
+ padding-left: 8px,
39
+ padding-right: 8px,
40
+ padding-top: 8px,
41
+ padding-bottom: 8px,
42
+ border-bottom-width: 1px,
43
+ border-bottom-style: solid,
44
+ border-bottom-color: #f5f5f5,
40
45
  ) !default;
41
46
 
42
47
  $select-optgroup-map: (
43
- background-color: transparent,
44
- color: #fff,
45
- padding-left: 8px,
46
- padding-right: 8px,
47
- padding-top: 8px,
48
- padding-bottom: 8px,
49
- border-bottom-width: 1px,
50
- border-bottom-style: solid,
51
- border-bottom-color: #838383,
48
+ background-color: transparent,
49
+ color: #000,
50
+ padding-left: 8px,
51
+ padding-right: 8px,
52
+ padding-top: 8px,
53
+ padding-bottom: 8px,
54
+ border-bottom-width: 1px,
55
+ border-bottom-style: solid,
56
+ border-bottom-color: #838383,
57
+ font-weight: 500,
52
58
  ) !default;
53
59
 
54
60
  $select-list-max-height: 286px !default;
@@ -57,18 +63,18 @@ $select-list-scrollbar-bg: #F5F5F5 !default;
57
63
  $select-list-scrollbar-thumb: #999 !default;
58
64
 
59
65
  $select-list-hover-map: (
60
- background-color: #f7f7f7,
61
- color: black,
62
- border-bottom-color: #f5f5f5,
66
+ background-color: #f7f7f7,
67
+ color: black,
68
+ border-bottom-color: #f5f5f5,
63
69
  ) !default;
64
70
 
65
71
  $select-optgroup-hover-map: (
66
- background-color: #f7f7f7,
67
- color: black,
68
- border-bottom-color: #f5f5f5,
72
+ background-color: #f7f7f7,
73
+ color: black,
74
+ border-bottom-color: #f5f5f5,
69
75
  ) !default;
70
76
 
71
77
  $select-search-map: (
72
- background-color: #f2f2f2,
73
- color: #000000
78
+ background-color: #f2f2f2,
79
+ color: #000000
74
80
  ) !default;
package/app/modules/vgselect/scss/vgselect.css CHANGED
@@ -32,6 +32,8 @@ select.vg-select {
32
32
  --vg-select-current-line-height: 1.1 ;
33
33
  --vg-select-current-font-size: 16px ;
34
34
  --vg-select-current-z-index: 10 ;
35
+ --vg-select-current-placehoder-color: rgba(0, 0, 0, 0.32) ;
36
+ --vg-select-current-placehoder-font-size: 16px ;
35
37
  --vg-select-dropdown-background-color: white ;
36
38
  --vg-select-dropdown-color: black ;
37
39
  --vg-select-dropdown-border-width: 1px ;
@@ -50,7 +52,7 @@ select.vg-select {
50
52
  --vg-select-list-border-bottom-style: solid ;
51
53
  --vg-select-list-border-bottom-color: #f5f5f5 ;
52
54
  --vg-select-optgroup-background-color: transparent ;
53
- --vg-select-optgroup-color: #fff ;
55
+ --vg-select-optgroup-color: #000 ;
54
56
  --vg-select-optgroup-padding-left: 8px ;
55
57
  --vg-select-optgroup-padding-right: 8px ;
56
58
  --vg-select-optgroup-padding-top: 8px ;
@@ -58,6 +60,7 @@ select.vg-select {
58
60
  --vg-select-optgroup-border-bottom-width: 1px ;
59
61
  --vg-select-optgroup-border-bottom-style: solid ;
60
62
  --vg-select-optgroup-border-bottom-color: #838383 ;
63
+ --vg-select-optgroup-font-weight: 500 ;
61
64
  --vg-select-optgroup-hover-background-color: #f7f7f7 ;
62
65
  --vg-select-optgroup-hover-color: black ;
63
66
  --vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;
@@ -72,6 +75,9 @@ select.vg-select {
72
75
  --vg-select-list-scrollbar-thumb: #999;
73
76
  position: relative;
74
77
  }
78
+ .vg-select:not(.show) .vg-select-dropdown {
79
+ display: none;
80
+ }
75
81
  .vg-select-current {
76
82
  background-color: var(--vg-select-current-background-color);
77
83
  color: var(--vg-select-current-color);
@@ -90,7 +96,6 @@ select.vg-select {
90
96
  cursor: pointer;
91
97
  outline: none;
92
98
  position: relative;
93
- z-index: var(--vg-select-current-z-index);
94
99
  white-space: nowrap;
95
100
  overflow: hidden;
96
101
  text-overflow: ellipsis;
@@ -107,6 +112,10 @@ select.vg-select {
107
112
  width: 16px;
108
113
  height: 16px;
109
114
  }
115
+ .vg-select-current--placeholder {
116
+ color: var(--vg-select-current-placehoder-color);
117
+ font-size: var(--vg-select-current-font-size);
118
+ }
110
119
  .vg-select-dropdown {
111
120
  background-color: var(--vg-select-dropdown-background-color);
112
121
  color: var(--vg-select-dropdown-color);
@@ -204,6 +213,7 @@ select.vg-select {
204
213
  border-bottom-width: var(--vg-select-optgroup-border-bottom-width);
205
214
  border-bottom-style: var(--vg-select-optgroup-border-bottom-style);
206
215
  border-bottom-color: var(--vg-select-optgroup-border-bottom-color);
216
+ font-weight: var(--vg-select-optgroup-font-weight);
207
217
  }
208
218
  .vg-select-search input {
209
219
  background-color: var(--vg-select-search-background-color);
@@ -217,6 +227,9 @@ select.vg-select {
217
227
  transform: translateY(-50%) rotate(180deg);
218
228
  }
219
229
  .vg-select.show .vg-select-dropdown {
230
+ display: block;
231
+ }
232
+ .vg-select.active .vg-select-dropdown {
220
233
  transform: scale(1) translateY(0);
221
234
  opacity: 1;
222
235
  box-sizing: border-box;
@@ -234,7 +247,7 @@ select.vg-select {
234
247
  position: absolute;
235
248
  width: 100%;
236
249
  height: 100%;
237
- z-index: 500;
250
+ z-index: 12;
238
251
  }
239
252
  .vg-select.disabled > .vg-select-current {
240
253
  opacity: 0.75;
package/app/modules/vgselect/scss/vgselect.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":"","sources":["vgselect.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ECpBG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ED4BF;EACA;EACA;EACA;EACA;;AAEA;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEE;EAAA;EAAA;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAOH;EAEE;EAAA;EAED;EACA;EACA;EACA;;AAMA;EACC;;AAIF;EACC;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC","file":"vgselect.css"}
1
+ {"version":3,"sourceRoot":"","sources":["vgselect.scss","../../../utils/scss/mixin.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIF;ECpBG;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;ED6BF;EACA;EACA;EACA;EACA;;AAGC;EACC;;AAIF;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAIF;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EAEC;EACA;;AAGD;EAEC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAED;EACA;EACA;EACA;;AAEA;EACC;;AAGD;EAEE;EAAA;EAAA;;AAIF;EACC;EACA;;AAGD;EACC;;AAIF;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;AAOH;EAEE;EAAA;EAED;EACA;EACA;EACA;;AAMA;EACC;;AAIF;EACC;;AAKD;EACC;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC","file":"vgselect.css"}
package/app/modules/vgselect/scss/vgselect.scss CHANGED
@@ -27,6 +27,7 @@ select {
27
27
 
28
28
  .vg-select {
29
29
  @include mix-vars('select-current', $select-current-map);
30
+ @include mix-vars('select-current', $select-placeholder-map);
30
31
  @include mix-vars('select-dropdown', $select-dropdown-map);
31
32
  @include mix-vars('select-list', $select-list-map);
32
33
  @include mix-vars('select-optgroup', $select-optgroup-map);
@@ -39,6 +40,12 @@ select {
39
40
  --vg-select-list-scrollbar-thumb: #{$select-list-scrollbar-thumb};
40
41
  position: relative;
41
42
 
43
+ &:not(.show) {
44
+ .vg-select-dropdown {
45
+ display: none;
46
+ }
47
+ }
48
+
42
49
  &-current {
43
50
  @each $key, $value in $select-current-map {
44
51
  #{$key}: var(--vg-select-current-#{$key})
@@ -47,7 +54,6 @@ select {
47
54
  cursor: pointer;
48
55
  outline: none;
49
56
  position: relative;
50
- z-index: var(--vg-select-current-z-index);
51
57
  white-space: nowrap;
52
58
  overflow: hidden;
53
59
  text-overflow: ellipsis;
@@ -64,6 +70,11 @@ select {
64
70
  width: 16px;
65
71
  height: 16px;
66
72
  }
73
+
74
+ &--placeholder {
75
+ color: var(--vg-select-current-placehoder-color);
76
+ font-size: var(--vg-select-current-font-size);
77
+ }
67
78
  }
68
79
 
69
80
  &-dropdown {
@@ -182,6 +193,12 @@ select {
182
193
  }
183
194
  }
184
195
 
196
+ .vg-select-dropdown {
197
+ display: block;
198
+ }
199
+ }
200
+
201
+ &.active {
185
202
  .vg-select-dropdown {
186
203
  transform: scale(1) translateY(0);
187
204
  opacity: 1;
@@ -206,7 +223,7 @@ select {
206
223
  position: absolute;
207
224
  width: 100%;
208
225
  height: 100%;
209
- z-index: 500;
226
+ z-index: 12;
210
227
  }
211
228
 
212
229
  > .vg-select-current {
package/app/modules/vgsidebar/js/vgsidebar.js CHANGED
@@ -11,13 +11,16 @@ import Overflow from "../../../utils/js/components/overflow";
11
11
  */
12
12
  const NAME = 'sidebar';
13
13
  const NAME_KEY = 'vg.sidebar';
14
- const CLASS_NAME_SHOW = 'show';
15
14
  const SELECTOR_DATA_TOGGLE= '[data-vg-toggle="sidebar"]';
16
15
 
16
+ const CLASS_NAME_SHOW = 'show';
17
+ const CLASS_NAME_OPEN = 'vg-sidebar-open';
18
+
17
19
  const EVENT_KEY_HIDE = `${NAME_KEY}.hide`;
18
20
  const EVENT_KEY_HIDDEN = `${NAME_KEY}.hidden`;
19
21
  const EVENT_KEY_SHOW = `${NAME_KEY}.show`;
20
22
  const EVENT_KEY_SHOWN = `${NAME_KEY}.shown`;
23
+ const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
21
24
 
22
25
  const EVENT_KEY_KEYDOWN_DISMISS = `keydown.dismiss.${NAME_KEY}`;
23
26
  const EVENT_KEY_HIDE_PREVENTED = `hidePrevented.${NAME_KEY}`;
@@ -40,7 +43,8 @@ class VGSidebar extends BaseModule {
40
43
  ajax: {
41
44
  route: '',
42
45
  target: '',
43
- method: 'get'
46
+ method: 'get',
47
+ loader: false,
44
48
  }
45
49
  }, params));
46
50
 
@@ -68,7 +72,9 @@ class VGSidebar extends BaseModule {
68
72
  if (isDisabled(_this._element)) return;
69
73
 
70
74
  _this._params = _this._getParams(relatedTarget, _this._params);
71
- _this._route();
75
+ _this._route(function (status, data) {
76
+ EventHandler.trigger(_this._element, EVENT_KEY_LOADED, {stats: status, data: data});
77
+ });
72
78
 
73
79
  const showEvent = EventHandler.trigger(_this._element, EVENT_KEY_SHOW, { relatedTarget })
74
80
  if (showEvent.defaultPrevented) return;
@@ -82,6 +88,7 @@ class VGSidebar extends BaseModule {
82
88
  }
83
89
 
84
90
  _this._element.classList.add(CLASS_NAME_SHOW);
91
+ document.body.classList.add(CLASS_NAME_OPEN);
85
92
 
86
93
  const completeCallBack = () => {
87
94
  EventHandler.on(Selectors.find('.vg-backdrop'), 'mousedown.vg.backdrop', function () {
@@ -100,23 +107,26 @@ class VGSidebar extends BaseModule {
100
107
  const hideEvent = EventHandler.trigger(this._element, EVENT_KEY_HIDE);
101
108
  if (hideEvent.defaultPrevented) return;
102
109
 
103
- if (_this._params.backdrop) {
104
- Backdrop.hide(function () {
105
- if (_this._params.overflow) {
106
- Overflow.destroy();
107
- }
108
- });
109
- }
110
-
111
- if (_this._params.overflow) {
112
- Overflow.destroy();
113
- }
114
-
115
110
  setTimeout(() => {
116
111
  _this._element.setAttribute('aria-expanded', false);
117
112
  _this._element.classList.remove(CLASS_NAME_SHOW);
118
113
 
119
- const completeCallback = () => EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
114
+ const completeCallback = () => {
115
+ if (_this._params.backdrop) {
116
+ Backdrop.hide(function () {
117
+ if (_this._params.overflow) {
118
+ Overflow.destroy();
119
+ }
120
+ });
121
+ }
122
+
123
+ if (_this._params.overflow) {
124
+ Overflow.destroy();
125
+ }
126
+
127
+ document.body.classList.remove(CLASS_NAME_OPEN);
128
+ EventHandler.trigger(this._element, EVENT_KEY_HIDDEN);
129
+ }
120
130
  this._queueCallback(completeCallback, this._element, true);
121
131
  }, this._params.animation.delay);
122
132
  }
package/build/vgapp.css CHANGED
@@ -12,6 +12,6 @@
12
12
  .vg-form-sender-modal .vg-modal-content{padding:0}
13
13
  .vg-rollup{--vg-rollup-transition: all 0.5s ease-in-out ;--vg-rollup-fade-height: 100px ;--vg-rollup-fade-background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%) ;transform:var(--vg-rollup-transition)}.vg-rollup-button{--vg-rollup-button-align: center ;text-align:var(--vg-rollup-button-align)}.vg-rollup-content--hidden{overflow:hidden}.vg-rollup-content--fade{position:relative}.vg-rollup-content--fade:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:var(--vg-rollup-fade-height);background:var(--vg-rollup-fade-background)}.vg-rollup-content--ellipsis{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical}
14
14
  .vg-lawcookie{--vg-lawcookie-background-color: #fff ;--vg-lawcookie-color: #000000 ;--vg-lawcookie-box-shadow: 0 8px 14px 5px rgba(0, 0, 0, 0.2) ;--vg-lawcookie-padding: 1rem ;--vg-lawcookie-border: 1px solid rgba(0, 0, 0, 0.2) ;--vg-lawcookie-border-radius: 0.375rem ;--vg-lawcookie-z-index: 2000 ;--vg-lawcookie-transition: all 0.5s ease-in-out ;--vg-lawcookie-max-width: 50% ;--vg-lawcookie-padding-outer: 1rem ;--vg-lawcookie-font-size: 14px ;--vg-lawcookie-title-font-size: 16px ;position:fixed;display:none;padding:var(--vg-lawcookie-padding-outer);z-index:var(--vg-lawcookie-z-index);max-width:var(--vg-lawcookie-max-width)}@media screen and (max-width: 600px){.vg-lawcookie{width:100%;--vg-lawcookie-max-width: 100%}}.vg-lawcookie.show{display:block}.vg-lawcookie.left{left:0}.vg-lawcookie.right{right:0}.vg-lawcookie.top{top:0}.vg-lawcookie.bottom{bottom:0}.vg-lawcookie.center{top:50%;left:50%}.vg-lawcookie.center.left{left:0}.vg-lawcookie.center.top{top:0;left:50%}.vg-lawcookie.center.bottom{top:auto;bottom:0}.vg-lawcookie.center.right{right:0;left:auto}.vg-lawcookie.fullwidth{max-width:100%;width:100%;--vg-lawcookie-padding-outer: 0;--vg-lawcookie-border-radius: 0;--vg-lawcookie-box-shadow: none}.vg-lawcookie--content{background-color:var(--vg-lawcookie-background-color);border-radius:var(--vg-lawcookie-border-radius);padding:var(--vg-lawcookie-padding);color:var(--vg-lawcookie-color);box-shadow:var(--vg-lawcookie-box-shadow);font-size:var(--vg-lawcookie-font-size)}.vg-lawcookie--content .title{font-size:var(--vg-lawcookie-title-font-size)}
15
- select.vg-select{position:absolute;left:0;top:0;opacity:0;z-index:-1000;width:100%;height:100%;display:inline-block;visibility:hidden}.vg-select{--vg-select-current-background-color: white ;--vg-select-current-color: black ;--vg-select-current-border-width: 1px ;--vg-select-current-border-style: solid ;--vg-select-current-border-color: #dddddd ;--vg-select-current-border-radius: 5px ;--vg-select-current-padding-left: 16px ;--vg-select-current-padding-right: 40px ;--vg-select-current-padding-top: 16px ;--vg-select-current-padding-bottom: 16px ;--vg-select-current-line-height: 1.1 ;--vg-select-current-font-size: 16px ;--vg-select-current-z-index: 10 ;--vg-select-dropdown-background-color: white ;--vg-select-dropdown-color: black ;--vg-select-dropdown-border-width: 1px ;--vg-select-dropdown-border-style: solid ;--vg-select-dropdown-border-color: #dddddd ;--vg-select-dropdown-border-radius: 0.375rem ;--vg-select-dropdown-box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11) ;--vg-select-dropdown-z-index: 15 ;--vg-select-list-background-color: transparent ;--vg-select-list-color: black ;--vg-select-list-padding-left: 8px ;--vg-select-list-padding-right: 8px ;--vg-select-list-padding-top: 8px ;--vg-select-list-padding-bottom: 8px ;--vg-select-list-border-bottom-width: 1px ;--vg-select-list-border-bottom-style: solid ;--vg-select-list-border-bottom-color: #f5f5f5 ;--vg-select-optgroup-background-color: transparent ;--vg-select-optgroup-color: #fff ;--vg-select-optgroup-padding-left: 8px ;--vg-select-optgroup-padding-right: 8px ;--vg-select-optgroup-padding-top: 8px ;--vg-select-optgroup-padding-bottom: 8px ;--vg-select-optgroup-border-bottom-width: 1px ;--vg-select-optgroup-border-bottom-style: solid ;--vg-select-optgroup-border-bottom-color: #838383 ;--vg-select-optgroup-hover-background-color: #f7f7f7 ;--vg-select-optgroup-hover-color: black ;--vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;--vg-select-list-hover-background-color: #f7f7f7 ;--vg-select-list-hover-color: black ;--vg-select-list-hover-border-bottom-color: #f5f5f5 ;--vg-select-search-background-color: #f2f2f2 ;--vg-select-search-color: #000000 ;--vg-select-list-max-height: 286px;--vg-select-list-scrollbar-width: 6px;--vg-select-list-scrollbar-bg: #F5F5F5;--vg-select-list-scrollbar-thumb: #999;position:relative}.vg-select-current{background-color:var(--vg-select-current-background-color);color:var(--vg-select-current-color);border-width:var(--vg-select-current-border-width);border-style:var(--vg-select-current-border-style);border-color:var(--vg-select-current-border-color);border-radius:var(--vg-select-current-border-radius);padding-left:var(--vg-select-current-padding-left);padding-right:var(--vg-select-current-padding-right);padding-top:var(--vg-select-current-padding-top);padding-bottom:var(--vg-select-current-padding-bottom);line-height:var(--vg-select-current-line-height);font-size:var(--vg-select-current-font-size);z-index:var(--vg-select-current-z-index);box-sizing:border-box;cursor:pointer;outline:none;position:relative;z-index:var(--vg-select-current-z-index);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vg-select-current:after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:all .4s ease-in-out;background-image:url("data:image/svg+xml, <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fa-light\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z\" fill=\"gray\"/></svg>");background-repeat:no-repeat;width:16px;height:16px}.vg-select-dropdown{background-color:var(--vg-select-dropdown-background-color);color:var(--vg-select-dropdown-color);border-width:var(--vg-select-dropdown-border-width);border-style:var(--vg-select-dropdown-border-style);border-color:var(--vg-select-dropdown-border-color);border-radius:var(--vg-select-dropdown-border-radius);box-shadow:var(--vg-select-dropdown-box-shadow);z-index:var(--vg-select-dropdown-z-index);position:absolute;box-sizing:border-box;opacity:0;overflow:hidden;padding:0;top:100%;left:0;width:100%;height:0;pointer-events:auto;transform-origin:50% 0;transform:scale(0.75) translateY(-11px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:var(--vg-select-dropdown-z-index);margin-top:.25rem}.vg-select-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;max-height:var(--vg-select-list-max-height);overflow-y:auto}.vg-select-list::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--vg-select-list-scrollbar-bg)}.vg-select-list::-webkit-scrollbar{width:var(--vg-select-list-scrollbar-width);background-color:var(--vg-select-list-scrollbar-bg)}.vg-select-list::-webkit-scrollbar-thumb{background-color:var(--vg-select-list-scrollbar-thumb)}.vg-select-list--option{background-color:var(--vg-select-list-background-color);color:var(--vg-select-list-color);padding-left:var(--vg-select-list-padding-left);padding-right:var(--vg-select-list-padding-right);padding-top:var(--vg-select-list-padding-top);padding-bottom:var(--vg-select-list-padding-bottom);border-bottom-width:var(--vg-select-list-border-bottom-width);border-bottom-style:var(--vg-select-list-border-bottom-style);border-bottom-color:var(--vg-select-list-border-bottom-color);display:block;width:100%;cursor:pointer;transition:all .4s ease-in-out}.vg-select-list--option:last-child{border:none}.vg-select-list--option:hover,.vg-select-list--option.selected{background-color:var(--vg-select-list-hover-background-color);color:var(--vg-select-list-hover-color);border-bottom-color:var(--vg-select-list-hover-border-bottom-color)}.vg-select-list--option.disabled{opacity:.6;cursor:not-allowed}.vg-select-list--option.hidden{display:none !important}.vg-select-list--optgroup{list-style:none;padding:0}.vg-select-list--optgroup+.vg-select-list--optgroup{border-top-width:var(--vg-select-optgroup-border-bottom-width);border-top-style:var(--vg-select-optgroup-border-bottom-style);border-top-color:var(--vg-select-optgroup-border-bottom-color)}.vg-select-list--optgroup>li{--vg-select-list-padding-left: 16px}.vg-select-list--optgroup-title{background-color:var(--vg-select-optgroup-background-color);color:var(--vg-select-optgroup-color);padding-left:var(--vg-select-optgroup-padding-left);padding-right:var(--vg-select-optgroup-padding-right);padding-top:var(--vg-select-optgroup-padding-top);padding-bottom:var(--vg-select-optgroup-padding-bottom);border-bottom-width:var(--vg-select-optgroup-border-bottom-width);border-bottom-style:var(--vg-select-optgroup-border-bottom-style);border-bottom-color:var(--vg-select-optgroup-border-bottom-color)}.vg-select-search input{background-color:var(--vg-select-search-background-color);color:var(--vg-select-search-color);padding:8px;border:none;outline:none;width:100%}.vg-select.show .vg-select-current:after{transform:translateY(-50%) rotate(180deg)}.vg-select.show .vg-select-dropdown{transform:scale(1) translateY(0);opacity:1;box-sizing:border-box;height:auto}.vg-select.is-invalid .vg-select-current{background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(1.975em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem);--vg-select-current-padding-right: 55px}.vg-select.disabled:before{content:"";position:absolute;width:100%;height:100%;z-index:500}.vg-select.disabled>.vg-select-current{opacity:.75}
15
+ select.vg-select{position:absolute;left:0;top:0;opacity:0;z-index:-1000;width:100%;height:100%;display:inline-block;visibility:hidden}.vg-select{--vg-select-current-background-color: white ;--vg-select-current-color: black ;--vg-select-current-border-width: 1px ;--vg-select-current-border-style: solid ;--vg-select-current-border-color: #dddddd ;--vg-select-current-border-radius: 5px ;--vg-select-current-padding-left: 16px ;--vg-select-current-padding-right: 40px ;--vg-select-current-padding-top: 16px ;--vg-select-current-padding-bottom: 16px ;--vg-select-current-line-height: 1.1 ;--vg-select-current-font-size: 16px ;--vg-select-current-z-index: 10 ;--vg-select-current-placehoder-color: rgba(0, 0, 0, 0.32) ;--vg-select-current-placehoder-font-size: 16px ;--vg-select-dropdown-background-color: white ;--vg-select-dropdown-color: black ;--vg-select-dropdown-border-width: 1px ;--vg-select-dropdown-border-style: solid ;--vg-select-dropdown-border-color: #dddddd ;--vg-select-dropdown-border-radius: 0.375rem ;--vg-select-dropdown-box-shadow: 0 7px 12px 1px rgba(68, 68, 68, 0.11) ;--vg-select-dropdown-z-index: 15 ;--vg-select-list-background-color: transparent ;--vg-select-list-color: black ;--vg-select-list-padding-left: 8px ;--vg-select-list-padding-right: 8px ;--vg-select-list-padding-top: 8px ;--vg-select-list-padding-bottom: 8px ;--vg-select-list-border-bottom-width: 1px ;--vg-select-list-border-bottom-style: solid ;--vg-select-list-border-bottom-color: #f5f5f5 ;--vg-select-optgroup-background-color: transparent ;--vg-select-optgroup-color: #000 ;--vg-select-optgroup-padding-left: 8px ;--vg-select-optgroup-padding-right: 8px ;--vg-select-optgroup-padding-top: 8px ;--vg-select-optgroup-padding-bottom: 8px ;--vg-select-optgroup-border-bottom-width: 1px ;--vg-select-optgroup-border-bottom-style: solid ;--vg-select-optgroup-border-bottom-color: #838383 ;--vg-select-optgroup-font-weight: 500 ;--vg-select-optgroup-hover-background-color: #f7f7f7 ;--vg-select-optgroup-hover-color: black ;--vg-select-optgroup-hover-border-bottom-color: #f5f5f5 ;--vg-select-list-hover-background-color: #f7f7f7 ;--vg-select-list-hover-color: black ;--vg-select-list-hover-border-bottom-color: #f5f5f5 ;--vg-select-search-background-color: #f2f2f2 ;--vg-select-search-color: #000000 ;--vg-select-list-max-height: 286px;--vg-select-list-scrollbar-width: 6px;--vg-select-list-scrollbar-bg: #F5F5F5;--vg-select-list-scrollbar-thumb: #999;position:relative}.vg-select:not(.show) .vg-select-dropdown{display:none}.vg-select-current{background-color:var(--vg-select-current-background-color);color:var(--vg-select-current-color);border-width:var(--vg-select-current-border-width);border-style:var(--vg-select-current-border-style);border-color:var(--vg-select-current-border-color);border-radius:var(--vg-select-current-border-radius);padding-left:var(--vg-select-current-padding-left);padding-right:var(--vg-select-current-padding-right);padding-top:var(--vg-select-current-padding-top);padding-bottom:var(--vg-select-current-padding-bottom);line-height:var(--vg-select-current-line-height);font-size:var(--vg-select-current-font-size);z-index:var(--vg-select-current-z-index);box-sizing:border-box;cursor:pointer;outline:none;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vg-select-current:after{content:"";position:absolute;right:16px;top:50%;transform:translateY(-50%);transition:all .4s ease-in-out;background-image:url("data:image/svg+xml, <svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"fa-light\" data-icon=\"chevron-down\" class=\"svg-inline--fa fa-chevron-down fa-w-14\" role=\"img\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\"><path d=\"M4 181C7 178 12 176 16 176C20 176 24 177 27 180L224 362L421 180C428 174 438 175 444 181C450 188 449 198 443 204L235 396C229 401 219 401 213 396L5 204C-1 198 -2 188 4 181Z\" fill=\"gray\"/></svg>");background-repeat:no-repeat;width:16px;height:16px}.vg-select-current--placeholder{color:var(--vg-select-current-placehoder-color);font-size:var(--vg-select-current-font-size)}.vg-select-dropdown{background-color:var(--vg-select-dropdown-background-color);color:var(--vg-select-dropdown-color);border-width:var(--vg-select-dropdown-border-width);border-style:var(--vg-select-dropdown-border-style);border-color:var(--vg-select-dropdown-border-color);border-radius:var(--vg-select-dropdown-border-radius);box-shadow:var(--vg-select-dropdown-box-shadow);z-index:var(--vg-select-dropdown-z-index);position:absolute;box-sizing:border-box;opacity:0;overflow:hidden;padding:0;top:100%;left:0;width:100%;height:0;pointer-events:auto;transform-origin:50% 0;transform:scale(0.75) translateY(-11px);transition:all .2s cubic-bezier(0.5, 0, 0, 1.25),opacity .15s ease-out;z-index:var(--vg-select-dropdown-z-index);margin-top:.25rem}.vg-select-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;max-height:var(--vg-select-list-max-height);overflow-y:auto}.vg-select-list::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);background-color:var(--vg-select-list-scrollbar-bg)}.vg-select-list::-webkit-scrollbar{width:var(--vg-select-list-scrollbar-width);background-color:var(--vg-select-list-scrollbar-bg)}.vg-select-list::-webkit-scrollbar-thumb{background-color:var(--vg-select-list-scrollbar-thumb)}.vg-select-list--option{background-color:var(--vg-select-list-background-color);color:var(--vg-select-list-color);padding-left:var(--vg-select-list-padding-left);padding-right:var(--vg-select-list-padding-right);padding-top:var(--vg-select-list-padding-top);padding-bottom:var(--vg-select-list-padding-bottom);border-bottom-width:var(--vg-select-list-border-bottom-width);border-bottom-style:var(--vg-select-list-border-bottom-style);border-bottom-color:var(--vg-select-list-border-bottom-color);display:block;width:100%;cursor:pointer;transition:all .4s ease-in-out}.vg-select-list--option:last-child{border:none}.vg-select-list--option:hover,.vg-select-list--option.selected{background-color:var(--vg-select-list-hover-background-color);color:var(--vg-select-list-hover-color);border-bottom-color:var(--vg-select-list-hover-border-bottom-color)}.vg-select-list--option.disabled{opacity:.6;cursor:not-allowed}.vg-select-list--option.hidden{display:none !important}.vg-select-list--optgroup{list-style:none;padding:0}.vg-select-list--optgroup+.vg-select-list--optgroup{border-top-width:var(--vg-select-optgroup-border-bottom-width);border-top-style:var(--vg-select-optgroup-border-bottom-style);border-top-color:var(--vg-select-optgroup-border-bottom-color)}.vg-select-list--optgroup>li{--vg-select-list-padding-left: 16px}.vg-select-list--optgroup-title{background-color:var(--vg-select-optgroup-background-color);color:var(--vg-select-optgroup-color);padding-left:var(--vg-select-optgroup-padding-left);padding-right:var(--vg-select-optgroup-padding-right);padding-top:var(--vg-select-optgroup-padding-top);padding-bottom:var(--vg-select-optgroup-padding-bottom);border-bottom-width:var(--vg-select-optgroup-border-bottom-width);border-bottom-style:var(--vg-select-optgroup-border-bottom-style);border-bottom-color:var(--vg-select-optgroup-border-bottom-color);font-weight:var(--vg-select-optgroup-font-weight)}.vg-select-search input{background-color:var(--vg-select-search-background-color);color:var(--vg-select-search-color);padding:8px;border:none;outline:none;width:100%}.vg-select.show .vg-select-current:after{transform:translateY(-50%) rotate(180deg)}.vg-select.show .vg-select-dropdown{display:block}.vg-select.active .vg-select-dropdown{transform:scale(1) translateY(0);opacity:1;box-sizing:border-box;height:auto}.vg-select.is-invalid .vg-select-current{background-image:url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 12%27 width=%2712%27 height=%2712%27 fill=%27none%27 stroke=%27%23dc3545%27%3e%3ccircle cx=%276%27 cy=%276%27 r=%274.5%27/%3e%3cpath stroke-linejoin=%27round%27 d=%27M5.8 3.6h.4L6 6.5z%27/%3e%3ccircle cx=%276%27 cy=%278.2%27 r=%27.6%27 fill=%27%23dc3545%27 stroke=%27none%27/%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right calc(1.975em + .1875rem) center;background-size:calc(.75em + .375rem) calc(.75em + .375rem);--vg-select-current-padding-right: 55px}.vg-select.disabled:before{content:"";position:absolute;width:100%;height:100%;z-index:12}.vg-select.disabled>.vg-select-current{opacity:.75}
16
16
 
17
17
  /*# sourceMappingURL=vgapp.css.map*/