@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/dist/TimePickerClock.js

@@ -8,17 +8,15 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import query from "@ui5/webcomponents-base/dist/decorators/query.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 // Template
 import TimePickerClockTemplate from "./TimePickerClockTemplate.js";
 // Styles
 import TimePickerClockCss from "./generated/themes/TimePickerClock.css.js";
-const ANIMATION_DURATION_MAX = 200; // total animation duration, without the delay before firing the event
-const ANIMATION_DELAY_EVENT = 100; // delay before firing the event
-const CLOCK_ANGLE_STEP = 6;
 const CLOCK_NUMBER_CLASS = "ui5-tp-clock-number";
-const CLOCK_NUMBER_HOVER_CLASS = "ui5-tp-clock-number-hover";
 const CLOCK_NUMBER_SELECTED_CLASS = "ui5-tp-clock-selected";
+const CLOCK_NUMBER_HOVERED_CLASS = "ui5-tp-clock-hovered";
 const CLOCK_MIDDOT_CLASS = "ui5-tp-clock-mid-dot";
 /**
  * @class
@@ -27,8 +25,6 @@ const CLOCK_MIDDOT_CLASS = "ui5-tp-clock-mid-dot";
  *
  * `ui5-time-picker-clock` allows selecting of hours,minutes or seconds (depending on property set).
  * The component supports interactions with mouse, touch and mouse wheel.
- * Depending on settings, the clock can display only outer set of items (when the clock displays hours in 12-hour mode,
- * minutes or seconds), or outer and inner sets of items (when the clock displays hours in 24-hours mode).
  * The step for displaying or selecting of items can be configured.
  *
  * `ui5-time-picker-clock` is used as part of `ui5-time-selection-clocks` component, which
@@ -60,21 +56,15 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
          */
         this.active = false;
         /**
-         * Minimum item value for the outer circle of the clock.
+         * Minimum item value for the circle of the clock.
          * @default -1
          */
         this.itemMin = -1;
         /**
-         * Maximum item value for the outer circle of the clock.
+         * Maximum item value for the circle of the clock.
          * @default -1
          */
         this.itemMax = -1;
-        /**
-         * If set to `true`, an inner circle is displayed.
-         * The first item value of the inner circle will be itemMax + 1
-         * @default false
-         */
-        this.showInnerCircle = false;
         /**
          * If set to `true`, a surrounding circle with markers (dots) will be hidden.
          * (for example, on the 'Minutes' clock-dial, markers represent minutes).
@@ -82,9 +72,7 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
          */
         this.hideFractions = false;
         /**
-         * If provided, this will replace the last item displayed. If there is only one (outer) circle,
-         * the last item from outer circle will be replaced; if there is an inner circle too, the last
-         * item of inner circle will be replaced. Usually, the last item '24' is replaced with '0'.
+         * If provided, this will replace the last item displayed. Usually, the last item ('12', '24' or '60') is replaced with '0'.
          * @default -1
          */
         this.lastItemReplacement = -1;
@@ -122,6 +110,10 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
          * Defines the currently selected Time Picker Clock item.
          */
         this._selectedItem = {};
+        /**
+         * Defines the currently hovered Time Picker Clock item.
+         */
+        this._hoveredItem = {};
         /**
          * Keeps variables used in interaction calculations.
          */
@@ -131,10 +123,8 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
             centerY: 0,
             dotHeight: 0,
             numberHeight: 0,
-            outerMax: 0,
-            outerMin: 0,
-            innerMax: 0,
-            innerMin: 0,
+            activeRadiusMax: 0,
+            activeRadiusMin: 0,
             offsetX: 0,
             offsetY: 0,
         };
@@ -169,23 +159,14 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
          */
         this._prevHoveredValue = -1;
         /**
-         * Animation in progress flag.
+         * Animation skip flag. If set to `true`, the component will not have transition animation when displayed.
          * @default false
          */
-        this._animationInProgress = false;
+        this._skipAnimation = false;
         this._fnOnMouseOutUp = () => {
             this._mouseOrTouchDown = false;
         };
     }
-    get classes() {
-        return {
-            clock: {
-                "ui5-tp-clock": true,
-                "ui5-tp-clock-inner": this.showInnerCircle,
-                "ui5-tp-clock-active": this.active,
-            },
-        };
-    }
     onEnterDOM() {
         document.addEventListener("mouseup", this._fnOnMouseOutUp, false);
     }
@@ -194,8 +175,14 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
     }
     onBeforeRendering() {
         this._prepareClockItems();
-        const value = this._fixReplacementValue(this.selectedValue);
-        this._updateSelectedValueObject(value);
+        this._selectedItem = this._updateSelectedOrHoveredItem(this._fixReplacementValue(this.selectedValue), CLOCK_NUMBER_SELECTED_CLASS);
+        this._hoveredItem = this._updateSelectedOrHoveredItem(this._fixReplacementValue(this._hoveredValue), CLOCK_NUMBER_HOVERED_CLASS);
+    }
+    get _itemsCount() {
+        return this.itemMax - this.itemMin + 1;
+    }
+    get _angleStep() {
+        return this.hideFractions ? 360 / this._itemsCount : 6;
     }
     /**
      * Returns the real value of the passed clock item, if the replacement must be done, returns the replaced value.
@@ -204,49 +191,36 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
      */
     _fixReplacementValue(value) {
         let realValue = value;
-        const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1);
         if (realValue === 0) {
-            realValue = maxValue;
+            realValue = this.itemMax;
         }
-        if (realValue === maxValue && this.lastItemReplacement !== -1) {
+        if (realValue === this.itemMax && this.lastItemReplacement !== -1) {
             realValue = this.lastItemReplacement;
         }
         return realValue;
     }
     /**
-     * Updates internal selected value object constructed for rendering purposes.
-     * @param value currently selected value.
+     * Returns internally selected or hovered value object constructed for rendering purposes.
+     * @param value currently selected or hovered value.
+     * @returns Selected or hovered value object
      */
-    _updateSelectedValueObject(value) {
+    _updateSelectedOrHoveredItem(value, cssClass) {
         if (value === -1) {
-            this._selectedItem = {
+            return {
                 showMarker: false,
             };
-            return;
         }
-        const selectedOuter = (value >= this.itemMin && value <= this.itemMax) || (!this.showInnerCircle && value === this.lastItemReplacement);
-        const selectedInner = ((value >= this.itemMin + this.itemMax && value <= this.itemMax * 2) || value === this.lastItemReplacement) && this.showInnerCircle;
+        const selectedOrHoveredItem = (value >= this.itemMin && value <= this.itemMax) || value === this.lastItemReplacement;
         const stepAngle = 360 / (this.itemMax - this.itemMin + 1);
-        const innerValue = this.lastItemReplacement === -1 || !this.prependZero ? value.toString() : value.toString().padStart(2, "0");
-        let currentAngle = selectedOuter || selectedInner ? value * stepAngle : undefined;
+        let currentAngle = selectedOrHoveredItem ? value * stepAngle : undefined;
         if (currentAngle !== undefined) {
             currentAngle %= 360;
         }
-        this._selectedItem = {
+        return {
             "angle": currentAngle,
-            "item": selectedOuter ? value.toString() : "",
-            "innerItem": selectedInner ? innerValue : "",
-            "showMarker": selectedOuter || selectedInner,
-            "itemClasses": CLOCK_NUMBER_CLASS + (selectedOuter ? ` ${CLOCK_NUMBER_SELECTED_CLASS}` : ""),
-            "innerItemClasses": CLOCK_NUMBER_CLASS + (selectedInner ? ` ${CLOCK_NUMBER_SELECTED_CLASS}` : ""),
-            // eslint-disable-next-line
-            // TODO: styles are added inline in the template: remove after checking
-            "outerStyles": {
-                transform: `translate(-50%) rotate(${currentAngle || 0}deg)`,
-            },
-            "innerStyles": {
-                transform: `rotate(-${currentAngle || 0}deg)`,
-            },
+            "item": selectedOrHoveredItem ? value.toString() : "",
+            "showMarker": selectedOrHoveredItem,
+            "itemClasses": `${CLOCK_NUMBER_CLASS} ${selectedOrHoveredItem ? cssClass : ""}`,
         };
     }
     /**
@@ -254,43 +228,23 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
      */
     _prepareClockItems() {
         const values = [];
-        let displayStep = this.displayStep;
+        const angleStep = this._angleStep;
+        const visualItemsCount = 360 / angleStep;
+        const multiplier = visualItemsCount / this._itemsCount;
         let item;
-        let valueIndex;
         let i;
         this._items = [];
         for (i = this.itemMin; i <= this.itemMax; i++) {
             values.push({
                 "item": i.toString(),
-                "innerItem": this.showInnerCircle ? (i + this.itemMax).toString() : undefined,
             });
         }
         if (this.lastItemReplacement !== -1) {
-            if (this.showInnerCircle && this.prependZero) {
-                values[values.length - 1].innerItem = this.lastItemReplacement.toString().padStart(2, "0");
-            }
-            else {
-                values[values.length - 1].item = this.lastItemReplacement.toString();
-            }
+            values[values.length - 1].item = this.lastItemReplacement.toString();
         }
-        // determines angle step for values display
-        const itemStep = 360 / CLOCK_ANGLE_STEP / values.length;
-        // determines step for values display in units
-        if (this.valueStep * itemStep > displayStep) {
-            displayStep = this.valueStep * itemStep;
-        }
-        for (i = 1; i <= 60; i++) {
-            valueIndex = i / itemStep - 1;
-            item = i % displayStep !== 0 ? {} : values[valueIndex];
-            item.angle = i * CLOCK_ANGLE_STEP;
-            // eslint-disable-next-line
-            // TODO: styles are added inline in the template: remove after checking
-            item.outerStyles = {
-                transform: `translate(-50%) rotate(${i * 6}deg)`,
-            };
-            item.innerStyles = {
-                transform: `rotate(-${i * 6}deg)`,
-            };
+        for (i = 1; i <= visualItemsCount; i++) {
+            item = i % (this.displayStep * multiplier) !== 0 ? {} : values[i / multiplier - 1];
+            item.angle = i * angleStep;
             this._items.push(item);
         }
     }
@@ -302,13 +256,6 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
         const domRef = this.getDomRef();
         return domRef && domRef.querySelector(".ui5-tp-clock-cover");
     }
-    /**
-     * Returns the real max value of clock items, taking in count if there is inner circle or not.
-     * @returns max value
-     */
-    _getMaxValue() {
-        return this.showInnerCircle ? this.itemMax * 2 : this.itemMax;
-    }
     /**
      * Calculates the outer height of a HTML element.
      * @param element The element which outer height to be calculated
@@ -327,11 +274,10 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
      * @returns Id of the clock item element
      */
     _hoveredId(value) {
-        if (value === this._getMaxValue() && this.lastItemReplacement !== -1) {
+        if (value === this.itemMax && this.lastItemReplacement !== -1) {
             value = this.lastItemReplacement;
         }
-        const valueString = this.showInnerCircle && value === this.lastItemReplacement && this.prependZero ? value.toString().padStart(2, "0") : value.toString();
-        return `#${this._id}-${valueString}`;
+        return `#${this._id}-${value.toString()}`;
     }
     /**
      * Returns provided value as string. Padding with additional zero is applied if necessary.
@@ -365,10 +311,8 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
             "centerY": radius,
             "dotHeight": dotHeight,
             "numberHeight": numberHeight,
-            "outerMax": radius,
-            "outerMin": radius - numberHeight,
-            "innerMax": radius - numberHeight - 1,
-            "innerMin": radius - numberHeight * 2 - 1,
+            "activeRadiusMax": radius,
+            "activeRadiusMin": radius - numberHeight * 1.5 - 1,
             "offsetX": offset.left + scrollLeft,
             "offsetY": offset.top + scrollTop,
         };
@@ -385,99 +329,19 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
         const angle = ((Math.atan(dY / dX) * 180) / Math.PI) + 90 + mod;
         const angleStep = (360 / this.itemMax) * this.valueStep;
         const radius = Math.sqrt(dX * dX + dY * dY);
-        const isOuter = radius <= this._dimensionParameters.outerMax && radius > (this.showInnerCircle ? this._dimensionParameters.outerMin : this._dimensionParameters.innerMin);
-        const isInner = this.showInnerCircle && radius <= this._dimensionParameters.innerMax && radius > this._dimensionParameters.innerMin;
-        const isOuterHover = radius <= this._dimensionParameters.outerMax && radius > this._dimensionParameters.outerMin;
-        const isInnerHover = isInner;
+        const isInActiveZone = radius <= this._dimensionParameters.activeRadiusMax && radius > this._dimensionParameters.activeRadiusMin;
         let finalAngle = Math.round((angle === 0 ? 360 : angle) / angleStep) * angleStep;
         if (finalAngle === 0) {
             finalAngle = 360;
         }
         // selected item calculations
-        if (isInner || isOuter) {
-            this._selectedValue = (finalAngle / angleStep) * this.valueStep;
-            if (isInner) {
-                this._selectedValue += this.itemMax;
-            }
-        }
-        else {
-            this._selectedValue = -1;
-        }
+        this._selectedValue = isInActiveZone ? (finalAngle / angleStep) * this.valueStep : -1;
         // hover simulation calculations
-        this._hoveredValue = isInnerHover || isOuterHover ? this._selectedValue : -1;
-        if (this._selectedValue === this._getMaxValue() && this.lastItemReplacement !== -1) {
+        this._hoveredValue = isInActiveZone ? this._selectedValue : -1;
+        if (this._selectedValue === this.itemMax && this.lastItemReplacement !== -1) {
             this._selectedValue = this.lastItemReplacement;
         }
     }
-    /**
-     * Does the animation between the old and the new value of the clock. Can be skipped with setting the second parameter to true.
-     * @param newValue the new value that must be set
-     * @param skipAnimation whether to skip the animation
-     */
-    _changeValueAnimation(newValue, skipAnimation = false) {
-        const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1);
-        let firstSelected = this._movSelectedValue;
-        let lastSelected = newValue;
-        let direction = 1;
-        let path1;
-        let path2;
-        let delay;
-        if (!skipAnimation) {
-            // do the animation here
-            path1 = Math.abs(firstSelected - lastSelected);
-            path2 = maxValue - path1;
-            if (firstSelected < lastSelected) {
-                if (path2 < path1) {
-                    firstSelected += maxValue;
-                    direction = -1;
-                }
-            }
-            else if (path2 < path1) {
-                lastSelected += maxValue;
-            }
-            else {
-                direction = -1;
-            }
-            delay = firstSelected === lastSelected ? 0 : Math.ceil(ANIMATION_DURATION_MAX / Math.abs(firstSelected - lastSelected));
-            this._animationInProgress = true;
-            this._selectNextNumber(firstSelected, lastSelected, direction, maxValue, newValue, delay);
-        }
-        else {
-            this._setSelectedValue(newValue);
-        }
-    }
-    /**
-     * Does the animation step between old and new selected values.
-     * @param firstSelected first/current value to move from
-     * @param lastSelected last value to move to
-     * @param direction direction of the animation
-     * @param maxValue max clock value
-     * @param newValue new value
-     * @param delay delay of the single step
-     */
-    _selectNextNumber(firstSelected, lastSelected, direction, maxValue, newValue, delay) {
-        const current = firstSelected > maxValue ? firstSelected - maxValue : firstSelected;
-        if (firstSelected === lastSelected) {
-            this._animationInProgress = false;
-        }
-        this._setSelectedValue(current);
-        if (firstSelected !== lastSelected) {
-            firstSelected += direction;
-            setTimeout(() => {
-                this._selectNextNumber(firstSelected, lastSelected, direction, maxValue, newValue, delay);
-            }, delay);
-        }
-        else {
-            // the new value is set, fire event
-            setTimeout(() => {
-                this.fireDecoratorEvent("change", {
-                    value: newValue,
-                    stringValue: this._getStringValue(newValue),
-                    finalChange: true,
-                });
-            }, ANIMATION_DELAY_EVENT);
-        }
-    }
     /**
      * Mousewheel handler. Increases/decreases value of the clock.
      * @param increase whether to increase or decrease the value
@@ -485,8 +349,6 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
     _modifyValue(increase) {
         let selectedValue = this.selectedValue;
         const replacementValue = this.lastItemReplacement;
-        const minValue = this.itemMin;
-        const maxValue = this.itemMax * (this.showInnerCircle ? 2 : 1);
         let step = this.valueStep;
         let newValue;
         // fix step in order to change value to the nearest possible if step is > 1
@@ -495,43 +357,36 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
             step = Math.abs(selectedValue - newValue);
         }
         if (selectedValue === replacementValue) {
-            selectedValue = maxValue;
+            selectedValue = this.itemMax;
         }
         if (increase) {
             selectedValue += step;
-            if (selectedValue > maxValue) {
-                selectedValue -= maxValue;
+            if (selectedValue > this.itemMax) {
+                selectedValue -= this.itemMax;
             }
         }
         else {
             selectedValue -= step;
-            if (selectedValue < minValue) {
-                selectedValue = maxValue;
+            if (selectedValue < this.itemMin) {
+                selectedValue = this.itemMax;
             }
         }
         this._setSelectedValue(selectedValue);
     }
     /**
      * Sets new selected value, fires change event and updates selected value object used for rendering purposes.
-     * @param value
+     * @param value a value to be set
+     * @param bFinalChange whether the change is final or not
      */
-    _setSelectedValue(value) {
+    _setSelectedValue(value, bFinalChange = false) {
         const realValue = this._fixReplacementValue(value);
         this.selectedValue = realValue;
         this.fireDecoratorEvent("change", {
             value: realValue,
             stringValue: this._getStringValue(realValue),
-            finalChange: false,
+            finalChange: bFinalChange,
         });
-        this._updateSelectedValueObject(realValue);
-    }
-    _captureClockRef(el) {
-        if (el) {
-            // @ts-expect-error "mousewheel" is not a standard event
-            el.addEventListener("mousewheel", this._onMouseWheel.bind(this));
-            // @ts-expect-error "DOMMouseScroll" is not a standard event
-            el.addEventListener("DOMMouseScroll", this._onMouseWheel.bind(this));
-        }
+        this._selectedItem = this._updateSelectedOrHoveredItem(realValue, CLOCK_NUMBER_SELECTED_CLASS);
     }
     /**
      * TouchStart/MouseDown event handler.
@@ -554,8 +409,6 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
      * @param evt Event object
      */
     _onTouchMove(evt) {
-        let hoveredNumber;
-        const domRef = this.getDomRef();
         evt.preventDefault();
         if (this._mouseOrTouchDown) {
             const x = evt.type === "touchmove" ? evt.touches[0].pageX : evt.pageX;
@@ -571,16 +424,6 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
                 this._calculateDimensions();
             }
             this._calculatePosition(evt.pageX, evt.pageY);
-            if (this.displayStep > 1 && this._hoveredValue !== -1) {
-                this._hoveredValue = Math.round(this._hoveredValue / this.displayStep) * this.displayStep;
-            }
-            if (!this.disabled && this._hoveredValue !== this._prevHoveredValue) {
-                hoveredNumber = domRef.querySelector(this._hoveredId(this._prevHoveredValue));
-                hoveredNumber && hoveredNumber.classList.remove(CLOCK_NUMBER_HOVER_CLASS);
-                this._prevHoveredValue = this._hoveredValue;
-                hoveredNumber = domRef.querySelector(this._hoveredId(this._prevHoveredValue));
-                hoveredNumber && hoveredNumber.classList.add(CLOCK_NUMBER_HOVER_CLASS);
-            }
         }
     }
     /**
@@ -597,7 +440,7 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
             return;
         }
         if (!this._cancelTouchOut) {
-            this._changeValueAnimation(this._selectedValue);
+            this._setSelectedValue(this._selectedValue, true);
         }
     }
     /**
@@ -615,8 +458,6 @@ let TimePickerClock = class TimePickerClock extends UI5Element {
      * MouseOut event handler.
      */
     _onMouseOut() {
-        const hoveredNumber = this.getDomRef().querySelector(this._hoveredId(this._hoveredValue));
-        hoveredNumber && hoveredNumber.classList.remove(CLOCK_NUMBER_HOVER_CLASS);
         this._hoveredValue = -1;
         this._prevHoveredValue = -1;
     }
@@ -636,9 +477,6 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], TimePickerClock.prototype, "itemMax", void 0);
-__decorate([
-    property({ type: Boolean })
-], TimePickerClock.prototype, "showInnerCircle", void 0);
 __decorate([
     property()
 ], TimePickerClock.prototype, "label", void 0);
@@ -666,6 +504,9 @@ __decorate([
 __decorate([
     property({ type: Object })
 ], TimePickerClock.prototype, "_selectedItem", void 0);
+__decorate([
+    property({ type: Object })
+], TimePickerClock.prototype, "_hoveredItem", void 0);
 __decorate([
     property({ type: Object })
 ], TimePickerClock.prototype, "_dimensionParameters", void 0);
@@ -688,8 +529,14 @@ __decorate([
     property({ type: Number, noAttribute: true })
 ], TimePickerClock.prototype, "_prevHoveredValue", void 0);
 __decorate([
-    property({ type: Boolean, noAttribute: true })
-], TimePickerClock.prototype, "_animationInProgress", void 0);
+    property({ type: Boolean })
+], TimePickerClock.prototype, "_skipAnimation", void 0);
+__decorate([
+    query(".ui5-tp-clock-number")
+], TimePickerClock.prototype, "_firstNumberElement", void 0);
+__decorate([
+    query(".ui5-tp-clock")
+], TimePickerClock.prototype, "_clockWrapper", void 0);
 TimePickerClock = __decorate([
     customElement({
         tag: "ui5-time-picker-clock",