Update

core/bitrix/js/main/helper/helper.js

@@ -125,16 +125,11 @@ BX.Helper =
 
 	show: function(additionalParam, sliderOptions)
 	{
-		if (this.isOpen())
-		{
-			return;
-		}
-
 		if (!BX.Type.isPlainObject(sliderOptions))
 		{
 			sliderOptions = {};
 		}
-		
+
 		//compote code
 		const frameOpenUrl = this.frameOpenUrl + ((this.frameOpenUrl.indexOf("?") < 0) ? "?" : "&") +
 			(BX.type.isNotEmptyString(additionalParam) ? additionalParam : "");

core/bitrix/js/main/kanban/column.js

@@ -29,6 +29,7 @@ BX.Kanban.Column = function(options)
 	this.total = null;
 	this.isTotalFrozen = false;
 	this.animate = options.animate || null;
+	this.autoPagination = false;
 
 	this.canEdit = null;
 	this.canSort = null;
@@ -126,13 +127,22 @@ BX.Kanban.Column.prototype =
 		this.setColor(options.color);
 		this.setData(options.data);
 
-		var boolOptions = ["canEdit", "canSort", "canRemove", "canAddItem", "droppable", "canSortItems",];
-		boolOptions.forEach(function(boolOption) {
+		const boolOptions = [
+			'canEdit',
+			'canSort',
+			'canRemove',
+			'canAddItem',
+			'droppable',
+			'canSortItems',
+			'autoPagination',
+		];
+
+		boolOptions.forEach((boolOption) => {
 			if (BX.type.isBoolean(options[boolOption]))
 			{
 				this[boolOption] = options[boolOption];
 			}
-		}, this);
+		});
 	},
 
 	setColor: function(color)
@@ -567,6 +577,11 @@ BX.Kanban.Column.prototype =
 
 	hasLoading: function()
 	{
+		if (this.autoPagination)
+		{
+			return true;
+		}
+
 		return this.total !== null && this.total > this.getItemsCount();
 	},
 
@@ -623,6 +638,11 @@ BX.Kanban.Column.prototype =
 		columnContainer.classList[isEmptyColumn ? "add" : "remove"]("main-kanban-column-empty");
 		columnContainer.classList[this.isDroppable() ? "add" : "remove"]("main-kanban-column-droppable");
 
+		if (this.autoPagination)
+		{
+			columnContainer.classList.add("--auto-pagination");
+		}
+
 		if(!this.getGrid().firstRenderComplete)
 		{
 			this.hasBeenEdt = true;
@@ -1172,7 +1192,7 @@ BX.Kanban.Column.prototype =
 		var firstItem = this.getFirstItem(false);
 		if (firstItem)
 		{
-			var existsDraftItem = firstItem.getId().indexOf('kanban-new-item-') === 0;
+			const existsDraftItem = firstItem.getId().toString().indexOf('kanban-new-item-') === 0;
 			if (existsDraftItem)
 			{
 				firstItem.applyDraftEditMode();
@@ -2023,6 +2043,7 @@ BX.Kanban.Pagination.prototype = {
 		jsDD.refreshDestArea();
 
 		var loader = this.getLoader();
+
 		if (!this.loadingInProgress && column.hasLoading() && loader.offsetTop < scrollTop + offsetHeight)
 		{
 			this.showLoader();

core/bitrix/js/main/kanban/css/kanban.css

@@ -334,6 +334,10 @@
 	font-weight: var(--ui-font-weight-regular, 400);
 }
 
+.main-kanban-column.--auto-pagination .main-kanban-column-total-item {
+	display: none;
+}
+
 .main-kanban-column-title-dark .main-kanban-column-total-item,
 .main-kanban-column-title-dark .main-kanban-column-title-text { color: #fff }
 

core/bitrix/js/main/md5/bundle.config.js

@@ -3,4 +3,5 @@ module.exports = {
 	output: './dist/md5.bundle.js',
 	namespace: 'BX',
 	adjustConfigPhp: false,
-};
+	browserslist: true,
+};

core/bitrix/js/main/md5/dist/md5.bundle.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 (function (exports) {
   'use strict';
 
@@ -37,23 +38,19 @@
   var md5 = function () {
 
     var ERROR = 'input is invalid type';
-    var WINDOW = (typeof window === "undefined" ? "undefined" : babelHelpers.typeof(window)) === 'object';
+    var WINDOW = typeof window === 'object';
     var root = WINDOW ? window : {};
-
     if (root.JS_MD5_NO_WINDOW) {
       WINDOW = false;
     }
-
-    var WEB_WORKER = !WINDOW && (typeof self === "undefined" ? "undefined" : babelHelpers.typeof(self)) === 'object';
-    var NODE_JS = !root.JS_MD5_NO_NODE_JS && (typeof process === "undefined" ? "undefined" : babelHelpers.typeof(process)) === 'object' && process.versions && process.versions.node;
-
+    var WEB_WORKER = !WINDOW && typeof self === 'object';
+    var NODE_JS = !root.JS_MD5_NO_NODE_JS && typeof process === 'object' && process.versions && process.versions.node;
     if (NODE_JS) {
       root = global;
     } else if (WEB_WORKER) {
       root = self;
     }
-
-    var COMMON_JS = !root.JS_MD5_NO_COMMON_JS && (typeof module === "undefined" ? "undefined" : babelHelpers.typeof(module)) === 'object' && module.exports;
+    var COMMON_JS = !root.JS_MD5_NO_COMMON_JS && typeof module === 'object' && module.exports;
     var AMD = typeof define === 'function' && define.amd;
     var ARRAY_BUFFER = !root.JS_MD5_NO_ARRAY_BUFFER && typeof ArrayBuffer !== 'undefined';
     var HEX_CHARS = '0123456789abcdef'.split('');
@@ -62,25 +59,23 @@
     var OUTPUT_TYPES = ['hex', 'array', 'digest', 'buffer', 'arrayBuffer', 'base64'];
     var BASE64_ENCODE_CHAR = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'.split('');
     var blocks = [],
-        buffer8;
-
+      buffer8;
     if (ARRAY_BUFFER) {
       var buffer = new ArrayBuffer(68);
       buffer8 = new Uint8Array(buffer);
       blocks = new Uint32Array(buffer);
     }
-
     if (root.JS_MD5_NO_NODE_JS || !Array.isArray) {
       Array.isArray = function (obj) {
         return Object.prototype.toString.call(obj) === '[object Array]';
       };
     }
-
     if (ARRAY_BUFFER && (root.JS_MD5_NO_ARRAY_BUFFER_IS_VIEW || !ArrayBuffer.isView)) {
       ArrayBuffer.isView = function (obj) {
-        return babelHelpers.typeof(obj) === 'object' && obj.buffer && obj.buffer.constructor === ArrayBuffer;
+        return typeof obj === 'object' && obj.buffer && obj.buffer.constructor === ArrayBuffer;
       };
     }
+
     /**
      * @method hex
      * @memberof md5
@@ -92,7 +87,6 @@
      * // equal to
      * md5('The quick brown fox jumps over the lazy dog');
      */
-
     /**
      * @method digest
      * @memberof md5
@@ -102,7 +96,6 @@
      * @example
      * md5.digest('The quick brown fox jumps over the lazy dog');
      */
-
     /**
      * @method array
      * @memberof md5
@@ -112,7 +105,6 @@
      * @example
      * md5.array('The quick brown fox jumps over the lazy dog');
      */
-
     /**
      * @method arrayBuffer
      * @memberof md5
@@ -122,7 +114,6 @@
      * @example
      * md5.arrayBuffer('The quick brown fox jumps over the lazy dog');
      */
-
     /**
      * @method buffer
      * @deprecated This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
@@ -133,7 +124,6 @@
      * @example
      * md5.buffer('The quick brown fox jumps over the lazy dog');
      */
-
     /**
      * @method base64
      * @memberof md5
@@ -143,13 +133,12 @@
      * @example
      * md5.base64('The quick brown fox jumps over the lazy dog');
      */
-
-
-    var createOutputMethod = function createOutputMethod(outputType) {
+    var createOutputMethod = function (outputType) {
       return function (message) {
         return new Md5(true).update(message)[outputType]();
       };
     };
+
     /**
      * @method create
      * @memberof md5
@@ -158,7 +147,6 @@
      * @example
      * var hash = md5.create();
      */
-
     /**
      * @method update
      * @memberof md5
@@ -171,36 +159,27 @@
      * var hash = md5.create();
      * hash.update('The quick brown fox jumps over the lazy dog');
      */
-
-
-    var createMethod = function createMethod() {
+    var createMethod = function () {
       var method = createOutputMethod('hex');
-
       if (NODE_JS) {
         method = nodeWrap(method);
       }
-
       method.create = function () {
         return new Md5();
       };
-
       method.update = function (message) {
         return method.create().update(message);
       };
-
       for (var i = 0; i < OUTPUT_TYPES.length; ++i) {
         var type = OUTPUT_TYPES[i];
         method[type] = createOutputMethod(type);
       }
-
       return method;
     };
-
-    var nodeWrap = function nodeWrap(method) {
+    var nodeWrap = function (method) {
       var crypto = eval("require('crypto')");
       var Buffer = eval("require('buffer').Buffer");
-
-      var nodeMethod = function nodeMethod(message) {
+      var nodeMethod = function (message) {
         if (typeof message === 'string') {
           return crypto.createHash('md5').update(message, 'utf8').digest('hex');
         } else {
@@ -210,24 +189,21 @@
             message = new Uint8Array(message);
           }
         }
-
         if (Array.isArray(message) || ArrayBuffer.isView(message) || message.constructor === Buffer) {
           return crypto.createHash('md5').update(new Buffer(message)).digest('hex');
         } else {
           return method(message);
         }
       };
-
       return nodeMethod;
     };
+
     /**
      * Md5 class
      * @class Md5
      * @description This is internal class.
      * @see {@link md5.create}
      */
-
-
     function Md5(sharedMemory) {
       if (sharedMemory) {
         blocks[0] = blocks[16] = blocks[1] = blocks[2] = blocks[3] = blocks[4] = blocks[5] = blocks[6] = blocks[7] = blocks[8] = blocks[9] = blocks[10] = blocks[11] = blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
@@ -242,11 +218,11 @@
           this.blocks = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
         }
       }
-
       this.h0 = this.h1 = this.h2 = this.h3 = this.start = this.bytes = this.hBytes = 0;
       this.finalized = this.hashed = false;
       this.first = true;
     }
+
     /**
      * @method update
      * @memberof Md5
@@ -256,16 +232,12 @@
      * @returns {Md5} Md5 object.
      * @see {@link md5.update}
      */
-
-
     Md5.prototype.update = function (message) {
       if (this.finalized) {
         return;
       }
-
       var notString,
-          type = babelHelpers.typeof(message);
-
+        type = typeof message;
       if (type !== 'string') {
         if (type === 'object') {
           if (message === null) {
@@ -280,24 +252,20 @@
         } else {
           throw ERROR;
         }
-
         notString = true;
       }
-
       var code,
-          index = 0,
-          i,
-          length = message.length,
-          blocks = this.blocks;
+        index = 0,
+        i,
+        length = message.length,
+        blocks = this.blocks;
       var buffer8 = this.buffer8;
-
       while (index < length) {
         if (this.hashed) {
           this.hashed = false;
           blocks[0] = blocks[16];
           blocks[16] = blocks[1] = blocks[2] = blocks[3] = blocks[4] = blocks[5] = blocks[6] = blocks[7] = blocks[8] = blocks[9] = blocks[10] = blocks[11] = blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
         }
-
         if (notString) {
           if (ARRAY_BUFFER) {
             for (i = this.start; index < length && i < 64; ++index) {
@@ -312,7 +280,6 @@
           if (ARRAY_BUFFER) {
             for (i = this.start; index < length && i < 64; ++index) {
               code = message.charCodeAt(index);
-
               if (code < 0x80) {
                 buffer8[i++] = code;
               } else if (code < 0x800) {
@@ -333,7 +300,6 @@
           } else {
             for (i = this.start; index < length && i < 64; ++index) {
               code = message.charCodeAt(index);
-
               if (code < 0x80) {
                 blocks[i >> 2] |= code << SHIFT[i++ & 3];
               } else if (code < 0x800) {
@@ -353,10 +319,8 @@
             }
           }
         }
-
         this.lastByteIndex = i;
         this.bytes += i - this.start;
-
         if (i >= 64) {
           this.start = i - 64;
           this.hash();
@@ -365,48 +329,39 @@
           this.start = i;
         }
       }
-
       if (this.bytes > 4294967295) {
         this.hBytes += this.bytes / 4294967296 << 0;
         this.bytes = this.bytes % 4294967296;
       }
-
       return this;
     };
-
     Md5.prototype.finalize = function () {
       if (this.finalized) {
         return;
       }
-
       this.finalized = true;
       var blocks = this.blocks,
-          i = this.lastByteIndex;
+        i = this.lastByteIndex;
       blocks[i >> 2] |= EXTRA[i & 3];
-
       if (i >= 56) {
         if (!this.hashed) {
           this.hash();
         }
-
         blocks[0] = blocks[16];
         blocks[16] = blocks[1] = blocks[2] = blocks[3] = blocks[4] = blocks[5] = blocks[6] = blocks[7] = blocks[8] = blocks[9] = blocks[10] = blocks[11] = blocks[12] = blocks[13] = blocks[14] = blocks[15] = 0;
       }
-
       blocks[14] = this.bytes << 3;
       blocks[15] = this.hBytes << 3 | this.bytes >>> 29;
       this.hash();
     };
-
     Md5.prototype.hash = function () {
       var a,
-          b,
-          c,
-          d,
-          bc,
-          da,
-          blocks = this.blocks;
-
+        b,
+        c,
+        d,
+        bc,
+        da,
+        blocks = this.blocks;
       if (this.first) {
         a = blocks[0] - 680876937;
         a = (a << 7 | a >>> 25) - 271733879 << 0;
@@ -430,7 +385,6 @@
         b += (a ^ c & (d ^ a)) + blocks[3] - 1044525330;
         b = (b << 22 | b >>> 10) + c << 0;
       }
-
       a += (d ^ b & (c ^ d)) + blocks[4] - 176418897;
       a = (a << 7 | a >>> 25) + b << 0;
       d += (c ^ a & (b ^ c)) + blocks[5] + 1200080426;
@@ -559,7 +513,6 @@
       c = (c << 15 | c >>> 17) + d << 0;
       b += (d ^ (c | ~a)) + blocks[9] - 343485551;
       b = (b << 21 | b >>> 11) + c << 0;
-
       if (this.first) {
         this.h0 = a + 1732584193 << 0;
         this.h1 = b - 271733879 << 0;
@@ -573,6 +526,7 @@
         this.h3 = this.h3 + d << 0;
       }
     };
+
     /**
      * @method hex
      * @memberof Md5
@@ -583,16 +537,15 @@
      * @example
      * hash.hex();
      */
-
-
     Md5.prototype.hex = function () {
       this.finalize();
       var h0 = this.h0,
-          h1 = this.h1,
-          h2 = this.h2,
-          h3 = this.h3;
+        h1 = this.h1,
+        h2 = this.h2,
+        h3 = this.h3;
       return HEX_CHARS[h0 >> 4 & 0x0F] + HEX_CHARS[h0 & 0x0F] + HEX_CHARS[h0 >> 12 & 0x0F] + HEX_CHARS[h0 >> 8 & 0x0F] + HEX_CHARS[h0 >> 20 & 0x0F] + HEX_CHARS[h0 >> 16 & 0x0F] + HEX_CHARS[h0 >> 28 & 0x0F] + HEX_CHARS[h0 >> 24 & 0x0F] + HEX_CHARS[h1 >> 4 & 0x0F] + HEX_CHARS[h1 & 0x0F] + HEX_CHARS[h1 >> 12 & 0x0F] + HEX_CHARS[h1 >> 8 & 0x0F] + HEX_CHARS[h1 >> 20 & 0x0F] + HEX_CHARS[h1 >> 16 & 0x0F] + HEX_CHARS[h1 >> 28 & 0x0F] + HEX_CHARS[h1 >> 24 & 0x0F] + HEX_CHARS[h2 >> 4 & 0x0F] + HEX_CHARS[h2 & 0x0F] + HEX_CHARS[h2 >> 12 & 0x0F] + HEX_CHARS[h2 >> 8 & 0x0F] + HEX_CHARS[h2 >> 20 & 0x0F] + HEX_CHARS[h2 >> 16 & 0x0F] + HEX_CHARS[h2 >> 28 & 0x0F] + HEX_CHARS[h2 >> 24 & 0x0F] + HEX_CHARS[h3 >> 4 & 0x0F] + HEX_CHARS[h3 & 0x0F] + HEX_CHARS[h3 >> 12 & 0x0F] + HEX_CHARS[h3 >> 8 & 0x0F] + HEX_CHARS[h3 >> 20 & 0x0F] + HEX_CHARS[h3 >> 16 & 0x0F] + HEX_CHARS[h3 >> 28 & 0x0F] + HEX_CHARS[h3 >> 24 & 0x0F];
     };
+
     /**
      * @method toString
      * @memberof Md5
@@ -603,9 +556,8 @@
      * @example
      * hash.toString();
      */
-
-
     Md5.prototype.toString = Md5.prototype.hex;
+
     /**
      * @method digest
      * @memberof Md5
@@ -616,15 +568,15 @@
      * @example
      * hash.digest();
      */
-
     Md5.prototype.digest = function () {
       this.finalize();
       var h0 = this.h0,
-          h1 = this.h1,
-          h2 = this.h2,
-          h3 = this.h3;
+        h1 = this.h1,
+        h2 = this.h2,
+        h3 = this.h3;
       return [h0 & 0xFF, h0 >> 8 & 0xFF, h0 >> 16 & 0xFF, h0 >> 24 & 0xFF, h1 & 0xFF, h1 >> 8 & 0xFF, h1 >> 16 & 0xFF, h1 >> 24 & 0xFF, h2 & 0xFF, h2 >> 8 & 0xFF, h2 >> 16 & 0xFF, h2 >> 24 & 0xFF, h3 & 0xFF, h3 >> 8 & 0xFF, h3 >> 16 & 0xFF, h3 >> 24 & 0xFF];
     };
+
     /**
      * @method array
      * @memberof Md5
@@ -635,9 +587,8 @@
      * @example
      * hash.array();
      */
-
-
     Md5.prototype.array = Md5.prototype.digest;
+
     /**
      * @method arrayBuffer
      * @memberof Md5
@@ -648,7 +599,6 @@
      * @example
      * hash.arrayBuffer();
      */
-
     Md5.prototype.arrayBuffer = function () {
       this.finalize();
       var buffer = new ArrayBuffer(16);
@@ -659,6 +609,7 @@
       blocks[3] = this.h3;
       return buffer;
     };
+
     /**
      * @method buffer
      * @deprecated This maybe confuse with Buffer in node.js. Please use arrayBuffer instead.
@@ -670,9 +621,8 @@
      * @example
      * hash.buffer();
      */
-
-
     Md5.prototype.buffer = Md5.prototype.arrayBuffer;
+
     /**
      * @method base64
      * @memberof Md5
@@ -683,26 +633,22 @@
      * @example
      * hash.base64();
      */
-
     Md5.prototype.base64 = function () {
       var v1,
-          v2,
-          v3,
-          base64Str = '',
-          bytes = this.array();
-
+        v2,
+        v3,
+        base64Str = '',
+        bytes = this.array();
       for (var i = 0; i < 15;) {
         v1 = bytes[i++];
         v2 = bytes[i++];
         v3 = bytes[i++];
         base64Str += BASE64_ENCODE_CHAR[v1 >>> 2] + BASE64_ENCODE_CHAR[(v1 << 4 | v2 >>> 4) & 63] + BASE64_ENCODE_CHAR[(v2 << 2 | v3 >>> 6) & 63] + BASE64_ENCODE_CHAR[v3 & 63];
       }
-
       v1 = bytes[i];
       base64Str += BASE64_ENCODE_CHAR[v1 >>> 2] + BASE64_ENCODE_CHAR[v1 << 4 & 63] + '==';
       return base64Str;
     };
-
     return createMethod();
   }();
 

core/bitrix/js/main/popup/dist/main.popup.bundle.js

@@ -259,6 +259,25 @@ this.BX = this.BX || {};
 	    _this = babelHelpers.possibleConstructorReturn(this, babelHelpers.getPrototypeOf(Popup).call(this));
 	    _classPrivateMethodInitSpec(babelHelpers.assertThisInitialized(_this), _enableTargetScroll);
 	    _classPrivateMethodInitSpec(babelHelpers.assertThisInitialized(_this), _disableTargetScroll);
+	    babelHelpers.defineProperty(babelHelpers.assertThisInitialized(_this), "handleAutoHide", function (event) {
+	      if (_this.isDestroyed()) {
+	        return;
+	      }
+	      if (_this.autoHideHandler !== null) {
+	        if (_this.autoHideHandler(event)) {
+	          _this._tryCloseByEvent(event);
+	        }
+	      } else if (event.target !== _this.getPopupContainer() && !_this.getPopupContainer().contains(event.target)) {
+	        _this._tryCloseByEvent(event);
+	      }
+	    });
+	    babelHelpers.defineProperty(babelHelpers.assertThisInitialized(_this), "handleDocumentKeyUp", function (event) {
+	      if (event.keyCode === 27) {
+	        checkEscPressed(_this.getZindex(), function () {
+	          _this.close();
+	        });
+	      }
+	    });
 	    _this.setEventNamespace('BX.Main.Popup');
 	    var _arguments = Array.prototype.slice.call(arguments),
 	      popupId = _arguments[0],
@@ -303,7 +322,6 @@ this.BX = this.BX || {};
 	    _this.autoHide = params.autoHide === true;
 	    _this.disableScroll = params.disableScroll === true || params.isScrollBlock === true;
 	    _this.autoHideHandler = main_core.Type.isFunction(params.autoHideHandler) ? params.autoHideHandler : null;
-	    _this.handleAutoHide = _this.handleAutoHide.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.handleOverlayClick = _this.handleOverlayClick.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.isAutoHideBinded = false;
 	    _this.closeByEsc = params.closeByEsc === true;
@@ -324,7 +342,7 @@ this.BX = this.BX || {};
 	    _this.contentBackground = null;
 	    _this.borderRadius = null;
 	    _this.contentBorderRadius = null;
-	    _this.targetContainer = main_core.Type.isElementNode(params.targetContainer) ? params.targetContainer : document.body;
+	    _this.setTargetContainer(params.targetContainer);
 	    _this.dragOptions = {
 	      cursor: '',
 	      callback: function callback() {},
@@ -338,7 +356,6 @@ this.BX = this.BX || {};
 	    _this.animationCloseEventType = null;
 	    _this.handleDocumentMouseMove = _this.handleDocumentMouseMove.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.handleDocumentMouseUp = _this.handleDocumentMouseUp.bind(babelHelpers.assertThisInitialized(_this));
-	    _this.handleDocumentKeyUp = _this.handleDocumentKeyUp.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.handleResizeWindow = _this.handleResizeWindow.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.handleResize = _this.handleResize.bind(babelHelpers.assertThisInitialized(_this));
 	    _this.handleMove = _this.handleMove.bind(babelHelpers.assertThisInitialized(_this));
@@ -380,7 +397,7 @@ this.BX = this.BX || {};
 	     * @private
 	     */
 	    _this.popupContainer = main_core.Tag.render(_templateObject4 || (_templateObject4 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t<div\n\t\t\t\tclass=\"", "\"\n\t\t\t\tid=\"", "\"\n\t\t\t\tstyle=\"display: none; position: absolute; left: 0; top: 0;\"\n\t\t\t>", "</div>\n\t\t"])), popupClassName, popupId, [_this.titleBar, _this.contentContainer, _this.closeIcon]);
-	    _this.targetContainer.appendChild(_this.popupContainer);
+	    _this.getTargetContainer().append(_this.popupContainer);
 	    _this.zIndexComponent = main_core_zIndexManager.ZIndexManager.register(_this.popupContainer, params.zIndexOptions);
 	    _this.buttonsContainer = null;
 	    if (params.contentColor && main_core.Type.isStringFilled(params.contentColor)) {
@@ -985,6 +1002,23 @@ this.BX = this.BX || {};
 	        this.designSystemContext = context;
 	      }
 	    }
+	  }, {
+	    key: "setTargetContainer",
+	    value: function setTargetContainer(targetContainer) {
+	      var newTargetContainer = main_core.Type.isElementNode(targetContainer) ? targetContainer : document.body;
+	      if (newTargetContainer === this.targetContainer) {
+	        return;
+	      }
+	      this.targetContainer = newTargetContainer;
+	      if (this.getPopupContainer()) {
+	        main_core_zIndexManager.ZIndexManager.unregister(this.getPopupContainer());
+	        this.getTargetContainer().append(this.getPopupContainer());
+	        main_core_zIndexManager.ZIndexManager.register(this.getPopupContainer());
+	      }
+	      if (this.overlay) {
+	        main_core.Dom.append(this.overlay.element, this.getTargetContainer());
+	      }
+	    }
 	  }, {
 	    key: "getTargetContainer",
 	    value: function getTargetContainer() {
@@ -1159,7 +1193,7 @@ this.BX = this.BX || {};
 	    key: "bindClosingByEsc",
 	    value: function bindClosingByEsc() {
 	      if (this.closeByEsc && !this.isCloseByEscBinded) {
-	        main_core.Event.bind(document, 'keyup', this.handleDocumentKeyUp);
+	        main_core.Event.bind(this.targetContainer.ownerDocument, 'keyup', this.handleDocumentKeyUp, true);
 	        this.isCloseByEscBinded = true;
 	      }
 	    }
@@ -1170,7 +1204,7 @@ this.BX = this.BX || {};
 	    key: "unbindClosingByEsc",
 	    value: function unbindClosingByEsc() {
 	      if (this.isCloseByEscBinded) {
-	        main_core.Event.unbind(document, 'keyup', this.handleDocumentKeyUp);
+	        main_core.Event.unbind(this.targetContainer.ownerDocument, 'keyup', this.handleDocumentKeyUp, true);
 	        this.isCloseByEscBinded = false;
 	      }
 	    }
@@ -1201,9 +1235,9 @@ this.BX = this.BX || {};
 	          main_core.Event.bind(this.overlay.element, 'click', this.handleOverlayClick);
 	        } else {
 	          if (this.isCompatibleMode()) {
-	            main_core.Event.bind(document, 'click', this.handleAutoHide);
+	            main_core.Event.bind(this.targetContainer.ownerDocument, 'click', this.handleAutoHide);
 	          } else {
-	            document.addEventListener('click', this.handleAutoHide, true);
+	            this.targetContainer.ownerDocument.addEventListener('click', this.handleAutoHide, true);
 	          }
 	        }
 	      }
@@ -1223,9 +1257,9 @@ this.BX = this.BX || {};
 	          main_core.Event.unbind(this.overlay.element, 'click', this.handleOverlayClick);
 	        } else {
 	          if (this.isCompatibleMode()) {
-	            main_core.Event.unbind(document, 'click', this.handleAutoHide);
+	            main_core.Event.unbind(this.targetContainer.ownerDocument, 'click', this.handleAutoHide);
 	          } else {
-	            document.removeEventListener('click', this.handleAutoHide, true);
+	            this.targetContainer.ownerDocument.removeEventListener('click', this.handleAutoHide, true);
 	          }
 	        }
 	      }
@@ -1234,24 +1268,10 @@ this.BX = this.BX || {};
 	     * @private
 	     */
 	  }, {
-	    key: "handleAutoHide",
-	    value: function handleAutoHide(event) {
-	      if (this.isDestroyed()) {
-	        return;
-	      }
-	      if (this.autoHideHandler !== null) {
-	        if (this.autoHideHandler(event)) {
-	          this._tryCloseByEvent(event);
-	        }
-	      } else if (event.target !== this.getPopupContainer() && !this.getPopupContainer().contains(event.target)) {
-	        this._tryCloseByEvent(event);
-	      }
-	    }
+	    key: "_tryCloseByEvent",
 	    /**
 	     * @private
 	     */
-	  }, {
-	    key: "_tryCloseByEvent",
 	    value: function _tryCloseByEvent(event) {
 	      var _this2 = this;
 	      if (this.isCompatibleMode()) {
@@ -1289,7 +1309,7 @@ this.BX = this.BX || {};
 	          element: main_core.Tag.render(_templateObject9 || (_templateObject9 = babelHelpers.taggedTemplateLiteral(["\n\t\t\t\t\t<div class=\"popup-window-overlay\" id=\"popup-window-overlay-", "\"></div>\n\t\t\t\t"])), this.getId())
 	        };
 	        this.resizeOverlay();
-	        main_core.Dom.append(this.overlay.element, this.targetContainer);
+	        main_core.Dom.append(this.overlay.element, this.getTargetContainer());
 	        this.getZIndexComponent().setOverlay(this.overlay.element);
 	      }
 	      if (main_core.Type.isNumber(params === null || params === void 0 ? void 0 : params.opacity) && params.opacity >= 0 && params.opacity <= 100) {
@@ -1553,7 +1573,8 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "isShown",
 	    value: function isShown() {
-	      return !this.isDestroyed() && this.getPopupContainer().style.display === 'block';
+	      var _this$getPopupContain;
+	      return !this.isDestroyed() && ((_this$getPopupContain = this.getPopupContainer()) === null || _this$getPopupContain === void 0 ? void 0 : _this$getPopupContain.style.display) === 'block';
 	    }
 	  }, {
 	    key: "destroy",
@@ -1753,20 +1774,10 @@ this.BX = this.BX || {};
 	     * @private
 	     */
 	  }, {
-	    key: "handleDocumentKeyUp",
-	    value: function handleDocumentKeyUp(event) {
-	      var _this7 = this;
-	      if (event.keyCode === 27) {
-	        checkEscPressed(this.getZindex(), function () {
-	          _this7.close();
-	        });
-	      }
-	    }
+	    key: "handleResizeWindow",
 	    /**
 	     * @private
 	     */
-	  }, {
-	    key: "handleResizeWindow",
 	    value: function handleResizeWindow() {
 	      if (this.isShown()) {
 	        this.adjustPosition();

core/bitrix/js/main/popup/src/popup/popup.js

@@ -166,7 +166,6 @@ export default class Popup extends EventEmitter
 		this.autoHide = params.autoHide === true;
 		this.disableScroll = params.disableScroll === true || params.isScrollBlock === true;
 		this.autoHideHandler = Type.isFunction(params.autoHideHandler) ? params.autoHideHandler : null;
-		this.handleAutoHide = this.handleAutoHide.bind(this);
 		this.handleOverlayClick = this.handleOverlayClick.bind(this);
 		this.isAutoHideBinded = false;
 		this.closeByEsc = params.closeByEsc === true;
@@ -192,7 +191,7 @@ export default class Popup extends EventEmitter
 		this.borderRadius = null;
 		this.contentBorderRadius = null;
 
-		this.targetContainer = Type.isElementNode(params.targetContainer) ? params.targetContainer : document.body;
+		this.setTargetContainer(params.targetContainer);
 
 		this.dragOptions = {
 			cursor: '',
@@ -211,7 +210,6 @@ export default class Popup extends EventEmitter
 
 		this.handleDocumentMouseMove = this.handleDocumentMouseMove.bind(this);
 		this.handleDocumentMouseUp = this.handleDocumentMouseUp.bind(this);
-		this.handleDocumentKeyUp = this.handleDocumentKeyUp.bind(this);
 		this.handleResizeWindow = this.handleResizeWindow.bind(this);
 		this.handleResize = this.handleResize.bind(this);
 		this.handleMove = this.handleMove.bind(this);
@@ -284,7 +282,7 @@ export default class Popup extends EventEmitter
 			>${[this.titleBar, this.contentContainer, this.closeIcon]}</div>
 		`;
 
-		this.targetContainer.appendChild(this.popupContainer);
+		this.getTargetContainer().append(this.popupContainer);
 
 		this.zIndexComponent = ZIndexManager.register(this.popupContainer, params.zIndexOptions);
 
@@ -1050,6 +1048,28 @@ export default class Popup extends EventEmitter
 		}
 	}
 
+	setTargetContainer(targetContainer: HTMLElement): void
+	{
+		const newTargetContainer = Type.isElementNode(targetContainer) ? targetContainer : document.body;
+		if (newTargetContainer === this.targetContainer)
+		{
+			return;
+		}
+
+		this.targetContainer = newTargetContainer;
+		if (this.getPopupContainer())
+		{
+			ZIndexManager.unregister(this.getPopupContainer());
+			this.getTargetContainer().append(this.getPopupContainer());
+			ZIndexManager.register(this.getPopupContainer());
+		}
+
+		if (this.overlay)
+		{
+			Dom.append(this.overlay.element, this.getTargetContainer());
+		}
+	}
+
 	getTargetContainer(): HTMLElement
 	{
 		return this.targetContainer;
@@ -1265,7 +1285,7 @@ export default class Popup extends EventEmitter
 	{
 		if (this.closeByEsc && !this.isCloseByEscBinded)
 		{
-			Event.bind(document, 'keyup', this.handleDocumentKeyUp);
+			Event.bind(this.targetContainer.ownerDocument, 'keyup', this.handleDocumentKeyUp, true);
 			this.isCloseByEscBinded = true;
 		}
 	}
@@ -1277,7 +1297,7 @@ export default class Popup extends EventEmitter
 	{
 		if (this.isCloseByEscBinded)
 		{
-			Event.unbind(document, 'keyup', this.handleDocumentKeyUp);
+			Event.unbind(this.targetContainer.ownerDocument, 'keyup', this.handleDocumentKeyUp, true);
 			this.isCloseByEscBinded = false;
 		}
 	}
@@ -1319,11 +1339,11 @@ export default class Popup extends EventEmitter
 			{
 				if (this.isCompatibleMode())
 				{
-					Event.bind(document, 'click', this.handleAutoHide);
+					Event.bind(this.targetContainer.ownerDocument, 'click', this.handleAutoHide);
 				}
 				else
 				{
-					document.addEventListener('click', this.handleAutoHide, true);
+					this.targetContainer.ownerDocument.addEventListener('click', this.handleAutoHide, true);
 				}
 			}
 		}
@@ -1351,11 +1371,11 @@ export default class Popup extends EventEmitter
 			{
 				if (this.isCompatibleMode())
 				{
-					Event.unbind(document, 'click', this.handleAutoHide);
+					Event.unbind(this.targetContainer.ownerDocument, 'click', this.handleAutoHide);
 				}
 				else
 				{
-					document.removeEventListener('click', this.handleAutoHide, true);
+					this.targetContainer.ownerDocument.removeEventListener('click', this.handleAutoHide, true);
 				}
 			}
 		}
@@ -1364,8 +1384,7 @@ export default class Popup extends EventEmitter
 	/**
 	 * @private
 	 */
-	handleAutoHide(event): void
-	{
+	handleAutoHide = (event): void => {
 		if (this.isDestroyed())
 		{
 			return;
@@ -1382,7 +1401,7 @@ export default class Popup extends EventEmitter
 		{
 			this._tryCloseByEvent(event);
 		}
-	}
+	};
 
 	/**
 	 * @private
@@ -1433,7 +1452,7 @@ export default class Popup extends EventEmitter
 
 			this.resizeOverlay();
 
-			Dom.append(this.overlay.element, this.targetContainer);
+			Dom.append(this.overlay.element, this.getTargetContainer());
 			this.getZIndexComponent().setOverlay(this.overlay.element);
 		}
 
@@ -1814,7 +1833,7 @@ export default class Popup extends EventEmitter
 
 	isShown(): boolean
 	{
-		return !this.isDestroyed() && this.getPopupContainer().style.display === 'block';
+		return !this.isDestroyed() && this.getPopupContainer()?.style.display === 'block';
 	}
 
 	destroy(): void
@@ -2095,15 +2114,14 @@ export default class Popup extends EventEmitter
 	/**
 	 * @private
 	 */
-	handleDocumentKeyUp(event): void
-	{
+	handleDocumentKeyUp = (event): void => {
 		if (event.keyCode === 27)
 		{
 			checkEscPressed(this.getZindex(), () => {
 				this.close();
 			});
 		}
-	}
+	};
 
 	/**
 	 * @private

core/bitrix/js/main/sidepanel/config.php

@@ -13,8 +13,10 @@ return [
 		'clipboard',
 		'ui.fonts.opensans',
 		'popup',
+		'ui.design-tokens.air',
 		'ui.icon-set.actions',
 		'ui.icon-set.main',
+		'ui.icon-set.outline',
 	],
 	'skip_core' => false,
 ];

core/bitrix/js/main/sidepanel/dist/side-panel.bundle.css

@@ -81,39 +81,107 @@
 	z-index: 1;
 	transform: translateX(-100%);
 	transition: all 300ms ease;
+	pointer-events: none;
 }
 
 .side-panel-extra-labels {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
-	margin-top: 10px;
+
+	transition-property: opacity, display, transform;
+	transition-duration: 150ms;
+	transition-timing-function: ease-in-out;
+	transition-behavior: allow-discrete;
+}
+
+.side-panel-extra-labels.--hidden {
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(100%);
 }
 
 .side-panel-label {
 	display: inline-flex;
-	min-width: 37px;
-	height: 38px;
-	padding-right: 5px;
+	align-items: center;
+	min-width: 36px;
+	height: 28px;
 	margin-bottom: 10px;
-	background: rgba(47, 198, 246, 0.95);
-	border-top-left-radius: 19px;
-	border-bottom-left-radius: 19px;
+	position: relative;
+
+	background: var(--sidepanel-label-background, var(--ui-color));
 	white-space: nowrap;
-	overflow: hidden;
+	/*overflow: hidden;*/
 	transition: top 0.3s;
-	box-shadow: inset -6px 0 8px -10px rgba(0, 0, 0, 0.95);
+	box-shadow: var(--sidepanel-label-box-shadow, inset -6px 0 8px -10px rgba(0, 0, 0, 0.95));
 	z-index: 1;
 	cursor: pointer;
+	pointer-events: auto;
+	opacity: 1;
+
+	transition-property: opacity, display, transform;
+	transition-duration: 150ms;
+	transition-timing-function: ease-in-out;
+	transition-behavior: allow-discrete;
+
+	box-sizing: border-box;
+	border-top-left-radius: 18px;
+	border-bottom-left-radius: 18px;
+
+	border: var(--sidepanel-label-border);
+	border-right: none;
+}
+
+.side-panel-label.--ui-hoverable {
+	--ui-color: var(--ui-color-base-6);
+}
+
+.side-panel-label.--close-label.--ui-hoverable {
+	--ui-color: #0075FF;
+}
+
+.side-panel-label:before {
+	position: absolute;
+	content: '';
+	inset: -5px 0 -5px -5px;
+}
+
+.side-panel-label:hover {
+	background: var(--sidepanel-label-background-hover, var(--ui-color-hover));
+	border: var(--sidepanel-label-border-hover);
+	border-right: none;
+}
+
+.side-panel-label.--close-label {
+	min-width: 43px;
+	height: 36px;
+
+	background: var(--sidepanel-close-label-background, var(--sidepanel-label-background, var(--ui-color)));
+	border: var(--sidepanel-close-label-border, var(--sidepanel-label-border));
+	border-right: none;
+}
+
+.side-panel-label:hover.--close-label {
+	background: var(--sidepanel-close-label-background-hover, var(--sidepanel-label-background-hover, var(--ui-color-hover)));
+	border: var(--sidepanel-close-label-border-hover, var(--sidepanel-label-border-hover));
+	border-right: none;
+}
+
+.side-panel-label.--hidden {
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(100%);
+}
+
+.side-panel-label:not(.--visible) {
+	display: none;
 }
 
 .side-panel-label-icon-box {
 	display: inline-flex;
 	align-items: center;
-	width: 34px;
-	height: 38px;
-	vertical-align: top;
-	border-radius: 19px;
+	min-width: 20px;
+	height: 20px;
 	transition: all .2s;
 }
 
@@ -121,43 +189,27 @@
 	display: flex;
 	align-items: center;
 	position: relative;
-	width: 22px;
-	height: 22px;
-	margin-left: 9px;
-	border-radius: 50%;
-	transition: all 300ms ease;
+	width: 20px;
+	height: 20px;
+	margin-left: 7px;
+	transition: all 150ms ease;
 	background-repeat: no-repeat;
 	background-position: center;
 	box-sizing: content-box;
+	--ui-icon-set__icon-color: var(--sidepanel-label-icon-color, var(--ui-color-base-2));
 }
 
-.side-panel-label-icon-close:before {
-	display: block;
-	content: '';
-	width: 12px;
-	height: 12px;
-	margin-left: 5px;
-	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M11.381 1.746L7.138 5.988l4.248 4.249-1.151 1.152L5.986 7.14l-4.242 4.244-1.147-1.146L4.84 5.994.592 1.747 1.744.595l4.248 4.247L10.235.6z'/%3E%3C/svg%3E");
-	opacity: 0.85;
+.side-panel-label:hover .side-panel-label-icon {
+	--ui-icon-set__icon-color: var(--sidepanel-label-icon-color-hover, var(--ui-color-base-2));
 }
 
-.side-panel-label-icon-minimize {
-	opacity: 0.5;
-	/*--ui-icon-set__icon-color: #878f98;*/
+.side-panel-label.--close-label .side-panel-label-icon {
+	margin-left: 13px;
+	--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color, #ffffff);
 }
 
-.side-panel-label:hover .side-panel-label-icon-minimize {
-	opacity: 1;
-}
-
-.side-panel-label-icon-new-window {
-	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.991.065v1.67H2.17a.5.5 0 00-.492.41l-.008.09v8.651a.5.5 0 00.41.492l.09.008h8.65a.5.5 0 00.493-.41l.008-.09-.001-2.846 1.67.001v4.015a1 1 0 01-1 1H1a1 1 0 01-1-1V1.066a1 1 0 011-1h3.991zm7 0a1 1 0 011 1l-.001 3.987h-1.67V3.035l-4.39 4.39-1.28-1.28 4.409-4.41H7.998V.065h3.992z' fill='%23878F98' fill-rule='evenodd'/%3E%3C/svg%3E");
-	opacity: 0.6;
-}
-
-.side-panel-label-icon-copy-link {
-	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.467 5.728c.182.183.34.38.473.59L9.674 7.584a1.91 1.91 0 00-3.015-.741l-.11.1L2.694 10.8a1.91 1.91 0 002.592 2.804l.11-.102 1.309-1.308c.703.25 1.42.257 2.149.019l-2.508 2.505A3.442 3.442 0 111.478 9.85l4.12-4.12a3.442 3.442 0 014.869 0zm4.426-4.425a3.442 3.442 0 010 4.868l-4.12 4.12a3.442 3.442 0 01-5.341-.59l1.265-1.265a1.91 1.91 0 003.015.741l.11-.101 3.856-3.856a1.91 1.91 0 00-2.592-2.803l-.11.102-1.31 1.308a3.232 3.232 0 00-2.148-.019l2.507-2.505a3.442 3.442 0 014.868 0z' fill='%23878F98' fill-rule='evenodd'/%3E%3C/svg%3E");
-	opacity: 0.6;
+.side-panel-label.--close-label:hover .side-panel-label-icon {
+	--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color-hover, #ffffff);
 }
 
 .side-panel-label-icon--hide .side-panel-label-icon-box {
@@ -169,32 +221,14 @@
 	opacity: 0.4;
 }
 
-.side-panel-label:hover .side-panel-label-icon:before {
-	opacity: 1;
-}
-
-.side-panel-label:hover .side-panel-label-icon-close:after {
-	content: '';
-	display: block;
-	width: 24px;
-	height: 24px;
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='%23FFF' fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.771C6.35 1.771 1.771 6.351 1.771 12c0 5.65 4.58 10.229 10.229 10.229 5.65 0 10.229-4.58 10.229-10.229 0-5.65-4.58-10.229-10.229-10.229z'/%3E%3C/svg%3E");
-	opacity: 0.4;
-}
-
 .side-panel-label-text {
 	display: inline-block;
 	flex-grow: 1;
 	flex-shrink: 1;
 	flex-basis: 0;
-	height: 100%;
 	margin-left: 2px;
 	margin-right: 8px;
 	line-height: 38px;
-	vertical-align: top;
 	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
 	font-weight: var(--ui-font-weight-bold, 700);
 	font-size: 11px;
@@ -380,41 +414,6 @@
 	}
 }
 
-.side-panel-print {
-	display: none;
-	position: absolute;
-	left: -64px;
-	bottom: 0;
-	width: 64px;
-	height: 64px;
-	cursor: pointer;
-}
-
-.side-panel-print-visible {
-	display: block;
-}
-
-.side-panel-print:after {
-	display: block;
-	content: "";
-	position: absolute;
-	bottom: 22px;
-	right: 24px;
-	width: 16px;
-	height: 17px;
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTIuODk1IDMuMjI1aDEwLjExN2MuMTcgMCAuMzA4LS4xNC4zMDgtLjMxN1YuMzg1YS4zMTIuMzEyIDAgMDAtLjMwOC0uMzE3SDIuODk1YS4zMTQuMzE0IDAgMDAtLjMwOC4zMTd2Mi41MjZjMCAuMTc0LjEzOS4zMTQuMzA4LjMxNHptMTIuMTc3IDEuNTc5SDEuMTVhLjc3MS43NzEgMCAwMC0uNzczLjc2NnY1LjM2N2MwIC40MjIuMzQ3Ljc2Ny43NzMuNzY3aC43NzR2My4wNjZjMCAuNDIzLjM0Ny43NjcuNzczLjc2N2gxMC44MjhhLjc3MS43NzEgMCAwMC43NzQtLjc2N3YtMy4wNjZoLjc3M2EuNzcxLjc3MSAwIDAwLjc3NC0uNzY3VjUuNTdhLjc3MS43NzEgMCAwMC0uNzc0LS43NjZ6bS0yLjMyIDkuMkgzLjQ3di0zLjA2N2g5LjI4djMuMDY3em0uNzczLTYuMTM0YS43NzEuNzcxIDAgMDEtLjc3My0uNzY2YzAtLjQyMy4zNDctLjc2Ny43NzMtLjc2Ny40MjcgMCAuNzc0LjM0NC43NzQuNzY3YS43NzEuNzcxIDAgMDEtLjc3NC43NjZ6IiBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNiIvPjwvc3ZnPg==);
-	opacity: 0.2;
-	transition: opacity .3s;
-}
-
-.side-panel-print-visible:after {
-	opacity: 0.6;
-}
-
-.side-panel-print:hover:after {
-	opacity: 1;
-}
-
 .side-panel-toolbar {
 	display: none;
 	position: fixed;

core/bitrix/js/main/sidepanel/dist/side-panel.bundle.js

@@ -66,16 +66,22 @@ this.BX = this.BX || {};
 	    babelHelpers.defineProperty(this, "slider", null);
 	    babelHelpers.defineProperty(this, "color", null);
 	    babelHelpers.defineProperty(this, "bgColor", null);
+	    babelHelpers.defineProperty(this, "className", '');
 	    babelHelpers.defineProperty(this, "iconClass", '');
 	    babelHelpers.defineProperty(this, "iconTitle", '');
 	    babelHelpers.defineProperty(this, "onclick", null);
 	    babelHelpers.defineProperty(this, "text", null);
+	    babelHelpers.defineProperty(this, "hidden", false);
+	    babelHelpers.defineProperty(this, "visible", true);
 	    babelHelpers.defineProperty(this, "cache", new main_core.Cache.MemoryCache());
 	    this.slider = slider;
 	    const options = main_core.Type.isPlainObject(labelOptions) ? labelOptions : {};
-	    this.setBgColor(options.bgColor);
+	    this.hidden = main_core.Type.isBoolean(options.hidden) ? options.hidden : this.hidden;
+	    this.visible = main_core.Type.isBoolean(options.visible) ? options.visible : this.visible;
 	    this.setColor(options.color);
+	    this.setBgColor(options.bgColor);
 	    this.setText(options.text);
+	    this.setClassName(options.className);
 	    this.setIconClass(options.iconClass);
 	    this.setIconTitle(options.iconTitle);
 	    this.setOnclick(options.onclick);
@@ -84,9 +90,19 @@ this.BX = this.BX || {};
 	    key: "getContainer",
 	    value: function getContainer() {
 	      return this.cache.remember('container', () => {
+	        const classes = ['side-panel-label'];
+	        if (this.getClassName()) {
+	          classes.push(this.getClassName());
+	        }
+	        if (this.isHidden()) {
+	          classes.push('--hidden');
+	        }
+	        if (this.isVisible()) {
+	          classes.push('--visible');
+	        }
 	        return main_core.Dom.create('div', {
 	          props: {
-	            className: 'side-panel-label'
+	            className: classes.join(' ')
 	          },
 	          children: [this.getIconBox(), this.getTextContainer()],
 	          events: {
@@ -180,9 +196,10 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "setColor",
 	    value: function setColor(color) {
-	      if (main_core.Type.isStringFilled(color)) {
+	      if (main_core.Type.isStringFilled(color) || color === null) {
 	        this.color = color;
-	        main_core.Dom.style(this.getTextContainer(), 'color', color);
+	        main_core.Dom.style(this.getTextContainer(), 'color', this.color);
+	        main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', this.color);
 	      }
 	    }
 	  }, {
@@ -207,10 +224,14 @@ this.BX = this.BX || {};
 	          bgColor = `#${hex}${alfaHex}`;
 	        }
 	        this.bgColor = bgColor;
-	        main_core.Dom.style(this.getContainer(), 'background-color', bgColor);
+	        main_core.Dom.style(this.getContainer(), '--ui-color', bgColor);
+	        if (this.getColor() === null) {
+	          main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', '#fff');
+	        }
 	      } else if (bgColor === null) {
 	        this.bgColor = null;
-	        main_core.Dom.style(this.getContainer(), 'background-color', null);
+	        main_core.Dom.style(this.getContainer(), '--ui-color', null);
+	        main_core.Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', null);
 	      }
 	    }
 	  }, {
@@ -234,6 +255,23 @@ this.BX = this.BX || {};
 	    value: function getText() {
 	      return this.text;
 	    }
+	  }, {
+	    key: "setClassName",
+	    value: function setClassName(className) {
+	      if (main_core.Type.isStringFilled(className)) {
+	        main_core.Dom.removeClass(this.getContainer(), this.className);
+	        this.className = className;
+	        main_core.Dom.addClass(this.getContainer(), this.className);
+	      } else if (className === null) {
+	        main_core.Dom.removeClass(this.getContainer(), this.className);
+	        this.className = className;
+	      }
+	    }
+	  }, {
+	    key: "getClassName",
+	    value: function getClassName() {
+	      return this.className;
+	    }
 	  }, {
 	    key: "setIconClass",
 	    value: function setIconClass(iconClass) {
@@ -264,6 +302,33 @@ this.BX = this.BX || {};
 	    value: function getIconTitle() {
 	      return this.iconTitle;
 	    }
+	  }, {
+	    key: "isHidden",
+	    value: function isHidden() {
+	      return this.hidden;
+	    }
+	  }, {
+	    key: "hide",
+	    value: function hide() {
+	      this.hidden = true;
+	      main_core.Dom.addClass(this.getContainer(), '--hidden');
+	    }
+	  }, {
+	    key: "show",
+	    value: function show() {
+	      this.hidden = false;
+	      main_core.Dom.removeClass(this.getContainer(), '--hidden');
+	    }
+	  }, {
+	    key: "isVisible",
+	    value: function isVisible() {
+	      return this.visible;
+	    }
+	  }, {
+	    key: "setVisible",
+	    value: function setVisible(isVisible = true) {
+	      main_core.Dom.toggleClass(this.getContainer(), '--visible', isVisible);
+	    }
 	  }, {
 	    key: "setOnclick",
 	    value: function setOnclick(fn) {
@@ -423,6 +488,7 @@ this.BX = this.BX || {};
 	var _designSystemContext = /*#__PURE__*/new WeakMap();
 	var _zIndexComponent = /*#__PURE__*/new WeakMap();
 	var _autoOffset = /*#__PURE__*/new WeakMap();
+	var _subscribeEvents = /*#__PURE__*/new WeakSet();
 	var _getAnimationState = /*#__PURE__*/new WeakSet();
 	var _calculateOuterBoundary = /*#__PURE__*/new WeakSet();
 	let Slider = /*#__PURE__*/function () {
@@ -430,6 +496,7 @@ this.BX = this.BX || {};
 	    babelHelpers.classCallCheck(this, Slider);
 	    _classPrivateMethodInitSpec$1(this, _calculateOuterBoundary);
 	    _classPrivateMethodInitSpec$1(this, _getAnimationState);
+	    _classPrivateMethodInitSpec$1(this, _subscribeEvents);
 	    _classPrivateFieldInitSpec$1(this, _refs, {
 	      writable: true,
 	      value: new main_core_cache.MemoryCache()
@@ -483,7 +550,7 @@ this.BX = this.BX || {};
 	    this.cacheable = options.cacheable !== false;
 	    this.autoFocus = options.autoFocus !== false;
 	    this.printable = options.printable === true;
-	    this.allowChangeHistory = options.allowChangeHistory !== false;
+	    this.allowChangeHistory = main_core.Type.isBoolean(options.allowChangeHistory) ? options.allowChangeHistory : null;
 	    this.allowChangeTitle = main_core.Type.isBoolean(options.allowChangeTitle) ? options.allowChangeTitle : null;
 	    this.allowCrossOrigin = options.allowCrossOrigin === true;
 	    this.data = new Dictionary(main_core.Type.isPlainObject(options.data) ? options.data : {});
@@ -535,15 +602,13 @@ this.BX = this.BX || {};
 	    this.animationName = 'sliding';
 	    this.animationOptions = {};
 	    this.minimizeOptions = null;
-	    const minimizeOptions = options.minimizeOptions;
-	    if (main_core.Type.isPlainObject(minimizeOptions) && main_core.Type.isStringFilled(minimizeOptions.entityType) && (main_core.Type.isStringFilled(minimizeOptions.entityId) || main_core.Type.isNumber(minimizeOptions.entityId)) && main_core.Type.isStringFilled(minimizeOptions.url)) {
-	      this.minimizeOptions = minimizeOptions;
-	    }
+	    this.setMinimizeOptions(options.minimizeOptions);
 	    this.setToolbarOnOpen(options.hideToolbarOnOpen);
 	    this.setDesignSystemContext(options.designSystemContext);
 	    this.setAutoOffset(options.autoOffset);
 	    this.label = new Label(this, {
-	      iconClass: 'side-panel-label-icon-close',
+	      className: '--close-label --ui-hoverable',
+	      iconClass: 'side-panel-label-icon-close ui-icon-set --cross-l',
 	      iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_CLOSE'),
 	      onclick(label, slider) {
 	        slider.close();
@@ -553,26 +618,25 @@ this.BX = this.BX || {};
 	    this.label.setText(labelOptions.text);
 	    this.label.setColor(labelOptions.color);
 	    this.label.setBgColor(labelOptions.bgColor, labelOptions.opacity);
-	    this.minimizeLabel = null;
+	    this.minimizeLabel = new Label(this, {
+	      className: '--ui-hoverable',
+	      iconClass: 'side-panel-label-icon-minimize ui-icon-set --o-minimize',
+	      iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
+	      onclick: (label, slider) => {
+	        if (this.isLoaded()) {
+	          this.minimize();
+	        }
+	      },
+	      visible: this.areMinimizeOptionsValid(this.minimizeOptions)
+	    });
 	    this.newWindowLabel = null;
 	    this.copyLinkLabel = null;
-	    if (!this.isSelfContained() && this.minimizeOptions !== null) {
-	      this.minimizeLabel = new Label(this, {
-	        iconClass: 'side-panel-label-icon-minimize ui-icon-set --arrow-line',
-	        iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
-	        bgColor: ['#d9dcdf', 100],
-	        onclick: (label, slider) => {
-	          if (this.isLoaded()) {
-	            this.minimize();
-	          }
-	        }
-	      });
-	    }
-	    if (options.newWindowLabel === true && (!this.isSelfContained() || main_core.Type.isStringFilled(options.newWindowUrl))) {
+	    this.printLabel = null;
+	    if (options.newWindowLabel === true && (this.canChangeHistory() || main_core.Type.isStringFilled(options.newWindowUrl))) {
 	      this.newWindowLabel = new Label(this, {
-	        iconClass: 'side-panel-label-icon-new-window',
+	        className: '--ui-hoverable',
+	        iconClass: 'side-panel-label-icon-new-window ui-icon-set --go-to-l',
 	        iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_NEW_WINDOW'),
-	        bgColor: ['#d9dcdf', 100],
 	        onclick(label, slider) {
 	          const newWindowUrl = main_core.Type.isStringFilled(options.newWindowUrl) ? options.newWindowUrl : slider.getUrl();
 	          Object.assign(document.createElement('a'), {
@@ -582,11 +646,11 @@ this.BX = this.BX || {};
 	        }
 	      });
 	    }
-	    if (options.copyLinkLabel === true && (!this.isSelfContained() || main_core.Type.isStringFilled(options.newWindowUrl))) {
+	    if (options.copyLinkLabel === true && (this.canChangeHistory() || main_core.Type.isStringFilled(options.newWindowUrl))) {
 	      this.copyLinkLabel = new Label(this, {
-	        iconClass: 'side-panel-label-icon-copy-link',
-	        iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK'),
-	        bgColor: ['#d9dcdf', 100]
+	        className: '--ui-hoverable',
+	        iconClass: 'side-panel-label-icon-copy-link ui-icon-set --o-link',
+	        iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK')
 	      });
 	      BX.clipboard.bindCopyClick(this.copyLinkLabel.getIconBox(), {
 	        text: () => {
@@ -596,6 +660,13 @@ this.BX = this.BX || {};
 	        }
 	      });
 	    }
+	    this.printLabel = new Label(this, {
+	      hidden: !this.isPrintable(),
+	      className: '--side-panel-label-print --ui-hoverable',
+	      iconClass: 'side-panel-label-icon-print ui-icon-set --o-printer',
+	      iconTitle: main_core.Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
+	      onclick: this.handlePrintBtnClick.bind(this)
+	    });
 
 	    // Compatibility
 	    if (this.url.includes('crm.activity.planner/slider.php') && options.events && main_core.Type.isFunction(options.events.onOpen) && options.events.compatibleEvents !== false) {
@@ -605,15 +676,7 @@ this.BX = this.BX || {};
 	        onOpen(event.getSlider());
 	      };
 	    }
-	    if (main_core.Type.isPlainObject(options.events)) {
-	      for (const [eventName, fn] of Object.entries(options.events)) {
-	        if (main_core.Type.isFunction(fn)) {
-	          main_core_events.EventEmitter.subscribe(this, Slider.getEventFullName(eventName), fn, {
-	            compatMode: true
-	          });
-	        }
-	      }
-	    }
+	    [options.events].flat().forEach(events => _classPrivateMethodGet$1(this, _subscribeEvents, _subscribeEvents2).call(this, events));
 	  }
 	  babelHelpers.createClass(Slider, [{
 	    key: "open",
@@ -725,6 +788,19 @@ this.BX = this.BX || {};
 	      this.animationName = type === 'scale' ? type : 'sliding';
 	      this.animationOptions = main_core.Type.isPlainObject(options) ? options : {};
 	    }
+	  }, {
+	    key: "setMinimizeOptions",
+	    value: function setMinimizeOptions(minimizeOptions) {
+	      var _this$minimizeLabel;
+	      const showMinimizeLabel = this.areMinimizeOptionsValid(minimizeOptions);
+	      this.minimizeOptions = minimizeOptions;
+	      (_this$minimizeLabel = this.minimizeLabel) === null || _this$minimizeLabel === void 0 ? void 0 : _this$minimizeLabel.setVisible(showMinimizeLabel);
+	    }
+	  }, {
+	    key: "areMinimizeOptionsValid",
+	    value: function areMinimizeOptionsValid(minimizeOptions) {
+	      return main_core.Type.isPlainObject(minimizeOptions) && main_core.Type.isStringFilled(minimizeOptions.entityType) && (main_core.Type.isStringFilled(minimizeOptions.entityId) || main_core.Type.isNumber(minimizeOptions.entityId)) && main_core.Type.isStringFilled(minimizeOptions.url);
+	    }
 	  }, {
 	    key: "getMinimizeOptions",
 	    value: function getMinimizeOptions() {
@@ -934,7 +1010,13 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "canChangeHistory",
 	    value: function canChangeHistory() {
-	      return this.allowChangeHistory && !this.allowCrossOrigin && !this.isSelfContained() && !/^\/bitrix\/(components|tools)\//i.test(this.getUrl());
+	      if (this.allowCrossOrigin || /^\/bitrix\/(components|tools)\//i.test(this.getUrl())) {
+	        return false;
+	      }
+	      if (this.allowChangeHistory === null) {
+	        return !this.isSelfContained();
+	      }
+	      return this.allowChangeHistory;
 	    }
 	  }, {
 	    key: "canChangeTitle",
@@ -1001,12 +1083,12 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "showCloseBtn",
 	    value: function showCloseBtn() {
-	      this.getLabel().showIcon();
+	      this.getLabel().show();
 	    }
 	  }, {
 	    key: "hideCloseBtn",
 	    value: function hideCloseBtn() {
-	      this.getLabel().hideIcon();
+	      this.getLabel().hide();
 	    }
 	  }, {
 	    key: "showOrLightenCloseBtn",
@@ -1029,22 +1111,26 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "showPrintBtn",
 	    value: function showPrintBtn() {
-	      main_core.Dom.addClass(this.getPrintBtn(), 'side-panel-print-visible');
+	      if (this.printLabel !== null) {
+	        this.printLabel.show();
+	      }
 	    }
 	  }, {
 	    key: "hidePrintBtn",
 	    value: function hidePrintBtn() {
-	      main_core.Dom.removeClass(this.getPrintBtn(), 'side-panel-print-visible');
+	      if (this.printLabel !== null) {
+	        this.printLabel.hide();
+	      }
 	    }
 	  }, {
 	    key: "showExtraLabels",
 	    value: function showExtraLabels() {
-	      main_core.Dom.style(this.getExtraLabelsContainer(), 'display', null);
+	      main_core.Dom.removeClass(this.getExtraLabelsContainer(), '--hidden');
 	    }
 	  }, {
 	    key: "hideExtraLabels",
 	    value: function hideExtraLabels() {
-	      main_core.Dom.style(this.getExtraLabelsContainer(), 'display', 'none');
+	      main_core.Dom.addClass(this.getExtraLabelsContainer(), '--hidden');
 	    }
 	  }, {
 	    key: "setContentClass",
@@ -1438,7 +1524,7 @@ this.BX = this.BX || {};
 			<div class="side-panel side-panel-container">
 				${0}
 			</div>
-		`), this.hideControls ? content : [content, this.getLabelsContainer(), this.getPrintBtn()]);
+		`), this.hideControls ? content : [content, this.getLabelsContainer()]);
 	      main_core.Dom.addClass(this.layout.container, this.getDesignSystemContext());
 	      main_core.Dom.addClass(this.layout.container, this.containerClassName);
 	      return this.layout.container;
@@ -1477,7 +1563,7 @@ this.BX = this.BX || {};
 	          props: {
 	            className: 'side-panel-extra-labels'
 	          },
-	          children: [this.minimizeLabel ? this.minimizeLabel.getContainer() : null, this.newWindowLabel ? this.newWindowLabel.getContainer() : null, this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null]
+	          children: [this.minimizeLabel.getContainer(), this.newWindowLabel ? this.newWindowLabel.getContainer() : null, this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null, this.printLabel ? this.printLabel.getContainer() : null]
 	        });
 	      });
 	    }
@@ -1507,19 +1593,9 @@ this.BX = this.BX || {};
 	      return this.minimizeLabel;
 	    }
 	  }, {
-	    key: "getPrintBtn",
-	    value: function getPrintBtn() {
-	      return babelHelpers.classPrivateFieldGet(this, _refs).remember('print-btn', () => {
-	        return main_core.Dom.create('span', {
-	          props: {
-	            className: 'side-panel-print',
-	            title: main_core.Loc.getMessage('MAIN_SIDEPANEL_PRINT')
-	          },
-	          events: {
-	            click: this.handlePrintBtnClick.bind(this)
-	          }
-	        });
-	      });
+	    key: "getPrintLabel",
+	    value: function getPrintLabel() {
+	      return this.printLabel;
 	    }
 	    /**
 	     * @private
@@ -1775,9 +1851,6 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "animateOpening",
 	    value: function animateOpening() {
-	      if (this.isPrintable()) {
-	        this.showPrintBtn();
-	      }
 	      if (this.animation) {
 	        this.animation.stop();
 	      }
@@ -2176,6 +2249,17 @@ this.BX = this.BX || {};
 	      this.firePageEvent('onEscapePress');
 	      this.fireFrameEvent('onEscapePress');
 	    }
+	  }, {
+	    key: "isOnTopOfPopup",
+	    value: function isOnTopOfPopup(popup) {
+	      const sameStack = this.getZIndexComponent().getStack() === popup.getZIndexComponent().getStack();
+	      const popupOnTop = sameStack && popup.getZindex() > this.getZindex();
+	      let popupInside = this.getContainer().contains(popup.getPopupContainer());
+	      if (this.getFrameWindow()) {
+	        popupInside = this.getFrameWindow().document.contains(popup.getPopupContainer());
+	      }
+	      return !(popup.isShown() && (popupOnTop || popupInside));
+	    }
 	    /**
 	     * @private
 	     * @param {BaseEvent} event
@@ -2292,6 +2376,17 @@ this.BX = this.BX || {};
 	  }]);
 	  return Slider;
 	}();
+	function _subscribeEvents2(events) {
+	  if (main_core.Type.isPlainObject(events)) {
+	    for (const [eventName, fn] of Object.entries(events)) {
+	      if (main_core.Type.isFunction(fn)) {
+	        main_core_events.EventEmitter.subscribe(this, Slider.getEventFullName(eventName), fn, {
+	          compatMode: true
+	        });
+	      }
+	    }
+	  }
+	}
 	function _getAnimationState2(mode) {
 	  const states = {
 	    right: {
@@ -2356,18 +2451,6 @@ this.BX = this.BX || {};
 	  return main_core.Runtime.merge(main_core.Type.isPlainObject(outerBoundary) ? outerBoundary : {}, this.getOuterBoundary());
 	}
 
-	let instance = null;
-	function getInstance() {
-	  const topWindow = main_pageobject.PageObject.getRootWindow();
-	  if (topWindow !== window) {
-	    return topWindow.BX.SidePanel.Instance;
-	  }
-	  if (instance === null) {
-	    instance = new SliderManager();
-	  }
-	  return instance;
-	}
-
 	let _$1 = t => t,
 	  _t$1,
 	  _t2$1,
@@ -2384,7 +2467,7 @@ this.BX = this.BX || {};
 	    _this.title = '';
 	    _this.url = '';
 	    _this.entityType = '';
-	    _this.entityId = 0;
+	    _this.entityId = '0';
 	    _this.entityName = '';
 	    _this.refs = new main_core.Cache.MemoryCache();
 	    _this.rendered = false;
@@ -2450,7 +2533,7 @@ this.BX = this.BX || {};
 	    key: "setEntityId",
 	    value: function setEntityId(entityId) {
 	      if (main_core.Type.isNumber(entityId) || main_core.Type.isStringFilled(entityId)) {
-	        this.entityId = entityId;
+	        this.entityId = String(entityId);
 	      }
 	    }
 	  }, {
@@ -2470,8 +2553,8 @@ this.BX = this.BX || {};
 	    value: function getContainer() {
 	      return this.refs.remember('container', () => {
 	        return main_core.Tag.render(_t$1 || (_t$1 = _$1`
-				<div class="side-panel-toolbar-item" 
-					onclick="${0}"
+				<div 
+					class="side-panel-toolbar-item"
 					onmouseenter="${0}"
 					onmouseleave="${0}"
 				>
@@ -2480,7 +2563,7 @@ this.BX = this.BX || {};
 						<div class="ui-icon-set --cross-20" style="--ui-icon-set__icon-size: 100%;"></div>
 					</div>
 				</div>
-			`), this.handleClick.bind(this), this.handleMouseEnter.bind(this), this.handleMouseLeave.bind(this), this.getTitleContainer(), this.handleRemoveBtnClick.bind(this));
+			`), this.handleMouseEnter.bind(this), this.handleMouseLeave.bind(this), this.getTitleContainer(), this.handleRemoveBtnClick.bind(this));
 	      });
 	    }
 	  }, {
@@ -2496,7 +2579,7 @@ this.BX = this.BX || {};
 				<a 
 					class="side-panel-toolbar-item-title"
 					href="${0}"
-					data-slider-ignore-autobinding="true"
+					data-slider-maximize="true"
 				>${0}</a>
 			`), encodeURI(this.getUrl()), main_core.Text.encode(this.getTitle()));
 	      });
@@ -2590,15 +2673,6 @@ this.BX = this.BX || {};
 	        hint.close();
 	      }
 	    }
-	  }, {
-	    key: "handleClick",
-	    value: function handleClick(event) {
-	      if (event.ctrlKey || event.metaKey) {
-	        return;
-	      }
-	      event.preventDefault();
-	      getInstance().maximize(this.getUrl());
-	    }
 	  }, {
 	    key: "handleMouseEnter",
 	    value: function handleMouseEnter() {
@@ -2629,6 +2703,18 @@ this.BX = this.BX || {};
 	  return ToolbarItem;
 	}(main_core_events.EventEmitter);
 
+	let instance = null;
+	function getInstance() {
+	  const topWindow = main_pageobject.PageObject.getRootWindow();
+	  if (topWindow !== window) {
+	    return topWindow.BX.SidePanel.Instance;
+	  }
+	  if (instance === null) {
+	    instance = new SliderManager();
+	  }
+	  return instance;
+	}
+
 	let _$2 = t => t,
 	  _t$2,
 	  _t2$2,
@@ -3090,7 +3176,9 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "getItem",
 	    value: function getItem(entityType, entityId) {
-	      return this.items.find(item => item.getEntityType() === entityType && item.getEntityId() === entityId) || null;
+	      return this.items.find(item => {
+	        return item.getEntityType() === entityType && item.getEntityId() === String(entityId);
+	      }) || null;
 	    }
 	  }, {
 	    key: "getItemByUrl",
@@ -3845,6 +3933,7 @@ this.BX = this.BX || {};
 	        console.trace();
 	      }
 	      parameters.rules.forEach(rule => {
+	        var _rule$options;
 	        if (main_core.Type.isArray(rule.condition)) {
 	          for (let m = 0; m < rule.condition.length; m++) {
 	            if (main_core.Type.isString(rule.condition[m])) {
@@ -3852,11 +3941,7 @@ this.BX = this.BX || {};
 	            }
 	          }
 	        }
-	        rule.options = main_core.Type.isPlainObject(rule.options) ? rule.options : {};
-	        if (main_core.Type.isStringFilled(rule.loader) && !main_core.Type.isStringFilled(rule.options.loader)) {
-	          rule.options.loader = rule.loader;
-	          delete rule.loader;
-	        }
+	        (_rule$options = rule.options) !== null && _rule$options !== void 0 ? _rule$options : rule.options = {};
 	        this.anchorRules.push(rule);
 	      });
 	    }
@@ -3906,16 +3991,16 @@ this.BX = this.BX || {};
 	        if (!sameWidth) {
 	          this.getTopSlider().showShadow();
 	        }
-	        this.getTopSlider().hideOrDarkenCloseBtn();
-	        this.getTopSlider().hidePrintBtn();
+	        this.getTopSlider().hideCloseBtn();
 	        this.getTopSlider().hideExtraLabels();
 	      } else {
 	        slider.setOverlayAnimation(true);
 	      }
 	      _classPrivateMethodGet$2(this, _addOpenSlider, _addOpenSlider2).call(this, slider);
-	      this.getOpenSliders().forEach((currentSlider, index, openSliders) => {
-	        currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
-	      });
+
+	      // this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
+	      // 	currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
+	      // });
 
 	      this.losePageFocus();
 	      if (!this.opened) {
@@ -3963,9 +4048,10 @@ this.BX = this.BX || {};
 	      const previousSlider = this.getPreviousSlider();
 	      const topSlider = this.getTopSlider();
 	      this.exitFullScreen();
-	      this.getOpenSliders().forEach((slider, index, openSliders) => {
-	        slider.getLabel().moveAt(openSliders.length - index - 2); // move up
-	      });
+
+	      // this.getOpenSliders().forEach((slider, index, openSliders) => {
+	      // 	slider.getLabel().moveAt(openSliders.length - index - 2); // move up
+	      // });
 
 	      let visibleSlider = null;
 	      const openSliders = this.getOpenSliders();
@@ -3982,7 +4068,8 @@ this.BX = this.BX || {};
 	      if (previousSlider) {
 	        previousSlider.unhideOverlay();
 	        previousSlider.hideShadow();
-	        previousSlider.showOrLightenCloseBtn();
+	        previousSlider.showCloseBtn();
+	        previousSlider.showExtraLabels();
 	        if (topSlider) {
 	          topSlider.hideOverlay();
 	          topSlider.hideShadow();
@@ -4033,7 +4120,7 @@ this.BX = this.BX || {};
 	        entityType,
 	        entityId,
 	        url
-	      } = minimizeOptions || slider.getMinimizeOptions() || {};
+	      } = slider.getMinimizeOptions() || minimizeOptions || {};
 	      const item = this.getToolbar().minimizeItem({
 	        title,
 	        url: main_core.Type.isStringFilled(url) ? url : slider.getUrl(),
@@ -4086,8 +4173,9 @@ this.BX = this.BX || {};
 	  }, {
 	    key: "handleEscapePress",
 	    value: function handleEscapePress(event) {
-	      if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc()) {
-	        this.getTopSlider().close();
+	      const topSlider = this.getTopSlider();
+	      if (topSlider !== null && topSlider !== void 0 && topSlider.canCloseByEsc() && this.isOnTop(topSlider)) {
+	        topSlider.close();
 	      }
 	    }
 	    /**
@@ -4099,18 +4187,16 @@ this.BX = this.BX || {};
 	      _classPrivateMethodGet$2(this, _removeOpenSlider, _removeOpenSlider2).call(this, slider);
 	      slider.unhideOverlay();
 	      slider.hideShadow();
-	      this.getOpenSliders().forEach((slider, index, openSliders) => {
-	        slider.getLabel().moveAt(openSliders.length - index - 1); //update position
-	      });
+
+	      // this.getOpenSliders().forEach((slider, index, openSliders) => {
+	      // 	slider.getLabel().moveAt(openSliders.length - index - 1); //update position
+	      // });
 
 	      if (this.getTopSlider()) {
-	        this.getTopSlider().showOrLightenCloseBtn();
 	        this.getTopSlider().unhideOverlay();
 	        this.getTopSlider().hideShadow();
+	        this.getTopSlider().showCloseBtn();
 	        this.getTopSlider().showExtraLabels();
-	        if (this.getTopSlider().isPrintable()) {
-	          this.getTopSlider().showPrintBtn();
-	        }
 	        this.getTopSlider().focus();
 	      } else {
 	        window.focus();
@@ -4271,9 +4357,7 @@ this.BX = this.BX || {};
 	      }
 	      event.preventDefault(); // otherwise an iframe loading can be cancelled by a browser
 
-	      if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc()) {
-	        this.getTopSlider().close();
-	      }
+	      this.handleEscapePress();
 	    }
 	    /**
 	     * @private
@@ -4306,7 +4390,15 @@ this.BX = this.BX || {};
 	     */
 	  }, {
 	    key: "isOnTop",
-	    value: function isOnTop() {
+	    value: function isOnTop(slider) {
+	      if (slider) {
+	        const popups = main_popup.PopupManager.getPopups();
+	        const isOnTopOfAllPopups = popups.every(popup => slider.isOnTopOfPopup(popup));
+	        if (!isOnTopOfAllPopups) {
+	          return false;
+	        }
+	      }
+
 	      // Photo Slider or something else can cover Side Panel.
 	      const centerX = document.documentElement.clientWidth / 2;
 	      const centerY = document.documentElement.clientHeight / 2;
@@ -4367,7 +4459,11 @@ this.BX = this.BX || {};
 	        rule.handler(event, link);
 	      } else {
 	        event.preventDefault();
-	        this.open(link.url, rule.options);
+	        if (main_core.Dom.attr(event.target, 'data-slider-maximize') === null) {
+	          this.open(link.url, rule.options);
+	        } else {
+	          this.maximize(link.url, rule.options);
+	        }
 	      }
 	    }
 	    /**
@@ -4386,7 +4482,7 @@ this.BX = this.BX || {};
 	      if (!this.isValidLink(rule, link)) {
 	        BX.reload(url);
 	      } else if (main_core.Type.isFunction(rule.handler)) {
-	        rule.handler(new main_core.Event('slider', {
+	        rule.handler(new MouseEvent('slider', {
 	          bubbles: false,
 	          cancelable: true
 	        }), link);
@@ -4421,17 +4517,25 @@ this.BX = this.BX || {};
 	          const matches = href.match(rule.condition[m]);
 	          if (matches && !this.hasStopParams(href, rule.stopParameters)) {
 	            link.matches = matches;
+	            let options = main_core.Type.isFunction(rule.options) ? rule.options(link) : rule.options;
 	            const minimizeOptions = main_core.Type.isFunction(rule.minimizeOptions) ? rule.minimizeOptions(link) : null;
 	            if (main_core.Type.isPlainObject(minimizeOptions)) {
-	              if (main_core.Type.isPlainObject(rule.options)) {
-	                rule.options.minimizeOptions = minimizeOptions;
+	              if (main_core.Type.isPlainObject(options)) {
+	                options.minimizeOptions = minimizeOptions;
 	              } else {
-	                rule.options = {
+	                options = {
 	                  minimizeOptions
 	                };
 	              }
 	            }
-	            return rule;
+	            if (main_core.Type.isStringFilled(rule.loader) && !main_core.Type.isStringFilled(options.loader)) {
+	              options.loader = rule.loader;
+	              delete rule.loader;
+	            }
+	            return {
+	              ...rule,
+	              options
+	            };
 	          }
 	        }
 	      }
@@ -4595,6 +4699,7 @@ this.BX = this.BX || {};
 	  return SliderManager;
 	}();
 	function _createSlider2(sliderUrl, sliderOptions) {
+	  var _ref, _sliderOptions$useGlo;
 	  if (!main_core.Type.isStringFilled(sliderUrl)) {
 	    return null;
 	  }
@@ -4611,13 +4716,13 @@ this.BX = this.BX || {};
 	  }
 	  const rule = this.getUrlRule(url);
 	  const ruleOptions = rule !== null && main_core.Type.isPlainObject(rule.options) ? rule.options : {};
-	  const options = main_core.Type.isPlainObject(sliderOptions) ? sliderOptions : ruleOptions;
-	  if (main_core.Type.isPlainObject(ruleOptions.minimizeOptions) && main_core.Type.isPlainObject(sliderOptions) && !main_core.Type.isPlainObject(sliderOptions.minimizeOptions)) {
-	    options.minimizeOptions = ruleOptions.minimizeOptions;
-	  }
-	  if (this.getToolbar() === null && options.minimizeOptions) {
-	    options.minimizeOptions = null;
-	  }
+	  const useGlobalOptions = (_ref = (_sliderOptions$useGlo = sliderOptions === null || sliderOptions === void 0 ? void 0 : sliderOptions.useGlobalOptions) !== null && _sliderOptions$useGlo !== void 0 ? _sliderOptions$useGlo : ruleOptions.useGlobalOptions) !== null && _ref !== void 0 ? _ref : true;
+	  const useRuleOptions = sliderOptions !== ruleOptions && useGlobalOptions;
+	  const options = {
+	    ...(useRuleOptions ? ruleOptions : {}),
+	    ...sliderOptions,
+	    events: [useRuleOptions && ruleOptions.events, sliderOptions === null || sliderOptions === void 0 ? void 0 : sliderOptions.events]
+	  };
 	  const defaultOptions = SliderManager.getSliderDefaultOptions();
 	  const priorityOptions = SliderManager.getSliderPriorityOptions();
 	  const SliderClass = SliderManager.getSliderClass();

core/bitrix/js/main/sidepanel/src/css/sidepanel.css

@@ -81,39 +81,107 @@
 	z-index: 1;
 	transform: translateX(-100%);
 	transition: all 300ms ease;
+	pointer-events: none;
 }
 
 .side-panel-extra-labels {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
-	margin-top: 10px;
+
+	transition-property: opacity, display, transform;
+	transition-duration: 150ms;
+	transition-timing-function: ease-in-out;
+	transition-behavior: allow-discrete;
+}
+
+.side-panel-extra-labels.--hidden {
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(100%);
 }
 
 .side-panel-label {
 	display: inline-flex;
-	min-width: 37px;
-	height: 38px;
-	padding-right: 5px;
+	align-items: center;
+	min-width: 36px;
+	height: 28px;
 	margin-bottom: 10px;
-	background: rgba(47, 198, 246, 0.95);
-	border-top-left-radius: 19px;
-	border-bottom-left-radius: 19px;
+	position: relative;
+
+	background: var(--sidepanel-label-background, var(--ui-color));
 	white-space: nowrap;
-	overflow: hidden;
+	/*overflow: hidden;*/
 	transition: top 0.3s;
-	box-shadow: inset -6px 0 8px -10px rgba(0, 0, 0, 0.95);
+	box-shadow: var(--sidepanel-label-box-shadow, inset -6px 0 8px -10px rgba(0, 0, 0, 0.95));
 	z-index: 1;
 	cursor: pointer;
+	pointer-events: auto;
+	opacity: 1;
+
+	transition-property: opacity, display, transform;
+	transition-duration: 150ms;
+	transition-timing-function: ease-in-out;
+	transition-behavior: allow-discrete;
+
+	box-sizing: border-box;
+	border-top-left-radius: 18px;
+	border-bottom-left-radius: 18px;
+
+	border: var(--sidepanel-label-border);
+	border-right: none;
+}
+
+.side-panel-label.--ui-hoverable {
+	--ui-color: var(--ui-color-base-6);
+}
+
+.side-panel-label.--close-label.--ui-hoverable {
+	--ui-color: #0075FF;
+}
+
+.side-panel-label:before {
+	position: absolute;
+	content: '';
+	inset: -5px 0 -5px -5px;
+}
+
+.side-panel-label:hover {
+	background: var(--sidepanel-label-background-hover, var(--ui-color-hover));
+	border: var(--sidepanel-label-border-hover);
+	border-right: none;
+}
+
+.side-panel-label.--close-label {
+	min-width: 43px;
+	height: 36px;
+
+	background: var(--sidepanel-close-label-background, var(--sidepanel-label-background, var(--ui-color)));
+	border: var(--sidepanel-close-label-border, var(--sidepanel-label-border));
+	border-right: none;
+}
+
+.side-panel-label:hover.--close-label {
+	background: var(--sidepanel-close-label-background-hover, var(--sidepanel-label-background-hover, var(--ui-color-hover)));
+	border: var(--sidepanel-close-label-border-hover, var(--sidepanel-label-border-hover));
+	border-right: none;
+}
+
+.side-panel-label.--hidden {
+	opacity: 0;
+	pointer-events: none;
+	transform: translateX(100%);
+}
+
+.side-panel-label:not(.--visible) {
+	display: none;
 }
 
 .side-panel-label-icon-box {
 	display: inline-flex;
 	align-items: center;
-	width: 34px;
-	height: 38px;
-	vertical-align: top;
-	border-radius: 19px;
+	min-width: 20px;
+	height: 20px;
 	transition: all .2s;
 }
 
@@ -121,43 +189,27 @@
 	display: flex;
 	align-items: center;
 	position: relative;
-	width: 22px;
-	height: 22px;
-	margin-left: 9px;
-	border-radius: 50%;
-	transition: all 300ms ease;
+	width: 20px;
+	height: 20px;
+	margin-left: 7px;
+	transition: all 150ms ease;
 	background-repeat: no-repeat;
 	background-position: center;
 	box-sizing: content-box;
+	--ui-icon-set__icon-color: var(--sidepanel-label-icon-color, var(--ui-color-base-2));
 }
 
-.side-panel-label-icon-close:before {
-	display: block;
-	content: '';
-	width: 12px;
-	height: 12px;
-	margin-left: 5px;
-	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3e%3cpath fill='%23FFF' fill-rule='evenodd' d='M11.381 1.746L7.138 5.988l4.248 4.249-1.151 1.152L5.986 7.14l-4.242 4.244-1.147-1.146L4.84 5.994.592 1.747 1.744.595l4.248 4.247L10.235.6z'/%3e%3c/svg%3e");
-	opacity: 0.85;
+.side-panel-label:hover .side-panel-label-icon {
+	--ui-icon-set__icon-color: var(--sidepanel-label-icon-color-hover, var(--ui-color-base-2));
 }
 
-.side-panel-label-icon-minimize {
-	opacity: 0.5;
-	/*--ui-icon-set__icon-color: #878f98;*/
+.side-panel-label.--close-label .side-panel-label-icon {
+	margin-left: 13px;
+	--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color, #ffffff);
 }
 
-.side-panel-label:hover .side-panel-label-icon-minimize {
-	opacity: 1;
-}
-
-.side-panel-label-icon-new-window {
-	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='13' height='14' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M4.991.065v1.67H2.17a.5.5 0 00-.492.41l-.008.09v8.651a.5.5 0 00.41.492l.09.008h8.65a.5.5 0 00.493-.41l.008-.09-.001-2.846 1.67.001v4.015a1 1 0 01-1 1H1a1 1 0 01-1-1V1.066a1 1 0 011-1h3.991zm7 0a1 1 0 011 1l-.001 3.987h-1.67V3.035l-4.39 4.39-1.28-1.28 4.409-4.41H7.998V.065h3.992z' fill='%23878F98' fill-rule='evenodd'/%3e%3c/svg%3e");
-	opacity: 0.6;
-}
-
-.side-panel-label-icon-copy-link {
-	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M10.467 5.728c.182.183.34.38.473.59L9.674 7.584a1.91 1.91 0 00-3.015-.741l-.11.1L2.694 10.8a1.91 1.91 0 002.592 2.804l.11-.102 1.309-1.308c.703.25 1.42.257 2.149.019l-2.508 2.505a3.442 3.442 0 11-4.868-4.868l4.12-4.12a3.442 3.442 0 014.869 0zm4.426-4.425a3.442 3.442 0 010 4.868l-4.12 4.12a3.442 3.442 0 01-5.341-.59l1.265-1.265a1.91 1.91 0 003.015.741l.11-.101 3.856-3.856a1.91 1.91 0 00-2.592-2.803l-.11.102-1.31 1.308a3.232 3.232 0 00-2.148-.019l2.507-2.505a3.442 3.442 0 014.868 0z' fill='%23878F98' fill-rule='evenodd'/%3e%3c/svg%3e");
-	opacity: 0.6;
+.side-panel-label.--close-label:hover .side-panel-label-icon {
+	--ui-icon-set__icon-color: var(--sidepanel-close-label-icon-color-hover, #ffffff);
 }
 
 .side-panel-label-icon--hide .side-panel-label-icon-box {
@@ -169,32 +221,14 @@
 	opacity: 0.4;
 }
 
-.side-panel-label:hover .side-panel-label-icon:before {
-	opacity: 1;
-}
-
-.side-panel-label:hover .side-panel-label-icon-close:after {
-	content: '';
-	display: block;
-	width: 24px;
-	height: 24px;
-	position: absolute;
-	top: -1px;
-	left: -1px;
-	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3e%3cpath fill='%23FFF' fill-rule='evenodd' d='M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm0 1.771C6.35 1.771 1.771 6.351 1.771 12c0 5.65 4.58 10.229 10.229 10.229 5.65 0 10.229-4.58 10.229-10.229 0-5.65-4.58-10.229-10.229-10.229z'/%3e%3c/svg%3e");
-	opacity: 0.4;
-}
-
 .side-panel-label-text {
 	display: inline-block;
 	flex-grow: 1;
 	flex-shrink: 1;
 	flex-basis: 0;
-	height: 100%;
 	margin-left: 2px;
 	margin-right: 8px;
 	line-height: 38px;
-	vertical-align: top;
 	font-family: var(--ui-font-family-secondary, var(--ui-font-family-open-sans));
 	font-weight: var(--ui-font-weight-bold, 700);
 	font-size: 11px;
@@ -406,41 +440,6 @@
 	}
 }
 
-.side-panel-print {
-	display: none;
-	position: absolute;
-	left: -64px;
-	bottom: 0;
-	width: 64px;
-	height: 64px;
-	cursor: pointer;
-}
-
-.side-panel-print-visible {
-	display: block;
-}
-
-.side-panel-print:after {
-	display: block;
-	content: "";
-	position: absolute;
-	bottom: 22px;
-	right: 24px;
-	width: 16px;
-	height: 17px;
-	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJNMi44OTUgMy4yMjVoMTAuMTE3Yy4xNyAwIC4zMDgtLjE0LjMwOC0uMzE3Vi4zODVhLjMxMi4zMTIgMCAwIDAtLjMwOC0uMzE3SDIuODk1YS4zMTQuMzE0IDAgMCAwLS4zMDguMzE3djIuNTI2YzAgLjE3NC4xMzkuMzE0LjMwOC4zMTR6bTEyLjE3NyAxLjU3OUgxLjE1YS43NzEuNzcxIDAgMCAwLS43NzMuNzY2djUuMzY3YzAgLjQyMi4zNDcuNzY3Ljc3My43NjdoLjc3NHYzLjA2NmMwIC40MjMuMzQ3Ljc2Ny43NzMuNzY3aDEwLjgyOGEuNzcxLjc3MSAwIDAgMCAuNzc0LS43Njd2LTMuMDY2aC43NzNhLjc3MS43NzEgMCAwIDAgLjc3NC0uNzY3VjUuNTdhLjc3MS43NzEgMCAwIDAtLjc3NC0uNzY2em0tMi4zMiA5LjJIMy40N3YtMy4wNjdoOS4yOHYzLjA2N3ptLjc3My02LjEzNGEuNzcxLjc3MSAwIDAgMS0uNzczLS43NjZjMC0uNDIzLjM0Ny0uNzY3Ljc3My0uNzY3LjQyNyAwIC43NzQuMzQ0Ljc3NC43NjdhLjc3MS43NzEgMCAwIDEtLjc3NC43NjZ6IiBmaWxsPSIjRkZGIiBvcGFjaXR5PSIuNiIvPjwvc3ZnPg==);
-	opacity: 0.2;
-	transition: opacity .3s;
-}
-
-.side-panel-print-visible:after {
-	opacity: 0.6;
-}
-
-.side-panel-print:hover:after {
-	opacity: 1;
-}
-
 .side-panel-toolbar {
 	display: none;
 	position: fixed;

core/bitrix/js/main/sidepanel/src/label.js

@@ -12,19 +12,27 @@ export class Label
 	slider: Slider = null;
 	color = null;
 	bgColor = null;
+	className = '';
 	iconClass = '';
 	iconTitle = '';
 	onclick = null;
 	text = null;
+	hidden: boolean = false;
+	visible: boolean = true;
 	cache = new Cache.MemoryCache();
 
 	constructor(slider: Slider, labelOptions: LabelOptions)
 	{
 		this.slider = slider;
 		const options = Type.isPlainObject(labelOptions) ? labelOptions : {};
-		this.setBgColor(options.bgColor);
+
+		this.hidden = Type.isBoolean(options.hidden) ? options.hidden : this.hidden;
+		this.visible = Type.isBoolean(options.visible) ? options.visible : this.visible;
+
 		this.setColor(options.color);
+		this.setBgColor(options.bgColor);
 		this.setText(options.text);
+		this.setClassName(options.className);
 		this.setIconClass(options.iconClass);
 		this.setIconTitle(options.iconTitle);
 		this.setOnclick(options.onclick);
@@ -33,9 +41,25 @@ export class Label
 	getContainer(): HTMLElement
 	{
 		return this.cache.remember('container', () => {
+			const classes = ['side-panel-label'];
+			if (this.getClassName())
+			{
+				classes.push(this.getClassName());
+			}
+
+			if (this.isHidden())
+			{
+				classes.push('--hidden');
+			}
+
+			if (this.isVisible())
+			{
+				classes.push('--visible');
+			}
+
 			return Dom.create('div', {
 				props: {
-					className: 'side-panel-label',
+					className: classes.join(' '),
 				},
 				children: [
 					this.getIconBox(),
@@ -150,11 +174,12 @@ export class Label
 
 	setColor(color: string): void
 	{
-		if (Type.isStringFilled(color))
+		if (Type.isStringFilled(color) || color === null)
 		{
 			this.color = color;
 
-			Dom.style(this.getTextContainer(), 'color', color);
+			Dom.style(this.getTextContainer(), 'color', this.color);
+			Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', this.color);
 		}
 	}
 
@@ -186,12 +211,18 @@ export class Label
 			}
 
 			this.bgColor = bgColor;
-			Dom.style(this.getContainer(), 'background-color', bgColor);
+			Dom.style(this.getContainer(), '--ui-color', bgColor);
+
+			if (this.getColor() === null)
+			{
+				Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', '#fff');
+			}
 		}
 		else if (bgColor === null)
 		{
 			this.bgColor = null;
-			Dom.style(this.getContainer(), 'background-color', null);
+			Dom.style(this.getContainer(), '--ui-color', null);
+			Dom.style(this.getIconContainer(), '--ui-icon-set__icon-color', null);
 		}
 	}
 
@@ -219,6 +250,26 @@ export class Label
 		return this.text;
 	}
 
+	setClassName(className: string | null): void
+	{
+		if (Type.isStringFilled(className))
+		{
+			Dom.removeClass(this.getContainer(), this.className);
+			this.className = className;
+			Dom.addClass(this.getContainer(), this.className);
+		}
+		else if (className === null)
+		{
+			Dom.removeClass(this.getContainer(), this.className);
+			this.className = className;
+		}
+	}
+
+	getClassName(): string
+	{
+		return this.className;
+	}
+
 	setIconClass(iconClass: string | null): void
 	{
 		if (Type.isStringFilled(iconClass))
@@ -253,6 +304,33 @@ export class Label
 		return this.iconTitle;
 	}
 
+	isHidden(): boolean
+	{
+		return this.hidden;
+	}
+
+	hide(): void
+	{
+		this.hidden = true;
+		Dom.addClass(this.getContainer(), '--hidden');
+	}
+
+	show(): void
+	{
+		this.hidden = false;
+		Dom.removeClass(this.getContainer(), '--hidden');
+	}
+
+	isVisible(): boolean
+	{
+		return this.visible;
+	}
+
+	setVisible(isVisible: boolean = true): void
+	{
+		Dom.toggleClass(this.getContainer(), '--visible', isVisible);
+	}
+
 	setOnclick(fn: Function): void
 	{
 		if (Type.isFunction(fn) || fn === null)

core/bitrix/js/main/sidepanel/src/slider-manager.js

@@ -1,6 +1,7 @@
 import type { JsonObject } from 'main.core';
 import { Type, Dom, Event, Runtime, Reflection, Browser, ajax as Ajax, Uri } from 'main.core';
 import { EventEmitter, BaseEvent } from 'main.core.events';
+import { PopupManager } from 'main.popup';
 
 import { Slider } from './slider';
 import type { SliderEvent } from './slider-event';
@@ -156,21 +157,14 @@ export class SliderManager
 
 		const rule = this.getUrlRule(url);
 		const ruleOptions = rule !== null && Type.isPlainObject(rule.options) ? rule.options : {};
-		const options = Type.isPlainObject(sliderOptions) ? sliderOptions : ruleOptions;
 
-		if (
-			Type.isPlainObject(ruleOptions.minimizeOptions)
-			&& Type.isPlainObject(sliderOptions)
-			&& !Type.isPlainObject(sliderOptions.minimizeOptions)
-		)
-		{
-			options.minimizeOptions = ruleOptions.minimizeOptions;
-		}
-
-		if (this.getToolbar() === null && options.minimizeOptions)
-		{
-			options.minimizeOptions = null;
-		}
+		const useGlobalOptions = sliderOptions?.useGlobalOptions ?? ruleOptions.useGlobalOptions ?? true;
+		const useRuleOptions = sliderOptions !== ruleOptions && useGlobalOptions;
+		const options: SliderOptions = {
+			...(useRuleOptions ? ruleOptions : {}),
+			...sliderOptions,
+			events: [useRuleOptions && ruleOptions.events, sliderOptions?.events],
+		};
 
 		const defaultOptions = SliderManager.getSliderDefaultOptions();
 		const priorityOptions = SliderManager.getSliderPriorityOptions();
@@ -803,12 +797,7 @@ export class SliderManager
 				}
 			}
 
-			rule.options = Type.isPlainObject(rule.options) ? rule.options : {};
-			if (Type.isStringFilled(rule.loader) && !Type.isStringFilled(rule.options.loader))
-			{
-				rule.options.loader = rule.loader;
-				delete rule.loader;
-			}
+			rule.options ??= {};
 
 			this.anchorRules.push(rule);
 		});
@@ -873,8 +862,7 @@ export class SliderManager
 				this.getTopSlider().showShadow();
 			}
 
-			this.getTopSlider().hideOrDarkenCloseBtn();
-			this.getTopSlider().hidePrintBtn();
+			this.getTopSlider().hideCloseBtn();
 			this.getTopSlider().hideExtraLabels();
 		}
 		else
@@ -884,9 +872,9 @@ export class SliderManager
 
 		this.#addOpenSlider(slider);
 
-		this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
-			currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
-		});
+		// this.getOpenSliders().forEach((currentSlider: Slider, index: number, openSliders: Slider[]) => {
+		// 	currentSlider.getLabel().moveAt(openSliders.length - index - 1); // move down
+		// });
 
 		this.losePageFocus();
 
@@ -951,9 +939,9 @@ export class SliderManager
 
 		this.exitFullScreen();
 
-		this.getOpenSliders().forEach((slider, index, openSliders) => {
-			slider.getLabel().moveAt(openSliders.length - index - 2); // move up
-		});
+		// this.getOpenSliders().forEach((slider, index, openSliders) => {
+		// 	slider.getLabel().moveAt(openSliders.length - index - 2); // move up
+		// });
 
 		let visibleSlider = null;
 		const openSliders = this.getOpenSliders();
@@ -976,7 +964,8 @@ export class SliderManager
 		{
 			previousSlider.unhideOverlay();
 			previousSlider.hideShadow();
-			previousSlider.showOrLightenCloseBtn();
+			previousSlider.showCloseBtn();
+			previousSlider.showExtraLabels();
 
 			if (topSlider)
 			{
@@ -1035,7 +1024,7 @@ export class SliderManager
 		this.getToolbar().expand(true);
 
 		const minimizeOptions = this.getMinimizeOptions(slider.getUrl());
-		const { entityType, entityId, url } = minimizeOptions || slider.getMinimizeOptions() || {};
+		const { entityType, entityId, url } = slider.getMinimizeOptions() || minimizeOptions || {};
 
 		const item = this.getToolbar().minimizeItem({
 			title,
@@ -1111,9 +1100,10 @@ export class SliderManager
 
 	handleEscapePress(event)
 	{
-		if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc())
+		const topSlider = this.getTopSlider();
+		if (topSlider?.canCloseByEsc() && this.isOnTop(topSlider))
 		{
-			this.getTopSlider().close();
+			topSlider.close();
 		}
 	}
 
@@ -1127,21 +1117,16 @@ export class SliderManager
 		slider.unhideOverlay();
 		slider.hideShadow();
 
-		this.getOpenSliders().forEach((slider, index, openSliders) => {
-			slider.getLabel().moveAt(openSliders.length - index - 1); //update position
-		});
+		// this.getOpenSliders().forEach((slider, index, openSliders) => {
+		// 	slider.getLabel().moveAt(openSliders.length - index - 1); //update position
+		// });
 
 		if (this.getTopSlider())
 		{
-			this.getTopSlider().showOrLightenCloseBtn();
 			this.getTopSlider().unhideOverlay();
 			this.getTopSlider().hideShadow();
+			this.getTopSlider().showCloseBtn();
 			this.getTopSlider().showExtraLabels();
-
-			if (this.getTopSlider().isPrintable())
-			{
-				this.getTopSlider().showPrintBtn();
-			}
 			this.getTopSlider().focus();
 		}
 		else
@@ -1337,10 +1322,7 @@ export class SliderManager
 
 		event.preventDefault(); // otherwise an iframe loading can be cancelled by a browser
 
-		if (this.isOnTop() && this.getTopSlider() && this.getTopSlider().canCloseByEsc())
-		{
-			this.getTopSlider().close();
-		}
+		this.handleEscapePress();
 	}
 
 	/**
@@ -1372,8 +1354,18 @@ export class SliderManager
 	/**
 	 * @private
 	 */
-	isOnTop(): boolean
+	isOnTop(slider: Slider): boolean
 	{
+		if (slider)
+		{
+			const popups = PopupManager.getPopups();
+			const isOnTopOfAllPopups = popups.every((popup) => slider.isOnTopOfPopup(popup));
+			if (!isOnTopOfAllPopups)
+			{
+				return false;
+			}
+		}
+
 		// Photo Slider or something else can cover Side Panel.
 		const centerX = document.documentElement.clientWidth / 2;
 		const centerY = document.documentElement.clientHeight / 2;
@@ -1456,7 +1448,14 @@ export class SliderManager
 		else
 		{
 			event.preventDefault();
-			this.open(link.url, rule.options);
+			if (Dom.attr(event.target, 'data-slider-maximize') === null)
+			{
+				this.open(link.url, rule.options);
+			}
+			else
+			{
+				this.maximize(link.url, rule.options);
+			}
 		}
 	}
 
@@ -1481,7 +1480,7 @@ export class SliderManager
 		else if (Type.isFunction(rule.handler))
 		{
 			rule.handler(
-				new Event(
+				new MouseEvent(
 					'slider',
 					{
 						bubbles: false,
@@ -1530,20 +1529,28 @@ export class SliderManager
 				if (matches && !this.hasStopParams(href, rule.stopParameters))
 				{
 					link.matches = matches;
+
+					let options = Type.isFunction(rule.options) ? rule.options(link) : rule.options;
 					const minimizeOptions = Type.isFunction(rule.minimizeOptions) ? rule.minimizeOptions(link) : null;
 					if (Type.isPlainObject(minimizeOptions))
 					{
-						if (Type.isPlainObject(rule.options))
+						if (Type.isPlainObject(options))
 						{
-							rule.options.minimizeOptions = minimizeOptions;
+							options.minimizeOptions = minimizeOptions;
 						}
 						else
 						{
-							rule.options = { minimizeOptions };
+							options = { minimizeOptions };
 						}
 					}
 
-					return rule;
+					if (Type.isStringFilled(rule.loader) && !Type.isStringFilled(options.loader))
+					{
+						options.loader = rule.loader;
+						delete rule.loader;
+					}
+
+					return { ...rule, options };
 				}
 			}
 		}

core/bitrix/js/main/sidepanel/src/slider.js

@@ -2,13 +2,14 @@ import { Type, Loc, Dom, Event, Runtime, Text, Browser, Uri, Tag, type JsonObjec
 import { BaseEvent, EventEmitter } from 'main.core.events';
 import { MemoryCache, type BaseCache } from 'main.core.cache';
 import { ZIndexManager, type ZIndexComponent } from 'main.core.z-index-manager';
+import type { Popup } from 'main.popup';
 
 import { Dictionary } from './dictionary';
 import { Label } from './label';
 import { MessageEvent } from './message-event';
 import { SliderEvent } from './slider-event';
 
-import { type SliderOptions } from './types/slider-options';
+import type { SliderOptions, SliderEvents } from './types/slider-options';
 import { type MinimizeOptions } from './types/minimize-options';
 import { type OuterBoundary } from './types/outer-boundary';
 
@@ -44,7 +45,7 @@ export class Slider
 		this.cacheable = options.cacheable !== false;
 		this.autoFocus = options.autoFocus !== false;
 		this.printable = options.printable === true;
-		this.allowChangeHistory = options.allowChangeHistory !== false;
+		this.allowChangeHistory = Type.isBoolean(options.allowChangeHistory) ? options.allowChangeHistory : null;
 		this.allowChangeTitle = Type.isBoolean(options.allowChangeTitle) ? options.allowChangeTitle : null;
 		this.allowCrossOrigin = options.allowCrossOrigin === true;
 		this.data = new Dictionary(Type.isPlainObject(options.data) ? options.data : {});
@@ -128,23 +129,14 @@ export class Slider
 		this.animationOptions = {};
 
 		this.minimizeOptions = null;
-		const minimizeOptions = options.minimizeOptions;
-		if (
-			Type.isPlainObject(minimizeOptions)
-			&& Type.isStringFilled(minimizeOptions.entityType)
-			&& (Type.isStringFilled(minimizeOptions.entityId) || Type.isNumber(minimizeOptions.entityId))
-			&& (Type.isStringFilled(minimizeOptions.url))
-		)
-		{
-			this.minimizeOptions = minimizeOptions;
-		}
-
+		this.setMinimizeOptions(options.minimizeOptions);
 		this.setToolbarOnOpen(options.hideToolbarOnOpen);
 		this.setDesignSystemContext(options.designSystemContext);
 		this.setAutoOffset(options.autoOffset);
 
 		this.label = new Label(this, {
-			iconClass: 'side-panel-label-icon-close',
+			className: '--close-label --ui-hoverable',
+			iconClass: 'side-panel-label-icon-close ui-icon-set --cross-l',
 			iconTitle: Loc.getMessage('MAIN_SIDEPANEL_CLOSE'),
 			onclick(label, slider)
 			{
@@ -157,31 +149,28 @@ export class Slider
 		this.label.setColor(labelOptions.color);
 		this.label.setBgColor(labelOptions.bgColor, labelOptions.opacity);
 
-		this.minimizeLabel = null;
+		this.minimizeLabel = new Label(this, {
+			className: '--ui-hoverable',
+			iconClass: 'side-panel-label-icon-minimize ui-icon-set --o-minimize',
+			iconTitle: Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
+			onclick: (label, slider) => {
+				if (this.isLoaded())
+				{
+					this.minimize();
+				}
+			},
+			visible: this.areMinimizeOptionsValid(this.minimizeOptions),
+		});
 		this.newWindowLabel = null;
 		this.copyLinkLabel = null;
+		this.printLabel = null;
 
-		if (!this.isSelfContained() && this.minimizeOptions !== null)
-		{
-			this.minimizeLabel = new Label(this, {
-				iconClass: 'side-panel-label-icon-minimize ui-icon-set --arrow-line',
-				iconTitle: Loc.getMessage('MAIN_SIDEPANEL_MINIMIZE'),
-				bgColor: ['#d9dcdf', 100],
-				onclick: (label, slider) => {
-					if (this.isLoaded())
-					{
-						this.minimize();
-					}
-				},
-			});
-		}
-
-		if (options.newWindowLabel === true && (!this.isSelfContained() || Type.isStringFilled(options.newWindowUrl)))
+		if (options.newWindowLabel === true && (this.canChangeHistory() || Type.isStringFilled(options.newWindowUrl)))
 		{
 			this.newWindowLabel = new Label(this, {
-				iconClass: 'side-panel-label-icon-new-window',
+				className: '--ui-hoverable',
+				iconClass: 'side-panel-label-icon-new-window ui-icon-set --go-to-l',
 				iconTitle: Loc.getMessage('MAIN_SIDEPANEL_NEW_WINDOW'),
-				bgColor: ['#d9dcdf', 100],
 				onclick(label, slider)
 				{
 					const newWindowUrl = Type.isStringFilled(options.newWindowUrl) ? options.newWindowUrl : slider.getUrl();
@@ -193,12 +182,12 @@ export class Slider
 			});
 		}
 
-		if (options.copyLinkLabel === true && (!this.isSelfContained() || Type.isStringFilled(options.newWindowUrl)))
+		if (options.copyLinkLabel === true && (this.canChangeHistory() || Type.isStringFilled(options.newWindowUrl)))
 		{
 			this.copyLinkLabel = new Label(this, {
-				iconClass: 'side-panel-label-icon-copy-link',
+				className: '--ui-hoverable',
+				iconClass: 'side-panel-label-icon-copy-link ui-icon-set --o-link',
 				iconTitle: Loc.getMessage('MAIN_SIDEPANEL_COPY_LINK'),
-				bgColor: ['#d9dcdf', 100],
 			});
 
 			BX.clipboard.bindCopyClick(
@@ -214,6 +203,14 @@ export class Slider
 			);
 		}
 
+		this.printLabel = new Label(this, {
+			hidden: !this.isPrintable(),
+			className: '--side-panel-label-print --ui-hoverable',
+			iconClass: 'side-panel-label-icon-print ui-icon-set --o-printer',
+			iconTitle: Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
+			onclick: this.handlePrintBtnClick.bind(this),
+		});
+
 		// Compatibility
 		if (
 			this.url.includes('crm.activity.planner/slider.php')
@@ -229,9 +226,14 @@ export class Slider
 			};
 		}
 
-		if (Type.isPlainObject(options.events))
+		[options.events].flat().forEach((events: SliderEvents) => this.#subscribeEvents(events));
+	}
+
+	#subscribeEvents(events: SliderEvents): void
+	{
+		if (Type.isPlainObject(events))
 		{
-			for (const [eventName, fn] of Object.entries(options.events))
+			for (const [eventName, fn] of Object.entries(events))
 			{
 				if (Type.isFunction(fn))
 				{
@@ -397,7 +399,24 @@ export class Slider
 		this.animationOptions = Type.isPlainObject(options) ? options : {};
 	}
 
-	getMinimizeOptions(): MinimizeOptions
+	setMinimizeOptions(minimizeOptions: MinimizeOptions | null): void
+	{
+		const showMinimizeLabel = this.areMinimizeOptionsValid(minimizeOptions);
+
+		this.minimizeOptions = minimizeOptions;
+		this.minimizeLabel?.setVisible(showMinimizeLabel);
+	}
+
+	areMinimizeOptionsValid(minimizeOptions: ?MinimizeOptions): boolean
+	{
+		return Type.isPlainObject(minimizeOptions)
+			&& Type.isStringFilled(minimizeOptions.entityType)
+			&& (Type.isStringFilled(minimizeOptions.entityId) || Type.isNumber(minimizeOptions.entityId))
+			&& Type.isStringFilled(minimizeOptions.url)
+		;
+	}
+
+	getMinimizeOptions(): MinimizeOptions | null
 	{
 		return this.minimizeOptions;
 	}
@@ -678,12 +697,17 @@ export class Slider
 
 	canChangeHistory(): boolean
 	{
-		return (
-			this.allowChangeHistory
-			&& !this.allowCrossOrigin
-			&& !this.isSelfContained()
-			&& !/^\/bitrix\/(components|tools)\//i.test(this.getUrl())
-		);
+		if (this.allowCrossOrigin || /^\/bitrix\/(components|tools)\//i.test(this.getUrl()))
+		{
+			return false;
+		}
+
+		if (this.allowChangeHistory === null)
+		{
+			return !this.isSelfContained();
+		}
+
+		return this.allowChangeHistory;
 	}
 
 	canChangeTitle(): boolean
@@ -754,12 +778,12 @@ export class Slider
 
 	showCloseBtn(): void
 	{
-		this.getLabel().showIcon();
+		this.getLabel().show();
 	}
 
 	hideCloseBtn(): void
 	{
-		this.getLabel().hideIcon();
+		this.getLabel().hide();
 	}
 
 	showOrLightenCloseBtn(): void
@@ -788,22 +812,28 @@ export class Slider
 
 	showPrintBtn(): void
 	{
-		Dom.addClass(this.getPrintBtn(), 'side-panel-print-visible');
+		if (this.printLabel !== null)
+		{
+			this.printLabel.show();
+		}
 	}
 
 	hidePrintBtn(): void
 	{
-		Dom.removeClass(this.getPrintBtn(), 'side-panel-print-visible');
+		if (this.printLabel !== null)
+		{
+			this.printLabel.hide();
+		}
 	}
 
 	showExtraLabels(): void
 	{
-		Dom.style(this.getExtraLabelsContainer(), 'display', null);
+		Dom.removeClass(this.getExtraLabelsContainer(), '--hidden');
 	}
 
 	hideExtraLabels(): void
 	{
-		Dom.style(this.getExtraLabelsContainer(), 'display', 'none');
+		Dom.addClass(this.getExtraLabelsContainer(), '--hidden');
 	}
 
 	setContentClass(className: string): void
@@ -1268,7 +1298,7 @@ export class Slider
 				${
 					this.hideControls
 						? content
-						: [content, this.getLabelsContainer(), this.getPrintBtn()]
+						: [content, this.getLabelsContainer()]
 				}
 			</div>
 		`;
@@ -1321,9 +1351,10 @@ export class Slider
 					className: 'side-panel-extra-labels',
 				},
 				children: [
-					this.minimizeLabel ? this.minimizeLabel.getContainer() : null,
+					this.minimizeLabel.getContainer(),
 					this.newWindowLabel ? this.newWindowLabel.getContainer() : null,
 					this.copyLinkLabel ? this.copyLinkLabel.getContainer() : null,
+					this.printLabel ? this.printLabel.getContainer() : null,
 				],
 			});
 		});
@@ -1354,19 +1385,9 @@ export class Slider
 		return this.minimizeLabel;
 	}
 
-	getPrintBtn(): HTMLElement
+	getPrintLabel(): Label | null
 	{
-		return this.#refs.remember('print-btn', () => {
-			return Dom.create('span', {
-				props: {
-					className: 'side-panel-print',
-					title: Loc.getMessage('MAIN_SIDEPANEL_PRINT'),
-				},
-				events: {
-					click: this.handlePrintBtnClick.bind(this),
-				},
-			});
-		});
+		return this.printLabel;
 	}
 
 	/**
@@ -1733,11 +1754,6 @@ export class Slider
 	 */
 	animateOpening()
 	{
-		if (this.isPrintable())
-		{
-			this.showPrintBtn();
-		}
-
 		if (this.animation)
 		{
 			this.animation.stop();
@@ -2258,6 +2274,19 @@ export class Slider
 		this.fireFrameEvent('onEscapePress');
 	}
 
+	isOnTopOfPopup(popup: Popup): boolean
+	{
+		const sameStack = this.getZIndexComponent().getStack() === popup.getZIndexComponent().getStack();
+		const popupOnTop = sameStack && popup.getZindex() > this.getZindex();
+		let popupInside = this.getContainer().contains(popup.getPopupContainer());
+		if (this.getFrameWindow())
+		{
+			popupInside = this.getFrameWindow().document.contains(popup.getPopupContainer());
+		}
+
+		return !(popup.isShown() && (popupOnTop || popupInside));
+	}
+
 	/**
 	 * @private
 	 * @param {BaseEvent} event

core/bitrix/js/main/sidepanel/src/toolbar-item.js

@@ -2,7 +2,6 @@ import { Type, Cache, Text, Tag, Dom, type JsonObject } from 'main.core';
 import { EventEmitter } from 'main.core.events';
 import { PopupManager, Popup } from 'main.popup';
 
-import { getInstance } from './get-instance';
 import { type ToolbarItemOptions } from './types/toolbar-item-options';
 
 export class ToolbarItem extends EventEmitter
@@ -18,7 +17,7 @@ export class ToolbarItem extends EventEmitter
 		this.title = '';
 		this.url = '';
 		this.entityType = '';
-		this.entityId = 0;
+		this.entityId = '0';
 		this.entityName = '';
 
 		this.refs = new Cache.MemoryCache();
@@ -91,7 +90,7 @@ export class ToolbarItem extends EventEmitter
 	{
 		if (Type.isNumber(entityId) || Type.isStringFilled(entityId))
 		{
-			this.entityId = entityId;
+			this.entityId = String(entityId);
 		}
 	}
 
@@ -112,8 +111,8 @@ export class ToolbarItem extends EventEmitter
 	{
 		return this.refs.remember('container', () => {
 			return Tag.render`
-				<div class="side-panel-toolbar-item" 
-					onclick="${this.handleClick.bind(this)}"
+				<div 
+					class="side-panel-toolbar-item"
 					onmouseenter="${this.handleMouseEnter.bind(this)}"
 					onmouseleave="${this.handleMouseLeave.bind(this)}"
 				>
@@ -138,7 +137,7 @@ export class ToolbarItem extends EventEmitter
 				<a 
 					class="side-panel-toolbar-item-title"
 					href="${encodeURI(this.getUrl())}"
-					data-slider-ignore-autobinding="true"
+					data-slider-maximize="true"
 				>${Text.encode(this.getTitle())}</a>
 			`;
 		});
@@ -237,17 +236,6 @@ export class ToolbarItem extends EventEmitter
 		}
 	}
 
-	handleClick(event): void
-	{
-		if (event.ctrlKey || event.metaKey)
-		{
-			return;
-		}
-
-		event.preventDefault();
-		getInstance().maximize(this.getUrl());
-	}
-
 	handleMouseEnter(): void
 	{
 		this.showTooltip();

core/bitrix/js/main/sidepanel/src/toolbar.js

@@ -276,7 +276,7 @@ export class Toolbar extends EventEmitter
 		return this.collapsed;
 	}
 
-	getItems()
+	getItems(): ToolbarItem[]
 	{
 		return this.items;
 	}
@@ -571,7 +571,9 @@ export class Toolbar extends EventEmitter
 
 	getItem(entityType: string, entityId: string | number): ToolbarItem | null
 	{
-		return this.items.find((item) => item.getEntityType() === entityType && item.getEntityId() === entityId) || null;
+		return this.items.find((item) => {
+			return item.getEntityType() === entityType && item.getEntityId() === String(entityId);
+		}) || null;
 	}
 
 	getItemByUrl(url: string): ToolbarItem | null

core/bitrix/js/main/sidepanel/src/types/label-options.js

@@ -5,7 +5,10 @@ export type LabelOptions = {
 	bgColor?: string | [string, number],
 	color?: string,
 	text?: string,
+	className?: string,
 	iconClass?: string,
 	iconTitle?: string,
+	hidden?: boolean,
+	visible?: boolean,
 	onclick?: (label: Label, slider: Slider) => void,
 };

core/bitrix/js/main/sidepanel/src/types/rule-options.js

@@ -10,6 +10,6 @@ export type RuleOptions = {
 	allowCrossDomain?: boolean,
 	mobileFriendly?: boolean,
 	loader?: string,
-	options?: SliderOptions,
+	options?: SliderOptions | (link: LinkOptions) => SliderOptions,
 	minimizeOptions: (link: LinkOptions) => MinimizeOptions,
 };

core/bitrix/js/main/sidepanel/src/types/slider-options.js

@@ -45,5 +45,8 @@ export type SliderOptions = {
 	copyLinkLabel?: boolean,
 	minimizeLabel?: boolean,
 	designSystemContext?: string,
-	events?: { [eventName: string]: (event: SliderEvent) => void },
+	events?: SliderEvents | SliderEvents[],
+	useGlobalOptions?: boolean,
 };
+
+export type SliderEvents = { [eventName: string]: (event: SliderEvent) => void };