@openui5/sap.ui.webc.main 1.115.0 → 1.116.0

package/src/sap/ui/webc/main/thirdparty/Slider.js

@@ -1,41 +1,25 @@
-sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/Keys", "./SliderBase", "./Icon", "./generated/templates/SliderTemplate.lit", "./generated/i18n/i18n-defaults"], function (_exports, _Float, _i18nBundle, _Keys, _SliderBase, _Icon, _SliderTemplate, _i18nDefaults) {
+sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/decorators/customElement", "sap/ui/webc/common/thirdparty/base/decorators/property", "sap/ui/webc/common/thirdparty/base/types/Float", "sap/ui/webc/common/thirdparty/base/i18nBundle", "sap/ui/webc/common/thirdparty/base/Keys", "./SliderBase", "./Icon", "./generated/templates/SliderTemplate.lit", "./generated/i18n/i18n-defaults"], function (_exports, _customElement, _property, _Float, _i18nBundle, _Keys, _SliderBase, _Icon, _SliderTemplate, _i18nDefaults) {
   "use strict";
 
   Object.defineProperty(_exports, "__esModule", {
     value: true
   });
   _exports.default = void 0;
+  _customElement = _interopRequireDefault(_customElement);
+  _property = _interopRequireDefault(_property);
   _Float = _interopRequireDefault(_Float);
   _SliderBase = _interopRequireDefault(_SliderBase);
   _Icon = _interopRequireDefault(_Icon);
   _SliderTemplate = _interopRequireDefault(_SliderTemplate);
   function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-  // Template
-
-  // Texts
-
-  /**
-   * @public
-   */
-  const metadata = {
-    tag: "ui5-slider",
-    languageAware: true,
-    managedSlots: true,
-    properties: /** @lends sap.ui.webcomponents.main.Slider.prototype */{
-      /**
-       * Current value of the slider
-       *
-       * @type {Float}
-       * @defaultvalue 0
-       * @public
-       */
-      value: {
-        type: _Float.default,
-        defaultValue: 0
-      }
-    }
+  var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
+    var c = arguments.length,
+      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
+      d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
   };
-
+  var Slider_1;
   /**
    * @class
    *
@@ -100,33 +84,24 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
    *
    * @constructor
    * @author SAP SE
-   * @alias sap.ui.webcomponents.main.Slider
-   * @extends SliderBase
+   * @alias sap.ui.webc.main.Slider
+   * @extends sap.ui.webc.main.SliderBase
    * @tagname ui5-slider
    * @since 1.0.0-rc.11
    * @public
    */
-  class Slider extends _SliderBase.default {
-    static get metadata() {
-      return metadata;
-    }
-    static get template() {
-      return _SliderTemplate.default;
-    }
+  let Slider = Slider_1 = class Slider extends _SliderBase.default {
     constructor() {
       super();
-      this._stateStorage.value = null;
-      this._setInitialValue("value", null);
-    }
-    static get dependencies() {
-      return [_Icon.default];
+      this._progressPercentage = 0;
+      this._handlePositionFromStart = 0;
+      this._stateStorage.value = undefined;
     }
-
     /**
      *
      * Check if the previously saved state is outdated. That would mean
      * either it is the initial rendering or that a property has been changed
-     * programatically - because the previous state is always updated in
+     * programmatically - because the previous state is always updated in
      * the interaction handlers.
      *
      * Normalize current properties, update the previously stored state.
@@ -138,92 +113,113 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
         return;
       }
       this.notResized = true;
-      this.syncUIAndState("value");
+      this.syncUIAndState();
       this._updateHandleAndProgress(this.value);
     }
-
+    syncUIAndState() {
+      // Validate step and update the stored state for the step property.
+      if (this.isPropertyUpdated("step")) {
+        this._validateStep(this.step);
+        this.storePropertyState("step");
+      }
+      // Recalculate the tickmarks and labels and update the stored state.
+      if (this.isPropertyUpdated("min", "max", "value")) {
+        this.storePropertyState("min", "max");
+        // Here the value props are changed programmatically (not by user interaction)
+        // and it won't be "stepified" (rounded to the nearest step). 'Clip' them within
+        // min and max bounderies and update the previous state reference.
+        this.value = _SliderBase.default.clipValue(this.value, this._effectiveMin, this._effectiveMax);
+        this.updateStateStorageAndFireInputEvent("value");
+        this.storePropertyState("value");
+      }
+      // Labels must be updated if any of the min/max/step/labelInterval props are changed
+      if (this.labelInterval && this.showTickmarks) {
+        this._createLabels();
+      }
+      // Update the stored state for the labelInterval, if changed
+      if (this.isPropertyUpdated("labelInterval")) {
+        this.storePropertyState("labelInterval");
+      }
+    }
     /**
      * Called when the user starts interacting with the slider
      *
      * @private
      */
-    _onmousedown(event) {
+    _onmousedown(e) {
       // If step is 0 no interaction is available because there is no constant
       // (equal for all user environments) quantitative representation of the value
       if (this.disabled || this.step === 0) {
         return;
       }
-      const newValue = this.handleDownBase(event);
+      const newValue = this.handleDownBase(e);
       this._valueOnInteractionStart = this.value;
-
       // Set initial value if one is not set previously on focus in.
       // It will be restored if ESC key is pressed.
-      if (this._getInitialValue("value") === null) {
-        this._setInitialValue("value", this.value);
+      if (this._valueInitial === undefined) {
+        this._valueInitial = this.value;
       }
-
       // Do not yet update the Slider if press is over a handle. It will be updated if the user drags the mouse.
-      if (!this._isHandlePressed(this.constructor.getPageXValueFromEvent(event))) {
+      const ctor = this.constructor;
+      if (!this._isHandlePressed(ctor.getPageXValueFromEvent(e))) {
         this._updateHandleAndProgress(newValue);
-        this.updateValue("value", newValue);
+        this.value = newValue;
+        this.updateStateStorageAndFireInputEvent("value");
       }
     }
-    _onfocusin(event) {
+    _onfocusin() {
       // Set initial value if one is not set previously on focus in.
       // It will be restored if ESC key is pressed.
-      if (this._getInitialValue("value") === null) {
-        this._setInitialValue("value", this.value);
+      if (this._valueInitial === undefined) {
+        this._valueInitial = this.value;
       }
       if (this.showTooltip) {
         this._tooltipVisibility = _SliderBase.default.TOOLTIP_VISIBILITY.VISIBLE;
       }
     }
-    _onfocusout(event) {
+    _onfocusout() {
       // Prevent focusout when the focus is getting set within the slider internal
       // element (on the handle), before the Slider' customElement itself is finished focusing
       if (this._isFocusing()) {
         this._preventFocusOut();
         return;
       }
-
       // Reset focus state and the stored Slider's initial
       // value that was saved when it was first focused in
-      this._setInitialValue("value", null);
+      this._valueInitial = undefined;
       if (this.showTooltip) {
         this._tooltipVisibility = _SliderBase.default.TOOLTIP_VISIBILITY.HIDDEN;
       }
     }
-
     /**
      * Called when the user moves the slider
      *
      * @private
      */
-    _handleMove(event) {
-      event.preventDefault();
-
+    _handleMove(e) {
+      e.preventDefault();
       // If step is 0 no interaction is available because there is no constant
       // (equal for all user environments) quantitative representation of the value
       if (this.disabled || this._effectiveStep === 0) {
         return;
       }
-      const newValue = this.constructor.getValueFromInteraction(event, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
+      const ctor = this.constructor;
+      const newValue = ctor.getValueFromInteraction(e, this._effectiveStep, this._effectiveMin, this._effectiveMax, this.getBoundingClientRect(), this.directionStart);
       this._updateHandleAndProgress(newValue);
-      this.updateValue("value", newValue);
+      this.value = newValue;
+      this.updateStateStorageAndFireInputEvent("value");
     }
-
     /** Called when the user finish interacting with the slider
      *
      * @private
      */
-    _handleUp(event) {
+    _handleUp() {
       if (this._valueOnInteractionStart !== this.value) {
         this.fireEvent("change");
       }
       this.handleUpBase();
-      this._valueOnInteractionStart = null;
+      this._valueOnInteractionStart = undefined;
     }
-
     /** Determines if the press is over the handle
      *
      * @private
@@ -232,7 +228,6 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
       const sliderHandleDomRect = this._sliderHandle.getBoundingClientRect();
       return clientX >= sliderHandleDomRect.left && clientX <= sliderHandleDomRect.right;
     }
-
     /** Updates the UI representation of the progress bar and handle position
      *
      * @private
@@ -240,20 +235,21 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
     _updateHandleAndProgress(newValue) {
       const max = this._effectiveMax;
       const min = this._effectiveMin;
-
       // The progress (completed) percentage of the slider.
       this._progressPercentage = (newValue - min) / (max - min);
       // How many pixels from the left end of the slider will be the placed the affected  by the user action handle
       this._handlePositionFromStart = this._progressPercentage * 100;
     }
-    _handleActionKeyPress(event) {
+    _handleActionKeyPress(e) {
       const min = this._effectiveMin;
       const max = this._effectiveMax;
       const currentValue = this.value;
-      const newValue = (0, _Keys.isEscape)(event) ? this._getInitialValue("value") : this.constructor.clipValue(this._handleActionKeyPressBase(event, "value") + currentValue, min, max);
+      const ctor = this.constructor;
+      const newValue = (0, _Keys.isEscape)(e) ? this._valueInitial : ctor.clipValue(this._handleActionKeyPressBase(e, "value") + currentValue, min, max);
       if (newValue !== currentValue) {
         this._updateHandleAndProgress(newValue);
-        this.updateValue("value", newValue);
+        this.value = newValue;
+        this.updateStateStorageAndFireInputEvent("value");
       }
     }
     get styles() {
@@ -280,21 +276,19 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
     get _sliderHandle() {
       return this.shadowRoot.querySelector(".ui5-slider-handle");
     }
-    get labelItems() {
-      return this._labelItems;
-    }
     get tooltipValue() {
-      const stepPrecision = this.constructor._getDecimalPrecisionOfNumber(this._effectiveStep);
+      const ctor = this.constructor;
+      const stepPrecision = ctor._getDecimalPrecisionOfNumber(this._effectiveStep);
       return this.value.toFixed(stepPrecision);
     }
     get _ariaDisabled() {
       return this.disabled || undefined;
     }
     get _ariaLabelledByText() {
-      return Slider.i18nBundle.getText(_i18nDefaults.SLIDER_ARIA_DESCRIPTION);
+      return Slider_1.i18nBundle.getText(_i18nDefaults.SLIDER_ARIA_DESCRIPTION);
     }
     static async onDefine() {
-      Slider.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
+      Slider_1.i18nBundle = await (0, _i18nBundle.getI18nBundle)("@ui5/webcomponents");
     }
     get tickmarksObject() {
       const count = this._tickmarksCount;
@@ -307,7 +301,17 @@ sap.ui.define(["exports", "sap/ui/webc/common/thirdparty/base/types/Float", "sap
       }
       return arr;
     }
-  }
+  };
+  __decorate([(0, _property.default)({
+    validator: _Float.default,
+    defaultValue: 0
+  })], Slider.prototype, "value", void 0);
+  Slider = Slider_1 = __decorate([(0, _customElement.default)({
+    tag: "ui5-slider",
+    languageAware: true,
+    template: _SliderTemplate.default,
+    dependencies: [_Icon.default]
+  })], Slider);
   Slider.define();
   var _default = Slider;
   _exports.default = _default;