fix

assets/bsCore/bsCore.js

@@ -1191,6 +1191,7 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
                 this._disableOverFlow()
                 // give padding to element to balance the hidden scrollbar width
                 this._setElementAttributes(this._element, 'paddingRight', calculatedValue => calculatedValue + width)
+                this._element.style.setProperty('--scroll-bar-size', `${width}px`);
                 // trick: We adjust positive paddingRight and negative marginRight to sticky-top elements to keep showing fullwidth
                 this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + width)
                 this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - width)
@@ -1221,6 +1222,7 @@ kit.PluginManager.register('bsCore', function(module, exports, require, global){
                 this._resetElementAttributes(this._element, 'paddingRight')
                 this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
                 this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
+                this._element.style.setProperty('--scroll-bar-size', '0');
             }
 
             _saveInitialAttribute(element, styleProp) {

assets/core/core.js

@@ -2,6 +2,7 @@
  * @class kit
  * @property  {kit.bsCore}
  * @property  {kit.toolkit}
+ * @property  {kit.Modal}
  */
 window.kit = window.kit || {};
 (function(global){
@@ -321,7 +322,7 @@ window.kit = window.kit || {};
                 loadStyle(configModule.path + item);
             });
 
-            var depsPromise = this.__getDepsPromise(configModule.deps);
+            var depsPromise = this.__getDepsPromise(this.depsCorrection(configModule.deps));
             setSkipLoadPromise(depsPromise);
 
             if(depsPromise) {
@@ -447,6 +448,21 @@ window.kit = window.kit || {};
         return module.exports;
     };
 
+    __proto.depsCorrection = function(deps){
+        if(!Array.isArray(deps) ) {
+            deps = [deps];
+        }
+        var correct = [];
+        deps.forEach(function(pluginId, i, arr) {
+            var realPlugin = this.__getPlugin(pluginId);
+            if(realPlugin === undefined) {
+                return false;
+            }
+            correct.push(realPlugin.id);
+        }.bind(this));
+        return correct;
+    };
+
     __proto.exec = function (deps, callback, argArr = [], context = undefined) {
 
         if(typeof deps === 'function') {
@@ -458,9 +474,8 @@ window.kit = window.kit || {};
         if(context === undefined) {
             context = this;
         }
-        if(!Array.isArray(deps) ) {
+
-            deps = [deps];
+        deps = this.depsCorrection(deps);
-        }
 
         if(typeof argArr === 'undefined') {
             argArr = [];
@@ -559,6 +574,12 @@ window.kit = window.kit || {};
                 return this.plugins[_pluginId];
             }
         }
+
+        var _pluginId = pluginId[0].toUpperCase() + pluginId.slice(1);
+        if(_pluginId !== pluginId) {
+            return this.__getPlugin(_pluginId);
+        }
+
         return undefined;
     };
 

assets/core/core.register.js

@@ -66,7 +66,7 @@ __PluginManager__.registerPlugins({
         css: ['/toolkit.css'],
         deps: ['jquery', 'mask'],
     },
-    modal: {
+    Modal: {
         path: __pmConfig__.assetsPath + '/modal',
         module: '/modal.js',
         type: 'loader',

assets/modal/modal.css

@@ -24,7 +24,7 @@
 }
 @media (prefers-reduced-motion: reduce) {
     .modal.fade .modal-dialog {
-        transition: none;
+        /*transition: none;*/
     }
 }
 .modal.show .modal-dialog {
@@ -71,13 +71,14 @@
     z-index: 1040;
     width: 100vw;
     height: 100vh;
-    background-color: #000;
+    background-color: var(--modal-backdrop-color-content, #000);
+    opacity: var(--modal-backdrop-opacity, 0.5);
 }
 .modal-backdrop.fade {
     opacity: 0;
 }
 .modal-backdrop.show {
-    opacity: 0.5;
+    opacity: var(--modal-backdrop-opacity, 0.5);
 }
 
 .modal-header {

assets/modal/modal.js

@@ -73,7 +73,9 @@ kit.PluginManager.register('modal', function(module, exports, require){
    * Class Definition
    * ------------------------------------------------------------------------
    */
-
+  /**
+   * @class kit.Modal
+   */
   class Modal extends BaseComponent {
     constructor(element, config) {
       super(element)

assets/utils/utils.js

@@ -45,7 +45,15 @@ kit.PluginManager.register('utils', function(module, exports, require){
     })();
 
 
+    var str = {
+        ucFirst: function (str) {
+            if (!str) return str;
+            return str[0].toUpperCase() + str.slice(1);
+        }
+    };
+
     return module.exports = {
-        StackExecutionLimiter: StackExecutionLimiter
+        StackExecutionLimiter: StackExecutionLimiter,
+        str: str,
     };
 });

templates/modal.php

@@ -2,13 +2,13 @@
 
 
 ?>
-<div class="modal fade <?=$arParams['WRAP_CLASS']?>" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true">
+<div class="modal fade <?=$arParams['WRAP_CLASS']?>" id="<?=$arParams['ID']?>" tabindex="-1" aria-labelledby="<?=$arParams['ID']?>" aria-hidden="true" <?=\Bx\Kit\Node\Lib::getAttrByArray($arParams['ATTR'])?>>
     <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
         <div class="modal-content">
             <div class="modal-header">
                 <h5 class="modal-title"><?=$arParams['TITLE']?></h5>
                 <button type="button" class="btn-close kit-icon" data-bs-dismiss="modal" aria-label="Close">
-                        <svg class xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
+                    <svg class xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>
                 </button>
                 <?=$arParams['HEADER']?>
             </div>