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