@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/js/dist/alert.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI alert.js v5.
|
|
3
|
-
* Copyright
|
|
2
|
+
* CoreUI alert.js 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) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI base-component.js v5.
|
|
3
|
-
* Copyright
|
|
2
|
+
* CoreUI base-component.js 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) {
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
* Constants
|
|
25
25
|
*/
|
|
26
26
|
|
|
27
|
-
const VERSION = '5.
|
|
27
|
+
const VERSION = '5.6.0';
|
|
28
28
|
|
|
29
29
|
/**
|
|
30
30
|
* Class definition
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"base-component.js","sources":["../src/base-component.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * CoreUI base-component.js\n * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)\n *\n * This component is a modified version of the Bootstrap's base-component.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport Data from './dom/data.js'\nimport EventHandler from './dom/event-handler.js'\nimport Config from './util/config.js'\nimport { executeAfterTransition, getElement } from './util/index.js'\n\n/**\n * Constants\n */\n\nconst VERSION = '5.
|
|
1
|
+
{"version":3,"file":"base-component.js","sources":["../src/base-component.js"],"sourcesContent":["/**\n * --------------------------------------------------------------------------\n * CoreUI base-component.js\n * Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)\n *\n * This component is a modified version of the Bootstrap's base-component.js\n * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)\n * --------------------------------------------------------------------------\n */\n\nimport Data from './dom/data.js'\nimport EventHandler from './dom/event-handler.js'\nimport Config from './util/config.js'\nimport { executeAfterTransition, getElement } from './util/index.js'\n\n/**\n * Constants\n */\n\nconst VERSION = '5.6.0'\n\n/**\n * Class definition\n */\n\nclass BaseComponent extends Config {\n constructor(element, config) {\n super()\n\n element = getElement(element)\n if (!element) {\n return\n }\n\n this._element = element\n this._config = this._getConfig(config)\n\n Data.set(this._element, this.constructor.DATA_KEY, this)\n }\n\n // Public\n dispose() {\n Data.remove(this._element, this.constructor.DATA_KEY)\n EventHandler.off(this._element, this.constructor.EVENT_KEY)\n\n for (const propertyName of Object.getOwnPropertyNames(this)) {\n this[propertyName] = null\n }\n }\n\n // Private\n _queueCallback(callback, element, isAnimated = true) {\n executeAfterTransition(callback, element, isAnimated)\n }\n\n _getConfig(config) {\n config = this._mergeConfigObj(config, this._element)\n config = this._configAfterMerge(config)\n this._typeCheckConfig(config)\n return config\n }\n\n // Static\n static getInstance(element) {\n return Data.get(getElement(element), this.DATA_KEY)\n }\n\n static getOrCreateInstance(element, config = {}) {\n return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null)\n }\n\n static get VERSION() {\n return VERSION\n }\n\n static get DATA_KEY() {\n return `coreui.${this.NAME}`\n }\n\n static get EVENT_KEY() {\n return `.${this.DATA_KEY}`\n }\n\n static eventName(name) {\n return `${name}${this.EVENT_KEY}`\n }\n}\n\nexport default BaseComponent\n"],"names":["VERSION","BaseComponent","Config","constructor","element","config","getElement","_element","_config","_getConfig","Data","set","DATA_KEY","dispose","remove","EventHandler","off","EVENT_KEY","propertyName","Object","getOwnPropertyNames","_queueCallback","callback","isAnimated","executeAfterTransition","_mergeConfigObj","_configAfterMerge","_typeCheckConfig","getInstance","get","getOrCreateInstance","NAME","eventName","name"],"mappings":";;;;;;;;;;;EAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;EAOA;EACA;EACA;;EAEA,MAAMA,OAAO,GAAG,OAAO;;EAEvB;EACA;EACA;;EAEA,MAAMC,aAAa,SAASC,MAAM,CAAC;EACjCC,EAAAA,WAAWA,CAACC,OAAO,EAAEC,MAAM,EAAE;EAC3B,IAAA,KAAK,EAAE;EAEPD,IAAAA,OAAO,GAAGE,mBAAU,CAACF,OAAO,CAAC;MAC7B,IAAI,CAACA,OAAO,EAAE;EACZ,MAAA;EACF,IAAA;MAEA,IAAI,CAACG,QAAQ,GAAGH,OAAO;MACvB,IAAI,CAACI,OAAO,GAAG,IAAI,CAACC,UAAU,CAACJ,MAAM,CAAC;EAEtCK,IAAAA,IAAI,CAACC,GAAG,CAAC,IAAI,CAACJ,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACS,QAAQ,EAAE,IAAI,CAAC;EAC1D,EAAA;;EAEA;EACAC,EAAAA,OAAOA,GAAG;EACRH,IAAAA,IAAI,CAACI,MAAM,CAAC,IAAI,CAACP,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACS,QAAQ,CAAC;EACrDG,IAAAA,YAAY,CAACC,GAAG,CAAC,IAAI,CAACT,QAAQ,EAAE,IAAI,CAACJ,WAAW,CAACc,SAAS,CAAC;MAE3D,KAAK,MAAMC,YAAY,IAAIC,MAAM,CAACC,mBAAmB,CAAC,IAAI,CAAC,EAAE;EAC3D,MAAA,IAAI,CAACF,YAAY,CAAC,GAAG,IAAI;EAC3B,IAAA;EACF,EAAA;;EAEA;IACAG,cAAcA,CAACC,QAAQ,EAAElB,OAAO,EAAEmB,UAAU,GAAG,IAAI,EAAE;EACnDC,IAAAA,+BAAsB,CAACF,QAAQ,EAAElB,OAAO,EAAEmB,UAAU,CAAC;EACvD,EAAA;IAEAd,UAAUA,CAACJ,MAAM,EAAE;MACjBA,MAAM,GAAG,IAAI,CAACoB,eAAe,CAACpB,MAAM,EAAE,IAAI,CAACE,QAAQ,CAAC;EACpDF,IAAAA,MAAM,GAAG,IAAI,CAACqB,iBAAiB,CAACrB,MAAM,CAAC;EACvC,IAAA,IAAI,CAACsB,gBAAgB,CAACtB,MAAM,CAAC;EAC7B,IAAA,OAAOA,MAAM;EACf,EAAA;;EAEA;IACA,OAAOuB,WAAWA,CAACxB,OAAO,EAAE;EAC1B,IAAA,OAAOM,IAAI,CAACmB,GAAG,CAACvB,mBAAU,CAACF,OAAO,CAAC,EAAE,IAAI,CAACQ,QAAQ,CAAC;EACrD,EAAA;IAEA,OAAOkB,mBAAmBA,CAAC1B,OAAO,EAAEC,MAAM,GAAG,EAAE,EAAE;MAC/C,OAAO,IAAI,CAACuB,WAAW,CAACxB,OAAO,CAAC,IAAI,IAAI,IAAI,CAACA,OAAO,EAAE,OAAOC,MAAM,KAAK,QAAQ,GAAGA,MAAM,GAAG,IAAI,CAAC;EACnG,EAAA;IAEA,WAAWL,OAAOA,GAAG;EACnB,IAAA,OAAOA,OAAO;EAChB,EAAA;IAEA,WAAWY,QAAQA,GAAG;EACpB,IAAA,OAAO,CAAA,OAAA,EAAU,IAAI,CAACmB,IAAI,CAAA,CAAE;EAC9B,EAAA;IAEA,WAAWd,SAASA,GAAG;EACrB,IAAA,OAAO,CAAA,CAAA,EAAI,IAAI,CAACL,QAAQ,CAAA,CAAE;EAC5B,EAAA;IAEA,OAAOoB,SAASA,CAACC,IAAI,EAAE;EACrB,IAAA,OAAO,GAAGA,IAAI,CAAA,EAAG,IAAI,CAAChB,SAAS,CAAA,CAAE;EACnC,EAAA;EACF;;;;;;;;"}
|
package/js/dist/button.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI button.js v5.
|
|
3
|
-
* Copyright
|
|
2
|
+
* CoreUI button.js 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) {
|
package/js/dist/carousel.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* CoreUI carousel.js v5.
|
|
3
|
-
* Copyright
|
|
2
|
+
* CoreUI carousel.js 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) {
|
|
@@ -0,0 +1,528 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* CoreUI chip-input.js v5.6.0 (https://coreui.io)
|
|
3
|
+
* Copyright 2026 The CoreUI Team (https://github.com/orgs/coreui/people)
|
|
4
|
+
* Licensed under MIT (https://github.com/coreui/coreui/blob/main/LICENSE)
|
|
5
|
+
*/
|
|
6
|
+
(function (global, factory) {
|
|
7
|
+
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('./base-component.js'), require('./chip.js'), require('./dom/event-handler.js'), require('./dom/selector-engine.js'), require('./util/index.js')) :
|
|
8
|
+
typeof define === 'function' && define.amd ? define(['./base-component', './chip', './dom/event-handler', './dom/selector-engine', './util/index'], factory) :
|
|
9
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.ChipInput = factory(global.BaseComponent, global.Chip, global.EventHandler, global.SelectorEngine, global.Index));
|
|
10
|
+
})(this, (function (BaseComponent, Chip, EventHandler, SelectorEngine, index_js) { 'use strict';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* --------------------------------------------------------------------------
|
|
14
|
+
* CoreUI chip-input.js
|
|
15
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
16
|
+
*
|
|
17
|
+
* This component is a highly modified version of the Bootstrap's chip-input.js
|
|
18
|
+
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
|
19
|
+
* --------------------------------------------------------------------------
|
|
20
|
+
*/
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
/**
|
|
24
|
+
* Constants
|
|
25
|
+
*/
|
|
26
|
+
|
|
27
|
+
const NAME = 'chip-input';
|
|
28
|
+
const DATA_KEY = 'coreui.chip-input';
|
|
29
|
+
const EVENT_KEY = `.${DATA_KEY}`;
|
|
30
|
+
const DATA_API_KEY = '.data-api';
|
|
31
|
+
const EVENT_ADD = `add${EVENT_KEY}`;
|
|
32
|
+
const EVENT_REMOVE = `remove${EVENT_KEY}`;
|
|
33
|
+
const EVENT_CHANGE = `change${EVENT_KEY}`;
|
|
34
|
+
const EVENT_SELECT = `select${EVENT_KEY}`;
|
|
35
|
+
const EVENT_INPUT = `input${EVENT_KEY}`;
|
|
36
|
+
const SELECTOR_DATA_CHIP_INPUT = '[data-coreui-chip-input]';
|
|
37
|
+
const SELECTOR_CHIP = '.chip';
|
|
38
|
+
const SELECTOR_CHIP_ACTIVE = `${SELECTOR_CHIP}.active`;
|
|
39
|
+
const SELECTOR_CHIP_INPUT_LABEL = '.chip-input-label';
|
|
40
|
+
const SELECTOR_CHIP_REMOVE = '.chip-remove';
|
|
41
|
+
const SELECTOR_FOCUSABLE_ITEMS = '.chip:not(.disabled)';
|
|
42
|
+
const CLASS_NAME_CHIP = 'chip';
|
|
43
|
+
const CLASS_NAME_DISABLED = 'disabled';
|
|
44
|
+
const CLASS_NAME_CHIP_INPUT_FIELD = 'chip-input-field';
|
|
45
|
+
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>';
|
|
46
|
+
const Default = {
|
|
47
|
+
chipClassName: null,
|
|
48
|
+
createOnBlur: true,
|
|
49
|
+
disabled: false,
|
|
50
|
+
id: null,
|
|
51
|
+
maxChips: null,
|
|
52
|
+
name: null,
|
|
53
|
+
placeholder: '',
|
|
54
|
+
readonly: false,
|
|
55
|
+
removable: true,
|
|
56
|
+
removeIcon: DEFAULT_REMOVE_ICON,
|
|
57
|
+
selectable: false,
|
|
58
|
+
separator: ','
|
|
59
|
+
};
|
|
60
|
+
const DefaultType = {
|
|
61
|
+
chipClassName: '(string|function|null)',
|
|
62
|
+
createOnBlur: 'boolean',
|
|
63
|
+
disabled: 'boolean',
|
|
64
|
+
maxChips: '(number|null)',
|
|
65
|
+
id: '(string|null)',
|
|
66
|
+
name: '(string|null)',
|
|
67
|
+
placeholder: 'string',
|
|
68
|
+
readonly: 'boolean',
|
|
69
|
+
removable: 'boolean',
|
|
70
|
+
removeIcon: 'string',
|
|
71
|
+
selectable: 'boolean',
|
|
72
|
+
separator: '(string|null)'
|
|
73
|
+
};
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Class definition
|
|
77
|
+
*/
|
|
78
|
+
|
|
79
|
+
class ChipInput extends BaseComponent {
|
|
80
|
+
constructor(element, config) {
|
|
81
|
+
var _this$_config$id;
|
|
82
|
+
super(element, config);
|
|
83
|
+
this._uniqueId = (_this$_config$id = this._config.id) != null ? _this$_config$id : index_js.getUID(`${this.constructor.NAME}`);
|
|
84
|
+
this._disabled = this._config.disabled || this._element.classList.contains(CLASS_NAME_DISABLED);
|
|
85
|
+
this._readonly = this._config.readonly;
|
|
86
|
+
this._chips = [];
|
|
87
|
+
this._input = SelectorEngine.findOne('input', this._element);
|
|
88
|
+
this._hiddenInput = null;
|
|
89
|
+
if (this._input) {
|
|
90
|
+
this._setInputSize();
|
|
91
|
+
} else {
|
|
92
|
+
this._createInput();
|
|
93
|
+
}
|
|
94
|
+
this._applyInteractionState();
|
|
95
|
+
this._initializeExistingChips();
|
|
96
|
+
this._createHiddenInput();
|
|
97
|
+
this._addEventListeners();
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Getters
|
|
101
|
+
static get Default() {
|
|
102
|
+
return Default;
|
|
103
|
+
}
|
|
104
|
+
static get DefaultType() {
|
|
105
|
+
return DefaultType;
|
|
106
|
+
}
|
|
107
|
+
static get NAME() {
|
|
108
|
+
return NAME;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// Public
|
|
112
|
+
add(value) {
|
|
113
|
+
if (this._disabled || this._readonly) {
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
const trimmedValue = String(value).trim();
|
|
117
|
+
if (!trimmedValue) {
|
|
118
|
+
return null;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
// Chips are unique by value
|
|
122
|
+
if (this._chips.includes(trimmedValue)) {
|
|
123
|
+
return null;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Check max chips limit
|
|
127
|
+
if (this._config.maxChips !== null && this._chips.length >= this._config.maxChips) {
|
|
128
|
+
return null;
|
|
129
|
+
}
|
|
130
|
+
const addEvent = EventHandler.trigger(this._element, EVENT_ADD, {
|
|
131
|
+
value: trimmedValue,
|
|
132
|
+
relatedTarget: this._input
|
|
133
|
+
});
|
|
134
|
+
if (addEvent.defaultPrevented) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
const chip = this._createChip(trimmedValue);
|
|
138
|
+
this._element.insertBefore(chip, this._input);
|
|
139
|
+
this._chips.push(trimmedValue);
|
|
140
|
+
const values = this.getValues();
|
|
141
|
+
this._hiddenInput.value = values.join(',');
|
|
142
|
+
EventHandler.trigger(this._element, EVENT_CHANGE, {
|
|
143
|
+
values
|
|
144
|
+
});
|
|
145
|
+
return chip;
|
|
146
|
+
}
|
|
147
|
+
remove(chipOrValue) {
|
|
148
|
+
if (this._disabled || this._readonly) {
|
|
149
|
+
return false;
|
|
150
|
+
}
|
|
151
|
+
let chip;
|
|
152
|
+
let value;
|
|
153
|
+
if (typeof chipOrValue === 'string') {
|
|
154
|
+
value = chipOrValue;
|
|
155
|
+
chip = this._findChipByValue(value);
|
|
156
|
+
} else {
|
|
157
|
+
chip = chipOrValue;
|
|
158
|
+
value = this._getChipValue(chip);
|
|
159
|
+
}
|
|
160
|
+
if (!chip || !value) {
|
|
161
|
+
return false;
|
|
162
|
+
}
|
|
163
|
+
const removeEvent = EventHandler.trigger(this._element, EVENT_REMOVE, {
|
|
164
|
+
value,
|
|
165
|
+
chip,
|
|
166
|
+
relatedTarget: this._input
|
|
167
|
+
});
|
|
168
|
+
if (removeEvent.defaultPrevented) {
|
|
169
|
+
return false;
|
|
170
|
+
}
|
|
171
|
+
const chipInstance = Chip.getInstance(chip);
|
|
172
|
+
if (chipInstance) {
|
|
173
|
+
chipInstance.remove();
|
|
174
|
+
} else {
|
|
175
|
+
chip.remove();
|
|
176
|
+
this._handleChipRemoved(chip, value);
|
|
177
|
+
}
|
|
178
|
+
return !chip.isConnected;
|
|
179
|
+
}
|
|
180
|
+
removeSelected() {
|
|
181
|
+
var _this$_input;
|
|
182
|
+
const chipsToRemove = this._getSelectedChipElements();
|
|
183
|
+
for (const chip of chipsToRemove) {
|
|
184
|
+
this.remove(chip);
|
|
185
|
+
}
|
|
186
|
+
(_this$_input = this._input) == null || _this$_input.focus();
|
|
187
|
+
}
|
|
188
|
+
getValues() {
|
|
189
|
+
return [...this._chips];
|
|
190
|
+
}
|
|
191
|
+
getSelectedValues() {
|
|
192
|
+
return this._getSelectedChipElements().map(chip => this._getChipValue(chip));
|
|
193
|
+
}
|
|
194
|
+
clear() {
|
|
195
|
+
const chips = SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
196
|
+
for (const chip of chips) {
|
|
197
|
+
this.remove(chip);
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
clearSelection() {
|
|
201
|
+
for (const chip of this._getSelectedChipElements()) {
|
|
202
|
+
var _Chip$getInstance;
|
|
203
|
+
(_Chip$getInstance = Chip.getInstance(chip)) == null || _Chip$getInstance.deselect();
|
|
204
|
+
}
|
|
205
|
+
EventHandler.trigger(this._element, EVENT_SELECT, {
|
|
206
|
+
selected: []
|
|
207
|
+
});
|
|
208
|
+
}
|
|
209
|
+
selectChip(chip) {
|
|
210
|
+
const chipElements = this._getChipElements();
|
|
211
|
+
if (!chipElements.includes(chip)) {
|
|
212
|
+
return;
|
|
213
|
+
}
|
|
214
|
+
const chipInstance = Chip.getInstance(chip);
|
|
215
|
+
if (!chipInstance) {
|
|
216
|
+
return;
|
|
217
|
+
}
|
|
218
|
+
chipInstance.select();
|
|
219
|
+
}
|
|
220
|
+
focus() {
|
|
221
|
+
var _this$_input2;
|
|
222
|
+
(_this$_input2 = this._input) == null || _this$_input2.focus();
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
// Private
|
|
226
|
+
_emitSelectionChange() {
|
|
227
|
+
EventHandler.trigger(this._element, EVENT_SELECT, {
|
|
228
|
+
selected: this.getSelectedValues()
|
|
229
|
+
});
|
|
230
|
+
}
|
|
231
|
+
_getChipElements() {
|
|
232
|
+
return SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
233
|
+
}
|
|
234
|
+
_getSelectedChipElements() {
|
|
235
|
+
return SelectorEngine.find(SELECTOR_CHIP_ACTIVE, this._element);
|
|
236
|
+
}
|
|
237
|
+
_createInput() {
|
|
238
|
+
const input = document.createElement('input');
|
|
239
|
+
const label = SelectorEngine.findOne(SELECTOR_CHIP_INPUT_LABEL, this._element);
|
|
240
|
+
const labelFor = label == null ? void 0 : label.getAttribute('for');
|
|
241
|
+
const generatedInputId = labelFor || index_js.getUID(`${this.constructor.NAME}-input`);
|
|
242
|
+
input.type = 'text';
|
|
243
|
+
input.className = CLASS_NAME_CHIP_INPUT_FIELD;
|
|
244
|
+
input.id = generatedInputId;
|
|
245
|
+
if (this._config.placeholder) {
|
|
246
|
+
input.placeholder = this._config.placeholder;
|
|
247
|
+
}
|
|
248
|
+
if (label && !labelFor) {
|
|
249
|
+
label.setAttribute('for', generatedInputId);
|
|
250
|
+
}
|
|
251
|
+
this._input = input;
|
|
252
|
+
this._setInputSize();
|
|
253
|
+
this._element.append(input);
|
|
254
|
+
}
|
|
255
|
+
_createHiddenInput() {
|
|
256
|
+
const hiddenInput = document.createElement('input');
|
|
257
|
+
hiddenInput.type = 'hidden';
|
|
258
|
+
hiddenInput.id = this._uniqueId;
|
|
259
|
+
hiddenInput.name = this._config.name || this._uniqueId;
|
|
260
|
+
this._element.append(hiddenInput);
|
|
261
|
+
this._hiddenInput = hiddenInput;
|
|
262
|
+
this._hiddenInput.value = this.getValues().join(',');
|
|
263
|
+
}
|
|
264
|
+
_createChip(value) {
|
|
265
|
+
const chip = document.createElement('span');
|
|
266
|
+
chip.className = CLASS_NAME_CHIP;
|
|
267
|
+
chip.dataset.coreuiChipValue = value;
|
|
268
|
+
chip.append(document.createTextNode(value));
|
|
269
|
+
this._applyChipClassName(chip, value);
|
|
270
|
+
this._setupChip(chip);
|
|
271
|
+
return chip;
|
|
272
|
+
}
|
|
273
|
+
_createChipFromInput() {
|
|
274
|
+
if (this._disabled || this._readonly) {
|
|
275
|
+
return;
|
|
276
|
+
}
|
|
277
|
+
const value = this._input.value.trim();
|
|
278
|
+
if (value) {
|
|
279
|
+
this.add(value);
|
|
280
|
+
this._input.value = '';
|
|
281
|
+
this._setInputSize();
|
|
282
|
+
}
|
|
283
|
+
}
|
|
284
|
+
_findChipByValue(value) {
|
|
285
|
+
const chips = this._getChipElements();
|
|
286
|
+
return chips.find(chip => this._getChipValue(chip) === value);
|
|
287
|
+
}
|
|
288
|
+
_getChipValue(chip) {
|
|
289
|
+
var _clone$textContent;
|
|
290
|
+
if (chip.dataset.coreuiChipValue) {
|
|
291
|
+
return chip.dataset.coreuiChipValue;
|
|
292
|
+
}
|
|
293
|
+
const clone = chip.cloneNode(true);
|
|
294
|
+
const remove = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, clone);
|
|
295
|
+
if (remove) {
|
|
296
|
+
remove.remove();
|
|
297
|
+
}
|
|
298
|
+
return ((_clone$textContent = clone.textContent) == null ? void 0 : _clone$textContent.trim()) || '';
|
|
299
|
+
}
|
|
300
|
+
_initializeExistingChips() {
|
|
301
|
+
const existingChips = SelectorEngine.find(SELECTOR_CHIP, this._element);
|
|
302
|
+
for (const chip of existingChips) {
|
|
303
|
+
const value = this._getChipValue(chip);
|
|
304
|
+
if (value) {
|
|
305
|
+
this._chips.push(value);
|
|
306
|
+
this._applyChipClassName(chip, value);
|
|
307
|
+
this._setupChip(chip);
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
_applyChipClassName(chip, value) {
|
|
312
|
+
const className = this._resolveChipClassName(value);
|
|
313
|
+
if (!className) {
|
|
314
|
+
return;
|
|
315
|
+
}
|
|
316
|
+
chip.classList.add(...className.split(/\s+/).filter(Boolean));
|
|
317
|
+
}
|
|
318
|
+
_resolveChipClassName(value) {
|
|
319
|
+
const {
|
|
320
|
+
chipClassName
|
|
321
|
+
} = this._config;
|
|
322
|
+
if (!chipClassName) {
|
|
323
|
+
return '';
|
|
324
|
+
}
|
|
325
|
+
if (typeof chipClassName === 'function') {
|
|
326
|
+
const resolvedClassName = chipClassName(value);
|
|
327
|
+
return typeof resolvedClassName === 'string' ? resolvedClassName : '';
|
|
328
|
+
}
|
|
329
|
+
return typeof chipClassName === 'string' ? chipClassName : '';
|
|
330
|
+
}
|
|
331
|
+
_setupChip(chip) {
|
|
332
|
+
Chip.getOrCreateInstance(chip, {
|
|
333
|
+
ariaRemoveLabel: `Remove ${this._getChipValue(chip)}`,
|
|
334
|
+
disabled: this._disabled,
|
|
335
|
+
removable: this._config.removable && !this._readonly && !this._disabled,
|
|
336
|
+
removeIcon: this._config.removeIcon,
|
|
337
|
+
selectable: this._config.selectable
|
|
338
|
+
});
|
|
339
|
+
const removeButton = SelectorEngine.findOne(SELECTOR_CHIP_REMOVE, chip);
|
|
340
|
+
if (removeButton) {
|
|
341
|
+
removeButton.disabled = this._disabled || this._readonly;
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
_applyInteractionState() {
|
|
345
|
+
this._element.classList.toggle(CLASS_NAME_DISABLED, this._disabled);
|
|
346
|
+
this._input.disabled = this._disabled;
|
|
347
|
+
this._input.readOnly = !this._disabled && this._readonly;
|
|
348
|
+
this._element.setAttribute('aria-disabled', this._disabled ? 'true' : 'false');
|
|
349
|
+
this._element.setAttribute('aria-readonly', this._readonly ? 'true' : 'false');
|
|
350
|
+
}
|
|
351
|
+
_addEventListeners() {
|
|
352
|
+
EventHandler.on(this._element, 'keydown', event => {
|
|
353
|
+
if (event.target === this._input) {
|
|
354
|
+
return;
|
|
355
|
+
}
|
|
356
|
+
if (event.key.length === 1) {
|
|
357
|
+
// eslint-disable-next-line no-console
|
|
358
|
+
console.log(event.key.length);
|
|
359
|
+
this._input.focus();
|
|
360
|
+
}
|
|
361
|
+
});
|
|
362
|
+
EventHandler.on(this._input, 'keydown', event => this._handleInputKeydown(event));
|
|
363
|
+
EventHandler.on(this._input, 'input', event => this._handleInput(event));
|
|
364
|
+
EventHandler.on(this._input, 'paste', event => this._handlePaste(event));
|
|
365
|
+
EventHandler.on(this._input, 'focus', () => this.clearSelection());
|
|
366
|
+
if (this._config.createOnBlur) {
|
|
367
|
+
EventHandler.on(this._input, 'blur', event => {
|
|
368
|
+
var _event$relatedTarget;
|
|
369
|
+
// Don't create chip if clicking on a chip
|
|
370
|
+
if (!((_event$relatedTarget = event.relatedTarget) != null && _event$relatedTarget.closest(SELECTOR_CHIP))) {
|
|
371
|
+
this._createChipFromInput();
|
|
372
|
+
}
|
|
373
|
+
});
|
|
374
|
+
}
|
|
375
|
+
EventHandler.on(this._element, 'selected.coreui.chip', SELECTOR_CHIP, () => {
|
|
376
|
+
this._emitSelectionChange();
|
|
377
|
+
});
|
|
378
|
+
EventHandler.on(this._element, 'deselected.coreui.chip', SELECTOR_CHIP, () => {
|
|
379
|
+
this._emitSelectionChange();
|
|
380
|
+
});
|
|
381
|
+
EventHandler.on(this._element, 'remove.coreui.chip', SELECTOR_CHIP, event => {
|
|
382
|
+
if (this._disabled || this._readonly) {
|
|
383
|
+
event.preventDefault();
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
EventHandler.on(this._element, 'removed.coreui.chip', SELECTOR_CHIP, event => {
|
|
387
|
+
const chip = event.target.closest(SELECTOR_CHIP);
|
|
388
|
+
if (chip) {
|
|
389
|
+
this._handleChipRemoved(chip);
|
|
390
|
+
const focusableChips = SelectorEngine.find(SELECTOR_FOCUSABLE_ITEMS, this._element);
|
|
391
|
+
if (focusableChips.length > 0) {
|
|
392
|
+
var _this$_input3;
|
|
393
|
+
(_this$_input3 = this._input) == null || _this$_input3.focus();
|
|
394
|
+
}
|
|
395
|
+
this._emitSelectionChange();
|
|
396
|
+
}
|
|
397
|
+
});
|
|
398
|
+
|
|
399
|
+
// Focus input when clicking container background
|
|
400
|
+
EventHandler.on(this._element, 'click', event => {
|
|
401
|
+
if (event.target === this._element) {
|
|
402
|
+
var _this$_input4;
|
|
403
|
+
(_this$_input4 = this._input) == null || _this$_input4.focus();
|
|
404
|
+
}
|
|
405
|
+
});
|
|
406
|
+
}
|
|
407
|
+
_handleInputKeydown(event) {
|
|
408
|
+
const {
|
|
409
|
+
key
|
|
410
|
+
} = event;
|
|
411
|
+
switch (key) {
|
|
412
|
+
case 'Enter':
|
|
413
|
+
{
|
|
414
|
+
event.preventDefault();
|
|
415
|
+
this._createChipFromInput();
|
|
416
|
+
break;
|
|
417
|
+
}
|
|
418
|
+
case 'Backspace':
|
|
419
|
+
case 'Delete':
|
|
420
|
+
{
|
|
421
|
+
if (this._input.value === '') {
|
|
422
|
+
event.preventDefault();
|
|
423
|
+
const chips = this._getChipElements();
|
|
424
|
+
if (chips.length > 0) {
|
|
425
|
+
const lastChip = chips.at(-1);
|
|
426
|
+
lastChip.focus();
|
|
427
|
+
}
|
|
428
|
+
}
|
|
429
|
+
break;
|
|
430
|
+
}
|
|
431
|
+
case 'ArrowLeft':
|
|
432
|
+
{
|
|
433
|
+
if (this._input.selectionStart === 0 && this._input.selectionEnd === 0) {
|
|
434
|
+
event.preventDefault();
|
|
435
|
+
const chips = this._getChipElements();
|
|
436
|
+
if (chips.length > 0) {
|
|
437
|
+
const lastChip = chips.at(-1);
|
|
438
|
+
lastChip.focus();
|
|
439
|
+
}
|
|
440
|
+
}
|
|
441
|
+
break;
|
|
442
|
+
}
|
|
443
|
+
case 'Escape':
|
|
444
|
+
{
|
|
445
|
+
this._input.value = '';
|
|
446
|
+
this._input.blur();
|
|
447
|
+
break;
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
// No default
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
_handleChipRemoved(chip, value = null) {
|
|
454
|
+
const chipValue = value || this._getChipValue(chip);
|
|
455
|
+
const valueIndex = this._chips.indexOf(chipValue);
|
|
456
|
+
if (valueIndex !== -1) {
|
|
457
|
+
this._chips.splice(valueIndex, 1);
|
|
458
|
+
}
|
|
459
|
+
const values = this.getValues();
|
|
460
|
+
this._hiddenInput.value = values.join(',');
|
|
461
|
+
EventHandler.trigger(this._element, EVENT_CHANGE, {
|
|
462
|
+
values
|
|
463
|
+
});
|
|
464
|
+
}
|
|
465
|
+
_handleInput(event) {
|
|
466
|
+
if (this._disabled || this._readonly) {
|
|
467
|
+
return;
|
|
468
|
+
}
|
|
469
|
+
const {
|
|
470
|
+
value
|
|
471
|
+
} = event.target;
|
|
472
|
+
const {
|
|
473
|
+
separator
|
|
474
|
+
} = this._config;
|
|
475
|
+
if (separator && value.includes(separator)) {
|
|
476
|
+
const parts = value.split(separator);
|
|
477
|
+
for (const part of parts.slice(0, -1)) {
|
|
478
|
+
this.add(part.trim());
|
|
479
|
+
}
|
|
480
|
+
this._input.value = parts.at(-1);
|
|
481
|
+
}
|
|
482
|
+
this._setInputSize();
|
|
483
|
+
EventHandler.trigger(this._element, EVENT_INPUT, {
|
|
484
|
+
value: this._input.value,
|
|
485
|
+
relatedTarget: this._input
|
|
486
|
+
});
|
|
487
|
+
}
|
|
488
|
+
_handlePaste(event) {
|
|
489
|
+
if (this._disabled || this._readonly) {
|
|
490
|
+
return;
|
|
491
|
+
}
|
|
492
|
+
const {
|
|
493
|
+
separator
|
|
494
|
+
} = this._config;
|
|
495
|
+
if (!separator) {
|
|
496
|
+
return;
|
|
497
|
+
}
|
|
498
|
+
const pastedData = (event.clipboardData || window.clipboardData).getData('text');
|
|
499
|
+
if (pastedData.includes(separator)) {
|
|
500
|
+
event.preventDefault();
|
|
501
|
+
const parts = pastedData.split(separator);
|
|
502
|
+
for (const part of parts) {
|
|
503
|
+
this.add(part.trim());
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
_setInputSize() {
|
|
508
|
+
if (!this._input) {
|
|
509
|
+
return;
|
|
510
|
+
}
|
|
511
|
+
this._input.size = Math.max(this._input.placeholder.length, this._input.value.length) || 1;
|
|
512
|
+
}
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
/**
|
|
516
|
+
* Data API implementation
|
|
517
|
+
*/
|
|
518
|
+
|
|
519
|
+
EventHandler.on(document, `DOMContentLoaded${EVENT_KEY}${DATA_API_KEY}`, () => {
|
|
520
|
+
for (const element of SelectorEngine.find(SELECTOR_DATA_CHIP_INPUT)) {
|
|
521
|
+
ChipInput.getOrCreateInstance(element);
|
|
522
|
+
}
|
|
523
|
+
});
|
|
524
|
+
|
|
525
|
+
return ChipInput;
|
|
526
|
+
|
|
527
|
+
}));
|
|
528
|
+
//# sourceMappingURL=chip-input.js.map
|