@keenthemes/ktui 1.2.2 → 1.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/ktui.js +47 -19
  2. package/dist/ktui.min.js +1 -1
  3. package/dist/ktui.min.js.map +1 -1
  4. package/dist/styles.css +1 -197
  5. package/lib/cjs/components/datatable/datatable.js +1 -1
  6. package/lib/cjs/components/datatable/datatable.js.map +1 -1
  7. package/lib/cjs/components/modal/modal.d.ts.map +1 -1
  8. package/lib/cjs/components/modal/modal.js +19 -13
  9. package/lib/cjs/components/modal/modal.js.map +1 -1
  10. package/lib/cjs/components/theme-switch/theme-switch.d.ts +3 -0
  11. package/lib/cjs/components/theme-switch/theme-switch.d.ts.map +1 -1
  12. package/lib/cjs/components/theme-switch/theme-switch.js +17 -4
  13. package/lib/cjs/components/theme-switch/theme-switch.js.map +1 -1
  14. package/lib/cjs/components/toggle/toggle.d.ts +2 -0
  15. package/lib/cjs/components/toggle/toggle.d.ts.map +1 -1
  16. package/lib/cjs/components/toggle/toggle.js +11 -2
  17. package/lib/cjs/components/toggle/toggle.js.map +1 -1
  18. package/lib/esm/components/datatable/datatable.js +1 -1
  19. package/lib/esm/components/datatable/datatable.js.map +1 -1
  20. package/lib/esm/components/modal/modal.d.ts.map +1 -1
  21. package/lib/esm/components/modal/modal.js +19 -13
  22. package/lib/esm/components/modal/modal.js.map +1 -1
  23. package/lib/esm/components/theme-switch/theme-switch.d.ts +3 -0
  24. package/lib/esm/components/theme-switch/theme-switch.d.ts.map +1 -1
  25. package/lib/esm/components/theme-switch/theme-switch.js +17 -4
  26. package/lib/esm/components/theme-switch/theme-switch.js.map +1 -1
  27. package/lib/esm/components/toggle/toggle.d.ts +2 -0
  28. package/lib/esm/components/toggle/toggle.d.ts.map +1 -1
  29. package/lib/esm/components/toggle/toggle.js +11 -2
  30. package/lib/esm/components/toggle/toggle.js.map +1 -1
  31. package/package.json +1 -1
  32. package/src/components/modal/modal.ts +22 -14
  33. package/src/components/theme-switch/theme-switch.ts +22 -4
  34. package/src/components/toggle/toggle.ts +12 -2
package/dist/ktui.js CHANGED
@@ -8535,17 +8535,15 @@ var KTModal = /** @class */ (function (_super) {
8535
8535
  var _this = this;
8536
8536
  this._element.addEventListener('click', function (event) {
8537
8537
  var target = event.target;
8538
- var currentTarget = event.currentTarget;
8539
- // Only proceed if clicking directly on the backdrop (modal element itself)
8540
- // This prevents closing when clicking inside modal content or any child elements
8541
- // (including dropdowns rendered via dropdownContainer pointing to modal)
8542
- if (target !== currentTarget) {
8543
- // Stop propagation for clicks inside dropdowns to prevent dropdown from closing
8544
- // Check if click is inside a dropdown element (KT Select dropdown)
8545
- var dropdownElement = target.closest('[data-kt-select-dropdown]');
8546
- if (dropdownElement) {
8547
- event.stopPropagation();
8548
- }
8538
+ var modalContent = _this._element.querySelector('.kt-modal-content');
8539
+ // Stop propagation for clicks inside dropdowns rendered within modal content.
8540
+ var dropdownElement = target.closest('[data-kt-select-dropdown]');
8541
+ if (dropdownElement) {
8542
+ event.stopPropagation();
8543
+ return;
8544
+ }
8545
+ // Dismiss when clicking anywhere outside modal content.
8546
+ if (modalContent && modalContent.contains(target)) {
8549
8547
  return;
8550
8548
  }
8551
8549
  // Only hide if both backdropStatic is false AND persistent is false
@@ -8665,11 +8663,18 @@ var KTModal = /** @class */ (function (_super) {
8665
8663
  input.focus();
8666
8664
  };
8667
8665
  KTModal.prototype._createBackdrop = function () {
8666
+ var _this = this;
8668
8667
  if (!this._element)
8669
8668
  return;
8670
8669
  var zindex = parseInt(dom_1.default.getCssProp(this._element, 'z-index'));
8671
8670
  this._backdropElement = document.createElement('DIV');
8672
8671
  this._backdropElement.setAttribute('data-kt-modal-backdrop', 'true');
8672
+ this._backdropElement.addEventListener('click', function () {
8673
+ if (_this._getOption('backdropStatic') === false &&
8674
+ utils_1.default.stringToBoolean(_this._getOption('persistent')) === false) {
8675
+ _this._hide();
8676
+ }
8677
+ });
8673
8678
  this._backdropElement.style.zIndex = (zindex - 1).toString();
8674
8679
  document.body.append(this._backdropElement);
8675
8680
  dom_1.default.reflow(this._backdropElement);
@@ -8726,7 +8731,8 @@ var KTModal = /** @class */ (function (_super) {
8726
8731
  });
8727
8732
  };
8728
8733
  KTModal.handleToggle = function () {
8729
- event_handler_1.default.on(document.body, '[data-kt-modal-toggle]', 'click', function (event, target) {
8734
+ // wire:navigate / morph can replace document.body; <html> stays stable.
8735
+ event_handler_1.default.on(document.documentElement, '[data-kt-modal-toggle]', 'click', function (event, target) {
8730
8736
  event.stopPropagation();
8731
8737
  var selector = target.getAttribute('data-kt-modal-toggle');
8732
8738
  if (!selector)
@@ -8739,7 +8745,7 @@ var KTModal = /** @class */ (function (_super) {
8739
8745
  });
8740
8746
  };
8741
8747
  KTModal.handleDismiss = function () {
8742
- event_handler_1.default.on(document.body, '[data-kt-modal-dismiss]', 'click', function (event, target) {
8748
+ event_handler_1.default.on(document.documentElement, '[data-kt-modal-dismiss]', 'click', function (event, target) {
8743
8749
  event.stopPropagation();
8744
8750
  var modalElement = target.closest('[data-kt-modal-initialized]');
8745
8751
  if (modalElement) {
@@ -16968,12 +16974,14 @@ var KTThemeSwitch = /** @class */ (function (_super) {
16968
16974
  function KTThemeSwitch(element, config) {
16969
16975
  if (config === void 0) { config = null; }
16970
16976
  var _this = _super.call(this) || this;
16971
- _this._name = 'theme-swtich';
16977
+ _this._name = 'theme-switch';
16972
16978
  _this._defaultConfig = {
16973
16979
  mode: 'light',
16974
16980
  };
16975
16981
  _this._mode = null;
16976
16982
  _this._currentMode = null;
16983
+ _this._themeSwitchToggleEventId = '';
16984
+ _this._themeSwitchSetEventId = '';
16977
16985
  if (data_1.default.has(element, _this._name))
16978
16986
  return _this;
16979
16987
  _this._init(element);
@@ -16987,10 +16995,10 @@ var KTThemeSwitch = /** @class */ (function (_super) {
16987
16995
  var _this = this;
16988
16996
  if (!this._element)
16989
16997
  return;
16990
- event_handler_1.default.on(document.body, '[data-kt-theme-switch-toggle]', 'click', function () {
16998
+ this._themeSwitchToggleEventId = event_handler_1.default.on(document.body, '[data-kt-theme-switch-toggle]', 'click', function () {
16991
16999
  _this._toggle();
16992
17000
  });
16993
- event_handler_1.default.on(document.body, '[data-kt-theme-switch-set]', 'click', function (event, target) {
17001
+ this._themeSwitchSetEventId = event_handler_1.default.on(document.body, '[data-kt-theme-switch-set]', 'click', function (event, target) {
16994
17002
  event.preventDefault();
16995
17003
  var mode = target.getAttribute('data-kt-theme-switch-set');
16996
17004
  _this._setMode(mode);
@@ -17052,7 +17060,18 @@ var KTThemeSwitch = /** @class */ (function (_super) {
17052
17060
  return this._getMode();
17053
17061
  };
17054
17062
  KTThemeSwitch.prototype.setMode = function (mode) {
17055
- this.setMode(mode);
17063
+ this._setMode(mode);
17064
+ };
17065
+ KTThemeSwitch.prototype.dispose = function () {
17066
+ if (this._themeSwitchToggleEventId) {
17067
+ event_handler_1.default.off(document.body, 'click', this._themeSwitchToggleEventId);
17068
+ this._themeSwitchToggleEventId = '';
17069
+ }
17070
+ if (this._themeSwitchSetEventId) {
17071
+ event_handler_1.default.off(document.body, 'click', this._themeSwitchSetEventId);
17072
+ this._themeSwitchSetEventId = '';
17073
+ }
17074
+ _super.prototype.dispose.call(this);
17056
17075
  };
17057
17076
  KTThemeSwitch.getInstance = function () {
17058
17077
  var root = document.documentElement;
@@ -17898,6 +17917,7 @@ var KTToggle = /** @class */ (function (_super) {
17898
17917
  attribute: '',
17899
17918
  };
17900
17919
  _this._config = _this._defaultConfig;
17920
+ _this._clickHandler = null;
17901
17921
  if (data_1.default.has(element, _this._name))
17902
17922
  return _this;
17903
17923
  _this._init(element);
@@ -17913,9 +17933,17 @@ var KTToggle = /** @class */ (function (_super) {
17913
17933
  var _this = this;
17914
17934
  if (!this._element)
17915
17935
  return;
17916
- this._element.addEventListener('click', function () {
17936
+ this._clickHandler = function () {
17917
17937
  _this._toggle();
17918
- });
17938
+ };
17939
+ this._element.addEventListener('click', this._clickHandler);
17940
+ };
17941
+ KTToggle.prototype.dispose = function () {
17942
+ if (this._element && this._clickHandler) {
17943
+ this._element.removeEventListener('click', this._clickHandler);
17944
+ this._clickHandler = null;
17945
+ }
17946
+ _super.prototype.dispose.call(this);
17919
17947
  };
17920
17948
  KTToggle.prototype._getTargetElement = function () {
17921
17949
  return (dom_1.default.getElement(this._element.getAttribute('data-kt-toggle')) || dom_1.default.getElement(this._getOption('target')));