survey-react 1.9.91 → 1.9.93

package/survey.react.js

@@ -1,5 +1,5 @@
 /*!
- * surveyjs - Survey JavaScript library v1.9.91
+ * surveyjs - Survey JavaScript library v1.9.93
  * Copyright (c) 2015-2023 Devsoft Baltic OÜ  - http://surveyjs.io/
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
  */
@@ -101,617 +101,575 @@ return /******/ (function(modules) { // webpackBootstrap
 /************************************************************************/
 /******/ ({
 
-/***/ "./node_modules/signature_pad/dist/signature_pad.mjs":
-/*!***********************************************************!*\
-  !*** ./node_modules/signature_pad/dist/signature_pad.mjs ***!
-  \***********************************************************/
+/***/ "./node_modules/signature_pad/dist/signature_pad.js":
+/*!**********************************************************!*\
+  !*** ./node_modules/signature_pad/dist/signature_pad.js ***!
+  \**********************************************************/
 /*! exports provided: default */
-/***/ (function(__webpack_module__, __webpack_exports__, __webpack_require__) {
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "default", function() { return SignaturePad; });
 /*!
- * Signature Pad v2.3.2
- * https://github.com/szimek/signature_pad
- *
- * Copyright 2017 Szymon Nowak
- * Released under the MIT license
- *
- * The main idea and some parts of the code (e.g. drawing variable width Bézier curve) are taken from:
- * http://corner.squareup.com/2012/07/smoother-signatures.html
- *
- * Implementation of interpolation using cubic Bézier curves is taken from:
- * http://benknowscode.wordpress.com/2012/09/14/path-interpolation-using-cubic-bezier-and-control-point-estimation-in-javascript
- *
- * Algorithm for approximated length of a Bézier curve is taken from:
- * http://www.lemoda.net/maths/bezier-length/index.html
- *
+ * Signature Pad v4.1.5 | https://github.com/szimek/signature_pad
+ * (c) 2023 Szymon Nowak | Released under the MIT license
  */
 
-function Point(x, y, time) {
-  this.x = x;
-  this.y = y;
-  this.time = time || new Date().getTime();
+class Point {
+    constructor(x, y, pressure, time) {
+        if (isNaN(x) || isNaN(y)) {
+            throw new Error(`Point is invalid: (${x}, ${y})`);
+        }
+        this.x = +x;
+        this.y = +y;
+        this.pressure = pressure || 0;
+        this.time = time || Date.now();
+    }
+    distanceTo(start) {
+        return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
+    }
+    equals(other) {
+        return (this.x === other.x &&
+            this.y === other.y &&
+            this.pressure === other.pressure &&
+            this.time === other.time);
+    }
+    velocityFrom(start) {
+        return this.time !== start.time
+            ? this.distanceTo(start) / (this.time - start.time)
+            : 0;
+    }
 }
 
-Point.prototype.velocityFrom = function (start) {
-  return this.time !== start.time ? this.distanceTo(start) / (this.time - start.time) : 1;
-};
-
-Point.prototype.distanceTo = function (start) {
-  return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2));
-};
-
-Point.prototype.equals = function (other) {
-  return this.x === other.x && this.y === other.y && this.time === other.time;
-};
-
-function Bezier(startPoint, control1, control2, endPoint) {
-  this.startPoint = startPoint;
-  this.control1 = control1;
-  this.control2 = control2;
-  this.endPoint = endPoint;
+class Bezier {
+    constructor(startPoint, control2, control1, endPoint, startWidth, endWidth) {
+        this.startPoint = startPoint;
+        this.control2 = control2;
+        this.control1 = control1;
+        this.endPoint = endPoint;
+        this.startWidth = startWidth;
+        this.endWidth = endWidth;
+    }
+    static fromPoints(points, widths) {
+        const c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2;
+        const c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1;
+        return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end);
+    }
+    static calculateControlPoints(s1, s2, s3) {
+        const dx1 = s1.x - s2.x;
+        const dy1 = s1.y - s2.y;
+        const dx2 = s2.x - s3.x;
+        const dy2 = s2.y - s3.y;
+        const m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
+        const m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
+        const l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
+        const l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
+        const dxm = m1.x - m2.x;
+        const dym = m1.y - m2.y;
+        const k = l2 / (l1 + l2);
+        const cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
+        const tx = s2.x - cm.x;
+        const ty = s2.y - cm.y;
+        return {
+            c1: new Point(m1.x + tx, m1.y + ty),
+            c2: new Point(m2.x + tx, m2.y + ty),
+        };
+    }
+    length() {
+        const steps = 10;
+        let length = 0;
+        let px;
+        let py;
+        for (let i = 0; i <= steps; i += 1) {
+            const t = i / steps;
+            const cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
+            const cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
+            if (i > 0) {
+                const xdiff = cx - px;
+                const ydiff = cy - py;
+                length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+            }
+            px = cx;
+            py = cy;
+        }
+        return length;
+    }
+    point(t, start, c1, c2, end) {
+        return (start * (1.0 - t) * (1.0 - t) * (1.0 - t))
+            + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t)
+            + (3.0 * c2 * (1.0 - t) * t * t)
+            + (end * t * t * t);
+    }
 }
 
-// Returns approximated length.
-Bezier.prototype.length = function () {
-  var steps = 10;
-  var length = 0;
-  var px = void 0;
-  var py = void 0;
-
-  for (var i = 0; i <= steps; i += 1) {
-    var t = i / steps;
-    var cx = this._point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x);
-    var cy = this._point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y);
-    if (i > 0) {
-      var xdiff = cx - px;
-      var ydiff = cy - py;
-      length += Math.sqrt(xdiff * xdiff + ydiff * ydiff);
+class SignatureEventTarget {
+    constructor() {
+        try {
+            this._et = new EventTarget();
+        }
+        catch (error) {
+            this._et = document;
+        }
     }
-    px = cx;
-    py = cy;
-  }
-
-  return length;
-};
-
-/* eslint-disable no-multi-spaces, space-in-parens */
-Bezier.prototype._point = function (t, start, c1, c2, end) {
-  return start * (1.0 - t) * (1.0 - t) * (1.0 - t) + 3.0 * c1 * (1.0 - t) * (1.0 - t) * t + 3.0 * c2 * (1.0 - t) * t * t + end * t * t * t;
-};
-
-/* eslint-disable */
+    addEventListener(type, listener, options) {
+        this._et.addEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        return this._et.dispatchEvent(event);
+    }
+    removeEventListener(type, callback, options) {
+        this._et.removeEventListener(type, callback, options);
+    }
+}
 
-// http://stackoverflow.com/a/27078401/815507
-function throttle(func, wait, options) {
-  var context, args, result;
-  var timeout = null;
-  var previous = 0;
-  if (!options) options = {};
-  var later = function later() {
-    previous = options.leading === false ? 0 : Date.now();
-    timeout = null;
-    result = func.apply(context, args);
-    if (!timeout) context = args = null;
-  };
-  return function () {
-    var now = Date.now();
-    if (!previous && options.leading === false) previous = now;
-    var remaining = wait - (now - previous);
-    context = this;
-    args = arguments;
-    if (remaining <= 0 || remaining > wait) {
-      if (timeout) {
-        clearTimeout(timeout);
+function throttle(fn, wait = 250) {
+    let previous = 0;
+    let timeout = null;
+    let result;
+    let storedContext;
+    let storedArgs;
+    const later = () => {
+        previous = Date.now();
         timeout = null;
-      }
-      previous = now;
-      result = func.apply(context, args);
-      if (!timeout) context = args = null;
-    } else if (!timeout && options.trailing !== false) {
-      timeout = setTimeout(later, remaining);
-    }
-    return result;
-  };
+        result = fn.apply(storedContext, storedArgs);
+        if (!timeout) {
+            storedContext = null;
+            storedArgs = [];
+        }
+    };
+    return function wrapper(...args) {
+        const now = Date.now();
+        const remaining = wait - (now - previous);
+        storedContext = this;
+        storedArgs = args;
+        if (remaining <= 0 || remaining > wait) {
+            if (timeout) {
+                clearTimeout(timeout);
+                timeout = null;
+            }
+            previous = now;
+            result = fn.apply(storedContext, storedArgs);
+            if (!timeout) {
+                storedContext = null;
+                storedArgs = [];
+            }
+        }
+        else if (!timeout) {
+            timeout = window.setTimeout(later, remaining);
+        }
+        return result;
+    };
 }
 
-function SignaturePad(canvas, options) {
-  var self = this;
-  var opts = options || {};
-
-  this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
-  this.minWidth = opts.minWidth || 0.5;
-  this.maxWidth = opts.maxWidth || 2.5;
-  this.throttle = 'throttle' in opts ? opts.throttle : 16; // in miliseconds
-  this.minDistance = 'minDistance' in opts ? opts.minDistance : 5;
-
-  if (this.throttle) {
-    this._strokeMoveUpdate = throttle(SignaturePad.prototype._strokeUpdate, this.throttle);
-  } else {
-    this._strokeMoveUpdate = SignaturePad.prototype._strokeUpdate;
-  }
-
-  this.dotSize = opts.dotSize || function () {
-    return (this.minWidth + this.maxWidth) / 2;
-  };
-  this.penColor = opts.penColor || 'black';
-  this.backgroundColor = opts.backgroundColor || 'rgba(0,0,0,0)';
-  this.onBegin = opts.onBegin;
-  this.onEnd = opts.onEnd;
-
-  this._canvas = canvas;
-  this._ctx = canvas.getContext('2d');
-  this.clear();
-
-  // We need add these inline so they are available to unbind while still having
-  // access to 'self' we could use _.bind but it's not worth adding a dependency.
-  this._handleMouseDown = function (event) {
-    if (event.which === 1) {
-      self._mouseButtonDown = true;
-      self._strokeBegin(event);
+class SignaturePad extends SignatureEventTarget {
+    constructor(canvas, options = {}) {
+        super();
+        this.canvas = canvas;
+        this._drawningStroke = false;
+        this._isEmpty = true;
+        this._lastPoints = [];
+        this._data = [];
+        this._lastVelocity = 0;
+        this._lastWidth = 0;
+        this._handleMouseDown = (event) => {
+            if (event.buttons === 1) {
+                this._drawningStroke = true;
+                this._strokeBegin(event);
+            }
+        };
+        this._handleMouseMove = (event) => {
+            if (this._drawningStroke) {
+                this._strokeMoveUpdate(event);
+            }
+        };
+        this._handleMouseUp = (event) => {
+            if (event.buttons === 1 && this._drawningStroke) {
+                this._drawningStroke = false;
+                this._strokeEnd(event);
+            }
+        };
+        this._handleTouchStart = (event) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            if (event.targetTouches.length === 1) {
+                const touch = event.changedTouches[0];
+                this._strokeBegin(touch);
+            }
+        };
+        this._handleTouchMove = (event) => {
+            if (event.cancelable) {
+                event.preventDefault();
+            }
+            const touch = event.targetTouches[0];
+            this._strokeMoveUpdate(touch);
+        };
+        this._handleTouchEnd = (event) => {
+            const wasCanvasTouched = event.target === this.canvas;
+            if (wasCanvasTouched) {
+                if (event.cancelable) {
+                    event.preventDefault();
+                }
+                const touch = event.changedTouches[0];
+                this._strokeEnd(touch);
+            }
+        };
+        this._handlePointerStart = (event) => {
+            this._drawningStroke = true;
+            event.preventDefault();
+            this._strokeBegin(event);
+        };
+        this._handlePointerMove = (event) => {
+            if (this._drawningStroke) {
+                event.preventDefault();
+                this._strokeMoveUpdate(event);
+            }
+        };
+        this._handlePointerEnd = (event) => {
+            if (this._drawningStroke) {
+                event.preventDefault();
+                this._drawningStroke = false;
+                this._strokeEnd(event);
+            }
+        };
+        this.velocityFilterWeight = options.velocityFilterWeight || 0.7;
+        this.minWidth = options.minWidth || 0.5;
+        this.maxWidth = options.maxWidth || 2.5;
+        this.throttle = ('throttle' in options ? options.throttle : 16);
+        this.minDistance = ('minDistance' in options ? options.minDistance : 5);
+        this.dotSize = options.dotSize || 0;
+        this.penColor = options.penColor || 'black';
+        this.backgroundColor = options.backgroundColor || 'rgba(0,0,0,0)';
+        this._strokeMoveUpdate = this.throttle
+            ? throttle(SignaturePad.prototype._strokeUpdate, this.throttle)
+            : SignaturePad.prototype._strokeUpdate;
+        this._ctx = canvas.getContext('2d');
+        this.clear();
+        this.on();
     }
-  };
-
-  this._handleMouseMove = function (event) {
-    if (self._mouseButtonDown) {
-      self._strokeMoveUpdate(event);
+    clear() {
+        const { _ctx: ctx, canvas } = this;
+        ctx.fillStyle = this.backgroundColor;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+        this._data = [];
+        this._reset(this._getPointGroupOptions());
+        this._isEmpty = true;
     }
-  };
-
-  this._handleMouseUp = function (event) {
-    if (event.which === 1 && self._mouseButtonDown) {
-      self._mouseButtonDown = false;
-      self._strokeEnd(event);
+    fromDataURL(dataUrl, options = {}) {
+        return new Promise((resolve, reject) => {
+            const image = new Image();
+            const ratio = options.ratio || window.devicePixelRatio || 1;
+            const width = options.width || this.canvas.width / ratio;
+            const height = options.height || this.canvas.height / ratio;
+            const xOffset = options.xOffset || 0;
+            const yOffset = options.yOffset || 0;
+            this._reset(this._getPointGroupOptions());
+            image.onload = () => {
+                this._ctx.drawImage(image, xOffset, yOffset, width, height);
+                resolve();
+            };
+            image.onerror = (error) => {
+                reject(error);
+            };
+            image.crossOrigin = 'anonymous';
+            image.src = dataUrl;
+            this._isEmpty = false;
+        });
     }
-  };
-
-  this._handleTouchStart = function (event) {
-    if (event.targetTouches.length === 1) {
-      var touch = event.changedTouches[0];
-      self._strokeBegin(touch);
+    toDataURL(type = 'image/png', encoderOptions) {
+        switch (type) {
+            case 'image/svg+xml':
+                if (typeof encoderOptions !== 'object') {
+                    encoderOptions = undefined;
+                }
+                return `data:image/svg+xml;base64,${btoa(this.toSVG(encoderOptions))}`;
+            default:
+                if (typeof encoderOptions !== 'number') {
+                    encoderOptions = undefined;
+                }
+                return this.canvas.toDataURL(type, encoderOptions);
+        }
     }
-  };
-
-  this._handleTouchMove = function (event) {
-    // Prevent scrolling.
-    event.preventDefault();
-
-    var touch = event.targetTouches[0];
-    self._strokeMoveUpdate(touch);
-  };
-
-  this._handleTouchEnd = function (event) {
-    var wasCanvasTouched = event.target === self._canvas;
-    if (wasCanvasTouched) {
-      event.preventDefault();
-      self._strokeEnd(event);
+    on() {
+        this.canvas.style.touchAction = 'none';
+        this.canvas.style.msTouchAction = 'none';
+        this.canvas.style.userSelect = 'none';
+        const isIOS = /Macintosh/.test(navigator.userAgent) && 'ontouchstart' in document;
+        if (window.PointerEvent && !isIOS) {
+            this._handlePointerEvents();
+        }
+        else {
+            this._handleMouseEvents();
+            if ('ontouchstart' in window) {
+                this._handleTouchEvents();
+            }
+        }
     }
-  };
-
-  // Enable mouse and touch event handlers
-  this.on();
-}
-
-// Public methods
-SignaturePad.prototype.clear = function () {
-  var ctx = this._ctx;
-  var canvas = this._canvas;
-
-  ctx.fillStyle = this.backgroundColor;
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  this._data = [];
-  this._reset();
-  this._isEmpty = true;
-};
-
-SignaturePad.prototype.fromDataURL = function (dataUrl) {
-  var _this = this;
-
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
-  var image = new Image();
-  var ratio = options.ratio || window.devicePixelRatio || 1;
-  var width = options.width || this._canvas.width / ratio;
-  var height = options.height || this._canvas.height / ratio;
-
-  this._reset();
-  image.src = dataUrl;
-  image.onload = function () {
-    _this._ctx.drawImage(image, 0, 0, width, height);
-  };
-  this._isEmpty = false;
-};
-
-SignaturePad.prototype.toDataURL = function (type) {
-  var _canvas;
-
-  switch (type) {
-    case 'image/svg+xml':
-      return this._toSVG();
-    default:
-      for (var _len = arguments.length, options = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        options[_key - 1] = arguments[_key];
-      }
-
-      return (_canvas = this._canvas).toDataURL.apply(_canvas, [type].concat(options));
-  }
-};
-
-SignaturePad.prototype.on = function () {
-  this._handleMouseEvents();
-  this._handleTouchEvents();
-};
-
-SignaturePad.prototype.off = function () {
-  this._canvas.removeEventListener('mousedown', this._handleMouseDown);
-  this._canvas.removeEventListener('mousemove', this._handleMouseMove);
-  document.removeEventListener('mouseup', this._handleMouseUp);
-
-  this._canvas.removeEventListener('touchstart', this._handleTouchStart);
-  this._canvas.removeEventListener('touchmove', this._handleTouchMove);
-  this._canvas.removeEventListener('touchend', this._handleTouchEnd);
-};
-
-SignaturePad.prototype.isEmpty = function () {
-  return this._isEmpty;
-};
-
-// Private methods
-SignaturePad.prototype._strokeBegin = function (event) {
-  this._data.push([]);
-  this._reset();
-  this._strokeUpdate(event);
-
-  if (typeof this.onBegin === 'function') {
-    this.onBegin(event);
-  }
-};
-
-SignaturePad.prototype._strokeUpdate = function (event) {
-  var x = event.clientX;
-  var y = event.clientY;
-
-  var point = this._createPoint(x, y);
-  var lastPointGroup = this._data[this._data.length - 1];
-  var lastPoint = lastPointGroup && lastPointGroup[lastPointGroup.length - 1];
-  var isLastPointTooClose = lastPoint && point.distanceTo(lastPoint) < this.minDistance;
-
-  // Skip this point if it's too close to the previous one
-  if (!(lastPoint && isLastPointTooClose)) {
-    var _addPoint = this._addPoint(point),
-        curve = _addPoint.curve,
-        widths = _addPoint.widths;
-
-    if (curve && widths) {
-      this._drawCurve(curve, widths.start, widths.end);
+    off() {
+        this.canvas.style.touchAction = 'auto';
+        this.canvas.style.msTouchAction = 'auto';
+        this.canvas.style.userSelect = 'auto';
+        this.canvas.removeEventListener('pointerdown', this._handlePointerStart);
+        this.canvas.removeEventListener('pointermove', this._handlePointerMove);
+        this.canvas.ownerDocument.removeEventListener('pointerup', this._handlePointerEnd);
+        this.canvas.removeEventListener('mousedown', this._handleMouseDown);
+        this.canvas.removeEventListener('mousemove', this._handleMouseMove);
+        this.canvas.ownerDocument.removeEventListener('mouseup', this._handleMouseUp);
+        this.canvas.removeEventListener('touchstart', this._handleTouchStart);
+        this.canvas.removeEventListener('touchmove', this._handleTouchMove);
+        this.canvas.removeEventListener('touchend', this._handleTouchEnd);
     }
-
-    this._data[this._data.length - 1].push({
-      x: point.x,
-      y: point.y,
-      time: point.time,
-      color: this.penColor
-    });
-  }
-};
-
-SignaturePad.prototype._strokeEnd = function (event) {
-  var canDrawCurve = this.points.length > 2;
-  var point = this.points[0]; // Point instance
-
-  if (!canDrawCurve && point) {
-    this._drawDot(point);
-  }
-
-  if (point) {
-    var lastPointGroup = this._data[this._data.length - 1];
-    var lastPoint = lastPointGroup[lastPointGroup.length - 1]; // plain object
-
-    // When drawing a dot, there's only one point in a group, so without this check
-    // such group would end up with exactly the same 2 points.
-    if (!point.equals(lastPoint)) {
-      lastPointGroup.push({
-        x: point.x,
-        y: point.y,
-        time: point.time,
-        color: this.penColor
-      });
+    isEmpty() {
+        return this._isEmpty;
     }
-  }
-
-  if (typeof this.onEnd === 'function') {
-    this.onEnd(event);
-  }
-};
-
-SignaturePad.prototype._handleMouseEvents = function () {
-  this._mouseButtonDown = false;
-
-  this._canvas.addEventListener('mousedown', this._handleMouseDown);
-  this._canvas.addEventListener('mousemove', this._handleMouseMove);
-  document.addEventListener('mouseup', this._handleMouseUp);
-};
-
-SignaturePad.prototype._handleTouchEvents = function () {
-  // Pass touch events to canvas element on mobile IE11 and Edge.
-  this._canvas.style.msTouchAction = 'none';
-  this._canvas.style.touchAction = 'none';
-
-  this._canvas.addEventListener('touchstart', this._handleTouchStart);
-  this._canvas.addEventListener('touchmove', this._handleTouchMove);
-  this._canvas.addEventListener('touchend', this._handleTouchEnd);
-};
-
-SignaturePad.prototype._reset = function () {
-  this.points = [];
-  this._lastVelocity = 0;
-  this._lastWidth = (this.minWidth + this.maxWidth) / 2;
-  this._ctx.fillStyle = this.penColor;
-};
-
-SignaturePad.prototype._createPoint = function (x, y, time) {
-  var rect = this._canvas.getBoundingClientRect();
-
-  return new Point(x - rect.left, y - rect.top, time || new Date().getTime());
-};
-
-SignaturePad.prototype._addPoint = function (point) {
-  var points = this.points;
-  var tmp = void 0;
-
-  points.push(point);
-
-  if (points.length > 2) {
-    // To reduce the initial lag make it work with 3 points
-    // by copying the first point to the beginning.
-    if (points.length === 3) points.unshift(points[0]);
-
-    tmp = this._calculateCurveControlPoints(points[0], points[1], points[2]);
-    var c2 = tmp.c2;
-    tmp = this._calculateCurveControlPoints(points[1], points[2], points[3]);
-    var c3 = tmp.c1;
-    var curve = new Bezier(points[1], c2, c3, points[2]);
-    var widths = this._calculateCurveWidths(curve);
-
-    // Remove the first element from the list,
-    // so that we always have no more than 4 points in points array.
-    points.shift();
-
-    return { curve: curve, widths: widths };
-  }
-
-  return {};
-};
-
-SignaturePad.prototype._calculateCurveControlPoints = function (s1, s2, s3) {
-  var dx1 = s1.x - s2.x;
-  var dy1 = s1.y - s2.y;
-  var dx2 = s2.x - s3.x;
-  var dy2 = s2.y - s3.y;
-
-  var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 };
-  var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 };
-
-  var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1);
-  var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2);
-
-  var dxm = m1.x - m2.x;
-  var dym = m1.y - m2.y;
-
-  var k = l2 / (l1 + l2);
-  var cm = { x: m2.x + dxm * k, y: m2.y + dym * k };
-
-  var tx = s2.x - cm.x;
-  var ty = s2.y - cm.y;
-
-  return {
-    c1: new Point(m1.x + tx, m1.y + ty),
-    c2: new Point(m2.x + tx, m2.y + ty)
-  };
-};
-
-SignaturePad.prototype._calculateCurveWidths = function (curve) {
-  var startPoint = curve.startPoint;
-  var endPoint = curve.endPoint;
-  var widths = { start: null, end: null };
-
-  var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) + (1 - this.velocityFilterWeight) * this._lastVelocity;
-
-  var newWidth = this._strokeWidth(velocity);
-
-  widths.start = this._lastWidth;
-  widths.end = newWidth;
-
-  this._lastVelocity = velocity;
-  this._lastWidth = newWidth;
-
-  return widths;
-};
-
-SignaturePad.prototype._strokeWidth = function (velocity) {
-  return Math.max(this.maxWidth / (velocity + 1), this.minWidth);
-};
-
-SignaturePad.prototype._drawPoint = function (x, y, size) {
-  var ctx = this._ctx;
-
-  ctx.moveTo(x, y);
-  ctx.arc(x, y, size, 0, 2 * Math.PI, false);
-  this._isEmpty = false;
-};
-
-SignaturePad.prototype._drawCurve = function (curve, startWidth, endWidth) {
-  var ctx = this._ctx;
-  var widthDelta = endWidth - startWidth;
-  var drawSteps = Math.floor(curve.length());
-
-  ctx.beginPath();
-
-  for (var i = 0; i < drawSteps; i += 1) {
-    // Calculate the Bezier (x, y) coordinate for this step.
-    var t = i / drawSteps;
-    var tt = t * t;
-    var ttt = tt * t;
-    var u = 1 - t;
-    var uu = u * u;
-    var uuu = uu * u;
-
-    var x = uuu * curve.startPoint.x;
-    x += 3 * uu * t * curve.control1.x;
-    x += 3 * u * tt * curve.control2.x;
-    x += ttt * curve.endPoint.x;
-
-    var y = uuu * curve.startPoint.y;
-    y += 3 * uu * t * curve.control1.y;
-    y += 3 * u * tt * curve.control2.y;
-    y += ttt * curve.endPoint.y;
-
-    var width = startWidth + ttt * widthDelta;
-    this._drawPoint(x, y, width);
-  }
-
-  ctx.closePath();
-  ctx.fill();
-};
-
-SignaturePad.prototype._drawDot = function (point) {
-  var ctx = this._ctx;
-  var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
-
-  ctx.beginPath();
-  this._drawPoint(point.x, point.y, width);
-  ctx.closePath();
-  ctx.fill();
-};
-
-SignaturePad.prototype._fromData = function (pointGroups, drawCurve, drawDot) {
-  for (var i = 0; i < pointGroups.length; i += 1) {
-    var group = pointGroups[i];
-
-    if (group.length > 1) {
-      for (var j = 0; j < group.length; j += 1) {
-        var rawPoint = group[j];
-        var point = new Point(rawPoint.x, rawPoint.y, rawPoint.time);
-        var color = rawPoint.color;
-
-        if (j === 0) {
-          // First point in a group. Nothing to draw yet.
-
-          // All points in the group have the same color, so it's enough to set
-          // penColor just at the beginning.
-          this.penColor = color;
-          this._reset();
-
-          this._addPoint(point);
-        } else if (j !== group.length - 1) {
-          // Middle point in a group.
-          var _addPoint2 = this._addPoint(point),
-              curve = _addPoint2.curve,
-              widths = _addPoint2.widths;
-
-          if (curve && widths) {
-            drawCurve(curve, widths, color);
-          }
-        } else {
-          // Last point in a group. Do nothing.
-        }
-      }
-    } else {
-      this._reset();
-      var _rawPoint = group[0];
-      drawDot(_rawPoint);
+    fromData(pointGroups, { clear = true } = {}) {
+        if (clear) {
+            this.clear();
+        }
+        this._fromData(pointGroups, this._drawCurve.bind(this), this._drawDot.bind(this));
+        this._data = this._data.concat(pointGroups);
     }
-  }
-};
-
-SignaturePad.prototype._toSVG = function () {
-  var _this2 = this;
-
-  var pointGroups = this._data;
-  var canvas = this._canvas;
-  var ratio = Math.max(window.devicePixelRatio || 1, 1);
-  var minX = 0;
-  var minY = 0;
-  var maxX = canvas.width / ratio;
-  var maxY = canvas.height / ratio;
-  var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-
-  svg.setAttributeNS(null, 'width', canvas.width);
-  svg.setAttributeNS(null, 'height', canvas.height);
-
-  this._fromData(pointGroups, function (curve, widths, color) {
-    var path = document.createElement('path');
-
-    // Need to check curve for NaN values, these pop up when drawing
-    // lines on the canvas that are not continuous. E.g. Sharp corners
-    // or stopping mid-stroke and than continuing without lifting mouse.
-    if (!isNaN(curve.control1.x) && !isNaN(curve.control1.y) && !isNaN(curve.control2.x) && !isNaN(curve.control2.y)) {
-      var attr = 'M ' + curve.startPoint.x.toFixed(3) + ',' + curve.startPoint.y.toFixed(3) + ' ' + ('C ' + curve.control1.x.toFixed(3) + ',' + curve.control1.y.toFixed(3) + ' ') + (curve.control2.x.toFixed(3) + ',' + curve.control2.y.toFixed(3) + ' ') + (curve.endPoint.x.toFixed(3) + ',' + curve.endPoint.y.toFixed(3));
-
-      path.setAttribute('d', attr);
-      path.setAttribute('stroke-width', (widths.end * 2.25).toFixed(3));
-      path.setAttribute('stroke', color);
-      path.setAttribute('fill', 'none');
-      path.setAttribute('stroke-linecap', 'round');
-
-      svg.appendChild(path);
+    toData() {
+        return this._data;
     }
-  }, function (rawPoint) {
-    var circle = document.createElement('circle');
-    var dotSize = typeof _this2.dotSize === 'function' ? _this2.dotSize() : _this2.dotSize;
-    circle.setAttribute('r', dotSize);
-    circle.setAttribute('cx', rawPoint.x);
-    circle.setAttribute('cy', rawPoint.y);
-    circle.setAttribute('fill', rawPoint.color);
-
-    svg.appendChild(circle);
-  });
-
-  var prefix = 'data:image/svg+xml;base64,';
-  var header = '<svg' + ' xmlns="http://www.w3.org/2000/svg"' + ' xmlns:xlink="http://www.w3.org/1999/xlink"' + (' viewBox="' + minX + ' ' + minY + ' ' + maxX + ' ' + maxY + '"') + (' width="' + maxX + '"') + (' height="' + maxY + '"') + '>';
-  var body = svg.innerHTML;
-
-  // IE hack for missing innerHTML property on SVGElement
-  if (body === undefined) {
-    var dummy = document.createElement('dummy');
-    var nodes = svg.childNodes;
-    dummy.innerHTML = '';
-
-    for (var i = 0; i < nodes.length; i += 1) {
-      dummy.appendChild(nodes[i].cloneNode(true));
+    _getPointGroupOptions(group) {
+        return {
+            penColor: group && 'penColor' in group ? group.penColor : this.penColor,
+            dotSize: group && 'dotSize' in group ? group.dotSize : this.dotSize,
+            minWidth: group && 'minWidth' in group ? group.minWidth : this.minWidth,
+            maxWidth: group && 'maxWidth' in group ? group.maxWidth : this.maxWidth,
+            velocityFilterWeight: group && 'velocityFilterWeight' in group
+                ? group.velocityFilterWeight
+                : this.velocityFilterWeight,
+        };
     }
+    _strokeBegin(event) {
+        this.dispatchEvent(new CustomEvent('beginStroke', { detail: event }));
+        const pointGroupOptions = this._getPointGroupOptions();
+        const newPointGroup = Object.assign(Object.assign({}, pointGroupOptions), { points: [] });
+        this._data.push(newPointGroup);
+        this._reset(pointGroupOptions);
+        this._strokeUpdate(event);
+    }
+    _strokeUpdate(event) {
+        if (this._data.length === 0) {
+            this._strokeBegin(event);
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('beforeUpdateStroke', { detail: event }));
+        const x = event.clientX;
+        const y = event.clientY;
+        const pressure = event.pressure !== undefined
+            ? event.pressure
+            : event.force !== undefined
+                ? event.force
+                : 0;
+        const point = this._createPoint(x, y, pressure);
+        const lastPointGroup = this._data[this._data.length - 1];
+        const lastPoints = lastPointGroup.points;
+        const lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
+        const isLastPointTooClose = lastPoint
+            ? point.distanceTo(lastPoint) <= this.minDistance
+            : false;
+        const pointGroupOptions = this._getPointGroupOptions(lastPointGroup);
+        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
+            const curve = this._addPoint(point, pointGroupOptions);
+            if (!lastPoint) {
+                this._drawDot(point, pointGroupOptions);
+            }
+            else if (curve) {
+                this._drawCurve(curve, pointGroupOptions);
+            }
+            lastPoints.push({
+                time: point.time,
+                x: point.x,
+                y: point.y,
+                pressure: point.pressure,
+            });
+        }
+        this.dispatchEvent(new CustomEvent('afterUpdateStroke', { detail: event }));
+    }
+    _strokeEnd(event) {
+        this._strokeUpdate(event);
+        this.dispatchEvent(new CustomEvent('endStroke', { detail: event }));
+    }
+    _handlePointerEvents() {
+        this._drawningStroke = false;
+        this.canvas.addEventListener('pointerdown', this._handlePointerStart);
+        this.canvas.addEventListener('pointermove', this._handlePointerMove);
+        this.canvas.ownerDocument.addEventListener('pointerup', this._handlePointerEnd);
+    }
+    _handleMouseEvents() {
+        this._drawningStroke = false;
+        this.canvas.addEventListener('mousedown', this._handleMouseDown);
+        this.canvas.addEventListener('mousemove', this._handleMouseMove);
+        this.canvas.ownerDocument.addEventListener('mouseup', this._handleMouseUp);
+    }
+    _handleTouchEvents() {
+        this.canvas.addEventListener('touchstart', this._handleTouchStart);
+        this.canvas.addEventListener('touchmove', this._handleTouchMove);
+        this.canvas.addEventListener('touchend', this._handleTouchEnd);
+    }
+    _reset(options) {
+        this._lastPoints = [];
+        this._lastVelocity = 0;
+        this._lastWidth = (options.minWidth + options.maxWidth) / 2;
+        this._ctx.fillStyle = options.penColor;
+    }
+    _createPoint(x, y, pressure) {
+        const rect = this.canvas.getBoundingClientRect();
+        return new Point(x - rect.left, y - rect.top, pressure, new Date().getTime());
+    }
+    _addPoint(point, options) {
+        const { _lastPoints } = this;
+        _lastPoints.push(point);
+        if (_lastPoints.length > 2) {
+            if (_lastPoints.length === 3) {
+                _lastPoints.unshift(_lastPoints[0]);
+            }
+            const widths = this._calculateCurveWidths(_lastPoints[1], _lastPoints[2], options);
+            const curve = Bezier.fromPoints(_lastPoints, widths);
+            _lastPoints.shift();
+            return curve;
+        }
+        return null;
+    }
+    _calculateCurveWidths(startPoint, endPoint, options) {
+        const velocity = options.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
+            (1 - options.velocityFilterWeight) * this._lastVelocity;
+        const newWidth = this._strokeWidth(velocity, options);
+        const widths = {
+            end: newWidth,
+            start: this._lastWidth,
+        };
+        this._lastVelocity = velocity;
+        this._lastWidth = newWidth;
+        return widths;
+    }
+    _strokeWidth(velocity, options) {
+        return Math.max(options.maxWidth / (velocity + 1), options.minWidth);
+    }
+    _drawCurveSegment(x, y, width) {
+        const ctx = this._ctx;
+        ctx.moveTo(x, y);
+        ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+        this._isEmpty = false;
+    }
+    _drawCurve(curve, options) {
+        const ctx = this._ctx;
+        const widthDelta = curve.endWidth - curve.startWidth;
+        const drawSteps = Math.ceil(curve.length()) * 2;
+        ctx.beginPath();
+        ctx.fillStyle = options.penColor;
+        for (let i = 0; i < drawSteps; i += 1) {
+            const t = i / drawSteps;
+            const tt = t * t;
+            const ttt = tt * t;
+            const u = 1 - t;
+            const uu = u * u;
+            const uuu = uu * u;
+            let x = uuu * curve.startPoint.x;
+            x += 3 * uu * t * curve.control1.x;
+            x += 3 * u * tt * curve.control2.x;
+            x += ttt * curve.endPoint.x;
+            let y = uuu * curve.startPoint.y;
+            y += 3 * uu * t * curve.control1.y;
+            y += 3 * u * tt * curve.control2.y;
+            y += ttt * curve.endPoint.y;
+            const width = Math.min(curve.startWidth + ttt * widthDelta, options.maxWidth);
+            this._drawCurveSegment(x, y, width);
+        }
+        ctx.closePath();
+        ctx.fill();
+    }
+    _drawDot(point, options) {
+        const ctx = this._ctx;
+        const width = options.dotSize > 0
+            ? options.dotSize
+            : (options.minWidth + options.maxWidth) / 2;
+        ctx.beginPath();
+        this._drawCurveSegment(point.x, point.y, width);
+        ctx.closePath();
+        ctx.fillStyle = options.penColor;
+        ctx.fill();
+    }
+    _fromData(pointGroups, drawCurve, drawDot) {
+        for (const group of pointGroups) {
+            const { points } = group;
+            const pointGroupOptions = this._getPointGroupOptions(group);
+            if (points.length > 1) {
+                for (let j = 0; j < points.length; j += 1) {
+                    const basicPoint = points[j];
+                    const point = new Point(basicPoint.x, basicPoint.y, basicPoint.pressure, basicPoint.time);
+                    if (j === 0) {
+                        this._reset(pointGroupOptions);
+                    }
+                    const curve = this._addPoint(point, pointGroupOptions);
+                    if (curve) {
+                        drawCurve(curve, pointGroupOptions);
+                    }
+                }
+            }
+            else {
+                this._reset(pointGroupOptions);
+                drawDot(points[0], pointGroupOptions);
+            }
+        }
+    }
+    toSVG({ includeBackgroundColor = false } = {}) {
+        const pointGroups = this._data;
+        const ratio = Math.max(window.devicePixelRatio || 1, 1);
+        const minX = 0;
+        const minY = 0;
+        const maxX = this.canvas.width / ratio;
+        const maxY = this.canvas.height / ratio;
+        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
+        svg.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
+        svg.setAttribute('viewBox', `${minX} ${minY} ${maxX} ${maxY}`);
+        svg.setAttribute('width', maxX.toString());
+        svg.setAttribute('height', maxY.toString());
+        if (includeBackgroundColor && this.backgroundColor) {
+            const rect = document.createElement('rect');
+            rect.setAttribute('width', '100%');
+            rect.setAttribute('height', '100%');
+            rect.setAttribute('fill', this.backgroundColor);
+            svg.appendChild(rect);
+        }
+        this._fromData(pointGroups, (curve, { penColor }) => {
+            const path = document.createElement('path');
+            if (!isNaN(curve.control1.x) &&
+                !isNaN(curve.control1.y) &&
+                !isNaN(curve.control2.x) &&
+                !isNaN(curve.control2.y)) {
+                const attr = `M ${curve.startPoint.x.toFixed(3)},${curve.startPoint.y.toFixed(3)} ` +
+                    `C ${curve.control1.x.toFixed(3)},${curve.control1.y.toFixed(3)} ` +
+                    `${curve.control2.x.toFixed(3)},${curve.control2.y.toFixed(3)} ` +
+                    `${curve.endPoint.x.toFixed(3)},${curve.endPoint.y.toFixed(3)}`;
+                path.setAttribute('d', attr);
+                path.setAttribute('stroke-width', (curve.endWidth * 2.25).toFixed(3));
+                path.setAttribute('stroke', penColor);
+                path.setAttribute('fill', 'none');
+                path.setAttribute('stroke-linecap', 'round');
+                svg.appendChild(path);
+            }
+        }, (point, { penColor, dotSize, minWidth, maxWidth }) => {
+            const circle = document.createElement('circle');
+            const size = dotSize > 0 ? dotSize : (minWidth + maxWidth) / 2;
+            circle.setAttribute('r', size.toString());
+            circle.setAttribute('cx', point.x.toString());
+            circle.setAttribute('cy', point.y.toString());
+            circle.setAttribute('fill', penColor);
+            svg.appendChild(circle);
+        });
+        return svg.outerHTML;
+    }
+}
 
-    body = dummy.innerHTML;
-  }
-
-  var footer = '</svg>';
-  var data = header + body + footer;
-
-  return prefix + btoa(data);
-};
-
-SignaturePad.prototype.fromData = function (pointGroups) {
-  var _this3 = this;
-
-  this.clear();
-
-  this._fromData(pointGroups, function (curve, widths) {
-    return _this3._drawCurve(curve, widths.start, widths.end);
-  }, function (rawPoint) {
-    return _this3._drawDot(rawPoint);
-  });
-
-  this._data = pointGroups;
-};
-
-SignaturePad.prototype.toData = function () {
-  return this._data;
-};
 
-/* harmony default export */ __webpack_exports__["default"] = (SignaturePad);
+//# sourceMappingURL=signature_pad.js.map
 
 
 /***/ }),
@@ -1005,11 +963,15 @@ var Action = /** @class */ (function (_super) {
         if (!!_this.locTitleName) {
             _this.locTitleChanged();
         }
+        _this.registerFunctionOnPropertyValueChanged("_title", function () {
+            _this.raiseUpdate(true);
+        });
         _this.locStrChangedInPopupModel();
         return _this;
     }
-    Action.prototype.raiseUpdate = function () {
-        this.updateCallback && this.updateCallback();
+    Action.prototype.raiseUpdate = function (isResetInitialized) {
+        if (isResetInitialized === void 0) { isResetInitialized = false; }
+        this.updateCallback && this.updateCallback(isResetInitialized);
     };
     Action.prototype.createLocTitle = function () {
         return this.createLocalizableString("title", this, true);
@@ -1225,7 +1187,7 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
     }
     AdaptiveActionContainer.prototype.hideItemsGreaterN = function (visibleItemsCount) {
         var actionsToHide = this.visibleActions.filter(function (action) { return !action.disableHide; });
-        visibleItemsCount = Math.max(visibleItemsCount, this.minVisibleItemsCount) - (this.visibleActions.length - actionsToHide.length);
+        visibleItemsCount = Math.max(visibleItemsCount, this.minVisibleItemsCount - (this.visibleActions.length - actionsToHide.length));
         var hiddenItems = [];
         actionsToHide.forEach(function (item) {
             if (visibleItemsCount <= 0) {
@@ -1237,7 +1199,8 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
         this.hiddenItemsListModel.setItems(hiddenItems);
     };
     AdaptiveActionContainer.prototype.getVisibleItemsCount = function (availableSize) {
-        var itemsSizes = this.visibleActions.map(function (item) { return item.minDimension; });
+        this.visibleActions.filter(function (action) { return action.disableHide; }).forEach(function (action) { return availableSize -= action.minDimension; });
+        var itemsSizes = this.visibleActions.filter(function (action) { return !action.disableHide; }).map(function (item) { return item.minDimension; });
         var currSize = 0;
         for (var i = 0; i < itemsSizes.length; i++) {
             currSize += itemsSizes[i];
@@ -1282,12 +1245,12 @@ var AdaptiveActionContainer = /** @class */ (function (_super) {
     };
     AdaptiveActionContainer.prototype.onSet = function () {
         var _this = this;
-        this.actions.forEach(function (action) { return action.updateCallback = function () { return _this.raiseUpdate(false); }; });
+        this.actions.forEach(function (action) { return action.updateCallback = function (isResetInitialized) { return _this.raiseUpdate(isResetInitialized); }; });
         _super.prototype.onSet.call(this);
     };
     AdaptiveActionContainer.prototype.onPush = function (item) {
         var _this = this;
-        item.updateCallback = function () { return _this.raiseUpdate(false); };
+        item.updateCallback = function (isResetInitialized) { return _this.raiseUpdate(isResetInitialized); };
         _super.prototype.onPush.call(this, item);
     };
     AdaptiveActionContainer.prototype.getRenderedActions = function () {
@@ -1557,6 +1520,9 @@ var ActionContainer = /** @class */ (function (_super) {
             }
         })
     ], ActionContainer.prototype, "actions", void 0);
+    __decorate([
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({})
+    ], ActionContainer.prototype, "containerCss", void 0);
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({ defaultValue: false })
     ], ActionContainer.prototype, "isEmpty", void 0);
@@ -2027,8 +1993,9 @@ var Base = /** @class */ (function () {
      * @param propName A property name.
      */
     Base.prototype.getPropertyByName = function (propName) {
-        if (!this.classMetaData) {
-            this.classMetaData = _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].findClass(this.getType());
+        var type = this.getType();
+        if (!this.classMetaData || this.classMetaData.name !== type) {
+            this.classMetaData = _jsonobject__WEBPACK_IMPORTED_MODULE_2__["Serializer"].findClass(type);
         }
         return !!this.classMetaData ? this.classMetaData.findProperty(propName) : null;
     };
@@ -5201,7 +5168,18 @@ var defaultV2Css = {
         panelWrapperInRow: "sd-paneldynamic__panel-wrapper--in-row",
         progressBtnIcon: "icon-progressbuttonv2",
         noEntriesPlaceholder: "sd-paneldynamic__placeholder sd-question__placeholder",
-        compact: "sd-element--with-frame sd-element--compact"
+        compact: "sd-element--with-frame sd-element--compact",
+        tabsRoot: "sd-tabs-toolbar",
+        tabsLeft: "sd-tabs-toolbar--left",
+        tabsRight: "sd-tabs-toolbar--right",
+        tabsCenter: "sd-tabs-toolbar--center",
+        tabs: {
+            item: "sd-tab-item",
+            itemPressed: "sd-tab-item--pressed",
+            itemAsIcon: "sd-tab-item--icon",
+            itemIcon: "sd-tab-item__icon",
+            itemTitle: "sd-tab-item__title"
+        }
     },
     progress: "sd-progress sd-body__progress",
     progressTop: "sd-body__progress--top",
@@ -5722,12 +5700,13 @@ var defaultV2Css = {
         other: "sd-input sd-comment sd-selectbase__other",
         onError: "sd-input--error",
         label: "sd-selectbase__label",
-        item: "sd-item sd-radio sd-selectbase__item",
-        itemDisabled: "sd-item--disabled sd-radio--disabled",
-        itemChecked: "sd-item--checked sd-radio--checked",
-        itemHover: "sd-item--allowhover sd-radio--allowhover",
-        itemControl: "sd-visuallyhidden sd-item__control sd-radio__control",
-        itemDecorator: "sd-item__svg sd-radio__svg",
+        itemSvgIconId: "#icon-v2check",
+        item: "sd-item sd-checkbox sd-selectbase__item",
+        itemDisabled: "sd-item--disabled sd-checkbox--disabled",
+        itemChecked: "sd-item--checked sd-checkbox--checked",
+        itemHover: "sd-item--allowhover sd-checkbox--allowhover",
+        itemControl: "sd-visuallyhidden sd-item__control sd-checkbox__control",
+        itemDecorator: "sd-item__svg sd-checkbox__svg",
         cleanButton: "sd-tagbox_clean-button sd-dropdown_clean-button",
         cleanButtonSvg: "sd-tagbox_clean-button-svg sd-dropdown_clean-button-svg",
         cleanButtonIconId: "icon-clear",
@@ -6899,6 +6878,10 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    DragDropMatrixRows.prototype.onStartDrag = function () {
+        this.restoreUserSelectValue = document.body.style.userSelect;
+        document.body.style.userSelect = "none";
+    };
     DragDropMatrixRows.prototype.createDraggedElementShortcut = function (text, draggedElementNode, event) {
         var _this = this;
         var draggedElementShortcut = document.createElement("div");
@@ -7005,6 +6988,7 @@ var DragDropMatrixRows = /** @class */ (function (_super) {
         this.parentElement.clearOnDrop();
         this.fromIndex = null;
         this.toIndex = null;
+        document.body.style.userSelect = this.restoreUserSelectValue || "initial";
         _super.prototype.clear.call(this);
     };
     return DragDropMatrixRows;
@@ -7191,13 +7175,14 @@ var DragDropRankingChoices = /** @class */ (function (_super) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DropdownListModel", function() { return DropdownListModel; });
 /* harmony import */ var _base__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./base */ "./src/base.ts");
-/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
-/* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./list */ "./src/list.ts");
-/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./popup */ "./src/popup.ts");
-/* harmony import */ var _question_dropdown__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./question_dropdown */ "./src/question_dropdown.ts");
-/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
-/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
-/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
+/* harmony import */ var _itemvalue__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./itemvalue */ "./src/itemvalue.ts");
+/* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
+/* harmony import */ var _list__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./list */ "./src/list.ts");
+/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./popup */ "./src/popup.ts");
+/* harmony import */ var _question_dropdown__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./question_dropdown */ "./src/question_dropdown.ts");
+/* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
+/* harmony import */ var _utils_devices__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./utils/devices */ "./src/utils/devices.ts");
+/* harmony import */ var _utils_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./utils/utils */ "./src/utils/utils.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
@@ -7227,6 +7212,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 
+
 var DropdownListModel = /** @class */ (function (_super) {
     __extends(DropdownListModel, _super);
     function DropdownListModel(question, onSelectionChanged) {
@@ -7247,13 +7233,9 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         };
         question.onPropertyChanged.add(function (sender, options) {
-            if (options.name == "value") {
-                _this.showInputFieldComponent = _this.question.showInputFieldComponent;
-                _this.showSelectedItemLocText = _this.question.showSelectedItemLocText;
-            }
+            _this.onPropertyChangedHandler(sender, options);
         });
         _this.showInputFieldComponent = _this.question.showInputFieldComponent;
-        _this.showSelectedItemLocText = _this.question.showSelectedItemLocText;
         _this.listModel = _this.createListModel();
         _this.updateAfterListModelCreated(_this.listModel);
         _this.setSearchEnabled(_this.question.searchEnabled);
@@ -7269,7 +7251,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         configurable: true
     });
     DropdownListModel.prototype.getFocusFirstInputSelector = function () {
-        if (_utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"]) {
+        if (_utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"]) {
             return this.isValueEmpty(this.question.value) ? this.itemSelector : this.selectedItemSelector;
         }
         else {
@@ -7317,12 +7299,12 @@ var DropdownListModel = /** @class */ (function (_super) {
     };
     DropdownListModel.prototype.createPopup = function () {
         var _this = this;
-        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_3__["PopupModel"]("sv-list", { model: this.listModel }, "bottom", "center", false);
-        this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"] ? "overlay" : "popup";
+        this._popupModel = new _popup__WEBPACK_IMPORTED_MODULE_4__["PopupModel"]("sv-list", { model: this.listModel }, "bottom", "center", false);
+        this._popupModel.displayMode = _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"] ? "overlay" : "popup";
         this._popupModel.positionMode = "fixed";
         this._popupModel.isFocusedContainer = false;
-        this._popupModel.isFocusedContent = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
-        this._popupModel.setWidthByTarget = !_utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
+        this._popupModel.isFocusedContent = _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"];
+        this._popupModel.setWidthByTarget = !_utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"];
         this.updatePopupFocusFirstInputSelector();
         this.listModel.registerPropertyChangedHandlers(["showFilter"], function () {
             _this.updatePopupFocusFirstInputSelector();
@@ -7389,7 +7371,7 @@ var DropdownListModel = /** @class */ (function (_super) {
                 _this._popupModel.toggleVisibility();
             };
         }
-        var res = new _list__WEBPACK_IMPORTED_MODULE_2__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
+        var res = new _list__WEBPACK_IMPORTED_MODULE_3__["ListModel"](visibleItems, _onSelectionChanged, false, undefined, this.question.choicesLazyLoadEnabled ? this.listModelFilterStringChanged : undefined, this.listElementId);
         res.renderElements = false;
         res.forceShowFilter = true;
         res.areSameItemsCallback = function (item1, item2) {
@@ -7409,7 +7391,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         model.isAllDataLoaded = !this.question.choicesLazyLoadEnabled;
     };
     DropdownListModel.prototype.updateCssClasses = function (popupCssClass, listCssClasses) {
-        this.popupModel.cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_5__["CssClassBuilder"]().append(popupCssClass).append(this.popupCssClasses).toString();
+        this.popupModel.cssClass = new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_6__["CssClassBuilder"]().append(popupCssClass).append(this.popupCssClasses).toString();
         this.listModel.cssClasses = listCssClasses;
     };
     DropdownListModel.prototype.resetFilterString = function () {
@@ -7480,7 +7462,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         set: function (val) {
             this.inputString = val;
             this.filterString = val;
-            this.applyHintString(this.listModel.focusedItem);
+            this.applyHintString(this.listModel.focusedItem || this.question.selectedItem);
         },
         enumerable: false,
         configurable: true
@@ -7579,14 +7561,14 @@ var DropdownListModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(DropdownListModel.prototype, "inputMode", {
         get: function () {
-            return _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"] ? "none" : "text";
+            return _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"] ? "none" : "text";
         },
         enumerable: false,
         configurable: true
     });
     DropdownListModel.prototype.setSearchEnabled = function (newValue) {
-        this.listModel.searchEnabled = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
-        this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"];
+        this.listModel.searchEnabled = _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"];
+        this.listModel.showSearchClearButton = _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"];
         this.searchEnabled = newValue;
     };
     DropdownListModel.prototype.updateItems = function () {
@@ -7602,6 +7584,11 @@ var DropdownListModel = /** @class */ (function (_super) {
             }
         }
     };
+    DropdownListModel.prototype.onPropertyChangedHandler = function (sender, options) {
+        if (options.name == "value") {
+            this.showInputFieldComponent = this.question.showInputFieldComponent;
+        }
+    };
     DropdownListModel.prototype.focusItemOnClickAndPopup = function () {
         if (this._popupModel.isVisible && this.question.value)
             this.changeSelectionWithKeyboard(false);
@@ -7620,11 +7607,18 @@ var DropdownListModel = /** @class */ (function (_super) {
     DropdownListModel.prototype.changeSelectionWithKeyboard = function (reverse) {
         var _a;
         var focusedItem = this.listModel.focusedItem;
-        if (reverse) {
-            this.listModel.focusPrevVisibleItem();
+        if (!focusedItem && this.question.selectedItem) {
+            if (_itemvalue__WEBPACK_IMPORTED_MODULE_1__["ItemValue"].getItemByValue(this.question.choices, this.question.value)) {
+                this.listModel.focusedItem = this.question.selectedItem;
+            }
         }
         else {
-            this.listModel.focusNextVisibleItem();
+            if (reverse) {
+                this.listModel.focusPrevVisibleItem();
+            }
+            else {
+                this.listModel.focusNextVisibleItem();
+            }
         }
         this.beforeScrollToFocusedItem(focusedItem);
         this.scrollToFocusedItem();
@@ -7671,7 +7665,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             event.stopPropagation();
         }
         else if (this.popupModel.isVisible && (event.keyCode === 13 || event.keyCode === 32 && (!this.question.searchEnabled || !this.inputString))) {
-            if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_4__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
+            if (event.keyCode === 13 && this.question.searchEnabled && !this.inputString && this.question instanceof _question_dropdown__WEBPACK_IMPORTED_MODULE_5__["QuestionDropdownModel"] && !this._markdownMode && this.question.value) {
                 this._popupModel.isVisible = false;
                 this.onClear(event);
                 this.question.survey.questionEditFinishCallback(this.question, event);
@@ -7702,7 +7696,7 @@ var DropdownListModel = /** @class */ (function (_super) {
             if (event.keyCode === 32 && this.question.searchEnabled) {
                 return;
             }
-            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_7__["doKey2ClickUp"])(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
+            Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["doKey2ClickUp"])(event, { processEsc: false, disableTabStop: this.question.isInputReadOnly });
         }
     };
     DropdownListModel.prototype.onEscape = function () {
@@ -7716,24 +7710,25 @@ var DropdownListModel = /** @class */ (function (_super) {
         }
     };
     DropdownListModel.prototype.onBlur = function (event) {
-        if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_6__["IsTouch"]) {
+        this.focused = false;
+        if (this.popupModel.isVisible && _utils_devices__WEBPACK_IMPORTED_MODULE_7__["IsTouch"]) {
             this._popupModel.isVisible = true;
             return;
         }
-        if (this.popupModel.isVisible && !!this.filterString) {
-            this.listModel.selectFocusedItem();
-        }
         this.resetFilterString();
         this.inputString = null;
         this.hintString = "";
-        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_7__["doKey2ClickBlur"])(event);
+        Object(_utils_utils__WEBPACK_IMPORTED_MODULE_8__["doKey2ClickBlur"])(event);
         this._popupModel.isVisible = false;
         event.stopPropagation();
     };
     DropdownListModel.prototype.onFocus = function (event) {
+        this.focused = true;
         this.setInputStringFromSelectedItem(this.question.selectedItem);
     };
     DropdownListModel.prototype.setInputStringFromSelectedItem = function (newValue) {
+        if (!this.focused)
+            return;
         if (this.question.searchEnabled && !!newValue) {
             this.applyInputString(newValue);
         }
@@ -7754,10 +7749,10 @@ var DropdownListModel = /** @class */ (function (_super) {
         this.listModel.scrollToFocusedItem();
     };
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: true })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: true })
     ], DropdownListModel.prototype, "searchEnabled", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: "",
             onSet: function (_, target) {
                 target.onSetFilterString();
@@ -7765,25 +7760,21 @@ var DropdownListModel = /** @class */ (function (_super) {
         })
     ], DropdownListModel.prototype, "filterString", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: "",
             onSet: function (newValue, target) {
                 target.question.inputHasValue = !!newValue;
-                target.showSelectedItemLocText = target.question.showSelectedItemLocText;
             }
         })
     ], DropdownListModel.prototype, "inputString", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({})
-    ], DropdownListModel.prototype, "showSelectedItemLocText", void 0);
-    __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({})
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({})
     ], DropdownListModel.prototype, "showInputFieldComponent", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])()
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])()
     ], DropdownListModel.prototype, "ariaActivedescendant", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({
             defaultValue: false,
             onSet: function (newVal, target) {
                 if (newVal) {
@@ -7796,7 +7787,7 @@ var DropdownListModel = /** @class */ (function (_super) {
         })
     ], DropdownListModel.prototype, "hasScroll", void 0);
     __decorate([
-        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_1__["property"])({ defaultValue: "" })
+        Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], DropdownListModel.prototype, "hintString", void 0);
     return DropdownListModel;
 }(_base__WEBPACK_IMPORTED_MODULE_0__["Base"]));
@@ -8018,6 +8009,12 @@ var DropdownMultiSelectListModel = /** @class */ (function (_super) {
         }
         this.syncFilterStringPlaceholder();
     };
+    DropdownMultiSelectListModel.prototype.onPropertyChangedHandler = function (sender, options) {
+        _super.prototype.onPropertyChangedHandler.call(this, sender, options);
+        if (options.name === "value" || options.name === "renderedValue") {
+            this.syncFilterStringPlaceholder();
+        }
+    };
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_2__["property"])({ defaultValue: "" })
     ], DropdownMultiSelectListModel.prototype, "filterStringPlaceholder", void 0);
@@ -8788,7 +8785,7 @@ __webpack_require__.r(__webpack_exports__);
 // import "../../main.scss";
 //import "../../modern.scss";
 var Version;
-Version = "" + "1.9.91";
+Version = "" + "1.9.93";
 function checkLibraryVersion(ver, libraryName) {
     if (Version != ver) {
         var str = "survey-core has version '" + Version + "' and " + libraryName
@@ -16553,7 +16550,7 @@ var __decorate = (undefined && undefined.__decorate) || function (decorators, ta
 
 
 /**
- * Array of ItemValue is used in checkox, dropdown and radiogroup choices, matrix columns and rows.
+ * Array of ItemValue is used in checkbox, dropdown and radiogroup choices, matrix columns and rows.
  * It has two main properties: value and text. If text is empty, value is used for displaying.
  * The text property is localizable and support markdown.
  */
@@ -17032,7 +17029,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["JsonObjectProperty"].getItemValuesDefa
     return res;
 };
 _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("itemvalue", [
-    "!value",
+    { name: "!value", isUnique: true },
     {
         name: "text",
         serializationProperty: "locText",
@@ -19871,7 +19868,7 @@ var arabicSurveyStrings = {
     completingSurveyBefore: "تظهر سجلاتنا أنك قد أكملت هذا الاستطلاع بالفعل.",
     loadingSurvey: "...يتم تحميل النموذج",
     placeholder: "...اختر",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "القيمة",
     requiredError: ".يرجى الإجابة على السؤال",
     requiredErrorInPanel: "الرجاء الإجابة على سؤال واحد على الأقل.",
@@ -19978,7 +19975,7 @@ var basqueSurveyStrings = {
     completingSurveyBefore: "Gure datuek diote dagoeneko galdetegia erantzun duzula.",
     loadingSurvey: "Galdetegia kargatzen...",
     placeholder: "Hautatu...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "balioa",
     requiredError: "Mesedez, galdera erantzun.",
     requiredErrorInPanel: "Mesedez, gutxienez galdera bat erantzun.",
@@ -20085,7 +20082,7 @@ var bulgarianStrings = {
     completingSurveyBefore: "Изглежда, че вие вече сте попълнили анкетата.",
     loadingSurvey: "Зареждане на анкетата...",
     placeholder: "Изберете...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "value",
     requiredError: "Моля, отговорете на следния въпрос.",
     requiredErrorInPanel: "Моля, отговорете поне на един от въпросите.",
@@ -20192,7 +20189,7 @@ var catalanSurveyStrings = {
     // completingSurveyBefore: "Our records show that you have already completed this survey.",
     loadingSurvey: "L'enquesta s'està carregant ...",
     placeholder: "Selecciona ...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     // value: "value",
     requiredError: "Si us plau contesti la pregunta.",
     // requiredErrorInPanel: "Response required: answer at least one question.",
@@ -20299,7 +20296,7 @@ var croatianStrings = {
     completingSurveyBefore: "Naši zapisi pokazuju da ste već završili ovu anketu.",
     loadingSurvey: "Anketa o učitavanje...",
     placeholder: "Odaberite...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "vrijednost",
     requiredError: "Molim vas odgovorite na pitanje.",
     requiredErrorInPanel: "Molim vas odgovorite na barem jedno pitanje.",
@@ -20406,7 +20403,7 @@ var czechSurveyStrings = {
     completingSurveyBefore: "Naše záznamy ukazují, že jste tento průzkum již dokončil/a.",
     loadingSurvey: "Probíhá načítání průzkumu...",
     placeholder: "Vyberte...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "hodnota",
     requiredError: "Odpovězte prosím na otázku.",
     requiredErrorInPanel: "Odpovězte prosím alespoň jednu otázku.",
@@ -20513,7 +20510,7 @@ var danishSurveyStrings = {
     completingSurveyBefore: "Vores data viser at du allerede har gennemført dette spørgeskema.",
     loadingSurvey: "Spørgeskemaet hentes fra serveren...",
     placeholder: "Vælg...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "værdi",
     requiredError: "Besvar venligst spørgsmålet.",
     requiredErrorInPanel: "Besvar venligst mindst ét spørgsmål.",
@@ -20620,7 +20617,7 @@ var dutchSurveyStrings = {
     completingSurveyBefore: "Onze gegevens tonen aan dat je deze vragenlijst reeds beantwoord hebt.",
     loadingSurvey: "De vragenlijst is aan het laden...",
     placeholder: "Kies...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "waarde",
     requiredError: "Dit is een vereiste vraag",
     requiredErrorInPanel: "Gelieve ten minste een vraag te beantwoorden.",
@@ -20726,7 +20723,7 @@ var englishStrings = {
     completingSurveyBefore: "Our records show that you have already completed this survey.",
     loadingSurvey: "Loading Survey...",
     placeholder: "Select...",
-    ratingOptionsCaption: "Tap to rate here...",
+    ratingOptionsCaption: "Select...",
     value: "value",
     requiredError: "Response required.",
     requiredErrorInPanel: "Response required: answer at least one question.",
@@ -20838,7 +20835,7 @@ var estonianSurveyStrings = {
     completingSurveyBefore: "Meie andmetel oled sa sellele ankeedile juba vastanud.",
     loadingSurvey: "Laen ankeeti...",
     placeholder: "Vali...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "väärtus",
     requiredError: "Palun vasta küsimusele.",
     requiredErrorInPanel: "Palun vasta vähemalt ühele küsimusele.",
@@ -21159,7 +21156,7 @@ var georgianSurveyStrings = {
     // completingSurveyBefore: "Our records show that you have already completed this survey.",
     loadingSurvey: "ჩატვირთვა სერვერიდან...",
     placeholder: "არჩევა...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     // value: "value",
     requiredError: "გთხოვთ უპასუხეთ კითხვას.",
     // requiredErrorInPanel: "Response required: answer at least one question.",
@@ -21481,7 +21478,7 @@ var hebrewSurveyStrings = {
     completingSurveyBefore: "הרשומות שלנו מראות שכבר סיימת את הסקר הזה.",
     loadingSurvey: "טעינה מהשרת...",
     placeholder: "בחר...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "ערך",
     requiredError: "אנא השב על השאלה",
     requiredErrorInPanel: "אנא ענה לפחות על שאלה אחת.",
@@ -21588,7 +21585,7 @@ var hindiStrings = {
     completingSurveyBefore: " हमारे रिकॉर्ड बताते हैं कि आप पहले ही इस सर्वेक्षण को पूरा कर चुके हैं",
     loadingSurvey: "सर्वेक्षण खुल रहा है.…",
     placeholder: "चुनें",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "मूल्य",
     requiredError: "कृपया प्रश्न का उत्तर दें",
     requiredErrorInPanel: "कृपया कम से कम एक प्रश्न का उत्तर दें",
@@ -21695,7 +21692,7 @@ var hungarianSurveyStrings = {
     completingSurveyBefore: "Már kitöltötte a felmérést.",
     loadingSurvey: "Felmérés betöltése...",
     placeholder: "Válasszon...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "érték",
     requiredError: "Kérjük, válaszolja meg ezt a kérdést!",
     requiredErrorInPanel: "Kérjük, válaszoljon legalább egy kérdésre.",
@@ -21802,7 +21799,7 @@ var icelandicSurveyStrings = {
     completingSurveyBefore: "Skrár okkar sýna að þú hefur þegar lokið þessari könnun.",
     loadingSurvey: "Könnunin er að hlaða...",
     placeholder: "Veldu...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "gildi",
     requiredError: "Vinsamlegast svarið spurningunni.",
     requiredErrorInPanel: "Vinsamlegast svaraðu að minnsta kosti einni spurningu.",
@@ -21909,7 +21906,7 @@ var indonesianStrings = {
     completingSurveyBefore: "Catatan kami menunjukkan bahwa Anda telah menyelesaikan survei ini.",
     loadingSurvey: "Memuat survei...",
     placeholder: "Pilih...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "nilai",
     requiredError: "Silahkan jawab pertanyaan berikut.",
     requiredErrorInPanel: "Silahkan jawab setidaknya satu petanyaan.",
@@ -22123,7 +22120,7 @@ var japaneseSurveyStrings = {
     completingSurveyBefore: "当社の記録によると、この調査はすでに完了しています。",
     loadingSurvey: "調査をダウンロード中",
     placeholder: "選択",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "値打ち",
     requiredError: "質問にお答え下さい",
     requiredErrorInPanel: "最低でも1つの質問に答えてください。",
@@ -22230,7 +22227,7 @@ var kazakhStrings = {
     completingSurveyBefore: "Сіз бұл сауалнаманы өтіп қойдыңыз.",
     loadingSurvey: "Серверден жүктеу...",
     placeholder: "Таңдау...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "мәні",
     requiredError: "Өтінеміз, сұраққа жауап беріңіз.",
     requiredErrorInPanel: "Өтінеміз, кем дегенде бір сұраққа жауап беріңіз.",
@@ -22551,7 +22548,7 @@ var lithuaniaSurveyStrings = {
     completingSurveyBefore: "Mūsų įrašai rodo, kad jau atlikote šią apklausą.",
     loadingSurvey: "Prašome palaukti...",
     placeholder: "Pasirinkti...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "reikšmė",
     requiredError: "Būtina atsakyti į šį klausimą.",
     requiredErrorInPanel: "Būtina atsakyti bent į vieną klausimą.",
@@ -22658,7 +22655,7 @@ var macedonianSurveyStrings = {
     completingSurveyBefore: "Нашите записи покажуваат дека веќе сте го завршиле ова истражување.",
     loadingSurvey: "Анкетата се вчитува ...",
     placeholder: "Изберете ...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "вредност",
     requiredError: "Ве молам, одговорете на прашањето.",
     requiredErrorInPanel: "Ве молам, одговорете барем на едно прашање.",
@@ -22765,7 +22762,7 @@ var malaySurveyStrings = {
     completingSurveyBefore: "Rekod kami menunjukkan yang anda telah melengkapkan tinjauan ini.",
     loadingSurvey: "Memuatkan Tinjauan...",
     placeholder: "Pilih...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "nilai",
     requiredError: "Respons diperlukan.",
     requiredErrorInPanel: "Respons diperlukan: jawab sekurang-kurangnya satu soalan.",
@@ -22896,7 +22893,7 @@ var norwegianSurveyStrings = {
     completingSurveyBefore: "Våre data viser at du allerede har gjennomført denne undersøkelsen.",
     loadingSurvey: "Undersøkelsen laster...",
     placeholder: "Velg...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "verdi",
     requiredError: "Vennligst svar på spørsmålet.",
     requiredErrorInPanel: "Vennligst svar på minst ett spørsmål.",
@@ -23003,7 +23000,7 @@ var persianSurveyStrings = {
     completingSurveyBefore: "به نظر می رسد هم هم اکنون پرسشنامه را تکمیل کرده اید.",
     loadingSurvey: "درحال ایجاد پرسشنامه",
     placeholder: "انتخاب کنید...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "مقدار",
     requiredError: "لطفا به سوال پاسخ دهید",
     requiredErrorInPanel: "لطفا حداقل به یک سوال پاسخ دهید.",
@@ -23220,7 +23217,7 @@ var portugueseBrSurveyStrings = {
     completingSurveyBefore: "Nossos registros mostram que você já finalizou a pesquisa.",
     loadingSurvey: "A pesquisa está carregando...",
     // placeholder: "Select...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     // value: "value",
     requiredError: "Por favor, responda a pergunta.",
     requiredErrorInPanel: "Por favor, responda pelo menos uma pergunta.",
@@ -23435,7 +23432,7 @@ var romanianSurveyStrings = {
     completingSurveyBefore: "Din înregistrările noastre reiese că ați completat deja acest chestionar.",
     loadingSurvey: "Chestionarul se încarcă...",
     placeholder: "Alegeţi...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "valoare",
     requiredError: "Răspunsul la această întrebare este obligatoriu.",
     requiredErrorInPanel: "Vă rugăm să răspundeți la cel puțin o întrebare.",
@@ -23649,7 +23646,7 @@ var serbianStrings = {
     completingSurveyBefore: "Prema našim podacima, već ste popunili ovu anketu.",
     loadingSurvey: "Učitavam anketu...",
     placeholder: "Izaberi...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "vrednost",
     requiredError: "Molimo odgovorite na ovo pitanje.",
     requiredErrorInPanel: "Molimo odgovorite na bar jedno pitanje.",
@@ -23757,7 +23754,7 @@ var simplifiedChineseSurveyStrings = {
     completingSurveyBefore: "你已完成问卷.",
     loadingSurvey: "问卷正在加载中...",
     placeholder: "请选择...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "值",
     requiredError: "请填写此问题",
     requiredErrorInPanel: "至少回答一题.",
@@ -23864,7 +23861,7 @@ var slovakSurveyStrings = {
     completingSurveyBefore: "Podľa našich záznamov ste už tento prieskum dokončili.",
     loadingSurvey: "Načítanie prieskumu...",
     placeholder: "Vybrať...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "hodnota",
     requiredError: "Požaduje sa odozva.",
     requiredErrorInPanel: "Požaduje sa odozva: zodpovedajte aspoň jednu otázku.",
@@ -24078,7 +24075,7 @@ var swahiliStrings = {
     completingSurveyBefore: "Recodi zetu zinatuonyesha tayari umekamilisha utafiti.",
     loadingSurvey: "Tunaandaa utafiti...",
     placeholder: "Chagua...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "thamani",
     requiredError: "Tafadhali jibu hili swali.",
     requiredErrorInPanel: "Tafadhali jibu swali angalau moja.",
@@ -24292,7 +24289,7 @@ var tajikSurveyStrings = {
     completingSurveyBefore: "Шумо аллакай ин пурсишро анҷом додаед.",
     loadingSurvey: "Боргирӣ аз сервер...",
     placeholder: "Интихоб кардан...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "қиммат",
     requiredError: "Илтимос, ба савол ҷавоб диҳед.",
     requiredErrorInPanel: "Илтимос, ақалан ба як савол ҷавоб диҳед.",
@@ -24399,7 +24396,7 @@ var teluguStrings = {
     completingSurveyBefore: " మీరు ఇప్పటికే సర్వేను ముగించినట్లు మా రికార్డులు చూపిస్తున్నాయి",
     loadingSurvey: "సర్వే లోడ్ అవుతుంది",
     placeholder: "ఎన్నుకోండి",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "విలువ",
     requiredError: "దయచేసి ప్రశ్నకు జవాబు ఇవ్వండి",
     requiredErrorInPanel: "దయచేసి కనీసం ఒక్క ప్రశ్నకైనా జవాబు ఇవ్వండి",
@@ -24506,7 +24503,7 @@ var thaiStrings = {
     completingSurveyBefore: "รายการของเราแสดงว่าคุณได้ทำ survey เสร็จเรียบร้อยแล้ว",
     loadingSurvey: "กำลังโหลด Survey...",
     placeholder: "เลือก...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "ข้อมูล",
     requiredError: "กรุณาตอบคำถาม",
     requiredErrorInPanel: "กรุณาตอบขั้นต่ำหนึ่งคำถาม",
@@ -24613,7 +24610,7 @@ var traditionalChineseSurveyStrings = {
     // completingSurveyBefore: "Our records show that you have already completed this survey.",
     loadingSurvey: "問卷載入中...",
     placeholder: "請選擇...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     // value: "value",
     requiredError: "請填寫此問題",
     // requiredErrorInPanel: "Response required: answer at least one question.",
@@ -24720,7 +24717,7 @@ var turkishSurveyStrings = {
     completingSurveyBefore: "Kayıtlarımız, bu anketi zaten tamamladığınızı gösteriyor.",
     loadingSurvey: "Anket sunucudan yükleniyor ...",
     placeholder: "Seçiniz ...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "değer",
     requiredError: "Lütfen soruya cevap veriniz",
     requiredErrorInPanel: "Lütfen en az bir soruyu yanıtlayın.",
@@ -24827,7 +24824,7 @@ var ukrainianSurveyStrings = {
     completingSurveyBefore: "Ви вже проходили це опитування.",
     loadingSurvey: "Завантаження опитування...",
     placeholder: "Вибрати...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "значення",
     requiredError: "Будь ласка, дайте відповідь.",
     requiredErrorInPanel: "Будь ласка, дайте відповідь хоча б на одне питання.",
@@ -24934,7 +24931,7 @@ var vietnameseSurveyStrings = {
     completingSurveyBefore: "Hồ sơ chúng tôi cho thấy rằng bạn đã hoàn thành cuộc khảo sát này.",
     loadingSurvey: "Đang tải khảo sát...",
     placeholder: "Chọn...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "Giá trị",
     requiredError: "Vui lòng trả lời câu hỏi.",
     requiredErrorInPanel: "Vui lòng trả lời ít nhất một câu hỏi.",
@@ -25042,7 +25039,7 @@ var welshSurveyStrings = {
     completingSurveyBefore: "Rydych chi wedi llenwi’r arolwg hwn yn barod yn ôl ein cofnodion.",
     loadingSurvey: "Wrthi’n Llwytho’r Arolwg...",
     placeholder: "Dewiswch...",
-    // ratingOptionsCaption: "Tap to rate here...",
+    // ratingOptionsCaption: "Select...",
     value: "gwerth",
     requiredError: "Atebwch y cwestiwn.",
     requiredErrorInPanel: "Atebwch o leiaf un cwestiwn.",
@@ -27450,13 +27447,13 @@ var PanelModelBase = /** @class */ (function (_super) {
         if (this.isRandomizing)
             return;
         this.setPropertyValue("isVisible", this.isVisible);
-        if (!!this.survey &&
-            this.survey.isClearValueOnHiddenContainer &&
+        if (!!this.survey && this.survey.getQuestionClearIfInvisible("default") !== "none" &&
             !this.isLoadingFromJson) {
             var questions = this.questions;
+            var isVisible = this.isVisible;
             for (var i = 0; i < questions.length; i++) {
-                if (!this.isVisible) {
-                    questions[i].clearValueIfInvisible();
+                if (!isVisible) {
+                    questions[i].clearValueIfInvisible("onHiddenContainer");
                 }
                 else {
                     questions[i].updateValueWithDefaults();
@@ -30654,11 +30651,11 @@ var PopupModel = /** @class */ (function (_super) {
             }
             this.setPropertyValue("isVisible", value);
             this.onVisibilityChanged.fire(this, { model: this, isVisible: value });
-            this.refreshInnerModel();
             if (this.isVisible) {
                 this.onShow();
             }
             else {
+                this.refreshInnerModel();
                 this.onHide();
             }
         },
@@ -31125,7 +31122,7 @@ var Question = /** @class */ (function (_super) {
         /**
          * Hides the question number from the title and excludes the question from numbering.
          *
-         * If you want to disable question numbering in the entire survey, set SurveyModel's `showQuestionNumbers` property to `false`.
+         * If you want to disable question numbering in the entire survey, set `SurveyModel`'s `showQuestionNumbers` property to `false`.
          * @see SurveyModel.showQuestionNumbers
          */
         get: function () {
@@ -31287,13 +31284,17 @@ var Question = /** @class */ (function (_super) {
         if (!this.survey || this.isLoadingFromJson)
             return;
         this.survey.questionVisibilityChanged(this, this.isVisible);
-        if (this.isClearValueOnHidden) {
-            if (!this.visible) {
-                this.clearValueIfInvisible();
-            }
-            if (this.isVisible) {
-                this.updateValueWithDefaults();
-            }
+        var isClearOnHidden = this.isClearValueOnHidden;
+        if (!this.visible) {
+            this.clearValueOnHidding(isClearOnHidden);
+        }
+        if (isClearOnHidden && this.isVisible) {
+            this.updateValueWithDefaults();
+        }
+    };
+    Question.prototype.clearValueOnHidding = function (isClearOnHidden) {
+        if (isClearOnHidden) {
+            this.clearValueIfInvisible();
         }
     };
     /**
@@ -32337,7 +32338,9 @@ var Question = /** @class */ (function (_super) {
             return val.length > 0 ? this.isValueSurveyElement(val[0]) : false;
         return !!val.getType && !!val.onPropertyChanged;
     };
-    Question.prototype.canClearValueAsInvisible = function () {
+    Question.prototype.canClearValueAsInvisible = function (reason) {
+        if (reason === "onHiddenContainer" && !this.isParentVisible)
+            return true;
         if (this.isVisible && this.isParentVisible)
             return false;
         if (!!this.page && this.page.isStartPage)
@@ -32351,6 +32354,8 @@ var Question = /** @class */ (function (_super) {
          * Returns `true` if a parent element (page or panel) is visible.
          */
         get: function () {
+            if (this.parentQuestion && !this.parentQuestion.isVisible)
+                return false;
             var parent = this.parent;
             while (parent) {
                 if (!parent.isVisible)
@@ -32364,16 +32369,17 @@ var Question = /** @class */ (function (_super) {
     });
     Question.prototype.clearValueIfInvisible = function (reason) {
         if (reason === void 0) { reason = "onHidden"; }
-        if (this.clearIfInvisible === "none")
+        var clearIf = this.getClearIfInvisible();
+        if (clearIf === "none")
             return;
-        if (reason === "onHidden" && this.clearIfInvisible === "onComplete")
+        if (reason === "onHidden" && clearIf === "onComplete")
             return;
-        if (reason === "none" && (this.clearIfInvisible === "default" || this.clearIfInvisible === "none"))
+        if (reason === "onHiddenContainer" && clearIf !== reason)
             return;
-        this.clearValueIfInvisibleCore();
+        this.clearValueIfInvisibleCore(reason);
     };
-    Question.prototype.clearValueIfInvisibleCore = function () {
-        if (this.canClearValueAsInvisible()) {
+    Question.prototype.clearValueIfInvisibleCore = function (reason) {
+        if (this.canClearValueAsInvisible(reason)) {
             this.clearValue();
         }
     };
@@ -32385,6 +32391,7 @@ var Question = /** @class */ (function (_super) {
          *
          * - `"default"` (default) - Inherits the setting from the Survey's [`clearInvisibleValues`](https://surveyjs.io/form-library/documentation/surveymodel#clearInvisibleValues) property.
          * - `"onHidden"` - Clears the value when the question becomes invisible. If a question is invisible on startup and has an initial value, this value will be cleared when the survey is complete.
+         * - `"onHiddenContainer"` - Clears the value when the question or its containter (page or panel) becomes invisible. If the question is invisible initially, its value is removed on survey completion.
          * - `"onComplete"` - Clears the value when the survey is complete.
          * - `"none"` - Never clears the value of an invisible question.
          * @see SurveyModel.clearInvisibleValues
@@ -32400,6 +32407,12 @@ var Question = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Question.prototype.getClearIfInvisible = function () {
+        var res = this.clearIfInvisible;
+        if (!!this.survey)
+            return this.survey.getQuestionClearIfInvisible(res);
+        return res !== "default" ? res : "onComplete";
+    };
     Object.defineProperty(Question.prototype, "displayValue", {
         get: function () {
             if (this.isLoadingFromJson)
@@ -32630,11 +32643,10 @@ var Question = /** @class */ (function (_super) {
     };
     Object.defineProperty(Question.prototype, "isClearValueOnHidden", {
         get: function () {
-            if (this.clearIfInvisible === "none" || this.clearIfInvisible === "onComplete")
+            var clearIf = this.getClearIfInvisible();
+            if (clearIf === "none" || clearIf === "onComplete")
                 return false;
-            if (this.clearIfInvisible === "onHidden")
-                return true;
-            return !!this.survey && this.survey.isClearValueOnHidden;
+            return clearIf === "onHidden" || clearIf === "onHiddenContainer";
         },
         enumerable: false,
         configurable: true
@@ -33392,7 +33404,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("question", [
     {
         name: "clearIfInvisible",
         default: "default",
-        choices: ["default", "none", "onComplete", "onHidden"],
+        choices: ["default", "none", "onComplete", "onHidden", "onHiddenContainer"],
     },
     { name: "isRequired:switch", overridingProperty: "requiredIf" },
     "requiredIf:condition",
@@ -33759,10 +33771,21 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.createItemValue = function (value, text) {
         var res = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].createClass(this.getItemValueType(), value);
+        res.locOwner = this;
         if (!!text)
             res.text = text;
         return res;
     };
+    Object.defineProperty(QuestionSelectBase.prototype, "isUsingCarryForward", {
+        get: function () {
+            return this.getPropertyValue("isUsingCarrayForward", false);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    QuestionSelectBase.prototype.setIsUsingCarrayForward = function (val) {
+        this.setPropertyValue("isUsingCarrayForward", val);
+    };
     QuestionSelectBase.prototype.supportGoNextPageError = function () {
         return !this.isOtherSelected || !!this.otherValue;
     };
@@ -33946,7 +33969,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     };
     QuestionSelectBase.prototype.runCondition = function (values, properties) {
         _super.prototype.runCondition.call(this, values, properties);
-        if (this.isUsingCarrayForward)
+        if (this.isUsingCarryForward)
             return;
         this.runItemsEnableCondition(values, properties);
         this.runItemsCondition(values, properties);
@@ -34379,10 +34402,12 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         },
         set: function (val) {
             var question = this.getQuestionWithChoices();
-            if (!!question) {
+            this.isLockVisibleChoices = !!question && question.name === val;
+            if (!!question && question.name !== val) {
                 question.removeFromDependedQuestion(this);
             }
             this.setPropertyValue("choicesFromQuestion", val);
+            this.isLockVisibleChoices = false;
         },
         enumerable: false,
         configurable: true
@@ -34621,7 +34646,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             if (!this.newItemValue) {
                 this.newItemValue = this.createItemValue("newitem"); //TODO
             }
-            if (this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
+            if (!this.isUsingCarryForward && this.canShowOptionItem(this.newItemValue, isAddAll, false)) {
                 items.push(this.newItemValue);
             }
         }
@@ -34737,8 +34762,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
     Object.defineProperty(QuestionSelectBase.prototype, "activeChoices", {
         get: function () {
             var question = this.getQuestionWithChoices();
-            this.isUsingCarrayForward = !!question;
-            if (this.isUsingCarrayForward) {
+            this.setIsUsingCarrayForward(!!question);
+            if (this.isUsingCarryForward) {
                 this.addIntoDependedQuestion(question);
                 return this.getChoicesFromQuestion(question);
             }
@@ -34754,6 +34779,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return !!res && !!res.visibleChoices && Array.isArray(res.dependedQuestions) && res !== this ? res : null;
     };
     QuestionSelectBase.prototype.getChoicesFromQuestion = function (question) {
+        if (this.isDesignMode)
+            return [];
         var res = [];
         var isSelected = this.choicesFromQuestionMode == "selected"
             ? true
@@ -35035,7 +35062,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         return { value: value };
     };
     QuestionSelectBase.prototype.updateChoicesDependedQuestions = function () {
-        if (this.isLoadingFromJson || this.isUpdatingChoicesDependedQuestions)
+        if (this.isLoadingFromJson || this.isUpdatingChoicesDependedQuestions ||
+            !this.allowNotifyValueChanged || this.choicesByUrl.isRunning)
             return;
         this.isUpdatingChoicesDependedQuestions = true;
         for (var i = 0; i < this.dependedQuestions.length; i++) {
@@ -35050,7 +35078,7 @@ var QuestionSelectBase = /** @class */ (function (_super) {
         this.updateChoicesDependedQuestions();
     };
     QuestionSelectBase.prototype.onVisibleChoicesChanged = function () {
-        if (this.isLoadingFromJson)
+        if (this.isLoadingFromJson || this.isLockVisibleChoices)
             return;
         this.updateVisibleChoices();
         this.onVisibleChanged();
@@ -35108,8 +35136,8 @@ var QuestionSelectBase = /** @class */ (function (_super) {
             return false;
         return !this.keepIncorrectValues && !this.isEmpty();
     };
-    QuestionSelectBase.prototype.clearValueIfInvisibleCore = function () {
-        _super.prototype.clearValueIfInvisibleCore.call(this);
+    QuestionSelectBase.prototype.clearValueIfInvisibleCore = function (reason) {
+        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
         this.clearIncorrectValues();
     };
     /**
@@ -37071,6 +37099,7 @@ var QuestionCommentModel = /** @class */ (function (_super) {
         this.updateRemainingCharacterCounter(event.target.value);
     };
     QuestionCommentModel.prototype.onKeyDown = function (event) {
+        this.checkForUndo(event);
         if (!this.acceptCarriageReturn && (event.key === "Enter" || event.keyCode === 13)) {
             event.preventDefault();
             event.stopPropagation();
@@ -37767,11 +37796,11 @@ var QuestionCompositeModel = /** @class */ (function (_super) {
             return res;
         return _super.prototype.findQuestionByName.call(this, name);
     };
-    QuestionCompositeModel.prototype.clearValueIfInvisibleCore = function () {
-        _super.prototype.clearValueIfInvisibleCore.call(this);
+    QuestionCompositeModel.prototype.clearValueIfInvisibleCore = function (reason) {
+        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
         var questions = this.contentPanel.questions;
         for (var i = 0; i < questions.length; i++) {
-            questions[i].clearValueIfInvisible();
+            questions[i].clearValueIfInvisible(reason);
         }
     };
     QuestionCompositeModel.prototype.onAnyValueChanged = function (name) {
@@ -39163,6 +39192,10 @@ var QuestionFileModel = /** @class */ (function (_super) {
     QuestionFileModel.prototype.getType = function () {
         return "file";
     };
+    QuestionFileModel.prototype.clearValue = function () {
+        this.clearOnDeletingContainer();
+        _super.prototype.clearValue.call(this);
+    };
     QuestionFileModel.prototype.clearOnDeletingContainer = function () {
         if (!this.survey)
             return;
@@ -40711,11 +40744,7 @@ var QuestionImagePickerModel = /** @class */ (function (_super) {
     return QuestionImagePickerModel;
 }(_question_baseselect__WEBPACK_IMPORTED_MODULE_2__["QuestionCheckboxBase"]));
 
-_jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("imageitemvalue", [], function (value) { return new ImageItemValue(value); }, "itemvalue");
-_jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addProperty("imageitemvalue", {
-    name: "imageLink",
-    serializationProperty: "locImageLink",
-});
+_jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("imageitemvalue", [{ name: "imageLink", serializationProperty: "locImageLink" }], function (value) { return new ImageItemValue(value); }, "itemvalue");
 _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("responsiveImageSize", [], undefined, "number");
 _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].addClass("imagepicker", [
     { name: "showOtherItem", visible: false },
@@ -41405,8 +41434,8 @@ var QuestionMatrixModel = /** @class */ (function (_super) {
         json["type"] = question.getType();
         return json;
     };
-    QuestionMatrixModel.prototype.clearValueIfInvisibleCore = function () {
-        _super.prototype.clearValueIfInvisibleCore.call(this);
+    QuestionMatrixModel.prototype.clearValueIfInvisibleCore = function (reason) {
+        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
         if (this.hasRows) {
             this.clearInvisibleValuesInRows();
         }
@@ -41706,8 +41735,8 @@ var QuestionMatrixDropdownModel = /** @class */ (function (_super) {
         }
         _super.prototype.clearIncorrectValues.call(this);
     };
-    QuestionMatrixDropdownModel.prototype.clearValueIfInvisibleCore = function () {
-        _super.prototype.clearValueIfInvisibleCore.call(this);
+    QuestionMatrixDropdownModel.prototype.clearValueIfInvisibleCore = function (reason) {
+        _super.prototype.clearValueIfInvisibleCore.call(this, reason);
         this.clearInvisibleValuesInRows();
     };
     QuestionMatrixDropdownModel.prototype.generateRows = function () {
@@ -41719,7 +41748,7 @@ var QuestionMatrixDropdownModel = /** @class */ (function (_super) {
         if (!val)
             val = {};
         for (var i = 0; i < rows.length; i++) {
-            if (!rows[i].value)
+            if (this.isValueEmpty(rows[i].value))
                 continue;
             result.push(this.createMatrixRow(rows[i], val[rows[i].value]));
         }
@@ -47932,7 +47961,7 @@ var QuestionMultipleTextModel = /** @class */ (function (_super) {
 }(_question__WEBPACK_IMPORTED_MODULE_2__["Question"]));
 
 _jsonobject__WEBPACK_IMPORTED_MODULE_4__["Serializer"].addClass("multipletextitem", [
-    "name",
+    { name: "!name", isUnique: true },
     "isRequired:boolean",
     { name: "placeholder", alternativeName: "placeHolder", serializationProperty: "locPlaceholder" },
     {
@@ -49821,18 +49850,31 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         }
         return true;
     };
-    QuestionPanelDynamicModel.prototype.clearValueIfInvisibleCore = function () {
+    QuestionPanelDynamicModel.prototype.clearValueOnHidding = function (isClearOnHidden) {
+        if (!isClearOnHidden) {
+            if (!!this.survey && this.survey.getQuestionClearIfInvisible("onHidden") === "none")
+                return;
+            this.clearValueInPanelsIfInvisible("onHiddenContainer");
+        }
+        _super.prototype.clearValueOnHidding.call(this, isClearOnHidden);
+    };
+    QuestionPanelDynamicModel.prototype.clearValueIfInvisible = function (reason) {
+        if (reason === void 0) { reason = "onHidden"; }
+        var panelReason = reason === "onHidden" ? "onHiddenContainer" : reason;
+        this.clearValueInPanelsIfInvisible(panelReason);
+        _super.prototype.clearValueIfInvisible.call(this, reason);
+    };
+    QuestionPanelDynamicModel.prototype.clearValueInPanelsIfInvisible = function (reason) {
         for (var i = 0; i < this.panels.length; i++) {
             var questions = this.panels[i].questions;
             this.isSetPanelItemData = {};
             for (var j = 0; j < questions.length; j++) {
                 var q = questions[j];
-                q.clearValueIfInvisible();
+                q.clearValueIfInvisible(reason);
                 this.isSetPanelItemData[q.getValueName()] = this.maxCheckCount + 1;
             }
         }
         this.isSetPanelItemData = {};
-        _super.prototype.clearValueIfInvisibleCore.call(this);
     };
     QuestionPanelDynamicModel.prototype.getIsRunningValidators = function () {
         if (_super.prototype.getIsRunningValidators.call(this))
@@ -50305,14 +50347,10 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return null;
         if (!this.additionalTitleToolbarValue) {
             this.additionalTitleToolbarValue = new _actions_adaptive_container__WEBPACK_IMPORTED_MODULE_13__["AdaptiveActionContainer"]();
-            this.additionalTitleToolbarValue.containerCss = this.getAdditionalTitleToolbarCss();
-            this.additionalTitleToolbarValue.cssClasses = {
-                item: "sv-tab-item",
-                itemPressed: "sv-tab-item--pressed",
-                itemAsIcon: "sv-tab-item--icon",
-                itemIcon: "sv-tab-item__icon",
-                itemTitle: "sv-tab-item__title"
-            };
+            this.additionalTitleToolbarValue.dotsItem.popupModel.showPointer = false;
+            this.additionalTitleToolbarValue.dotsItem.popupModel.verticalPosition = "bottom";
+            this.additionalTitleToolbarValue.dotsItem.popupModel.horizontalPosition = "center";
+            this.updateElementCss(false);
         }
         return this.additionalTitleToolbarValue;
     };
@@ -50396,24 +50434,25 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
             return;
         var locTitle = new _localizablestring__WEBPACK_IMPORTED_MODULE_2__["LocalizableString"](panel, true);
         locTitle.sharedData = this.locTemplateTabTitle;
+        var isActive = this.getPanelIndexById(panel.id) === this.currentIndex;
         var newItem = new _actions_action__WEBPACK_IMPORTED_MODULE_11__["Action"]({
             id: panel.id,
-            css: "sv-tab-item__root",
-            pressed: this.getPanelIndexById(panel.id) === this.currentIndex,
+            pressed: isActive,
             locTitle: locTitle,
+            disableHide: isActive,
             action: function () {
                 _this.currentIndex = _this.getPanelIndexById(newItem.id);
-                _this.updateTabToolbarItemsPressedState();
             }
         });
         return newItem;
     };
-    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function () {
+    QuestionPanelDynamicModel.prototype.getAdditionalTitleToolbarCss = function (cssClasses) {
+        var css = cssClasses !== null && cssClasses !== void 0 ? cssClasses : this.cssClasses;
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_10__["CssClassBuilder"]()
-            .append("sv-tabs-toolbar")
-            .append("sv-tabs-toolbar--left", this.tabAlign === "left")
-            .append("sv-tabs-toolbar--right", this.tabAlign === "right")
-            .append("sv-tabs-toolbar--center", this.tabAlign === "center")
+            .append(css.tabsRoot)
+            .append(css.tabsLeft, this.tabAlign === "left")
+            .append(css.tabsRight, this.tabAlign === "right")
+            .append(css.tabsCenter, this.tabAlign === "center")
             .toString();
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbarItemsPressedState = function () {
@@ -50422,7 +50461,15 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
         if (this.currentIndex < 0 || this.currentIndex >= this.visiblePanelCount)
             return;
         var panel = this.visiblePanels[this.currentIndex];
-        this.additionalTitleToolbar.renderedActions.forEach(function (action) { return action.pressed = action.id === panel.id; });
+        this.additionalTitleToolbar.renderedActions.forEach(function (action) {
+            var isActive = action.id === panel.id;
+            action.pressed = isActive;
+            action.disableHide = isActive;
+            //should raise update if dimensions are not changed but action is active now
+            if (action.mode === "popup" && action.disableHide) {
+                action["raiseUpdate"]();
+            }
+        });
     };
     QuestionPanelDynamicModel.prototype.updateTabToolbar = function () {
         var _this = this;
@@ -50465,6 +50512,17 @@ var QuestionPanelDynamicModel = /** @class */ (function (_super) {
     QuestionPanelDynamicModel.prototype.showSeparator = function (index) {
         return this.isRenderModeList && index < this.visiblePanelCount - 1;
     };
+    QuestionPanelDynamicModel.prototype.calcCssClasses = function (css) {
+        var classes = _super.prototype.calcCssClasses.call(this, css);
+        var additionalTitleToolbar = this.additionalTitleToolbar;
+        if (!!additionalTitleToolbar) {
+            additionalTitleToolbar.containerCss = this.getAdditionalTitleToolbarCss(classes);
+            additionalTitleToolbar.cssClasses = classes.tabs;
+            additionalTitleToolbar.dotsItem.cssClasses = classes.tabs;
+            additionalTitleToolbar.dotsItem.popupModel.contentComponentData.model.cssClasses = css.list;
+        }
+        return classes;
+    };
     QuestionPanelDynamicModel.maxCheckCount = 3;
     __decorate([
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_5__["property"])({ defaultValue: false, onSet: function (_, target) { target.updateFooterActions(); } })
@@ -52121,7 +52179,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _jsonobject__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./jsonobject */ "./src/jsonobject.ts");
 /* harmony import */ var _questionfactory__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./questionfactory */ "./src/questionfactory.ts");
 /* harmony import */ var _question__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./question */ "./src/question.ts");
-/* harmony import */ var signature_pad__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! signature_pad */ "./node_modules/signature_pad/dist/signature_pad.mjs");
+/* harmony import */ var signature_pad__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! signature_pad */ "./node_modules/signature_pad/dist/signature_pad.js");
 /* harmony import */ var _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./utils/cssClassBuilder */ "./src/utils/cssClassBuilder.ts");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -52222,14 +52280,14 @@ var QuestionSignaturePadModel = /** @class */ (function (_super) {
         };
         signaturePad.penColor = this.penColor;
         signaturePad.backgroundColor = this.backgroundColor;
-        signaturePad.onBegin = function () {
+        signaturePad.addEventListener("beginStroke", function () {
             _this.isDrawingValue = true;
             canvas.focus();
-        };
-        signaturePad.onEnd = function () {
+        }, { once: true });
+        signaturePad.addEventListener("endStroke", function () {
             _this.isDrawingValue = false;
             _this.updateValue();
-        };
+        }, { once: true });
         var updateValueHandler = function () {
             var data = _this.value;
             canvas.width = _this.signatureWidth || defaultWidth;
@@ -52794,6 +52852,7 @@ var QuestionTextModel = /** @class */ (function (_super) {
             _this.updateRemainingCharacterCounter(event.target.value);
         };
         _this.onKeyDown = function (event) {
+            _this.checkForUndo(event);
             if (_this.isInputTextUpdate) {
                 _this._isWaitingForEnter = event.keyCode === 229;
             }
@@ -53545,6 +53604,7 @@ var QuestionTextBase = /** @class */ (function (_super) {
     function QuestionTextBase(name) {
         var _this = _super.call(this, name) || this;
         _this.characterCounter = new CharacterCounter();
+        _this.disableNativeUndoRedo = false;
         return _this;
     }
     QuestionTextBase.prototype.isTextValue = function () {
@@ -53641,6 +53701,10 @@ var QuestionTextBase = /** @class */ (function (_super) {
         _super.prototype.localeChanged.call(this);
         this.calcRenderedPlaceholder();
     };
+    QuestionTextBase.prototype.setSurveyImpl = function (value, isLight) {
+        _super.prototype.setSurveyImpl.call(this, value, isLight);
+        this.calcRenderedPlaceholder();
+    };
     QuestionTextBase.prototype.calcRenderedPlaceholder = function () {
         var res = this.placeHolder;
         if (!!res && !this.hasPlaceHolder()) {
@@ -53660,6 +53724,13 @@ var QuestionTextBase = /** @class */ (function (_super) {
         _super.prototype.setQuestionValue.call(this, newValue, updateIsAnswered);
         this.updateRemainingCharacterCounter(newValue);
     };
+    QuestionTextBase.prototype.checkForUndo = function (event) {
+        if (this.disableNativeUndoRedo && this.isInputTextUpdate && (event.ctrlKey || event.metaKey)) {
+            if ([89, 90].indexOf(event.keyCode) !== -1) {
+                event.preventDefault();
+            }
+        }
+    };
     QuestionTextBase.prototype.getControlClass = function () {
         return new _utils_cssClassBuilder__WEBPACK_IMPORTED_MODULE_3__["CssClassBuilder"]()
             .append(this.cssClasses.root)
@@ -60027,7 +60098,7 @@ var SurveyElementBase = /** @class */ (function (_super) {
     };
     SurveyElementBase.renderQuestionDescription = function (question) {
         var descriptionText = SurveyElementBase.renderLocString(question.locDescription);
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: question.isDescriptionVisible ? undefined : { display: "none" }, className: question.cssDescription }, descriptionText);
+        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", { style: question.hasDescription ? undefined : { display: "none" }, className: question.cssDescription }, descriptionText);
     };
     SurveyElementBase.prototype.componentDidMount = function () {
         this.makeBaseElementsReact();
@@ -64291,7 +64362,12 @@ var SurveyElementCore = /** @class */ (function (_super) {
     });
     SurveyElementCore.prototype.getDefaultTitleValue = function () { return undefined; };
     SurveyElementCore.prototype.updateDescriptionVisibility = function (newDescription) {
-        this.hasDescription = !!newDescription;
+        var showPlaceholder = false;
+        if (this.isDesignMode) {
+            var property_1 = _jsonobject__WEBPACK_IMPORTED_MODULE_0__["Serializer"].findProperty(this.getType(), "description");
+            showPlaceholder = !!(property_1 === null || property_1 === void 0 ? void 0 : property_1.placeholder);
+        }
+        this.hasDescription = !!newDescription || showPlaceholder;
     };
     Object.defineProperty(SurveyElementCore.prototype, "locDescription", {
         get: function () {
@@ -64394,7 +64470,7 @@ var SurveyElementCore = /** @class */ (function (_super) {
         Object(_jsonobject__WEBPACK_IMPORTED_MODULE_0__["property"])({
             localizable: true,
             onSet: function (newDescription, self) {
-                self.updateDescriptionVisibility(self, newDescription);
+                self.updateDescriptionVisibility(newDescription);
             }
         })
     ], SurveyElementCore.prototype, "description", void 0);
@@ -65032,6 +65108,7 @@ var SurveyElement = /** @class */ (function (_super) {
         if (!this.survey) {
             this.onSurveyLoad();
         }
+        this.updateDescriptionVisibility(this.description);
     };
     SurveyElement.prototype.setVisibleIndex = function (index) {
         return 0;
@@ -65378,13 +65455,6 @@ var SurveyElement = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyElement.prototype, "isDescriptionVisible", {
-        get: function () {
-            return (!!this.description || this.isDesignMode);
-        },
-        enumerable: false,
-        configurable: true
-    });
     Object.defineProperty(SurveyElement.prototype, "rootStyle", {
         get: function () {
             var style = {};
@@ -65993,7 +66063,9 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onUpdateQuestionCssClasses = _this.addEvent();
         /**
-         * An event that is raised before rendering a panel. Use it to override default panel CSS classes.
+         * An event that is raised before rendering a standalone panel and panels within [Dynamic Panel](/form-library/examples/duplicate-group-of-fields-in-form/). Use it to override default panel CSS classes.
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
          *
          * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
@@ -66002,6 +66074,8 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised before rendering a page. Use it to override default page CSS classes.
          *
+         * For information on event handler parameters, refer to descriptions within the interface.
+         *
          * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
@@ -66009,6 +66083,8 @@ var SurveyModel = /** @class */ (function (_super) {
         /**
          * An event that is raised before rendering a choice item in Radio Button Group, Checkboxes, and Dropdown questions. Use it to override default CSS classes applied to choice items.
          *
+         * For information on event handler parameters, refer to descriptions within the interface.
+         *
          * [View Demo](/form-library/examples/customize-survey-with-css/ (linkStyle))
          * @see css
          */
@@ -66085,91 +66161,61 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onGetChoiceDisplayValue = _this.addEvent();
         /**
-         * An event that is raised on adding a new row in Matrix Dynamic question.
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDynamicModel.visibleRows
+         * An event that is raised after a new row is added to a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
          */
         _this.onMatrixRowAdded = _this.addEvent();
         /**
-         * An event that is raised before adding a new row in Matrix Dynamic question.
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDynamicModel.visibleRows
+         * An event that is raised before a new row is added to a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
          */
         _this.onMatrixBeforeRowAdded = _this.addEvent();
         /**
-         * An event that is raised before removing a row from Matrix Dynamic question. You can disable removing and clear the data instead.
-         * @see QuestionMatrixDynamicModel
-         * @see onMatrixRowRemoved
+         * An event that is raised before a row is deleted from a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/). You can cancel row deletion and clear row data instead.
          * @see onMatrixAllowRemoveRow
          */
         _this.onMatrixRowRemoving = _this.addEvent();
         /**
-         * An event that is raised on removing a row from Matrix Dynamic question.
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDynamicModel.visibleRows
-         * @see onMatrixRowRemoving
+         * An event that is raised after a row is deleted from a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
          * @see onMatrixAllowRemoveRow
          */
         _this.onMatrixRowRemoved = _this.addEvent();
         /**
-         * An event that is raised before rendering "Remove" button for removing a row from Matrix Dynamic question.
-         * @see QuestionMatrixDynamicModel
+         * An event that is raised before rendering the Remove button in a row of a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/). Use this event to hide the Remove button for individual matrix rows.
          * @see onMatrixRowRemoving
          * @see onMatrixRowRemoved
          */
         _this.onMatrixAllowRemoveRow = _this.addEvent();
         /**
-         * An event that is raised before creating cell question in the matrix. You can change the cell question type by setting different options.cellType.
-         * @see onMatrixBeforeRowAdded
-         * @see onMatrixCellCreated
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDropdownModel
+         * An event that is raised before a cell in a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/) is created. Use this event to change the type of individual matrix cells.
+         * @see onMatrixAfterCellRender
          */
         _this.onMatrixCellCreating = _this.addEvent();
         /**
-          * An event that is raised for every cell created in Matrix Dynamic and Matrix Dropdown questions.
-          * @see onMatrixBeforeRowAdded
-          * @see onMatrixCellCreating
-          * @see onMatrixRowAdded
-          * @see QuestionMatrixDynamicModel
-          * @see QuestionMatrixDropdownModel
+          * An event that is raised after a cell in a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/) is created.
+          * @see onMatrixAfterCellRender
           */
         _this.onMatrixCellCreated = _this.addEvent();
         /**
-         * An event that is raised for every cell after is has been rendered in DOM.
+         * An event that is raised for every matrix cell after it is rendered to the DOM.
          * @see onMatrixCellCreated
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDropdownModel
          */
         _this.onMatrixAfterCellRender = _this.addEvent();
         /**
-         * An event that is raised when cell value is changed in Matrix Dynamic and Matrix Dropdown questions.
-         * @see onMatrixCellValueChanging
+         * An event that is raised after a cell value is changed in a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
          * @see onMatrixBeforeRowAdded
-         * @see onMatrixRowAdded
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDropdownModel
          */
         _this.onMatrixCellValueChanged = _this.addEvent();
         /**
-         * An event that is raised on changing cell value in Matrix Dynamic and Matrix Dropdown questions. You may change the `options.value` property to change a cell value.
-         * @see onMatrixCellValueChanged
+         * An event that is raised before a cell value is changed in a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/). Use this event to change the cell value.
          * @see onMatrixBeforeRowAdded
-         * @see onMatrixRowAdded
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDropdownModel
          */
         _this.onMatrixCellValueChanging = _this.addEvent();
         /**
-         * An event that is raised when Matrix Dynamic and Matrix Dropdown questions validate the cell value.
+         * An event that is raised for [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) and [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/) questions when they validate a cell value. Use this event to display a custom error message based on a condition.
          * @see onMatrixBeforeRowAdded
-         * @see onMatrixRowAdded
-         * @see QuestionMatrixDynamicModel
-         * @see QuestionMatrixDropdownModel
          */
         _this.onMatrixCellValidate = _this.addEvent();
         /**
-         * An event that is raised on adding a new column in Matrix Dynamic or Matrix Dropdown question.
+         * An event that is raised after a new column is added to a [Multi-Select Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdropdown/) or [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
          */
         _this.onMatrixColumnAdded = _this.addEvent();
         /**
@@ -66247,9 +66293,12 @@ var SurveyModel = /** @class */ (function (_super) {
          */
         _this.onGetPanelFooterActions = _this.addEvent();
         /**
-         * Use this event to create/customize actions to be displayed in a matrix question's row.
+         * An event that allows you to add, delete, or modify actions in rows of a [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/).
+         *
+         * For information on event handler parameters, refer to descriptions within the interface.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/employee-information-form/ (linkStyle))
          * @see IAction
-         * @see QuestionMatrixDropdownModelBase
          */
         _this.onGetMatrixRowActions = _this.addEvent();
         /**
@@ -67503,8 +67552,11 @@ var SurveyModel = /** @class */ (function (_super) {
     Object.defineProperty(SurveyModel.prototype, "logo", {
         //#region Title/Header options
         /**
-         * Gets or sets a survey logo.
-         * @see title
+         * An image URL or a Base64-encoded image to use as a survey logo.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/survey-logo/ (linkStyle))
+         * @see logoPosition
+         * @see logoFit
          */
         get: function () {
             return this.getLocalizableStringText("logo");
@@ -67524,8 +67576,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "logoWidth", {
         /**
-         * Gets or sets a survey logo width.
+         * A logo width in CSS-accepted values.
+         *
+         * Default value: `300px`
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/survey-logo/ (linkStyle))
+         * @see logoHeight
          * @see logo
+         * @see logoPosition
+         * @see logoFit
          */
         get: function () {
             var width = this.getPropertyValue("logoWidth");
@@ -67539,8 +67598,15 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "logoHeight", {
         /**
-         * Gets or sets a survey logo height.
+         * A logo height in CSS-accepted values.
+         *
+         * Default value: `200px`
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/survey-logo/ (linkStyle))
+         * @see logoHeight
          * @see logo
+         * @see logoPosition
+         * @see logoFit
          */
         get: function () {
             var height = this.getPropertyValue("logoHeight");
@@ -67554,8 +67620,17 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "logoPosition", {
         /**
-         * Gets or sets a survey logo position.
+         * A logo position relative to the [survey title](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#title).
+         *
+         * Possible values:
+         *
+         * - `"left"` (default) - Places the logo to the left of the survey title.
+         * - `"right"` - Places the logo to the right of the survey title.
+         * - `"none"` - Hides the logo.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/survey-logo/ (linkStyle))
          * @see logo
+         * @see logoFit
          */
         get: function () {
             return this.getPropertyValue("logoPosition");
@@ -67653,8 +67728,20 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "logoFit", {
         /**
-         * The logo fit mode.
+         * Specifies how to resize a logo to fit it into its container.
+         *
+         * Possible values:
+         *
+         * - `"contain"` (default)
+         * - `"cover"`
+         * - `"fill"`
+         * - `"none"`
+         *
+         * Refer to the [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) CSS property description for information on the possible values.
+         *
+         * [View Demo](https://surveyjs.io/form-library/examples/survey-logo/ (linkStyle))
          * @see logo
+         * @see logoPosition
          */
         get: function () {
             return this.getPropertyValue("logoFit");
@@ -68935,12 +69022,12 @@ var SurveyModel = /** @class */ (function (_super) {
     });
     Object.defineProperty(SurveyModel.prototype, "matrixDragHandleArea", {
         /**
-         * Specifies which part of a choice item responds to a drag gesture in MatrixDynamic questions.
+         * Specifies which part of a matrix row responds to a drag gesture in [Dynamic Matrix](https://surveyjs.io/form-library/examples/questiontype-matrixdynamic/) questions.
          *
          * Possible values:
          *
-         * - `"entireItem"` (default) - Users can use the entire choice item as a drag handle.
-         * - `"icon"` - Users can only use the choice item icon as a drag handle.
+         * - `"entireItem"` (default) - Users can use the entire matrix row as a drag handle.
+         * - `"icon"` - Users can only use a drag icon as a drag handle.
          */
         get: function () {
             return this.getPropertyValue("matrixDragHandleArea", "entireItem");
@@ -72212,23 +72299,13 @@ var SurveyModel = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    Object.defineProperty(SurveyModel.prototype, "isClearValueOnHidden", {
-        get: function () {
-            return (this.clearInvisibleValues == "onHidden" ||
-                this.isClearValueOnHiddenContainer);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SurveyModel.prototype, "isClearValueOnHiddenContainer", {
-        get: function () {
-            return (this.clearInvisibleValues == "onHiddenContainer" &&
-                !this.isShowingPreview &&
-                !this.runningPages);
-        },
-        enumerable: false,
-        configurable: true
-    });
+    SurveyModel.prototype.getQuestionClearIfInvisible = function (questionClearIf) {
+        if (this.isShowingPreview || this.runningPages)
+            return "none";
+        if (questionClearIf !== "default")
+            return questionClearIf;
+        return this.clearInvisibleValues;
+    };
     SurveyModel.prototype.questionVisibilityChanged = function (question, newValue) {
         this.updateVisibleIndexes();
         this.onQuestionVisibleChanged.fire(this, {
@@ -73398,7 +73475,7 @@ _jsonobject__WEBPACK_IMPORTED_MODULE_1__["Serializer"].addClass("survey", [
         default: "auto",
         choices: ["auto", "static", "responsive"],
     },
-    "width",
+    { name: "width", visibleIf: function (obj) { return obj.widthMode === "static"; } },
     { name: "backgroundImage", serializationProperty: "locBackgroundImage", visible: false },
     { name: "backgroundImageFit", default: "cover", choices: ["auto", "contain", "cover"], visible: false },
     { name: "backgroundOpacity:number", minValue: 0, maxValue: 1, default: 1, visible: false },
@@ -73829,9 +73906,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function tryNavigateToPage(survey, index) {
+function tryNavigateToPage(survey, page) {
     if (survey.isDesignMode)
         return;
+    var index = survey.visiblePages.indexOf(page);
     if (index < survey.currentPageNo) {
         survey.currentPageNo = index;
     }
@@ -73844,7 +73922,7 @@ function tryNavigateToPage(survey, index) {
     return true;
 }
 function createTOCListModel(survey) {
-    var items = survey.pages.map(function (page, index) {
+    var items = survey.pages.map(function (page) {
         return new _actions_action__WEBPACK_IMPORTED_MODULE_0__["Action"]({
             id: page.name,
             title: page.navigationTitle || page.title || page.name,
@@ -73852,7 +73930,7 @@ function createTOCListModel(survey) {
                 if (typeof document !== undefined && !!document.activeElement) {
                     !!document.activeElement.blur && document.activeElement.blur();
                 }
-                return tryNavigateToPage(survey, index);
+                return tryNavigateToPage(survey, page);
             },
             visible: new _base__WEBPACK_IMPORTED_MODULE_1__["ComputedUpdater"](function () { return page.isVisible && !page.isStartPage; })
         });
@@ -75284,8 +75362,7 @@ var ResponsivityManager = /** @class */ (function () {
         this.model.updateCallback = function (isResetInitialized) {
             if (isResetInitialized)
                 _this.isInitialized = false;
-            else
-                setTimeout(function () { _this.process(); }, 1);
+            setTimeout(function () { _this.process(); }, 1);
         };
         if (typeof ResizeObserver !== "undefined") {
             this.resizeObserver = new ResizeObserver(function (_) { return _this.process(); });