@coreui/coreui 5.5.0 → 5.6.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.
- package/LICENSE +1 -1
- package/README.md +5 -3
- package/dist/css/coreui-grid.css +2 -2
- package/dist/css/coreui-grid.css.map +1 -1
- package/dist/css/coreui-grid.min.css +2 -2
- package/dist/css/coreui-grid.min.css.map +1 -1
- package/dist/css/coreui-grid.rtl.css +2 -2
- package/dist/css/coreui-grid.rtl.css.map +1 -1
- package/dist/css/coreui-grid.rtl.min.css +2 -2
- package/dist/css/coreui-grid.rtl.min.css.map +1 -1
- package/dist/css/coreui-reboot.css +11 -2
- package/dist/css/coreui-reboot.css.map +1 -1
- package/dist/css/coreui-reboot.min.css +3 -3
- package/dist/css/coreui-reboot.min.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.css +11 -2
- package/dist/css/coreui-reboot.rtl.css.map +1 -1
- package/dist/css/coreui-reboot.rtl.min.css +3 -3
- package/dist/css/coreui-reboot.rtl.min.css.map +1 -1
- package/dist/css/coreui-utilities.css +11 -2
- package/dist/css/coreui-utilities.css.map +1 -1
- package/dist/css/coreui-utilities.min.css +3 -3
- package/dist/css/coreui-utilities.min.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.css +11 -2
- package/dist/css/coreui-utilities.rtl.css.map +1 -1
- package/dist/css/coreui-utilities.rtl.min.css +3 -3
- package/dist/css/coreui-utilities.rtl.min.css.map +1 -1
- package/dist/css/coreui.css +337 -2
- package/dist/css/coreui.css.map +1 -1
- package/dist/css/coreui.min.css +3 -3
- package/dist/css/coreui.min.css.map +1 -1
- package/dist/css/coreui.rtl.css +332 -2
- package/dist/css/coreui.rtl.css.map +1 -1
- package/dist/css/coreui.rtl.min.css +3 -3
- package/dist/css/coreui.rtl.min.css.map +1 -1
- package/dist/css/themes/bootstrap/bootstrap.css +337 -2
- package/dist/css/themes/bootstrap/bootstrap.css.map +1 -1
- package/dist/css/themes/bootstrap/bootstrap.min.css +3 -3
- package/dist/css/themes/bootstrap/bootstrap.min.css.map +1 -1
- package/dist/css/themes/bootstrap/bootstrap.rtl.css +332 -2
- package/dist/css/themes/bootstrap/bootstrap.rtl.css.map +1 -1
- package/dist/css/themes/bootstrap/bootstrap.rtl.min.css +3 -3
- package/dist/css/themes/bootstrap/bootstrap.rtl.min.css.map +1 -1
- package/dist/js/bootstrap.bundle.js +874 -60
- package/dist/js/bootstrap.bundle.js.map +1 -1
- package/dist/js/bootstrap.bundle.min.js +3 -3
- package/dist/js/bootstrap.bundle.min.js.map +1 -1
- package/dist/js/bootstrap.esm.js +873 -53
- package/dist/js/bootstrap.esm.js.map +1 -1
- package/dist/js/bootstrap.esm.min.js +3 -3
- package/dist/js/bootstrap.esm.min.js.map +1 -1
- package/dist/js/bootstrap.js +874 -52
- package/dist/js/bootstrap.js.map +1 -1
- package/dist/js/bootstrap.min.js +3 -3
- package/dist/js/bootstrap.min.js.map +1 -1
- package/dist/js/coreui.bundle.js +874 -60
- package/dist/js/coreui.bundle.js.map +1 -1
- package/dist/js/coreui.bundle.min.js +3 -3
- package/dist/js/coreui.bundle.min.js.map +1 -1
- package/dist/js/coreui.esm.js +873 -53
- package/dist/js/coreui.esm.js.map +1 -1
- package/dist/js/coreui.esm.min.js +3 -3
- package/dist/js/coreui.esm.min.js.map +1 -1
- package/dist/js/coreui.js +874 -52
- package/dist/js/coreui.js.map +1 -1
- package/dist/js/coreui.min.js +3 -3
- package/dist/js/coreui.min.js.map +1 -1
- package/js/dist/alert.js +2 -2
- package/js/dist/base-component.js +3 -3
- package/js/dist/base-component.js.map +1 -1
- package/js/dist/button.js +2 -2
- package/js/dist/carousel.js +2 -2
- package/js/dist/chip-input.js +528 -0
- package/js/dist/chip-input.js.map +1 -0
- package/js/dist/chip.js +322 -0
- package/js/dist/chip.js.map +1 -0
- package/js/dist/collapse.js +2 -2
- package/js/dist/dom/data.js +2 -2
- package/js/dist/dom/event-handler.js +2 -2
- package/js/dist/dom/manipulator.js +2 -2
- package/js/dist/dom/selector-engine.js +2 -2
- package/js/dist/dropdown.js +2 -2
- package/js/dist/modal.js +2 -2
- package/js/dist/navigation.js +2 -2
- package/js/dist/offcanvas.js +2 -2
- package/js/dist/popover.js +2 -2
- package/js/dist/scrollspy.js +2 -2
- package/js/dist/sidebar.js +2 -2
- package/js/dist/tab.js +2 -2
- package/js/dist/toast.js +2 -2
- package/js/dist/tooltip.js +2 -2
- package/js/dist/util/backdrop.js +2 -2
- package/js/dist/util/component-functions.js +2 -2
- package/js/dist/util/config.js +2 -2
- package/js/dist/util/focustrap.js +2 -2
- package/js/dist/util/index.js +2 -2
- package/js/dist/util/sanitizer.js +2 -2
- package/js/dist/util/scrollbar.js +2 -2
- package/js/dist/util/swipe.js +2 -2
- package/js/dist/util/template-factory.js +2 -2
- package/js/index.esm.js +2 -0
- package/js/index.umd.js +4 -0
- package/js/src/base-component.js +1 -1
- package/js/src/chip-input.js +595 -0
- package/js/src/chip.js +365 -0
- package/package.json +20 -20
- package/scss/_banner.scss +2 -2
- package/scss/_chip.import.scss +1 -0
- package/scss/_chip.scss +261 -0
- package/scss/_forms.scss +1 -0
- package/scss/_maps.scss +14 -0
- package/scss/_root.scss +5 -0
- package/scss/coreui.scss +1 -0
- package/scss/forms/_chip-input.import.scss +1 -0
- package/scss/forms/_chip-input.scss +109 -0
- package/scss/mixins/_chip.scss +14 -0
- package/scss/mixins/_focus-ring.scss +9 -0
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI v5.
|
|
3
|
-
* Copyright
|
|
2
|
+
* CoreUI v5.6.0 (https://coreui.io)
|
|
3
|
+
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
|
4
4
|
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
|
5
5
|
*/
|
|
6
6
|
(function (global, factory) {
|
|
@@ -665,7 +665,7 @@
|
|
|
665
665
|
* Constants
|
|
666
666
|
*/
|
|
667
667
|
|
|
668
|
-
const VERSION = '5.
|
|
668
|
+
const VERSION = '5.6.0';
|
|
669
669
|
|
|
670
670
|
/**
|
|
671
671
|
* Class definition
|
|
@@ -859,11 +859,11 @@
|
|
|
859
859
|
* Constants
|
|
860
860
|
*/
|
|
861
861
|
|
|
862
|
-
const NAME$
|
|
863
|
-
const DATA_KEY$
|
|
864
|
-
const EVENT_KEY$
|
|
865
|
-
const EVENT_CLOSE = `close${EVENT_KEY$
|
|
866
|
-
const EVENT_CLOSED = `closed${EVENT_KEY$
|
|
862
|
+
const NAME$j = 'alert';
|
|
863
|
+
const DATA_KEY$e = 'bs.alert';
|
|
864
|
+
const EVENT_KEY$f = `.${DATA_KEY$e}`;
|
|
865
|
+
const EVENT_CLOSE = `close${EVENT_KEY$f}`;
|
|
866
|
+
const EVENT_CLOSED = `closed${EVENT_KEY$f}`;
|
|
867
867
|
const CLASS_NAME_FADE$5 = 'fade';
|
|
868
868
|
const CLASS_NAME_SHOW$a = 'show';
|
|
869
869
|
|
|
@@ -874,7 +874,7 @@
|
|
|
874
874
|
class Alert extends BaseComponent {
|
|
875
875
|
// Getters
|
|
876
876
|
static get NAME() {
|
|
877
|
-
return NAME$
|
|
877
|
+
return NAME$j;
|
|
878
878
|
}
|
|
879
879
|
|
|
880
880
|
// Public
|
|
@@ -937,13 +937,13 @@
|
|
|
937
937
|
* Constants
|
|
938
938
|
*/
|
|
939
939
|
|
|
940
|
-
const NAME$
|
|
941
|
-
const DATA_KEY$
|
|
942
|
-
const EVENT_KEY$
|
|
943
|
-
const DATA_API_KEY$
|
|
944
|
-
const CLASS_NAME_ACTIVE$
|
|
940
|
+
const NAME$i = 'button';
|
|
941
|
+
const DATA_KEY$d = 'bs.button';
|
|
942
|
+
const EVENT_KEY$e = `.${DATA_KEY$d}`;
|
|
943
|
+
const DATA_API_KEY$a = '.data-api';
|
|
944
|
+
const CLASS_NAME_ACTIVE$5 = 'active';
|
|
945
945
|
const SELECTOR_DATA_TOGGLE$6 = '[data-bs-toggle="button"]';
|
|
946
|
-
const EVENT_CLICK_DATA_API$8 = `click${EVENT_KEY$
|
|
946
|
+
const EVENT_CLICK_DATA_API$8 = `click${EVENT_KEY$e}${DATA_API_KEY$a}`;
|
|
947
947
|
|
|
948
948
|
/**
|
|
949
949
|
* Class definition
|
|
@@ -952,13 +952,13 @@
|
|
|
952
952
|
class Button extends BaseComponent {
|
|
953
953
|
// Getters
|
|
954
954
|
static get NAME() {
|
|
955
|
-
return NAME$
|
|
955
|
+
return NAME$i;
|
|
956
956
|
}
|
|
957
957
|
|
|
958
958
|
// Public
|
|
959
959
|
toggle() {
|
|
960
960
|
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
|
|
961
|
-
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$
|
|
961
|
+
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE$5));
|
|
962
962
|
}
|
|
963
963
|
|
|
964
964
|
// Static
|
|
@@ -1004,23 +1004,23 @@
|
|
|
1004
1004
|
* Constants
|
|
1005
1005
|
*/
|
|
1006
1006
|
|
|
1007
|
-
const NAME$
|
|
1008
|
-
const EVENT_KEY$
|
|
1009
|
-
const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$
|
|
1010
|
-
const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$
|
|
1011
|
-
const EVENT_TOUCHEND = `touchend${EVENT_KEY$
|
|
1012
|
-
const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$
|
|
1013
|
-
const EVENT_POINTERUP = `pointerup${EVENT_KEY$
|
|
1007
|
+
const NAME$h = 'swipe';
|
|
1008
|
+
const EVENT_KEY$d = '.bs.swipe';
|
|
1009
|
+
const EVENT_TOUCHSTART = `touchstart${EVENT_KEY$d}`;
|
|
1010
|
+
const EVENT_TOUCHMOVE = `touchmove${EVENT_KEY$d}`;
|
|
1011
|
+
const EVENT_TOUCHEND = `touchend${EVENT_KEY$d}`;
|
|
1012
|
+
const EVENT_POINTERDOWN = `pointerdown${EVENT_KEY$d}`;
|
|
1013
|
+
const EVENT_POINTERUP = `pointerup${EVENT_KEY$d}`;
|
|
1014
1014
|
const POINTER_TYPE_TOUCH = 'touch';
|
|
1015
1015
|
const POINTER_TYPE_PEN = 'pen';
|
|
1016
1016
|
const CLASS_NAME_POINTER_EVENT = 'pointer-event';
|
|
1017
1017
|
const SWIPE_THRESHOLD = 40;
|
|
1018
|
-
const Default$
|
|
1018
|
+
const Default$g = {
|
|
1019
1019
|
endCallback: null,
|
|
1020
1020
|
leftCallback: null,
|
|
1021
1021
|
rightCallback: null
|
|
1022
1022
|
};
|
|
1023
|
-
const DefaultType$
|
|
1023
|
+
const DefaultType$g = {
|
|
1024
1024
|
endCallback: '(function|null)',
|
|
1025
1025
|
leftCallback: '(function|null)',
|
|
1026
1026
|
rightCallback: '(function|null)'
|
|
@@ -1045,18 +1045,18 @@
|
|
|
1045
1045
|
|
|
1046
1046
|
// Getters
|
|
1047
1047
|
static get Default() {
|
|
1048
|
-
return Default$
|
|
1048
|
+
return Default$g;
|
|
1049
1049
|
}
|
|
1050
1050
|
static get DefaultType() {
|
|
1051
|
-
return DefaultType$
|
|
1051
|
+
return DefaultType$g;
|
|
1052
1052
|
}
|
|
1053
1053
|
static get NAME() {
|
|
1054
|
-
return NAME$
|
|
1054
|
+
return NAME$h;
|
|
1055
1055
|
}
|
|
1056
1056
|
|
|
1057
1057
|
// Public
|
|
1058
1058
|
dispose() {
|
|
1059
|
-
EventHandler.off(this._element, EVENT_KEY$
|
|
1059
|
+
EventHandler.off(this._element, EVENT_KEY$d);
|
|
1060
1060
|
}
|
|
1061
1061
|
|
|
1062
1062
|
// Private
|
|
@@ -1127,10 +1127,10 @@
|
|
|
1127
1127
|
* Constants
|
|
1128
1128
|
*/
|
|
1129
1129
|
|
|
1130
|
-
const NAME$
|
|
1131
|
-
const DATA_KEY$
|
|
1132
|
-
const EVENT_KEY$
|
|
1133
|
-
const DATA_API_KEY$
|
|
1130
|
+
const NAME$g = 'carousel';
|
|
1131
|
+
const DATA_KEY$c = 'bs.carousel';
|
|
1132
|
+
const EVENT_KEY$c = `.${DATA_KEY$c}`;
|
|
1133
|
+
const DATA_API_KEY$9 = '.data-api';
|
|
1134
1134
|
const ARROW_LEFT_KEY$1 = 'ArrowLeft';
|
|
1135
1135
|
const ARROW_RIGHT_KEY$1 = 'ArrowRight';
|
|
1136
1136
|
const TOUCHEVENT_COMPAT_WAIT = 500; // Time for mouse compat events to fire after touch
|
|
@@ -1139,16 +1139,16 @@
|
|
|
1139
1139
|
const ORDER_PREV = 'prev';
|
|
1140
1140
|
const DIRECTION_LEFT = 'left';
|
|
1141
1141
|
const DIRECTION_RIGHT = 'right';
|
|
1142
|
-
const EVENT_SLIDE = `slide${EVENT_KEY$
|
|
1143
|
-
const EVENT_SLID = `slid${EVENT_KEY$
|
|
1144
|
-
const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$
|
|
1145
|
-
const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$
|
|
1146
|
-
const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$
|
|
1147
|
-
const EVENT_DRAG_START = `dragstart${EVENT_KEY$
|
|
1148
|
-
const EVENT_LOAD_DATA_API$5 = `load${EVENT_KEY$
|
|
1149
|
-
const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$
|
|
1142
|
+
const EVENT_SLIDE = `slide${EVENT_KEY$c}`;
|
|
1143
|
+
const EVENT_SLID = `slid${EVENT_KEY$c}`;
|
|
1144
|
+
const EVENT_KEYDOWN$1 = `keydown${EVENT_KEY$c}`;
|
|
1145
|
+
const EVENT_MOUSEENTER$1 = `mouseenter${EVENT_KEY$c}`;
|
|
1146
|
+
const EVENT_MOUSELEAVE$1 = `mouseleave${EVENT_KEY$c}`;
|
|
1147
|
+
const EVENT_DRAG_START = `dragstart${EVENT_KEY$c}`;
|
|
1148
|
+
const EVENT_LOAD_DATA_API$5 = `load${EVENT_KEY$c}${DATA_API_KEY$9}`;
|
|
1149
|
+
const EVENT_CLICK_DATA_API$7 = `click${EVENT_KEY$c}${DATA_API_KEY$9}`;
|
|
1150
1150
|
const CLASS_NAME_CAROUSEL = 'carousel';
|
|
1151
|
-
const CLASS_NAME_ACTIVE$
|
|
1151
|
+
const CLASS_NAME_ACTIVE$4 = 'active';
|
|
1152
1152
|
const CLASS_NAME_SLIDE = 'slide';
|
|
1153
1153
|
const CLASS_NAME_END = 'carousel-item-end';
|
|
1154
1154
|
const CLASS_NAME_START = 'carousel-item-start';
|
|
@@ -1165,7 +1165,7 @@
|
|
|
1165
1165
|
[ARROW_LEFT_KEY$1]: DIRECTION_RIGHT,
|
|
1166
1166
|
[ARROW_RIGHT_KEY$1]: DIRECTION_LEFT
|
|
1167
1167
|
};
|
|
1168
|
-
const Default$
|
|
1168
|
+
const Default$f = {
|
|
1169
1169
|
interval: 5000,
|
|
1170
1170
|
keyboard: true,
|
|
1171
1171
|
pause: 'hover',
|
|
@@ -1173,7 +1173,7 @@
|
|
|
1173
1173
|
touch: true,
|
|
1174
1174
|
wrap: true
|
|
1175
1175
|
};
|
|
1176
|
-
const DefaultType$
|
|
1176
|
+
const DefaultType$f = {
|
|
1177
1177
|
interval: '(number|boolean)',
|
|
1178
1178
|
// TODO:v6 remove boolean support
|
|
1179
1179
|
keyboard: 'boolean',
|
|
@@ -1204,13 +1204,13 @@
|
|
|
1204
1204
|
|
|
1205
1205
|
// Getters
|
|
1206
1206
|
static get Default() {
|
|
1207
|
-
return Default$
|
|
1207
|
+
return Default$f;
|
|
1208
1208
|
}
|
|
1209
1209
|
static get DefaultType() {
|
|
1210
|
-
return DefaultType$
|
|
1210
|
+
return DefaultType$f;
|
|
1211
1211
|
}
|
|
1212
1212
|
static get NAME() {
|
|
1213
|
-
return NAME$
|
|
1213
|
+
return NAME$g;
|
|
1214
1214
|
}
|
|
1215
1215
|
|
|
1216
1216
|
// Public
|
|
@@ -1337,11 +1337,11 @@
|
|
|
1337
1337
|
return;
|
|
1338
1338
|
}
|
|
1339
1339
|
const activeIndicator = SelectorEngine.findOne(SELECTOR_ACTIVE, this._indicatorsElement);
|
|
1340
|
-
activeIndicator.classList.remove(CLASS_NAME_ACTIVE$
|
|
1340
|
+
activeIndicator.classList.remove(CLASS_NAME_ACTIVE$4);
|
|
1341
1341
|
activeIndicator.removeAttribute('aria-current');
|
|
1342
1342
|
const newActiveIndicator = SelectorEngine.findOne(`[data-bs-slide-to="${index}"]`, this._indicatorsElement);
|
|
1343
1343
|
if (newActiveIndicator) {
|
|
1344
|
-
newActiveIndicator.classList.add(CLASS_NAME_ACTIVE$
|
|
1344
|
+
newActiveIndicator.classList.add(CLASS_NAME_ACTIVE$4);
|
|
1345
1345
|
newActiveIndicator.setAttribute('aria-current', 'true');
|
|
1346
1346
|
}
|
|
1347
1347
|
}
|
|
@@ -1394,8 +1394,8 @@
|
|
|
1394
1394
|
nextElement.classList.add(directionalClassName);
|
|
1395
1395
|
const completeCallBack = () => {
|
|
1396
1396
|
nextElement.classList.remove(directionalClassName, orderClassName);
|
|
1397
|
-
nextElement.classList.add(CLASS_NAME_ACTIVE$
|
|
1398
|
-
activeElement.classList.remove(CLASS_NAME_ACTIVE$
|
|
1397
|
+
nextElement.classList.add(CLASS_NAME_ACTIVE$4);
|
|
1398
|
+
activeElement.classList.remove(CLASS_NAME_ACTIVE$4, orderClassName, directionalClassName);
|
|
1399
1399
|
this._isSliding = false;
|
|
1400
1400
|
triggerEvent(EVENT_SLID);
|
|
1401
1401
|
};
|
|
@@ -1488,6 +1488,826 @@
|
|
|
1488
1488
|
|
|
1489
1489
|
defineJQueryPlugin(Carousel);
|
|
1490
1490
|
|
|
1491
|
+
/**
|
|
1492
|
+
* --------------------------------------------------------------------------
|
|
1493
|
+
* CoreUI chip.js
|
|
1494
|
+
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
|
1495
|
+
* --------------------------------------------------------------------------
|
|
1496
|
+
*/
|
|
1497
|
+
|
|
1498
|
+
|
|
1499
|
+
/**
|
|
1500
|
+
* Constants
|
|
1501
|
+
*/
|
|
1502
|
+
|
|
1503
|
+
const NAME$f = 'chip';
|
|
1504
|
+
const DATA_KEY$b = 'bs.chip';
|
|
1505
|
+
const EVENT_KEY$b = `.${DATA_KEY$b}`;
|
|
1506
|
+
const DATA_API_KEY$8 = '.data-api';
|
|
1507
|
+
const EVENT_REMOVE$1 = `remove${EVENT_KEY$b}`;
|
|
1508
|
+
const EVENT_REMOVED = `removed${EVENT_KEY$b}`;
|
|
1509
|
+
const EVENT_SELECT$1 = `select${EVENT_KEY$b}`;
|
|
1510
|
+
const EVENT_SELECTED = `selected${EVENT_KEY$b}`;
|
|
1511
|
+
const EVENT_DESELECT = `deselect${EVENT_KEY$b}`;
|
|
1512
|
+
const EVENT_DESELECTED = `deselected${EVENT_KEY$b}`;
|
|
1513
|
+
const SELECTOR_CHIP_REMOVE$1 = '.chip-remove';
|
|
1514
|
+
const SELECTOR_DATA_CHIP = '[data-bs-chip]';
|
|
1515
|
+
const SELECTOR_FOCUSABLE_ITEMS$1 = '.chip:not(.disabled)';
|
|
1516
|
+
const CLASS_NAME_CHIP_CLICKABLE = 'chip-clickable';
|
|
1517
|
+
const CLASS_NAME_CHIP_REMOVE = 'chip-remove';
|
|
1518
|
+
const CLASS_NAME_ACTIVE$3 = 'active';
|
|
1519
|
+
const CLASS_NAME_DISABLED$1 = 'disabled';
|
|
1520
|
+
const DEFAULT_REMOVE_ICON$1 = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
|
|
1521
|
+
const Default$e = {
|
|
1522
|
+
ariaRemoveLabel: 'Remove',
|
|
1523
|
+
disabled: false,
|
|
1524
|
+
removable: false,
|
|
1525
|
+
removeIcon: DEFAULT_REMOVE_ICON$1,
|
|
1526
|
+
selectable: false,
|
|
1527
|
+
selected: false
|
|
1528
|
+
};
|
|
1529
|
+
const DefaultType$e = {
|
|
1530
|
+
ariaRemoveLabel: 'string',
|
|
1531
|
+
disabled: 'boolean',
|
|
1532
|
+
removable: 'boolean',
|
|
1533
|
+
removeIcon: 'string',
|
|
1534
|
+
selectable: 'boolean',
|
|
1535
|
+
selected: 'boolean'
|
|
1536
|
+
};
|
|
1537
|
+
|
|
1538
|
+
/**
|
|
1539
|
+
* Class definition
|
|
1540
|
+
*/
|
|
1541
|
+
|
|
1542
|
+
class Chip extends BaseComponent {
|
|
1543
|
+
constructor(element, config) {
|
|
1544
|
+
super(element, config);
|
|
1545
|
+
this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED$1);
|
|
1546
|
+
this._selected = this._config.selected || this._element.classList.contains(CLASS_NAME_ACTIVE$3);
|
|
1547
|
+
this._ensureRemoveButton();
|
|
1548
|
+
this._applyState();
|
|
1549
|
+
if (this._config.selectable || this._config.removable) {
|
|
1550
|
+
this._makeFocusable();
|
|
1551
|
+
}
|
|
1552
|
+
this._addEventListeners();
|
|
1553
|
+
}
|
|
1554
|
+
|
|
1555
|
+
// Getters
|
|
1556
|
+
static get Default() {
|
|
1557
|
+
return Default$e;
|
|
1558
|
+
}
|
|
1559
|
+
static get DefaultType() {
|
|
1560
|
+
return DefaultType$e;
|
|
1561
|
+
}
|
|
1562
|
+
static get NAME() {
|
|
1563
|
+
return NAME$f;
|
|
1564
|
+
}
|
|
1565
|
+
|
|
1566
|
+
// Public
|
|
1567
|
+
remove() {
|
|
1568
|
+
const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE$1);
|
|
1569
|
+
if (removeEvent.defaultPrevented) {
|
|
1570
|
+
return;
|
|
1571
|
+
}
|
|
1572
|
+
this._destroyElement();
|
|
1573
|
+
}
|
|
1574
|
+
toggle() {
|
|
1575
|
+
if (!this._config.selectable) {
|
|
1576
|
+
return;
|
|
1577
|
+
}
|
|
1578
|
+
if (this._selected) {
|
|
1579
|
+
this.deselect();
|
|
1580
|
+
return;
|
|
1581
|
+
}
|
|
1582
|
+
this.select();
|
|
1583
|
+
}
|
|
1584
|
+
select() {
|
|
1585
|
+
if (!this._config.selectable) {
|
|
1586
|
+
return;
|
|
1587
|
+
}
|
|
1588
|
+
if (this._selected) {
|
|
1589
|
+
return;
|
|
1590
|
+
}
|
|
1591
|
+
const selectEvent = EventHandler.trigger(this._element, EVENT_SELECT$1);
|
|
1592
|
+
if (selectEvent.defaultPrevented) {
|
|
1593
|
+
return;
|
|
1594
|
+
}
|
|
1595
|
+
this._selected = true;
|
|
1596
|
+
this._applyState();
|
|
1597
|
+
EventHandler.trigger(this._element, EVENT_SELECTED);
|
|
1598
|
+
}
|
|
1599
|
+
deselect() {
|
|
1600
|
+
if (!this._config.selectable) {
|
|
1601
|
+
return;
|
|
1602
|
+
}
|
|
1603
|
+
if (!this._selected) {
|
|
1604
|
+
return;
|
|
1605
|
+
}
|
|
1606
|
+
const deselectEvent = EventHandler.trigger(this._element, EVENT_DESELECT);
|
|
1607
|
+
if (deselectEvent.defaultPrevented) {
|
|
1608
|
+
return;
|
|
1609
|
+
}
|
|
1610
|
+
this._selected = false;
|
|
1611
|
+
this._applyState();
|
|
1612
|
+
EventHandler.trigger(this._element, EVENT_DESELECTED);
|
|
1613
|
+
}
|
|
1614
|
+
|
|
1615
|
+
// Private
|
|
1616
|
+
_addEventListeners() {
|
|
1617
|
+
EventHandler.on(this._element, 'keydown', event => this._handleKeydown(event));
|
|
1618
|
+
EventHandler.on(this._element, 'click', event => {
|
|
1619
|
+
if (this._disabled) {
|
|
1620
|
+
return;
|
|
1621
|
+
}
|
|
1622
|
+
if (event.target.closest(SELECTOR_CHIP_REMOVE$1)) {
|
|
1623
|
+
return;
|
|
1624
|
+
}
|
|
1625
|
+
this.toggle();
|
|
1626
|
+
});
|
|
1627
|
+
EventHandler.on(this._element, 'click', SELECTOR_CHIP_REMOVE$1, event => {
|
|
1628
|
+
event.stopPropagation();
|
|
1629
|
+
this.remove();
|
|
1630
|
+
});
|
|
1631
|
+
}
|
|
1632
|
+
_applyState() {
|
|
1633
|
+
if (!this._disabled && (this._config.clickable || this._config.selectable)) {
|
|
1634
|
+
this._element.classList.add(CLASS_NAME_CHIP_CLICKABLE);
|
|
1635
|
+
}
|
|
1636
|
+
if (this._disabled) {
|
|
1637
|
+
this._element.classList.add(CLASS_NAME_DISABLED$1);
|
|
1638
|
+
this._element.setAttribute('aria-disabled', 'true');
|
|
1639
|
+
} else {
|
|
1640
|
+
this._element.classList.remove(CLASS_NAME_DISABLED$1);
|
|
1641
|
+
if (this._element.getAttribute('aria-disabled') === 'true') {
|
|
1642
|
+
this._element.setAttribute('aria-disabled', 'false');
|
|
1643
|
+
}
|
|
1644
|
+
}
|
|
1645
|
+
if (this._config.selectable) {
|
|
1646
|
+
this._element.classList.toggle(CLASS_NAME_ACTIVE$3, this._selected);
|
|
1647
|
+
this._element.setAttribute('aria-selected', this._selected ? 'true' : 'false');
|
|
1648
|
+
} else {
|
|
1649
|
+
this._element.classList.remove(CLASS_NAME_ACTIVE$3);
|
|
1650
|
+
if (this._element.getAttribute('aria-selected') === 'true') {
|
|
1651
|
+
this._element.setAttribute('aria-selected', 'false');
|
|
1652
|
+
}
|
|
1653
|
+
}
|
|
1654
|
+
}
|
|
1655
|
+
_createRemoveButton() {
|
|
1656
|
+
const button = document.createElement('button');
|
|
1657
|
+
button.type = 'button';
|
|
1658
|
+
button.className = CLASS_NAME_CHIP_REMOVE;
|
|
1659
|
+
button.setAttribute('aria-label', this._config.ariaRemoveLabel);
|
|
1660
|
+
button.setAttribute('tabindex', '-1'); // Not in tab order, chips handle keyboard
|
|
1661
|
+
button.innerHTML = this._config.removeIcon;
|
|
1662
|
+
return button;
|
|
1663
|
+
}
|
|
1664
|
+
_ensureRemoveButton() {
|
|
1665
|
+
if (!this._config.removable) {
|
|
1666
|
+
return;
|
|
1667
|
+
}
|
|
1668
|
+
if (SelectorEngine.findOne(SELECTOR_CHIP_REMOVE$1, this._element)) {
|
|
1669
|
+
return;
|
|
1670
|
+
}
|
|
1671
|
+
this._element.append(this._createRemoveButton());
|
|
1672
|
+
}
|
|
1673
|
+
_makeFocusable() {
|
|
1674
|
+
if (this._element.hasAttribute('tabindex') || this._disabled) {
|
|
1675
|
+
return;
|
|
1676
|
+
}
|
|
1677
|
+
this._element.setAttribute('tabindex', '0');
|
|
1678
|
+
}
|
|
1679
|
+
_handleKeydown(event) {
|
|
1680
|
+
const {
|
|
1681
|
+
key
|
|
1682
|
+
} = event;
|
|
1683
|
+
if (this._disabled) {
|
|
1684
|
+
return;
|
|
1685
|
+
}
|
|
1686
|
+
switch (key) {
|
|
1687
|
+
case 'Enter':
|
|
1688
|
+
case ' ':
|
|
1689
|
+
case 'Spacebar':
|
|
1690
|
+
{
|
|
1691
|
+
if (!this._config.selectable) {
|
|
1692
|
+
return;
|
|
1693
|
+
}
|
|
1694
|
+
event.preventDefault();
|
|
1695
|
+
this.toggle();
|
|
1696
|
+
break;
|
|
1697
|
+
}
|
|
1698
|
+
case 'Backspace':
|
|
1699
|
+
case 'Delete':
|
|
1700
|
+
{
|
|
1701
|
+
if (this._config.removable) {
|
|
1702
|
+
event.preventDefault();
|
|
1703
|
+
const sibling = this._getFocusableSibling(false) || this._getFocusableSibling(true);
|
|
1704
|
+
sibling == null || sibling.focus();
|
|
1705
|
+
this.remove();
|
|
1706
|
+
}
|
|
1707
|
+
break;
|
|
1708
|
+
}
|
|
1709
|
+
case 'ArrowLeft':
|
|
1710
|
+
{
|
|
1711
|
+
event.preventDefault();
|
|
1712
|
+
const chip = this._getFocusableSibling(false);
|
|
1713
|
+
chip == null || chip.focus();
|
|
1714
|
+
break;
|
|
1715
|
+
}
|
|
1716
|
+
case 'ArrowRight':
|
|
1717
|
+
{
|
|
1718
|
+
event.preventDefault();
|
|
1719
|
+
const chip = this._getFocusableSibling(true);
|
|
1720
|
+
chip == null || chip.focus();
|
|
1721
|
+
break;
|
|
1722
|
+
}
|
|
1723
|
+
case 'Home':
|
|
1724
|
+
{
|
|
1725
|
+
event.preventDefault();
|
|
1726
|
+
this._navigateToEdge(0);
|
|
1727
|
+
break;
|
|
1728
|
+
}
|
|
1729
|
+
case 'End':
|
|
1730
|
+
{
|
|
1731
|
+
event.preventDefault();
|
|
1732
|
+
this._navigateToEdge(-1);
|
|
1733
|
+
break;
|
|
1734
|
+
}
|
|
1735
|
+
|
|
1736
|
+
// No default
|
|
1737
|
+
}
|
|
1738
|
+
}
|
|
1739
|
+
_getFocusableSibling(shouldGetNext) {
|
|
1740
|
+
const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS$1, this._element.parentElement);
|
|
1741
|
+
const sibling = getNextActiveElement(chips, this._element, shouldGetNext, !chips.includes(this._element));
|
|
1742
|
+
return sibling === this._element ? null : sibling;
|
|
1743
|
+
}
|
|
1744
|
+
_navigateToEdge(targetIndex) {
|
|
1745
|
+
const chips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS$1, this._element.parentElement);
|
|
1746
|
+
if (chips.length === 0) {
|
|
1747
|
+
return;
|
|
1748
|
+
}
|
|
1749
|
+
const targetChip = chips.at(targetIndex);
|
|
1750
|
+
targetChip == null || targetChip.focus();
|
|
1751
|
+
}
|
|
1752
|
+
_destroyElement() {
|
|
1753
|
+
EventHandler.trigger(this._element, EVENT_REMOVED);
|
|
1754
|
+
this._element.remove();
|
|
1755
|
+
this.dispose();
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
// Static
|
|
1759
|
+
static chipInterface(element, config) {
|
|
1760
|
+
const data = Chip.getOrCreateInstance(element, config);
|
|
1761
|
+
if (typeof config === 'string') {
|
|
1762
|
+
if (typeof data[config] === 'undefined') {
|
|
1763
|
+
throw new TypeError(`No method named "${config}"`);
|
|
1764
|
+
}
|
|
1765
|
+
data[config]();
|
|
1766
|
+
}
|
|
1767
|
+
}
|
|
1768
|
+
static jQueryInterface(config) {
|
|
1769
|
+
return this.each(function () {
|
|
1770
|
+
const data = Chip.getOrCreateInstance(this);
|
|
1771
|
+
if (typeof config !== 'string') {
|
|
1772
|
+
return;
|
|
1773
|
+
}
|
|
1774
|
+
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
|
|
1775
|
+
throw new TypeError(`No method named "${config}"`);
|
|
1776
|
+
}
|
|
1777
|
+
data[config](this);
|
|
1778
|
+
});
|
|
1779
|
+
}
|
|
1780
|
+
}
|
|
1781
|
+
|
|
1782
|
+
/**
|
|
1783
|
+
* Data API implementation
|
|
1784
|
+
*/
|
|
1785
|
+
|
|
1786
|
+
EventHandler.on(document, `DOMContentLoaded${EVENT_KEY$b}${DATA_API_KEY$8}`, () => {
|
|
1787
|
+
for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP)) {
|
|
1788
|
+
Chip.chipInterface(element);
|
|
1789
|
+
}
|
|
1790
|
+
});
|
|
1791
|
+
|
|
1792
|
+
/**
|
|
1793
|
+
* jQuery
|
|
1794
|
+
*/
|
|
1795
|
+
|
|
1796
|
+
defineJQueryPlugin(Chip);
|
|
1797
|
+
|
|
1798
|
+
/**
|
|
1799
|
+
* --------------------------------------------------------------------------
|
|
1800
|
+
* CoreUI chip-input.js
|
|
1801
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
1802
|
+
*
|
|
1803
|
+
* This component is a highly modified version of the Bootstrap's chip-input.js
|
|
1804
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
1805
|
+
* --------------------------------------------------------------------------
|
|
1806
|
+
*/
|
|
1807
|
+
|
|
1808
|
+
|
|
1809
|
+
/**
|
|
1810
|
+
* Constants
|
|
1811
|
+
*/
|
|
1812
|
+
|
|
1813
|
+
const NAME$e = 'chip-input';
|
|
1814
|
+
const DATA_KEY$a = 'bs.chip-input';
|
|
1815
|
+
const EVENT_KEY$a = `.${DATA_KEY$a}`;
|
|
1816
|
+
const DATA_API_KEY$7 = '.data-api';
|
|
1817
|
+
const EVENT_ADD = `add${EVENT_KEY$a}`;
|
|
1818
|
+
const EVENT_REMOVE = `remove${EVENT_KEY$a}`;
|
|
1819
|
+
const EVENT_CHANGE = `change${EVENT_KEY$a}`;
|
|
1820
|
+
const EVENT_SELECT = `select${EVENT_KEY$a}`;
|
|
1821
|
+
const EVENT_INPUT = `input${EVENT_KEY$a}`;
|
|
1822
|
+
const SELECTOR_DATA_CHIP_INPUT = '[data-bs-chip-input]';
|
|
1823
|
+
const SELECTOR_CHIP = '.chip';
|
|
1824
|
+
const SELECTOR_CHIP_ACTIVE = `${SELECTOR_CHIP}.active`;
|
|
1825
|
+
const SELECTOR_CHIP_INPUT_LABEL = '.chip-input-label';
|
|
1826
|
+
const SELECTOR_CHIP_REMOVE = '.chip-remove';
|
|
1827
|
+
const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)';
|
|
1828
|
+
const CLASS_NAME_CHIP = 'chip';
|
|
1829
|
+
const CLASS_NAME_DISABLED = 'disabled';
|
|
1830
|
+
const CLASS_NAME_CHIP_INPUT_FIELD = 'chip-input-field';
|
|
1831
|
+
const DEFAULT_REMOVE_ICON = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>';
|
|
1832
|
+
const Default$d = {
|
|
1833
|
+
chipClassName: null,
|
|
1834
|
+
createOnBlur: true,
|
|
1835
|
+
disabled: false,
|
|
1836
|
+
id: null,
|
|
1837
|
+
maxChips: null,
|
|
1838
|
+
name: null,
|
|
1839
|
+
placeholder: '',
|
|
1840
|
+
readonly: false,
|
|
1841
|
+
removable: true,
|
|
1842
|
+
removeIcon: DEFAULT_REMOVE_ICON,
|
|
1843
|
+
selectable: false,
|
|
1844
|
+
separator: ','
|
|
1845
|
+
};
|
|
1846
|
+
const DefaultType$d = {
|
|
1847
|
+
chipClassName: '(string|function|null)',
|
|
1848
|
+
createOnBlur: 'boolean',
|
|
1849
|
+
disabled: 'boolean',
|
|
1850
|
+
maxChips: '(number|null)',
|
|
1851
|
+
id: '(string|null)',
|
|
1852
|
+
name: '(string|null)',
|
|
1853
|
+
placeholder: 'string',
|
|
1854
|
+
readonly: 'boolean',
|
|
1855
|
+
removable: 'boolean',
|
|
1856
|
+
removeIcon: 'string',
|
|
1857
|
+
selectable: 'boolean',
|
|
1858
|
+
separator: '(string|null)'
|
|
1859
|
+
};
|
|
1860
|
+
|
|
1861
|
+
/**
|
|
1862
|
+
* Class definition
|
|
1863
|
+
*/
|
|
1864
|
+
|
|
1865
|
+
class ChipInput extends BaseComponent {
|
|
1866
|
+
constructor(element, config) {
|
|
1867
|
+
var _this$_config$id;
|
|
1868
|
+
super(element, config);
|
|
1869
|
+
this._uniqueId = (_this$_config$id = this._config.id) != null ? _this$_config$id : getUID(`${this.constructor.NAME}`);
|
|
1870
|
+
this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED);
|
|
1871
|
+
this._readonly = this._config.readonly;
|
|
1872
|
+
this._chips = [];
|
|
1873
|
+
this._input = SelectorEngine.findOne('input', this._element);
|
|
1874
|
+
this._hiddenInput = null;
|
|
1875
|
+
if (this._input) {
|
|
1876
|
+
this._setInputSize();
|
|
1877
|
+
} else {
|
|
1878
|
+
this._createInput();
|
|
1879
|
+
}
|
|
1880
|
+
this._applyInteractionState();
|
|
1881
|
+
this._initializeExistingChips();
|
|
1882
|
+
this._createHiddenInput();
|
|
1883
|
+
this._addEventListeners();
|
|
1884
|
+
}
|
|
1885
|
+
|
|
1886
|
+
// Getters
|
|
1887
|
+
static get Default() {
|
|
1888
|
+
return Default$d;
|
|
1889
|
+
}
|
|
1890
|
+
static get DefaultType() {
|
|
1891
|
+
return DefaultType$d;
|
|
1892
|
+
}
|
|
1893
|
+
static get NAME() {
|
|
1894
|
+
return NAME$e;
|
|
1895
|
+
}
|
|
1896
|
+
|
|
1897
|
+
// Public
|
|
1898
|
+
add(value) {
|
|
1899
|
+
if (this._disabled || this._readonly) {
|
|
1900
|
+
return null;
|
|
1901
|
+
}
|
|
1902
|
+
const trimmedValue = String(value).trim();
|
|
1903
|
+
if (!trimmedValue) {
|
|
1904
|
+
return null;
|
|
1905
|
+
}
|
|
1906
|
+
|
|
1907
|
+
// Chips are unique by value
|
|
1908
|
+
if (this._chips.includes(trimmedValue)) {
|
|
1909
|
+
return null;
|
|
1910
|
+
}
|
|
1911
|
+
|
|
1912
|
+
// Check max chips limit
|
|
1913
|
+
if (this._config.maxChips !== null && this._chips.length >= this._config.maxChips) {
|
|
1914
|
+
return null;
|
|
1915
|
+
}
|
|
1916
|
+
const addEvent = EventHandler.trigger(this._element, EVENT_ADD, {
|
|
1917
|
+
value: trimmedValue,
|
|
1918
|
+
relatedTarget: this._input
|
|
1919
|
+
});
|
|
1920
|
+
if (addEvent.defaultPrevented) {
|
|
1921
|
+
return null;
|
|
1922
|
+
}
|
|
1923
|
+
const chip = this._createChip(trimmedValue);
|
|
1924
|
+
this._element.insertBefore(chip, this._input);
|
|
1925
|
+
this._chips.push(trimmedValue);
|
|
1926
|
+
const values = this.getValues();
|
|
1927
|
+
this._hiddenInput.value = values.join(',');
|
|
1928
|
+
EventHandler.trigger(this._element, EVENT_CHANGE, {
|
|
1929
|
+
values
|
|
1930
|
+
});
|
|
1931
|
+
return chip;
|
|
1932
|
+
}
|
|
1933
|
+
remove(chipOrValue) {
|
|
1934
|
+
if (this._disabled || this._readonly) {
|
|
1935
|
+
return false;
|
|
1936
|
+
}
|
|
1937
|
+
let chip;
|
|
1938
|
+
let value;
|
|
1939
|
+
if (typeof chipOrValue === 'string') {
|
|
1940
|
+
value = chipOrValue;
|
|
1941
|
+
chip = this._findChipByValue(value);
|
|
1942
|
+
} else {
|
|
1943
|
+
chip = chipOrValue;
|
|
1944
|
+
value = this._getChipValue(chip);
|
|
1945
|
+
}
|
|
1946
|
+
if (!chip || !value) {
|
|
1947
|
+
return false;
|
|
1948
|
+
}
|
|
1949
|
+
const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE, {
|
|
1950
|
+
value,
|
|
1951
|
+
chip,
|
|
1952
|
+
relatedTarget: this._input
|
|
1953
|
+
});
|
|
1954
|
+
if (removeEvent.defaultPrevented) {
|
|
1955
|
+
return false;
|
|
1956
|
+
}
|
|
1957
|
+
const chipInstance = Chip.getInstance(chip);
|
|
1958
|
+
if (chipInstance) {
|
|
1959
|
+
chipInstance.remove();
|
|
1960
|
+
} else {
|
|
1961
|
+
chip.remove();
|
|
1962
|
+
this._handleChipRemoved(chip, value);
|
|
1963
|
+
}
|
|
1964
|
+
return !chip.isConnected;
|
|
1965
|
+
}
|
|
1966
|
+
removeSelected() {
|
|
1967
|
+
var _this$_input;
|
|
1968
|
+
const chipsToRemove = this._getSelectedChipElements();
|
|
1969
|
+
for (const chip of chipsToRemove) {
|
|
1970
|
+
this.remove(chip);
|
|
1971
|
+
}
|
|
1972
|
+
(_this$_input = this._input) == null || _this$_input.focus();
|
|
1973
|
+
}
|
|
1974
|
+
getValues() {
|
|
1975
|
+
return [...this._chips];
|
|
1976
|
+
}
|
|
1977
|
+
getSelectedValues() {
|
|
1978
|
+
return this._getSelectedChipElements().map(chip => this._getChipValue(chip));
|
|
1979
|
+
}
|
|
1980
|
+
clear() {
|
|
1981
|
+
const chips = SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
1982
|
+
for (const chip of chips) {
|
|
1983
|
+
this.remove(chip);
|
|
1984
|
+
}
|
|
1985
|
+
}
|
|
1986
|
+
clearSelection() {
|
|
1987
|
+
for (const chip of this._getSelectedChipElements()) {
|
|
1988
|
+
var _Chip$getInstance;
|
|
1989
|
+
(_Chip$getInstance = Chip.getInstance(chip)) == null || _Chip$getInstance.deselect();
|
|
1990
|
+
}
|
|
1991
|
+
EventHandler.trigger(this._element, EVENT_SELECT, {
|
|
1992
|
+
selected: []
|
|
1993
|
+
});
|
|
1994
|
+
}
|
|
1995
|
+
selectChip(chip) {
|
|
1996
|
+
const chipElements = this._getChipElements();
|
|
1997
|
+
if (!chipElements.includes(chip)) {
|
|
1998
|
+
return;
|
|
1999
|
+
}
|
|
2000
|
+
const chipInstance = Chip.getInstance(chip);
|
|
2001
|
+
if (!chipInstance) {
|
|
2002
|
+
return;
|
|
2003
|
+
}
|
|
2004
|
+
chipInstance.select();
|
|
2005
|
+
}
|
|
2006
|
+
focus() {
|
|
2007
|
+
var _this$_input2;
|
|
2008
|
+
(_this$_input2 = this._input) == null || _this$_input2.focus();
|
|
2009
|
+
}
|
|
2010
|
+
|
|
2011
|
+
// Private
|
|
2012
|
+
_emitSelectionChange() {
|
|
2013
|
+
EventHandler.trigger(this._element, EVENT_SELECT, {
|
|
2014
|
+
selected: this.getSelectedValues()
|
|
2015
|
+
});
|
|
2016
|
+
}
|
|
2017
|
+
_getChipElements() {
|
|
2018
|
+
return SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
2019
|
+
}
|
|
2020
|
+
_getSelectedChipElements() {
|
|
2021
|
+
return SelectorEngine.find(SELECTOR_CHIP_ACTIVE, this._element);
|
|
2022
|
+
}
|
|
2023
|
+
_createInput() {
|
|
2024
|
+
const input = document.createElement('input');
|
|
2025
|
+
const label = SelectorEngine.findOne(SELECTOR_CHIP_INPUT_LABEL, this._element);
|
|
2026
|
+
const labelFor = label == null ? void 0 : label.getAttribute('for');
|
|
2027
|
+
const generatedInputId = labelFor || getUID(`${this.constructor.NAME}-input`);
|
|
2028
|
+
input.type = 'text';
|
|
2029
|
+
input.className = CLASS_NAME_CHIP_INPUT_FIELD;
|
|
2030
|
+
input.id = generatedInputId;
|
|
2031
|
+
if (this._config.placeholder) {
|
|
2032
|
+
input.placeholder = this._config.placeholder;
|
|
2033
|
+
}
|
|
2034
|
+
if (label && !labelFor) {
|
|
2035
|
+
label.setAttribute('for', generatedInputId);
|
|
2036
|
+
}
|
|
2037
|
+
this._input = input;
|
|
2038
|
+
this._setInputSize();
|
|
2039
|
+
this._element.append(input);
|
|
2040
|
+
}
|
|
2041
|
+
_createHiddenInput() {
|
|
2042
|
+
const hiddenInput = document.createElement('input');
|
|
2043
|
+
hiddenInput.type = 'hidden';
|
|
2044
|
+
hiddenInput.id = this._uniqueId;
|
|
2045
|
+
hiddenInput.name = this._config.name || this._uniqueId;
|
|
2046
|
+
this._element.append(hiddenInput);
|
|
2047
|
+
this._hiddenInput = hiddenInput;
|
|
2048
|
+
this._hiddenInput.value = this.getValues().join(',');
|
|
2049
|
+
}
|
|
2050
|
+
_createChip(value) {
|
|
2051
|
+
const chip = document.createElement('span');
|
|
2052
|
+
chip.className = CLASS_NAME_CHIP;
|
|
2053
|
+
chip.dataset.bsChipValue = value;
|
|
2054
|
+
chip.append(document.createTextNode(value));
|
|
2055
|
+
this._applyChipClassName(chip, value);
|
|
2056
|
+
this._setupChip(chip);
|
|
2057
|
+
return chip;
|
|
2058
|
+
}
|
|
2059
|
+
_createChipFromInput() {
|
|
2060
|
+
if (this._disabled || this._readonly) {
|
|
2061
|
+
return;
|
|
2062
|
+
}
|
|
2063
|
+
const value = this._input.value.trim();
|
|
2064
|
+
if (value) {
|
|
2065
|
+
this.add(value);
|
|
2066
|
+
this._input.value = '';
|
|
2067
|
+
this._setInputSize();
|
|
2068
|
+
}
|
|
2069
|
+
}
|
|
2070
|
+
_findChipByValue(value) {
|
|
2071
|
+
const chips = this._getChipElements();
|
|
2072
|
+
return chips.find(chip => this._getChipValue(chip) === value);
|
|
2073
|
+
}
|
|
2074
|
+
_getChipValue(chip) {
|
|
2075
|
+
var _clone$textContent;
|
|
2076
|
+
if (chip.dataset.bsChipValue) {
|
|
2077
|
+
return chip.dataset.bsChipValue;
|
|
2078
|
+
}
|
|
2079
|
+
const clone = chip.cloneNode(true);
|
|
2080
|
+
const remove = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, clone);
|
|
2081
|
+
if (remove) {
|
|
2082
|
+
remove.remove();
|
|
2083
|
+
}
|
|
2084
|
+
return ((_clone$textContent = clone.textContent) == null ? void 0 : _clone$textContent.trim()) || '';
|
|
2085
|
+
}
|
|
2086
|
+
_initializeExistingChips() {
|
|
2087
|
+
const existingChips = SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
2088
|
+
for (const chip of existingChips) {
|
|
2089
|
+
const value = this._getChipValue(chip);
|
|
2090
|
+
if (value) {
|
|
2091
|
+
this._chips.push(value);
|
|
2092
|
+
this._applyChipClassName(chip, value);
|
|
2093
|
+
this._setupChip(chip);
|
|
2094
|
+
}
|
|
2095
|
+
}
|
|
2096
|
+
}
|
|
2097
|
+
_applyChipClassName(chip, value) {
|
|
2098
|
+
const className = this._resolveChipClassName(value);
|
|
2099
|
+
if (!className) {
|
|
2100
|
+
return;
|
|
2101
|
+
}
|
|
2102
|
+
chip.classList.add(...className.split(/\s+/).filter(Boolean));
|
|
2103
|
+
}
|
|
2104
|
+
_resolveChipClassName(value) {
|
|
2105
|
+
const {
|
|
2106
|
+
chipClassName
|
|
2107
|
+
} = this._config;
|
|
2108
|
+
if (!chipClassName) {
|
|
2109
|
+
return '';
|
|
2110
|
+
}
|
|
2111
|
+
if (typeof chipClassName === 'function') {
|
|
2112
|
+
const resolvedClassName = chipClassName(value);
|
|
2113
|
+
return typeof resolvedClassName === 'string' ? resolvedClassName : '';
|
|
2114
|
+
}
|
|
2115
|
+
return typeof chipClassName === 'string' ? chipClassName : '';
|
|
2116
|
+
}
|
|
2117
|
+
_setupChip(chip) {
|
|
2118
|
+
Chip.getOrCreateInstance(chip, {
|
|
2119
|
+
ariaRemoveLabel: `Remove ${this._getChipValue(chip)}`,
|
|
2120
|
+
disabled: this._disabled,
|
|
2121
|
+
removable: this._config.removable && !this._readonly && !this._disabled,
|
|
2122
|
+
removeIcon: this._config.removeIcon,
|
|
2123
|
+
selectable: this._config.selectable
|
|
2124
|
+
});
|
|
2125
|
+
const removeButton = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, chip);
|
|
2126
|
+
if (removeButton) {
|
|
2127
|
+
removeButton.disabled = this._disabled || this._readonly;
|
|
2128
|
+
}
|
|
2129
|
+
}
|
|
2130
|
+
_applyInteractionState() {
|
|
2131
|
+
this._element.classList.toggle(CLASS_NAME_DISABLED, this._disabled);
|
|
2132
|
+
this._input.disabled = this._disabled;
|
|
2133
|
+
this._input.readOnly = !this._disabled && this._readonly;
|
|
2134
|
+
this._element.setAttribute('aria-disabled', this._disabled ? 'true' : 'false');
|
|
2135
|
+
this._element.setAttribute('aria-readonly', this._readonly ? 'true' : 'false');
|
|
2136
|
+
}
|
|
2137
|
+
_addEventListeners() {
|
|
2138
|
+
EventHandler.on(this._element, 'keydown', event => {
|
|
2139
|
+
if (event.target === this._input) {
|
|
2140
|
+
return;
|
|
2141
|
+
}
|
|
2142
|
+
if (event.key.length === 1) {
|
|
2143
|
+
// eslint-disable-next-line no-console
|
|
2144
|
+
console.log(event.key.length);
|
|
2145
|
+
this._input.focus();
|
|
2146
|
+
}
|
|
2147
|
+
});
|
|
2148
|
+
EventHandler.on(this._input, 'keydown', event => this._handleInputKeydown(event));
|
|
2149
|
+
EventHandler.on(this._input, 'input', event => this._handleInput(event));
|
|
2150
|
+
EventHandler.on(this._input, 'paste', event => this._handlePaste(event));
|
|
2151
|
+
EventHandler.on(this._input, 'focus', () => this.clearSelection());
|
|
2152
|
+
if (this._config.createOnBlur) {
|
|
2153
|
+
EventHandler.on(this._input, 'blur', event => {
|
|
2154
|
+
var _event$relatedTarget;
|
|
2155
|
+
// Don't create chip if clicking on a chip
|
|
2156
|
+
if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.closest(SELECTOR_CHIP))) {
|
|
2157
|
+
this._createChipFromInput();
|
|
2158
|
+
}
|
|
2159
|
+
});
|
|
2160
|
+
}
|
|
2161
|
+
EventHandler.on(this._element, 'selected.bs.chip', SELECTOR_CHIP, () => {
|
|
2162
|
+
this._emitSelectionChange();
|
|
2163
|
+
});
|
|
2164
|
+
EventHandler.on(this._element, 'deselected.bs.chip', SELECTOR_CHIP, () => {
|
|
2165
|
+
this._emitSelectionChange();
|
|
2166
|
+
});
|
|
2167
|
+
EventHandler.on(this._element, 'remove.bs.chip', SELECTOR_CHIP, event => {
|
|
2168
|
+
if (this._disabled || this._readonly) {
|
|
2169
|
+
event.preventDefault();
|
|
2170
|
+
}
|
|
2171
|
+
});
|
|
2172
|
+
EventHandler.on(this._element, 'removed.bs.chip', SELECTOR_CHIP, event => {
|
|
2173
|
+
const chip = event.target.closest(SELECTOR_CHIP);
|
|
2174
|
+
if (chip) {
|
|
2175
|
+
this._handleChipRemoved(chip);
|
|
2176
|
+
const focusableChips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element);
|
|
2177
|
+
if (focusableChips.length > 0) {
|
|
2178
|
+
var _this$_input3;
|
|
2179
|
+
(_this$_input3 = this._input) == null || _this$_input3.focus();
|
|
2180
|
+
}
|
|
2181
|
+
this._emitSelectionChange();
|
|
2182
|
+
}
|
|
2183
|
+
});
|
|
2184
|
+
|
|
2185
|
+
// Focus input when clicking container background
|
|
2186
|
+
EventHandler.on(this._element, 'click', event => {
|
|
2187
|
+
if (event.target === this._element) {
|
|
2188
|
+
var _this$_input4;
|
|
2189
|
+
(_this$_input4 = this._input) == null || _this$_input4.focus();
|
|
2190
|
+
}
|
|
2191
|
+
});
|
|
2192
|
+
}
|
|
2193
|
+
_handleInputKeydown(event) {
|
|
2194
|
+
const {
|
|
2195
|
+
key
|
|
2196
|
+
} = event;
|
|
2197
|
+
switch (key) {
|
|
2198
|
+
case 'Enter':
|
|
2199
|
+
{
|
|
2200
|
+
event.preventDefault();
|
|
2201
|
+
this._createChipFromInput();
|
|
2202
|
+
break;
|
|
2203
|
+
}
|
|
2204
|
+
case 'Backspace':
|
|
2205
|
+
case 'Delete':
|
|
2206
|
+
{
|
|
2207
|
+
if (this._input.value === '') {
|
|
2208
|
+
event.preventDefault();
|
|
2209
|
+
const chips = this._getChipElements();
|
|
2210
|
+
if (chips.length > 0) {
|
|
2211
|
+
const lastChip = chips.at(-1);
|
|
2212
|
+
lastChip.focus();
|
|
2213
|
+
}
|
|
2214
|
+
}
|
|
2215
|
+
break;
|
|
2216
|
+
}
|
|
2217
|
+
case 'ArrowLeft':
|
|
2218
|
+
{
|
|
2219
|
+
if (this._input.selectionStart === 0 && this._input.selectionEnd === 0) {
|
|
2220
|
+
event.preventDefault();
|
|
2221
|
+
const chips = this._getChipElements();
|
|
2222
|
+
if (chips.length > 0) {
|
|
2223
|
+
const lastChip = chips.at(-1);
|
|
2224
|
+
lastChip.focus();
|
|
2225
|
+
}
|
|
2226
|
+
}
|
|
2227
|
+
break;
|
|
2228
|
+
}
|
|
2229
|
+
case 'Escape':
|
|
2230
|
+
{
|
|
2231
|
+
this._input.value = '';
|
|
2232
|
+
this._input.blur();
|
|
2233
|
+
break;
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
// No default
|
|
2237
|
+
}
|
|
2238
|
+
}
|
|
2239
|
+
_handleChipRemoved(chip, value = null) {
|
|
2240
|
+
const chipValue = value || this._getChipValue(chip);
|
|
2241
|
+
const valueIndex = this._chips.indexOf(chipValue);
|
|
2242
|
+
if (valueIndex !== -1) {
|
|
2243
|
+
this._chips.splice(valueIndex, 1);
|
|
2244
|
+
}
|
|
2245
|
+
const values = this.getValues();
|
|
2246
|
+
this._hiddenInput.value = values.join(',');
|
|
2247
|
+
EventHandler.trigger(this._element, EVENT_CHANGE, {
|
|
2248
|
+
values
|
|
2249
|
+
});
|
|
2250
|
+
}
|
|
2251
|
+
_handleInput(event) {
|
|
2252
|
+
if (this._disabled || this._readonly) {
|
|
2253
|
+
return;
|
|
2254
|
+
}
|
|
2255
|
+
const {
|
|
2256
|
+
value
|
|
2257
|
+
} = event.target;
|
|
2258
|
+
const {
|
|
2259
|
+
separator
|
|
2260
|
+
} = this._config;
|
|
2261
|
+
if (separator && value.includes(separator)) {
|
|
2262
|
+
const parts = value.split(separator);
|
|
2263
|
+
for (const part of parts.slice(0, -1)) {
|
|
2264
|
+
this.add(part.trim());
|
|
2265
|
+
}
|
|
2266
|
+
this._input.value = parts.at(-1);
|
|
2267
|
+
}
|
|
2268
|
+
this._setInputSize();
|
|
2269
|
+
EventHandler.trigger(this._element, EVENT_INPUT, {
|
|
2270
|
+
value: this._input.value,
|
|
2271
|
+
relatedTarget: this._input
|
|
2272
|
+
});
|
|
2273
|
+
}
|
|
2274
|
+
_handlePaste(event) {
|
|
2275
|
+
if (this._disabled || this._readonly) {
|
|
2276
|
+
return;
|
|
2277
|
+
}
|
|
2278
|
+
const {
|
|
2279
|
+
separator
|
|
2280
|
+
} = this._config;
|
|
2281
|
+
if (!separator) {
|
|
2282
|
+
return;
|
|
2283
|
+
}
|
|
2284
|
+
const pastedData = (event.clipboardData || window.clipboardData).getData('text');
|
|
2285
|
+
if (pastedData.includes(separator)) {
|
|
2286
|
+
event.preventDefault();
|
|
2287
|
+
const parts = pastedData.split(separator);
|
|
2288
|
+
for (const part of parts) {
|
|
2289
|
+
this.add(part.trim());
|
|
2290
|
+
}
|
|
2291
|
+
}
|
|
2292
|
+
}
|
|
2293
|
+
_setInputSize() {
|
|
2294
|
+
if (!this._input) {
|
|
2295
|
+
return;
|
|
2296
|
+
}
|
|
2297
|
+
this._input.size = Math.max(this._input.placeholder.length, this._input.value.length) || 1;
|
|
2298
|
+
}
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2301
|
+
/**
|
|
2302
|
+
* Data API implementation
|
|
2303
|
+
*/
|
|
2304
|
+
|
|
2305
|
+
EventHandler.on(document, `DOMContentLoaded${EVENT_KEY$a}${DATA_API_KEY$7}`, () => {
|
|
2306
|
+
for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
|
|
2307
|
+
ChipInput.getOrCreateInstance(element);
|
|
2308
|
+
}
|
|
2309
|
+
});
|
|
2310
|
+
|
|
1491
2311
|
/**
|
|
1492
2312
|
* --------------------------------------------------------------------------
|
|
1493
2313
|
* CoreUI collapse.js
|
|
@@ -3508,12 +4328,6 @@
|
|
|
3508
4328
|
return instance;
|
|
3509
4329
|
};
|
|
3510
4330
|
}
|
|
3511
|
-
var createPopper$2 = /*#__PURE__*/popperGenerator(); // eslint-disable-next-line import/no-unused-modules
|
|
3512
|
-
|
|
3513
|
-
var defaultModifiers$1 = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1];
|
|
3514
|
-
var createPopper$1 = /*#__PURE__*/popperGenerator({
|
|
3515
|
-
defaultModifiers: defaultModifiers$1
|
|
3516
|
-
}); // eslint-disable-next-line import/no-unused-modules
|
|
3517
4331
|
|
|
3518
4332
|
var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
|
|
3519
4333
|
var createPopper = /*#__PURE__*/popperGenerator({
|
|
@@ -3536,8 +4350,6 @@
|
|
|
3536
4350
|
clippingParents,
|
|
3537
4351
|
computeStyles: computeStyles$1,
|
|
3538
4352
|
createPopper,
|
|
3539
|
-
createPopperBase: createPopper$2,
|
|
3540
|
-
createPopperLite: createPopper$1,
|
|
3541
4353
|
detectOverflow,
|
|
3542
4354
|
end,
|
|
3543
4355
|
eventListeners,
|
|
@@ -6895,6 +7707,8 @@
|
|
|
6895
7707
|
Alert,
|
|
6896
7708
|
Button,
|
|
6897
7709
|
Carousel,
|
|
7710
|
+
Chip,
|
|
7711
|
+
ChipInput,
|
|
6898
7712
|
Collapse,
|
|
6899
7713
|
Dropdown,
|
|
6900
7714
|
Modal,
|