@keenthemes/ktui 1.0.12 → 1.0.14
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/dist/ktui.js +738 -700
- package/dist/ktui.min.js +1 -1
- package/dist/ktui.min.js.map +1 -1
- package/dist/styles.css +5824 -0
- package/examples/select/avatar.html +47 -0
- package/examples/select/basic-usage.html +10 -14
- package/examples/select/{test.html → combobox-icons_.html} +13 -48
- package/examples/select/country.html +43 -0
- package/examples/select/description.html +25 -41
- package/examples/select/disable-option.html +10 -16
- package/examples/select/disable-select.html +7 -6
- package/examples/select/icon-multiple.html +23 -31
- package/examples/select/icon.html +20 -30
- package/examples/select/max-selection.html +8 -9
- package/examples/select/modal.html +16 -17
- package/examples/select/multiple.html +11 -13
- package/examples/select/placeholder.html +9 -12
- package/examples/select/search.html +30 -22
- package/examples/select/sizes.html +94 -0
- package/examples/select/template-customization.html +0 -3
- package/lib/cjs/components/component.js +1 -1
- package/lib/cjs/components/component.js.map +1 -1
- package/lib/cjs/components/datatable/datatable.js +14 -11
- package/lib/cjs/components/datatable/datatable.js.map +1 -1
- package/lib/cjs/components/select/combobox.js +96 -61
- package/lib/cjs/components/select/combobox.js.map +1 -1
- package/lib/cjs/components/select/config.js +13 -8
- package/lib/cjs/components/select/config.js.map +1 -1
- package/lib/cjs/components/select/dropdown.js +32 -96
- package/lib/cjs/components/select/dropdown.js.map +1 -1
- package/lib/cjs/components/select/option.js +53 -20
- package/lib/cjs/components/select/option.js.map +1 -1
- package/lib/cjs/components/select/search.js +146 -97
- package/lib/cjs/components/select/search.js.map +1 -1
- package/lib/cjs/components/select/select.js +219 -118
- package/lib/cjs/components/select/select.js.map +1 -1
- package/lib/cjs/components/select/tags.js +0 -26
- package/lib/cjs/components/select/tags.js.map +1 -1
- package/lib/cjs/components/select/templates.js +130 -105
- package/lib/cjs/components/select/templates.js.map +1 -1
- package/lib/cjs/components/select/utils.js +33 -132
- package/lib/cjs/components/select/utils.js.map +1 -1
- package/lib/cjs/helpers/dom.js +0 -24
- package/lib/cjs/helpers/dom.js.map +1 -1
- package/lib/esm/components/component.js +1 -1
- package/lib/esm/components/component.js.map +1 -1
- package/lib/esm/components/datatable/datatable.js +14 -11
- package/lib/esm/components/datatable/datatable.js.map +1 -1
- package/lib/esm/components/select/combobox.js +96 -61
- package/lib/esm/components/select/combobox.js.map +1 -1
- package/lib/esm/components/select/config.js +13 -8
- package/lib/esm/components/select/config.js.map +1 -1
- package/lib/esm/components/select/dropdown.js +32 -96
- package/lib/esm/components/select/dropdown.js.map +1 -1
- package/lib/esm/components/select/option.js +53 -20
- package/lib/esm/components/select/option.js.map +1 -1
- package/lib/esm/components/select/search.js +146 -97
- package/lib/esm/components/select/search.js.map +1 -1
- package/lib/esm/components/select/select.js +219 -118
- package/lib/esm/components/select/select.js.map +1 -1
- package/lib/esm/components/select/tags.js +0 -26
- package/lib/esm/components/select/tags.js.map +1 -1
- package/lib/esm/components/select/templates.js +130 -105
- package/lib/esm/components/select/templates.js.map +1 -1
- package/lib/esm/components/select/utils.js +32 -130
- package/lib/esm/components/select/utils.js.map +1 -1
- package/lib/esm/helpers/dom.js +0 -24
- package/lib/esm/helpers/dom.js.map +1 -1
- package/package.json +9 -6
- package/src/components/component.ts +0 -4
- package/src/components/datatable/datatable.ts +14 -11
- package/src/components/input/input.css +1 -1
- package/src/components/scrollable/scrollable.css +9 -5
- package/src/components/select/combobox.ts +98 -87
- package/src/components/select/config.ts +16 -13
- package/src/components/select/dropdown.ts +43 -108
- package/src/components/select/option.ts +44 -25
- package/src/components/select/search.ts +158 -117
- package/src/components/select/select.css +99 -27
- package/src/components/select/select.ts +236 -128
- package/src/components/select/tags.ts +1 -27
- package/src/components/select/templates.ts +191 -132
- package/src/components/select/utils.ts +30 -166
- package/src/components/toast/toast.css +1 -1
- package/src/helpers/dom.ts +0 -30
- package/webpack.config.js +6 -1
- package/examples/select/combobox-icons.html +0 -58
- package/examples/select/icon-description.html +0 -56
- /package/examples/select/{combobox.html → combobox_.html} +0 -0
- /package/examples/select/{remote-data.html → remote-data_.html} +0 -0
- /package/examples/select/{tags-icons.html → tags-icons_.html} +0 -0
- /package/examples/select/{tags-selected.html → tags-selected_.html} +0 -0
- /package/examples/select/{tags.html → tags_.html} +0 -0
|
@@ -27,7 +27,7 @@ import { FocusManager, EventManager } from './utils';
|
|
|
27
27
|
*
|
|
28
28
|
* A specialized dropdown implementation for the KTSelect component.
|
|
29
29
|
* This module handles the dropdown functionality for the select component,
|
|
30
|
-
* including positioning
|
|
30
|
+
* including positioning and showing/hiding.
|
|
31
31
|
*/
|
|
32
32
|
var KTSelectDropdown = /** @class */ (function (_super) {
|
|
33
33
|
__extends(KTSelectDropdown, _super);
|
|
@@ -38,7 +38,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
38
38
|
* @param dropdownElement The dropdown content element
|
|
39
39
|
* @param config The configuration options
|
|
40
40
|
*/
|
|
41
|
-
function KTSelectDropdown(element, toggleElement, dropdownElement, config) {
|
|
41
|
+
function KTSelectDropdown(element, toggleElement, dropdownElement, config, ktSelectInstance) {
|
|
42
42
|
var _this = _super.call(this) || this;
|
|
43
43
|
_this._name = 'select-dropdown';
|
|
44
44
|
// State
|
|
@@ -49,6 +49,7 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
49
49
|
_this._toggleElement = toggleElement;
|
|
50
50
|
_this._dropdownElement = dropdownElement;
|
|
51
51
|
_this._config = config;
|
|
52
|
+
_this._ktSelectInstance = ktSelectInstance; // Assign instance
|
|
52
53
|
_this._eventManager = new EventManager();
|
|
53
54
|
_this._focusManager = new FocusManager(dropdownElement, '[data-kt-select-option]', config);
|
|
54
55
|
_this._setupEventListeners();
|
|
@@ -69,7 +70,18 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
69
70
|
KTSelectDropdown.prototype._handleToggleClick = function (event) {
|
|
70
71
|
event.preventDefault();
|
|
71
72
|
event.stopPropagation();
|
|
72
|
-
this.
|
|
73
|
+
if (this._config.disabled) {
|
|
74
|
+
if (this._config.debug)
|
|
75
|
+
console.log('KTSelectDropdown._handleToggleClick: select is disabled');
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
// Call KTSelect's methods
|
|
79
|
+
if (this._ktSelectInstance.isDropdownOpen()) {
|
|
80
|
+
this._ktSelectInstance.closeDropdown();
|
|
81
|
+
}
|
|
82
|
+
else {
|
|
83
|
+
this._ktSelectInstance.openDropdown();
|
|
84
|
+
}
|
|
73
85
|
};
|
|
74
86
|
/**
|
|
75
87
|
* Handle clicks outside the dropdown
|
|
@@ -80,7 +92,8 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
80
92
|
var target = event.target;
|
|
81
93
|
if (!this._element.contains(target) &&
|
|
82
94
|
!this._dropdownElement.contains(target)) {
|
|
83
|
-
|
|
95
|
+
// Call KTSelect's closeDropdown method
|
|
96
|
+
this._ktSelectInstance.closeDropdown();
|
|
84
97
|
}
|
|
85
98
|
};
|
|
86
99
|
/**
|
|
@@ -182,29 +195,6 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
182
195
|
this._popperInstance.update();
|
|
183
196
|
}
|
|
184
197
|
};
|
|
185
|
-
/**
|
|
186
|
-
* Toggle the dropdown
|
|
187
|
-
*/
|
|
188
|
-
KTSelectDropdown.prototype.toggle = function () {
|
|
189
|
-
if (this._config.disabled) {
|
|
190
|
-
if (this._config.debug)
|
|
191
|
-
console.log('KTSelectDropdown.toggle: select is disabled, not toggling');
|
|
192
|
-
return;
|
|
193
|
-
}
|
|
194
|
-
if (this._config.debug)
|
|
195
|
-
console.log('KTSelectDropdown.toggle called - isOpen:', this._isOpen);
|
|
196
|
-
if (this._isTransitioning) {
|
|
197
|
-
if (this._config.debug)
|
|
198
|
-
console.log('KTSelectDropdown.toggle - ignoring during transition');
|
|
199
|
-
return;
|
|
200
|
-
}
|
|
201
|
-
if (this._isOpen) {
|
|
202
|
-
this.close();
|
|
203
|
-
}
|
|
204
|
-
else {
|
|
205
|
-
this.open();
|
|
206
|
-
}
|
|
207
|
-
};
|
|
208
198
|
/**
|
|
209
199
|
* Open the dropdown
|
|
210
200
|
*/
|
|
@@ -217,71 +207,41 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
217
207
|
}
|
|
218
208
|
if (this._isOpen || this._isTransitioning)
|
|
219
209
|
return;
|
|
220
|
-
// Fire before show event
|
|
221
|
-
var beforeShowEvent = new CustomEvent('kt.select.dropdown.show', {
|
|
222
|
-
bubbles: true,
|
|
223
|
-
cancelable: true,
|
|
224
|
-
});
|
|
225
|
-
this._element.dispatchEvent(beforeShowEvent);
|
|
226
|
-
if (beforeShowEvent.defaultPrevented)
|
|
227
|
-
return;
|
|
228
210
|
// Begin opening transition
|
|
229
211
|
this._isTransitioning = true;
|
|
230
|
-
// Set initial styles
|
|
212
|
+
// Set initial styles
|
|
231
213
|
this._dropdownElement.classList.remove('hidden');
|
|
232
214
|
this._dropdownElement.style.opacity = '0';
|
|
233
215
|
// Set dropdown width
|
|
234
216
|
this._setDropdownWidth();
|
|
235
|
-
//
|
|
217
|
+
// Reflow
|
|
236
218
|
KTDom.reflow(this._dropdownElement);
|
|
237
|
-
// Apply z-index
|
|
219
|
+
// Apply z-index
|
|
238
220
|
if (this._config.dropdownZindex) {
|
|
239
221
|
this._dropdownElement.style.zIndex =
|
|
240
222
|
this._config.dropdownZindex.toString();
|
|
241
223
|
}
|
|
242
224
|
else {
|
|
243
|
-
// Auto-calculate z-index
|
|
244
225
|
var parentZindex = KTDom.getHighestZindex(this._element);
|
|
245
226
|
if (parentZindex) {
|
|
246
227
|
this._dropdownElement.style.zIndex = (parentZindex + 1).toString();
|
|
247
228
|
}
|
|
248
229
|
}
|
|
249
|
-
// Initialize popper
|
|
230
|
+
// Initialize popper
|
|
250
231
|
this._initPopper();
|
|
251
|
-
// Add active classes
|
|
232
|
+
// Add active classes for visual state
|
|
252
233
|
this._dropdownElement.classList.add('open');
|
|
253
234
|
this._toggleElement.classList.add('active');
|
|
254
|
-
|
|
235
|
+
// ARIA attributes will be handled by KTSelect
|
|
255
236
|
// Start transition
|
|
256
237
|
this._dropdownElement.style.opacity = '1';
|
|
257
238
|
// Handle transition end
|
|
258
239
|
KTDom.transitionEnd(this._dropdownElement, function () {
|
|
259
240
|
_this._isTransitioning = false;
|
|
260
241
|
_this._isOpen = true;
|
|
261
|
-
// Focus
|
|
262
|
-
if (_this._config.enableSearch) {
|
|
263
|
-
var searchInput = _this._dropdownElement.querySelector('input[type="search"]');
|
|
264
|
-
if (searchInput) {
|
|
265
|
-
searchInput.focus();
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
// Fire after show event
|
|
269
|
-
var afterShowEvent = new CustomEvent('kt.select.dropdown.shown', {
|
|
270
|
-
bubbles: true,
|
|
271
|
-
});
|
|
272
|
-
_this._element.dispatchEvent(afterShowEvent);
|
|
242
|
+
// Focus and events will be handled by KTSelect
|
|
273
243
|
});
|
|
274
244
|
};
|
|
275
|
-
/**
|
|
276
|
-
* Focus the first option in the dropdown
|
|
277
|
-
*/
|
|
278
|
-
KTSelectDropdown.prototype._focusFirstOption = function () {
|
|
279
|
-
var firstOption = this._focusManager.getVisibleOptions()[0];
|
|
280
|
-
if (firstOption) {
|
|
281
|
-
this._focusManager.applyFocus(firstOption);
|
|
282
|
-
this._focusManager.scrollIntoView(firstOption);
|
|
283
|
-
}
|
|
284
|
-
};
|
|
285
245
|
/**
|
|
286
246
|
* Close the dropdown
|
|
287
247
|
*/
|
|
@@ -294,34 +254,19 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
294
254
|
console.log('KTSelectDropdown.close - early return: dropdown not open or is transitioning');
|
|
295
255
|
return;
|
|
296
256
|
}
|
|
297
|
-
//
|
|
298
|
-
var beforeHideEvent = new CustomEvent('kt.select.dropdown.hide', {
|
|
299
|
-
bubbles: true,
|
|
300
|
-
cancelable: true,
|
|
301
|
-
});
|
|
302
|
-
this._element.dispatchEvent(beforeHideEvent);
|
|
303
|
-
if (beforeHideEvent.defaultPrevented) {
|
|
304
|
-
if (this._config.debug)
|
|
305
|
-
console.log('KTSelectDropdown.close - canceling due to defaultPrevented on beforeHideEvent');
|
|
306
|
-
return;
|
|
307
|
-
}
|
|
257
|
+
// Events and ARIA will be handled by KTSelect
|
|
308
258
|
if (this._config.debug)
|
|
309
259
|
console.log('KTSelectDropdown.close - starting transition');
|
|
310
|
-
// Begin closing transition
|
|
311
260
|
this._isTransitioning = true;
|
|
312
|
-
// Start transition
|
|
313
261
|
this._dropdownElement.style.opacity = '0';
|
|
314
|
-
// Use a combination of transition end and a fallback timer
|
|
315
262
|
var transitionComplete = false;
|
|
316
|
-
// Set a fixed-duration fallback in case the transition event doesn't fire
|
|
317
263
|
var fallbackTimer = setTimeout(function () {
|
|
318
264
|
if (!transitionComplete) {
|
|
319
265
|
if (_this._config.debug)
|
|
320
266
|
console.log('KTSelectDropdown.close - fallback timer triggered');
|
|
321
267
|
completeTransition();
|
|
322
268
|
}
|
|
323
|
-
}, 300);
|
|
324
|
-
// Setup the transition end function
|
|
269
|
+
}, 300);
|
|
325
270
|
var completeTransition = function () {
|
|
326
271
|
if (transitionComplete)
|
|
327
272
|
return;
|
|
@@ -329,30 +274,21 @@ var KTSelectDropdown = /** @class */ (function (_super) {
|
|
|
329
274
|
clearTimeout(fallbackTimer);
|
|
330
275
|
if (_this._config.debug)
|
|
331
276
|
console.log('KTSelectDropdown.close - transition ended');
|
|
332
|
-
// Remove active classes
|
|
333
277
|
_this._dropdownElement.classList.add('hidden');
|
|
334
278
|
_this._dropdownElement.classList.remove('open');
|
|
335
279
|
_this._toggleElement.classList.remove('active');
|
|
336
|
-
|
|
337
|
-
// Reset styles - replace display: none with adding hidden class
|
|
338
|
-
_this._dropdownElement.classList.add('hidden');
|
|
339
|
-
_this._dropdownElement.style.opacity = '';
|
|
340
|
-
_this._dropdownElement.style.zIndex = '';
|
|
341
|
-
// Destroy popper
|
|
280
|
+
// ARIA attributes will be handled by KTSelect
|
|
342
281
|
_this._destroyPopper();
|
|
343
|
-
// Update state
|
|
344
282
|
_this._isTransitioning = false;
|
|
345
283
|
_this._isOpen = false;
|
|
346
|
-
//
|
|
347
|
-
var afterHideEvent = new CustomEvent('kt.select.dropdown.hidden', {
|
|
348
|
-
bubbles: true,
|
|
349
|
-
});
|
|
350
|
-
_this._element.dispatchEvent(afterHideEvent);
|
|
284
|
+
// Events will be handled by KTSelect
|
|
351
285
|
if (_this._config.debug)
|
|
352
|
-
console.log('KTSelectDropdown.close -
|
|
286
|
+
console.log('KTSelectDropdown.close - visual part complete');
|
|
353
287
|
};
|
|
354
|
-
// Handle transition end via the utility but also have the fallback
|
|
355
288
|
KTDom.transitionEnd(this._dropdownElement, completeTransition);
|
|
289
|
+
if (KTDom.getCssProp(this._dropdownElement, 'transition-duration') === '0s') {
|
|
290
|
+
completeTransition();
|
|
291
|
+
}
|
|
356
292
|
};
|
|
357
293
|
/**
|
|
358
294
|
* Check if dropdown is open
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/select/dropdown.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;;;;;;;AAEH,OAAO,EAEN,YAAY,GAEZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;
|
|
1
|
+
{"version":3,"file":"dropdown.js","sourceRoot":"","sources":["../../../../src/components/select/dropdown.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;;;;;;;AAEH,OAAO,EAEN,YAAY,GAEZ,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,MAAM,mBAAmB,CAAC;AACtC,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,WAAW,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGrD;;;;;;GAMG;AACH;IAAsC,oCAAW;IAiBhD;;;;;;OAMG;IACH,0BACC,OAAoB,EACpB,aAA0B,EAC1B,eAA4B,EAC5B,MAA+B,EAC/B,gBAA0B;QAE1B,YAAA,MAAK,WAAE,SAAC;QA9BmB,WAAK,GAAW,iBAAiB,CAAC;QAQ9D,QAAQ;QACA,aAAO,GAAY,KAAK,CAAC;QACzB,sBAAgB,GAAY,KAAK,CAAC;QAClC,qBAAe,GAA0B,IAAI,CAAC;QAqBrD,KAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,KAAI,CAAC,cAAc,GAAG,aAAa,CAAC;QACpC,KAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,KAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QACtB,KAAI,CAAC,iBAAiB,GAAG,gBAAgB,CAAC,CAAC,kBAAkB;QAC7D,KAAI,CAAC,aAAa,GAAG,IAAI,YAAY,EAAE,CAAC;QACxC,KAAI,CAAC,aAAa,GAAG,IAAI,YAAY,CACpC,eAAe,EACf,yBAAyB,EACzB,MAAM,CACN,CAAC;QAEF,KAAI,CAAC,oBAAoB,EAAE,CAAC;;IAC7B,CAAC;IAED;;OAEG;IACK,+CAAoB,GAA5B;QACC,eAAe;QACf,IAAI,CAAC,aAAa,CAAC,WAAW,CAC7B,IAAI,CAAC,cAAc,EACnB,OAAO,EACP,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,CAClC,CAAC;QAEF,yBAAyB;QACzB,IAAI,CAAC,aAAa,CAAC,WAAW,CAC7B,QAAkC,EAClC,OAAO,EACP,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CACnC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,6CAAkB,GAA1B,UAA2B,KAAY;QACtC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QAExB,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;gBACrB,OAAO,CAAC,GAAG,CACV,yDAAyD,CACzD,CAAC;YACH,OAAO;QACR,CAAC;QAED,0BAA0B;QAC1B,IAAI,IAAI,CAAC,iBAAiB,CAAC,cAAc,EAAE,EAAE,CAAC;YAC7C,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;QACxC,CAAC;aAAM,CAAC;YACP,IAAI,CAAC,iBAAiB,CAAC,YAAY,EAAE,CAAC;QACvC,CAAC;IACF,CAAC;IAED;;OAEG;IACK,8CAAmB,GAA3B,UAA4B,KAAiB;QAC5C,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,IAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;QAE3C,IACC,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,MAAM,CAAC;YAC/B,CAAC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,MAAM,CAAC,EACtC,CAAC;YACF,uCAAuC;YACvC,IAAI,CAAC,iBAAiB,CAAC,aAAa,EAAE,CAAC;QACxC,CAAC;IACF,CAAC;IAED;;OAEG;IACK,4CAAiB,GAAzB;QACC,IAAI,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,CAAC,cAAc;YAAE,OAAO;QAE3D,+BAA+B;QAC/B,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,CAAC;YAChC,mCAAmC;YACnC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;QAChE,CAAC;aAAM,CAAC;YACP,iEAAiE;YACjE,IAAM,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;YACpD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,WAAW,OAAI,CAAC;QACxD,CAAC;IACF,CAAC;IAED;;OAEG;IACK,sCAAW,GAAnB;QACC,gDAAgD;QAChD,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,iBAAiB;QACjB,IAAM,WAAW,GAAG,MAAM,CAAC;QAE3B,4BAA4B;QAC5B,IAAM,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC,iBAAiB,IAAI,cAAc,CAAC;QACnE,IAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,IAAI,OAAO,CAAC;QAC1D,IAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,uBAAuB,KAAK,KAAK,CAAC;QACvE,IAAM,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,YAAY,KAAK,KAAK,CAAC;QAEjD,6BAA6B;QAC7B,IAAI,CAAC,eAAe,GAAG,YAAY,CAClC,IAAI,CAAC,cAAc,EACnB,IAAI,CAAC,gBAAgB,EACrB;YACC,SAAS,EAAE,SAAsB;YACjC,QAAQ,EAAE,QAAgC;YAC1C,SAAS,EAAE;gBACV;oBACC,IAAI,EAAE,QAAQ;oBACd,OAAO,EAAE;wBACR,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;qBACtC;iBACD;gBACD;oBACC,IAAI,EAAE,iBAAiB;oBACvB,OAAO,EAAE;wBACR,QAAQ,EAAE,UAAU;wBACpB,OAAO,EAAE,eAAe;qBACxB;iBACD;gBACD;oBACC,IAAI,EAAE,MAAM;oBACZ,OAAO,EAAE;wBACR,OAAO,EAAE,IAAI;wBACb,kBAAkB,EAAE,CAAC,WAAW,EAAE,YAAY,EAAE,SAAS,CAAC;qBAC1D;iBACD;gBACD;oBACC,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa;oBACpC,KAAK,EAAE,aAAa;oBACpB,QAAQ,EAAE,CAAC,eAAe,CAAC;oBAC3B,EAAE,EAAE,UAAC,EAAS;4BAAP,KAAK,WAAA;wBACX,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,GAAG,UAAG,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,KAAK,OAAI,CAAC;oBAChE,CAAC;oBACD,MAAM,EAAE,UAAC,EAAS;4BAAP,KAAK,WAAA;wBACf,iCAAiC;wBACjC,IAAM,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,SAAwB,CAAC;wBAC1D,IAAI,SAAS,IAAI,aAAa,IAAI,SAAS,EAAE,CAAC;4BAC7C,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,UAAG,SAAS,CAAC,WAAW,OAAI,CAAC;wBAClE,CAAC;oBACF,CAAC;iBACD;aACD;SACD,CACD,CAAC;IACH,CAAC;IAED;;OAEG;IACK,uCAAY,GAApB,UAAqB,MAAc;QAClC,OAAO,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,CAAC,EAA1B,CAA0B,CAAC,CAAC;IACrE,CAAC;IAED;;OAEG;IACK,yCAAc,GAAtB;QACC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC;QAC7B,CAAC;IACF,CAAC;IAED;;OAEG;IACI,yCAAc,GAArB;QACC,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;QAC/B,CAAC;IACF,CAAC;IAED;;OAEG;IACI,+BAAI,GAAX;QAAA,iBAmDC;QAlDA,IAAI,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;YAC3B,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;gBACrB,OAAO,CAAC,GAAG,CACV,wDAAwD,CACxD,CAAC;YACH,OAAO;QACR,CAAC;QACD,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAElD,2BAA2B;QAC3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,qBAAqB;QACrB,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACjD,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAE1C,qBAAqB;QACrB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,SAAS;QACT,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QAEpC,gBAAgB;QAChB,IAAI,IAAI,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;YACjC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM;gBACjC,IAAI,CAAC,OAAO,CAAC,cAAc,CAAC,QAAQ,EAAE,CAAC;QACzC,CAAC;aAAM,CAAC;YACP,IAAM,YAAY,GAAG,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC3D,IAAI,YAAY,EAAE,CAAC;gBAClB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,YAAY,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC;YACpE,CAAC;QACF,CAAC;QAED,oBAAoB;QACpB,IAAI,CAAC,WAAW,EAAE,CAAC;QAEnB,sCAAsC;QACtC,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAC5C,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC5C,8CAA8C;QAE9C,mBAAmB;QACnB,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAE1C,wBAAwB;QACxB,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE;YAC1C,KAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,KAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACpB,+CAA+C;QAChD,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACI,gCAAK,GAAZ;QAAA,iBA+DC;QA9DA,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;YACrB,OAAO,CAAC,GAAG,CACV,yCAAyC,EACzC,IAAI,CAAC,OAAO,EACZ,kBAAkB,EAClB,IAAI,CAAC,gBAAgB,CACrB,CAAC;QAEH,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC5C,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;gBACrB,OAAO,CAAC,GAAG,CACV,8EAA8E,CAC9E,CAAC;YACH,OAAO;QACR,CAAC;QAED,8CAA8C;QAE9C,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK;YACrB,OAAO,CAAC,GAAG,CAAC,8CAA8C,CAAC,CAAC;QAC7D,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAE1C,IAAI,kBAAkB,GAAG,KAAK,CAAC;QAC/B,IAAM,aAAa,GAAG,UAAU,CAAC;YAChC,IAAI,CAAC,kBAAkB,EAAE,CAAC;gBACzB,IAAI,KAAI,CAAC,OAAO,CAAC,KAAK;oBACrB,OAAO,CAAC,GAAG,CAAC,mDAAmD,CAAC,CAAC;gBAClE,kBAAkB,EAAE,CAAC;YACtB,CAAC;QACF,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,IAAM,kBAAkB,GAAG;YAC1B,IAAI,kBAAkB;gBAAE,OAAO;YAC/B,kBAAkB,GAAG,IAAI,CAAC;YAC1B,YAAY,CAAC,aAAa,CAAC,CAAC;YAE5B,IAAI,KAAI,CAAC,OAAO,CAAC,KAAK;gBACrB,OAAO,CAAC,GAAG,CAAC,2CAA2C,CAAC,CAAC;YAE1D,KAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;YAC9C,KAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;YAC/C,KAAI,CAAC,cAAc,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;YAC/C,8CAA8C;YAE9C,KAAI,CAAC,cAAc,EAAE,CAAC;YAEtB,KAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,KAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YAErB,qCAAqC;YAErC,IAAI,KAAI,CAAC,OAAO,CAAC,KAAK;gBACrB,OAAO,CAAC,GAAG,CAAC,+CAA+C,CAAC,CAAC;QAC/D,CAAC,CAAC;QAEF,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,gBAAgB,EAAE,kBAAkB,CAAC,CAAC;QAE/D,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,KAAK,IAAI,EAAE,CAAC;YAC7E,kBAAkB,EAAE,CAAC;QACtB,CAAC;IACF,CAAC;IAED;;OAEG;IACI,iCAAM,GAAb;QACC,OAAO,IAAI,CAAC,OAAO,CAAC;IACrB,CAAC;IAED;;OAEG;IACa,kCAAO,GAAvB;QACC,iBAAiB;QACjB,IAAI,CAAC,cAAc,EAAE,CAAC;QAEtB,yBAAyB;QACzB,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACrD,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC3D,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC,QAAkC,CAAC,CAAC;QAE1E,yBAAyB;QACzB,IACC,IAAI,CAAC,aAAa;YAClB,OAAO,IAAI,CAAC,aAAa,CAAC,OAAO,KAAK,UAAU,EAC/C,CAAC;YACF,IAAI,CAAC,aAAa,CAAC,OAAO,EAAE,CAAC;QAC9B,CAAC;QAED,iBAAiB;QACjB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;QAE9B,wBAAwB;QACxB,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,CAAC;IACF,uBAAC;AAAD,CAAC,AArXD,CAAsC,WAAW,GAqXhD"}
|
|
@@ -17,6 +17,17 @@ var __extends = (this && this.__extends) || (function () {
|
|
|
17
17
|
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
|
|
18
18
|
};
|
|
19
19
|
})();
|
|
20
|
+
var __assign = (this && this.__assign) || function () {
|
|
21
|
+
__assign = Object.assign || function(t) {
|
|
22
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
23
|
+
s = arguments[i];
|
|
24
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
25
|
+
t[p] = s[p];
|
|
26
|
+
}
|
|
27
|
+
return t;
|
|
28
|
+
};
|
|
29
|
+
return __assign.apply(this, arguments);
|
|
30
|
+
};
|
|
20
31
|
import KTComponent from '../component';
|
|
21
32
|
import { defaultTemplates } from './templates';
|
|
22
33
|
var KTSelectOption = /** @class */ (function (_super) {
|
|
@@ -27,39 +38,61 @@ var KTSelectOption = /** @class */ (function (_super) {
|
|
|
27
38
|
_this._dataOptionPrefix = 'kt-'; // Use 'kt-' prefix to support data-kt-select-option attributes
|
|
28
39
|
// Always initialize a new option instance
|
|
29
40
|
_this._init(element);
|
|
30
|
-
_this._buildConfig();
|
|
31
41
|
_this._globalConfig = config;
|
|
42
|
+
_this._buildConfig();
|
|
32
43
|
// Clean the config
|
|
33
44
|
_this._config = _this._config[''] || {};
|
|
34
45
|
// Add the option config to the global config
|
|
35
|
-
|
|
36
|
-
_this._globalConfig
|
|
46
|
+
// Ensure optionsConfig is initialized
|
|
47
|
+
if (_this._globalConfig) {
|
|
48
|
+
_this._globalConfig.optionsConfig = _this._globalConfig.optionsConfig || {};
|
|
49
|
+
_this._globalConfig.optionsConfig[element.value] = _this._config;
|
|
50
|
+
}
|
|
51
|
+
else {
|
|
52
|
+
// Handle case where _globalConfig might be undefined, though constructor expects it.
|
|
53
|
+
// This might indicate a need to ensure config is always passed or has a default.
|
|
54
|
+
console.warn('KTSelectOption: _globalConfig is undefined during constructor.');
|
|
55
|
+
}
|
|
37
56
|
// Don't store in KTData to avoid Singleton pattern issues
|
|
38
57
|
// Each option should be a unique instance
|
|
39
58
|
element.instance = _this;
|
|
40
59
|
return _this;
|
|
41
60
|
}
|
|
61
|
+
Object.defineProperty(KTSelectOption.prototype, "id", {
|
|
62
|
+
get: function () {
|
|
63
|
+
return this.getHTMLOptionElement().value;
|
|
64
|
+
},
|
|
65
|
+
enumerable: false,
|
|
66
|
+
configurable: true
|
|
67
|
+
});
|
|
68
|
+
Object.defineProperty(KTSelectOption.prototype, "title", {
|
|
69
|
+
get: function () {
|
|
70
|
+
return this.getHTMLOptionElement().textContent || '';
|
|
71
|
+
},
|
|
72
|
+
enumerable: false,
|
|
73
|
+
configurable: true
|
|
74
|
+
});
|
|
42
75
|
KTSelectOption.prototype.getHTMLOptionElement = function () {
|
|
43
76
|
return this._element;
|
|
44
77
|
};
|
|
78
|
+
/**
|
|
79
|
+
* Gathers all necessary data for rendering this option,
|
|
80
|
+
* including standard HTML attributes and custom data-kt-* attributes.
|
|
81
|
+
*/
|
|
82
|
+
KTSelectOption.prototype.getOptionDataForTemplate = function () {
|
|
83
|
+
var el = this.getHTMLOptionElement();
|
|
84
|
+
var text = el.textContent || '';
|
|
85
|
+
return __assign(__assign({}, this._config), {
|
|
86
|
+
// Standard HTMLOptionElement properties
|
|
87
|
+
value: el.value, text: text, selected: el.selected, disabled: el.disabled,
|
|
88
|
+
// Provide 'content' for convenience in templates, defaulting to text.
|
|
89
|
+
// User's optionTemplate can then use {{content}} or specific fields like {{text}}, {{icon}}, etc.
|
|
90
|
+
content: text });
|
|
91
|
+
};
|
|
45
92
|
KTSelectOption.prototype.render = function () {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
var originalTemplate = this._globalConfig.optionTemplate;
|
|
50
|
-
if (this._globalConfig.optionTemplate) {
|
|
51
|
-
// Replace all {{varname}} in option.innerHTML with values from _config
|
|
52
|
-
Object.entries(this._config || {}).forEach(function (_a) {
|
|
53
|
-
var key = _a[0], value = _a[1];
|
|
54
|
-
if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
|
|
55
|
-
_this._globalConfig.optionTemplate = _this._globalConfig.optionTemplate.replace(new RegExp("{{".concat(key, "}}"), 'g'), String(value));
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
}
|
|
59
|
-
var template = defaultTemplates.option(optionElement, this._globalConfig);
|
|
60
|
-
// Restore the original template
|
|
61
|
-
this._globalConfig.optionTemplate = originalTemplate;
|
|
62
|
-
return template;
|
|
93
|
+
// 'this' is the KTSelectOption instance.
|
|
94
|
+
// defaultTemplates.option will handle using this instance's data along with _globalConfig.
|
|
95
|
+
return defaultTemplates.option(this, this._globalConfig);
|
|
63
96
|
};
|
|
64
97
|
return KTSelectOption;
|
|
65
98
|
}(KTComponent));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../src/components/select/option.ts"],"names":[],"mappings":"AAAA;;;GAGG
|
|
1
|
+
{"version":3,"file":"option.js","sourceRoot":"","sources":["../../../../src/components/select/option.ts"],"names":[],"mappings":"AAAA;;;GAGG;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,OAAO,WAAW,MAAM,cAAc,CAAC;AAIvC,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;IAAoC,kCAAW;IAM9C,wBAAY,OAAoB,EAAE,MAAgC;QACjE,YAAA,MAAK,WAAE,SAAC;QANmB,WAAK,GAAW,eAAe,CAAC;QAChC,uBAAiB,GAAW,KAAK,CAAC,CAAC,+DAA+D;QAO7H,0CAA0C;QAC1C,KAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACpB,KAAI,CAAC,aAAa,GAAG,MAAM,CAAC;QAC5B,KAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,mBAAmB;QACnB,KAAI,CAAC,OAAO,GAAI,KAAI,CAAC,OAAe,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;QAE/C,6CAA6C;QAC7C,sCAAsC;QACtC,IAAI,KAAI,CAAC,aAAa,EAAE,CAAC;YACxB,KAAI,CAAC,aAAa,CAAC,aAAa,GAAG,KAAI,CAAC,aAAa,CAAC,aAAa,IAAI,EAAE,CAAC;YAC1E,KAAI,CAAC,aAAa,CAAC,aAAa,CAAE,OAA4B,CAAC,KAAK,CAAC,GAAG,KAAI,CAAC,OAAO,CAAC;QACtF,CAAC;aAAM,CAAC;YACP,qFAAqF;YACrF,iFAAiF;YACjF,OAAO,CAAC,IAAI,CAAC,gEAAgE,CAAC,CAAC;QAChF,CAAC;QAED,0DAA0D;QAC1D,0CAA0C;QACzC,OAAe,CAAC,QAAQ,GAAG,KAAI,CAAC;;IAClC,CAAC;IAED,sBAAW,8BAAE;aAAb;YACC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,KAAK,CAAC;QAC1C,CAAC;;;OAAA;IAED,sBAAW,iCAAK;aAAhB;YACC,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC;QACtD,CAAC;;;OAAA;IAEM,6CAAoB,GAA3B;QACC,OAAO,IAAI,CAAC,QAA6B,CAAC;IAC3C,CAAC;IAED;;;OAGG;IACI,iDAAwB,GAA/B;QACC,IAAM,EAAE,GAAG,IAAI,CAAC,oBAAoB,EAAE,CAAC;QACvC,IAAM,IAAI,GAAG,EAAE,CAAC,WAAW,IAAI,EAAE,CAAC;QAClC,6BAEI,IAAI,CAAC,OAAO;YACf,wCAAwC;YACxC,KAAK,EAAE,EAAE,CAAC,KAAK,EACf,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,EAAE,CAAC,QAAQ,EACrB,QAAQ,EAAE,EAAE,CAAC,QAAQ;YACrB,sEAAsE;YACtE,kGAAkG;YAClG,OAAO,EAAE,IAAI,IACZ;IACH,CAAC;IAEM,+BAAM,GAAb;QACC,yCAAyC;QACzC,2FAA2F;QAC3F,OAAO,gBAAgB,CAAC,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1D,CAAC;IACF,qBAAC;AAAD,CAAC,AAvED,CAAoC,WAAW,GAuE9C"}
|