@ui5/webcomponents 0.0.0-07460127d → 0.0.0-0a35d6b3d

package/dist/WheelSlider.d.ts

@@ -0,0 +1,103 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
+type WheelSliderSelectEventDetail = {
+    value: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/WheelSlider.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ * @since 1.0.0-rc.6
+ */
+declare class WheelSlider extends UI5Element {
+    /**
+     * Defines whether the component is disabled
+     * (default is set to <code>false</code>).
+     * A disabled component can't be pressed or
+     * focused, and it is not in the tab chain.
+     *
+     * @default false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the currently selected value
+     * @default "0"
+     * @public
+     */
+    value: string;
+    /**
+     * Defines the label of the wheelslider.
+     * @default ""
+     * @public
+     */
+    label: string;
+    /**
+     * Indicates if the wheelslider is expanded.
+     * @default false
+     * @public
+     */
+    expanded: boolean;
+    /**
+     * Indicates if the wheelslider has a cyclic behaviour.
+     * @default false
+     * @public
+     */
+    cyclic: boolean;
+    _items: Array<string>;
+    _itemsToShow: Array<{
+        value: string;
+        selected: boolean;
+    }>;
+    _currentElementIndex: number;
+    _scroller: ScrollEnablement;
+    _prevWheelTimestamp?: number;
+    constructor();
+    onBeforeRendering(): void;
+    onAfterRendering(): true | undefined;
+    get classes(): {
+        root: {
+            "ui5-wheelslider-root": boolean;
+            "ui5-phone": boolean;
+        };
+    };
+    expandSlider(): void;
+    collapseSlider(): void;
+    get _itemCellHeight(): number;
+    _updateScrolling(): void;
+    _handleScrollTouchEnd(): void;
+    _selectElement(element: HTMLElement): void;
+    _getCurrentRepetition(): number;
+    _selectElementByIndex(currentIndex: number): void;
+    _timesMultipliedOnCyclic(): number;
+    _buildItemsToShow(): void;
+    _handleArrayBorderReached(currentIndex: number): number;
+    /**
+     * The listener for this event can't be passive as it calls preventDefault()
+     *
+     * @param e Wheel Event
+     * @private
+     */
+    _handleWheel(e: WheelEvent): void;
+    _onclick(e: MouseEvent): void;
+    _onArrowDown(e: KeyboardEvent): void;
+    _onArrowUp(e: KeyboardEvent): void;
+    _itemDown(): void;
+    _itemUp(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _selectLimitCell(e: KeyboardEvent, isMax: boolean): void;
+}
+export default WheelSlider;
+export type { WheelSliderSelectEventDetail };

package/dist/WheelSlider.js

@@ -0,0 +1,338 @@
+var __decorate = (this && this.__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;
+};
+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.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+import { isDown, isUp, isPageUp, isPageDown, } from "@ui5/webcomponents-base/dist/Keys.js";
+import getEffectiveContentDensity from "@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js";
+import "@ui5/webcomponents-icons/dist/navigation-up-arrow.js";
+import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import ScrollEnablement from "@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js";
+import WheelSliderTemplate from "./generated/templates/WheelSliderTemplate.lit.js";
+import Button from "./Button.js";
+// Styles
+import WheelSliderCss from "./generated/themes/WheelSlider.css.js";
+const CELL_SIZE_COMPACT = 32;
+const CELL_SIZE_COZY = 46;
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * <h3>Usage</h3>
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/WheelSlider.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @private
+ * @since 1.0.0-rc.6
+ */
+let WheelSlider = class WheelSlider extends UI5Element {
+    constructor() {
+        super();
+        this._currentElementIndex = 0;
+        this._itemsToShow = [];
+        this._scroller = new ScrollEnablement(this);
+        this._scroller.attachEvent("scroll", this._updateScrolling.bind(this));
+        this._scroller.attachEvent("mouseup", this._handleScrollTouchEnd.bind(this));
+        this._scroller.attachEvent("touchend", this._handleScrollTouchEnd.bind(this));
+    }
+    onBeforeRendering() {
+        if (!this.expanded && this.cyclic) {
+            const index = this._currentElementIndex % this._items.length;
+            this._currentElementIndex = (this._timesMultipliedOnCyclic() / 2) * this._items.length + index;
+        }
+        if (!this.value) {
+            this.value = this._items[0];
+        }
+        this._buildItemsToShow();
+    }
+    onAfterRendering() {
+        if (!this._scroller.scrollContainer) {
+            this._scroller.scrollContainer = this.shadowRoot.querySelector(`[id="${this._id}--wrapper"]`);
+        }
+        if (!this.expanded) {
+            this._scroller.scrollTo(0, 0);
+        }
+        if (this.expanded) {
+            const elements = this.shadowRoot.querySelectorAll(".ui5-wheelslider-item");
+            for (let i = 0; i < elements.length; i++) {
+                const el = elements[i];
+                if (el.textContent === this.value) {
+                    this._selectElementByIndex(Number(el.dataset.itemIndex) + this._getCurrentRepetition() * this._items.length);
+                    return true;
+                }
+            }
+            this._selectElement(elements[0]);
+        }
+    }
+    get classes() {
+        return {
+            root: {
+                "ui5-wheelslider-root": true,
+                "ui5-phone": isPhone(),
+            },
+        };
+    }
+    expandSlider() {
+        this.expanded = true;
+        this.fireEvent("expand", {});
+    }
+    collapseSlider() {
+        this.expanded = false;
+        this.fireEvent("collapse", {});
+    }
+    get _itemCellHeight() {
+        const defaultSize = getEffectiveContentDensity(document.body) === "compact" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;
+        if (this.shadowRoot.querySelectorAll(".ui5-wheelslider-item").length) {
+            const itemComputedStyle = getComputedStyle(this.shadowRoot.querySelector(".ui5-wheelslider-item"));
+            const itemHeightValue = itemComputedStyle.getPropertyValue(getScopedVarName("--_ui5_wheelslider_item_height"));
+            const onlyDigitsValue = itemHeightValue.replace("px", "");
+            return Number(onlyDigitsValue) || defaultSize;
+        }
+        return defaultSize;
+    }
+    _updateScrolling() {
+        const cellSizeInPx = this._itemCellHeight, scrollWhere = this._scroller.scrollContainer.scrollTop;
+        let offsetIndex;
+        if (!scrollWhere) {
+            return;
+        }
+        offsetIndex = Math.round(scrollWhere / cellSizeInPx);
+        if (this.value === this._itemsToShow[offsetIndex].value) {
+            return;
+        }
+        if (this.cyclic) {
+            const newIndex = this._handleArrayBorderReached(offsetIndex);
+            if (offsetIndex !== newIndex) {
+                offsetIndex = newIndex;
+            }
+        }
+        this.value = this._itemsToShow[offsetIndex].value;
+        this._currentElementIndex = offsetIndex;
+    }
+    _handleScrollTouchEnd() {
+        if (this.expanded) {
+            this._selectElementByIndex(this._currentElementIndex);
+        }
+    }
+    _selectElement(element) {
+        if (element && element.textContent && this._items.indexOf(element.textContent) > -1) {
+            this._currentElementIndex = Number(element.dataset.itemIndex);
+            this._selectElementByIndex(this._currentElementIndex);
+        }
+    }
+    _getCurrentRepetition() {
+        if (this._currentElementIndex) {
+            return Math.floor(this._currentElementIndex / this._items.length);
+        }
+        if (this._items.length > 0 && this.cyclic) {
+            return 1;
+        }
+        return 0;
+    }
+    _selectElementByIndex(currentIndex) {
+        let index = currentIndex;
+        const itemsCount = this._itemsToShow.length;
+        const cellSizeInPx = this._itemCellHeight;
+        const scrollBy = cellSizeInPx * index;
+        if (this.cyclic) {
+            index = this._handleArrayBorderReached(index);
+        }
+        if (index < itemsCount && index > -1) {
+            this._scroller.scrollTo(0, scrollBy, 5, 100); // sometimes the container isn't painted yet so retry 5 times (although it succeeds on the 1st)
+            this._currentElementIndex = index;
+            this.value = this._items[index - (this._getCurrentRepetition() * this._items.length)];
+            this.fireEvent("select", { value: this.value });
+        }
+    }
+    _timesMultipliedOnCyclic() {
+        const minElementsInCyclicWheelSlider = 70;
+        const repetitionCount = Math.round(minElementsInCyclicWheelSlider / this._items.length);
+        const minRepetitionCount = 3;
+        return Math.max(minRepetitionCount, repetitionCount);
+    }
+    _buildItemsToShow() {
+        let itemsToShow = this._items;
+        if (this.cyclic) {
+            if (itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {
+                for (let i = 0; i < this._timesMultipliedOnCyclic(); i++) {
+                    itemsToShow = itemsToShow.concat(this._items);
+                }
+            }
+        }
+        this._itemsToShow = itemsToShow.map(value => {
+            return {
+                value,
+                "selected": (value === this.value),
+            };
+        });
+    }
+    _handleArrayBorderReached(currentIndex) {
+        const arrayLength = this._itemsToShow.length;
+        const maxVisibleElementsOnOneSide = 7;
+        let index = currentIndex;
+        if (maxVisibleElementsOnOneSide > index) {
+            index += this._items.length * 2;
+        }
+        else if (index > arrayLength - maxVisibleElementsOnOneSide) {
+            index -= this._items.length * 2;
+        }
+        return index;
+    }
+    /**
+     * The listener for this event can't be passive as it calls preventDefault()
+     *
+     * @param e Wheel Event
+     * @private
+     */
+    _handleWheel(e) {
+        if (!e) {
+            return;
+        }
+        e.stopPropagation();
+        e.preventDefault();
+        if (e.timeStamp === this._prevWheelTimestamp || !this.expanded) {
+            return;
+        }
+        if (this._prevWheelTimestamp && (e.timeStamp < this._prevWheelTimestamp + 250 || !this.expanded)) {
+            return;
+        }
+        if (e.deltaY > 0) {
+            this._itemUp();
+        }
+        else if (e.deltaY < 0) {
+            this._itemDown();
+        }
+        this._prevWheelTimestamp = e.timeStamp;
+    }
+    _onclick(e) {
+        const target = e.target;
+        if (!target.classList.contains("ui5-wheelslider-item")) {
+            return;
+        }
+        if (this.expanded) {
+            this.value = target.textContent || "";
+            this._selectElement(target);
+            this.fireEvent("select", { value: this.value });
+        }
+        else {
+            this.expanded = true;
+        }
+    }
+    _onArrowDown(e) {
+        e.preventDefault();
+        this._itemDown();
+    }
+    _onArrowUp(e) {
+        e.preventDefault();
+        this._itemUp();
+    }
+    _itemDown() {
+        const nextElementIndex = this._currentElementIndex + 1;
+        this._selectElementByIndex(nextElementIndex);
+    }
+    _itemUp() {
+        const nextElementIndex = this._currentElementIndex - 1;
+        this._selectElementByIndex(nextElementIndex);
+    }
+    _onkeydown(e) {
+        if (!this.expanded) {
+            return;
+        }
+        if (isUp(e)) {
+            this._onArrowUp(e);
+        }
+        if (isDown(e)) {
+            this._onArrowDown(e);
+        }
+        if (isPageDown(e)) {
+            this._selectLimitCell(e, false);
+        }
+        if (isPageUp(e)) {
+            this._selectLimitCell(e, true);
+        }
+    }
+    _selectLimitCell(e, isMax) {
+        e.preventDefault();
+        const intexIncrease = this.cyclic ? this._items.length : 0;
+        if (isMax) {
+            this._selectElementByIndex(this._items.length - 1 + intexIncrease);
+        }
+        else {
+            this._selectElementByIndex(intexIncrease);
+        }
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], WheelSlider.prototype, "disabled", void 0);
+__decorate([
+    property({ defaultValue: "0" })
+], WheelSlider.prototype, "value", void 0);
+__decorate([
+    property({ defaultValue: "" })
+], WheelSlider.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], WheelSlider.prototype, "expanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], WheelSlider.prototype, "cyclic", void 0);
+__decorate([
+    property({ multiple: true, compareValues: true })
+], WheelSlider.prototype, "_items", void 0);
+__decorate([
+    property({ type: Object, multiple: true })
+], WheelSlider.prototype, "_itemsToShow", void 0);
+WheelSlider = __decorate([
+    customElement({
+        tag: "ui5-wheelslider",
+        renderer: litRender,
+        styles: WheelSliderCss,
+        template: WheelSliderTemplate,
+        dependencies: [Button],
+    })
+    /**
+     * Fires when new value is selected.
+     * @public
+     * @param {string} value The selected value.
+     */
+    ,
+    event("select", {
+        detail: {
+            /**
+             * @public
+             */
+            value: {
+                type: String,
+            },
+        },
+    })
+    /**
+     * Fires when the wheel slider is expanded.
+     * @public
+     */
+    ,
+    event("expand")
+    /**
+     * Fires when the wheel slider is collapsed.
+     * @public
+     */
+    ,
+    event("collapse")
+], WheelSlider);
+WheelSlider.define();
+export default WheelSlider;
+//# sourceMappingURL=WheelSlider.js.map

package/dist/WheelSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WheelSlider.js","sourceRoot":"","sources":["../src/WheelSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport { isPhone } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport {\n\tisDown,\n\tisUp,\n\tisPageUp,\n\tisPageDown,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport getEffectiveContentDensity from \"@ui5/webcomponents-base/dist/util/getEffectiveContentDensity.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport ScrollEnablement from \"@ui5/webcomponents-base/dist/delegate/ScrollEnablement.js\";\nimport WheelSliderTemplate from \"./generated/templates/WheelSliderTemplate.lit.js\";\nimport Button from \"./Button.js\";\n\n// Styles\nimport WheelSliderCss from \"./generated/themes/WheelSlider.css.js\";\n\nconst CELL_SIZE_COMPACT = 32;\nconst CELL_SIZE_COZY = 46;\n\ntype WheelSliderSelectEventDetail = { value: string };\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@ui5/webcomponents/dist/WheelSlider.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @private\n * @since 1.0.0-rc.6\n */\n@customElement({\n\ttag: \"ui5-wheelslider\",\n\trenderer: litRender,\n\tstyles: WheelSliderCss,\n\ttemplate: WheelSliderTemplate,\n\tdependencies: [Button],\n})\n/**\n * Fires when new value is selected.\n * @public\n * @param {string} value The selected value.\n */\n@event(\"select\", {\n\tdetail: {\n\t\t/**\n\t\t * @public\n\t\t */\n\t\tvalue: {\n\t\t\ttype: String,\n\t\t},\n\t},\n})\n\n/**\n * Fires when the wheel slider is expanded.\n * @public\n */\n@event(\"expand\")\n\n/**\n * Fires when the wheel slider is collapsed.\n * @public\n */\n@event(\"collapse\")\nclass WheelSlider extends UI5Element {\n\t/**\n\t * Defines whether the component is disabled\n\t * (default is set to <code>false</code>).\n\t * A disabled component can't be pressed or\n\t * focused, and it is not in the tab chain.\n\t *\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tdisabled!: boolean;\n\n\t/**\n\t * Defines the currently selected value\n\t * @default \"0\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"0\" })\n\tvalue!: string;\n\n\t/**\n\t * Defines the label of the wheelslider.\n\t * @default \"\"\n\t * @public\n\t */\n\t@property({ defaultValue: \"\" })\n\tlabel!: string;\n\n\t/**\n\t * Indicates if the wheelslider is expanded.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\texpanded!: boolean;\n\n\t/**\n\t * Indicates if the wheelslider has a cyclic behaviour.\n\t * @default false\n\t * @public\n\t */\n\t@property({ type: Boolean })\n\tcyclic!: boolean;\n\n\t@property({ multiple: true, compareValues: true })\n\t_items!: Array<string>;\n\n\t@property({ type: Object, multiple: true })\n\t_itemsToShow!: Array<{\n\t\tvalue: string,\n\t\tselected: boolean,\n\t}>;\n\n\t_currentElementIndex: number;\n\t_scroller: ScrollEnablement;\n\t_prevWheelTimestamp?: number;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis._currentElementIndex = 0;\n\t\tthis._itemsToShow = [];\n\t\tthis._scroller = new ScrollEnablement(this);\n\t\tthis._scroller.attachEvent(\"scroll\", this._updateScrolling.bind(this));\n\t\tthis._scroller.attachEvent(\"mouseup\", this._handleScrollTouchEnd.bind(this));\n\t\tthis._scroller.attachEvent(\"touchend\", this._handleScrollTouchEnd.bind(this));\n\t}\n\n\tonBeforeRendering() {\n\t\tif (!this.expanded && this.cyclic) {\n\t\t\tconst index = this._currentElementIndex % this._items.length;\n\t\t\tthis._currentElementIndex = (this._timesMultipliedOnCyclic() / 2) * this._items.length + index;\n\t\t}\n\n\t\tif (!this.value) {\n\t\t\tthis.value = this._items[0];\n\t\t}\n\n\t\tthis._buildItemsToShow();\n\t}\n\n\tonAfterRendering() {\n\t\tif (!this._scroller.scrollContainer) {\n\t\t\tthis._scroller.scrollContainer = this.shadowRoot!.querySelector(`[id=\"${this._id}--wrapper\"]`)!;\n\t\t}\n\n\t\tif (!this.expanded) {\n\t\t\tthis._scroller.scrollTo(0, 0);\n\t\t}\n\n\t\tif (this.expanded) {\n\t\t\tconst elements = this.shadowRoot!.querySelectorAll(\".ui5-wheelslider-item\");\n\t\t\tfor (let i = 0; i < elements.length; i++) {\n\t\t\t\tconst el = elements[i] as HTMLElement;\n\t\t\t\tif (el.textContent === this.value) {\n\t\t\t\t\tthis._selectElementByIndex(Number(el.dataset.itemIndex) + this._getCurrentRepetition() * this._items.length);\n\t\t\t\t\treturn true;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tthis._selectElement(elements[0] as HTMLElement);\n\t\t}\n\t}\n\n\tget classes() {\n\t\treturn {\n\t\t\troot: {\n\t\t\t\t\"ui5-wheelslider-root\": true,\n\t\t\t\t\"ui5-phone\": isPhone(),\n\t\t\t},\n\t\t};\n\t}\n\n\texpandSlider() {\n\t\tthis.expanded = true;\n\t\tthis.fireEvent(\"expand\", {});\n\t}\n\n\tcollapseSlider() {\n\t\tthis.expanded = false;\n\t\tthis.fireEvent(\"collapse\", {});\n\t}\n\n\tget _itemCellHeight() {\n\t\tconst defaultSize = getEffectiveContentDensity(document.body) === \"compact\" ? CELL_SIZE_COMPACT : CELL_SIZE_COZY;\n\n\t\tif (this.shadowRoot!.querySelectorAll(\".ui5-wheelslider-item\").length) {\n\t\t\tconst itemComputedStyle = getComputedStyle(this.shadowRoot!.querySelector(\".ui5-wheelslider-item\")!);\n\t\t\tconst itemHeightValue = itemComputedStyle.getPropertyValue(getScopedVarName(\"--_ui5_wheelslider_item_height\"));\n\t\t\tconst onlyDigitsValue = itemHeightValue.replace(\"px\", \"\");\n\t\t\treturn Number(onlyDigitsValue) || defaultSize;\n\t\t}\n\n\t\treturn defaultSize;\n\t}\n\n\t_updateScrolling() {\n\t\tconst cellSizeInPx = this._itemCellHeight,\n\t\t\tscrollWhere = this._scroller.scrollContainer.scrollTop;\n\t\tlet offsetIndex;\n\n\t\tif (!scrollWhere) {\n\t\t\treturn;\n\t\t}\n\n\t\toffsetIndex = Math.round(scrollWhere / cellSizeInPx);\n\n\t\tif (this.value === this._itemsToShow[offsetIndex].value) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.cyclic) {\n\t\t\tconst newIndex = this._handleArrayBorderReached(offsetIndex);\n\t\t\tif (offsetIndex !== newIndex) {\n\t\t\t\toffsetIndex = newIndex;\n\t\t\t}\n\t\t}\n\n\t\tthis.value = this._itemsToShow[offsetIndex].value;\n\t\tthis._currentElementIndex = offsetIndex;\n\t}\n\n\t_handleScrollTouchEnd() {\n\t\tif (this.expanded) {\n\t\t\tthis._selectElementByIndex(this._currentElementIndex);\n\t\t}\n\t}\n\n\t_selectElement(element: HTMLElement) {\n\t\tif (element && element.textContent && this._items.indexOf(element.textContent) > -1) {\n\t\t\tthis._currentElementIndex = Number(element.dataset.itemIndex);\n\t\t\tthis._selectElementByIndex(this._currentElementIndex);\n\t\t}\n\t}\n\n\t_getCurrentRepetition() {\n\t\tif (this._currentElementIndex) {\n\t\t\treturn Math.floor(this._currentElementIndex / this._items.length);\n\t\t}\n\n\t\tif (this._items.length > 0 && this.cyclic) {\n\t\t\treturn 1;\n\t\t}\n\n\t\treturn 0;\n\t}\n\n\t_selectElementByIndex(currentIndex: number) {\n\t\tlet index = currentIndex;\n\t\tconst itemsCount = this._itemsToShow.length;\n\t\tconst cellSizeInPx = this._itemCellHeight;\n\t\tconst scrollBy = cellSizeInPx * index;\n\n\t\tif (this.cyclic) {\n\t\t\tindex = this._handleArrayBorderReached(index);\n\t\t}\n\n\t\tif (index < itemsCount && index > -1) {\n\t\t\tthis._scroller.scrollTo(0, scrollBy, 5, 100); // sometimes the container isn't painted yet so retry 5 times (although it succeeds on the 1st)\n\t\t\tthis._currentElementIndex = index;\n\t\t\tthis.value = this._items[index - (this._getCurrentRepetition() * this._items.length)];\n\t\t\tthis.fireEvent<WheelSliderSelectEventDetail>(\"select\", { value: this.value });\n\t\t}\n\t}\n\n\t_timesMultipliedOnCyclic() {\n\t\tconst minElementsInCyclicWheelSlider = 70;\n\t\tconst repetitionCount = Math.round(minElementsInCyclicWheelSlider / this._items.length);\n\t\tconst minRepetitionCount = 3;\n\n\t\treturn Math.max(minRepetitionCount, repetitionCount);\n\t}\n\n\t_buildItemsToShow() {\n\t\tlet itemsToShow = this._items;\n\t\tif (this.cyclic) {\n\t\t\tif (itemsToShow.length < this._items.length * this._timesMultipliedOnCyclic()) {\n\t\t\t\tfor (let i = 0; i < this._timesMultipliedOnCyclic(); i++) {\n\t\t\t\t\titemsToShow = itemsToShow.concat(this._items);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\tthis._itemsToShow = itemsToShow.map(value => {\n\t\t\treturn {\n\t\t\t\tvalue,\n\t\t\t\t\"selected\": (value === this.value),\n\t\t\t};\n\t\t});\n\t}\n\n\t_handleArrayBorderReached(currentIndex: number) {\n\t\tconst arrayLength = this._itemsToShow.length;\n\t\tconst maxVisibleElementsOnOneSide = 7;\n\t\tlet index = currentIndex;\n\n\t\tif (maxVisibleElementsOnOneSide > index) {\n\t\t\tindex += this._items.length * 2;\n\t\t} else if (index > arrayLength - maxVisibleElementsOnOneSide) {\n\t\t\tindex -= this._items.length * 2;\n\t\t}\n\n\t\treturn index;\n\t}\n\n\t/**\n\t * The listener for this event can't be passive as it calls preventDefault()\n\t *\n\t * @param e Wheel Event\n\t * @private\n\t */\n\t_handleWheel(e: WheelEvent) {\n\t\tif (!e) {\n\t\t\treturn;\n\t\t}\n\n\t\te.stopPropagation();\n\t\te.preventDefault();\n\n\t\tif (e.timeStamp === this._prevWheelTimestamp || !this.expanded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this._prevWheelTimestamp && (e.timeStamp < this._prevWheelTimestamp + 250 || !this.expanded)) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (e.deltaY > 0) {\n\t\t\tthis._itemUp();\n\t\t} else if (e.deltaY < 0) {\n\t\t\tthis._itemDown();\n\t\t}\n\n\t\tthis._prevWheelTimestamp = e.timeStamp;\n\t}\n\n\t_onclick(e: MouseEvent) {\n\t\tconst target = e.target as HTMLElement;\n\n\t\tif (!target.classList.contains(\"ui5-wheelslider-item\")) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.expanded) {\n\t\t\tthis.value = target.textContent || \"\";\n\t\t\tthis._selectElement(target);\n\t\t\tthis.fireEvent<WheelSliderSelectEventDetail>(\"select\", { value: this.value });\n\t\t} else {\n\t\t\tthis.expanded = true;\n\t\t}\n\t}\n\n\t_onArrowDown(e: KeyboardEvent) {\n\t\te.preventDefault();\n\t\tthis._itemDown();\n\t}\n\n\t_onArrowUp(e: KeyboardEvent) {\n\t\te.preventDefault();\n\t\tthis._itemUp();\n\t}\n\n\t_itemDown() {\n\t\tconst nextElementIndex = this._currentElementIndex + 1;\n\t\tthis._selectElementByIndex(nextElementIndex);\n\t}\n\n\t_itemUp() {\n\t\tconst nextElementIndex = this._currentElementIndex - 1;\n\t\tthis._selectElementByIndex(nextElementIndex);\n\t}\n\n\t_onkeydown(e: KeyboardEvent) {\n\t\tif (!this.expanded) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (isUp(e)) {\n\t\t\tthis._onArrowUp(e);\n\t\t}\n\n\t\tif (isDown(e)) {\n\t\t\tthis._onArrowDown(e);\n\t\t}\n\n\t\tif (isPageDown(e)) {\n\t\t\tthis._selectLimitCell(e, false);\n\t\t}\n\n\t\tif (isPageUp(e)) {\n\t\t\tthis._selectLimitCell(e, true);\n\t\t}\n\t}\n\n\t_selectLimitCell(e: KeyboardEvent, isMax: boolean) {\n\t\te.preventDefault();\n\t\tconst intexIncrease = this.cyclic ? this._items.length : 0;\n\t\tif (isMax) {\n\t\t\tthis._selectElementByIndex(this._items.length - 1 + intexIncrease);\n\t\t} else {\n\t\t\tthis._selectElementByIndex(intexIncrease);\n\t\t}\n\t}\n}\n\nWheelSlider.define();\n\nexport default WheelSlider;\nexport type { WheelSliderSelectEventDetail };\n"]}

package/dist/YearPicker.d.ts

@@ -0,0 +1,105 @@
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import CalendarPart from "./CalendarPart.js";
+import type { ICalendarPicker } from "./Calendar.js";
+type Year = {
+    timestamp: string;
+    _tabIndex: string;
+    focusRef: boolean;
+    selected: boolean;
+    ariaSelected: string;
+    year: string;
+    yearInSecType: string | undefined;
+    disabled: boolean;
+    classes: string;
+};
+type YearInterval = Array<Array<Year>>;
+type YearPickerChangeEventDetail = {
+    timestamp: number;
+};
+type YearPickerNavigateEventDetail = {
+    timestamp: number;
+};
+/**
+ * @class
+ *
+ * Displays years which can be selected.
+ *
+ * @constructor
+ * @extends CalendarPart
+ * @private
+ */
+declare class YearPicker extends CalendarPart implements ICalendarPicker {
+    /**
+     * An array of UTC timestamps representing the selected date
+     * or dates depending on the capabilities of the picker component.
+     *
+     * @default []
+     * @public
+     */
+    selectedDates: Array<number>;
+    _years: YearInterval;
+    _hidden: boolean;
+    _firstYear?: number;
+    _lastYear?: number;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get roleDescription(): string;
+    onBeforeRendering(): void;
+    _getPageSize(): 8 | 20;
+    _getRowSize(): 2 | 4;
+    _buildYears(): void;
+    _calculateFirstYear(): void;
+    onAfterRendering(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    _onHomeOrEnd(homePressed: boolean): void;
+    /**
+     * Sets the timestamp to an absolute value.
+     *
+     * @param value
+     * @private
+     */
+    _setTimestamp(value: number): void;
+    /**
+     * Modifies timestamp by a given amount of years and, if necessary, loads the prev/next page.
+     *
+     * @param amount
+     * @private
+     */
+    _modifyTimestampBy(amount: number): void;
+    _onkeyup(e: KeyboardEvent): void;
+    /**
+     * User clicked with the mouser or pressed Enter/Space
+     *
+     * @param e
+     * @private
+     */
+    _selectYear(e: Event): void;
+    /**
+     * Called by the Calendar component.
+     *
+     * @protected
+     */
+    _hasPreviousPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     *
+     * @protected
+     */
+    _hasNextPage(): boolean;
+    /**
+     * Called by the Calendar component.
+     * <b>Note:</b> when the user presses the "<" button in the calendar header (same as "PageUp")
+     *
+     * @protected
+     */
+    _showPreviousPage(): void;
+    /**
+     * Called by the Calendar component.
+     * <b>Note:</b> when the user presses the ">" button in the calendar header (same as "PageDown")
+     *
+     * @protected
+     */
+    _showNextPage(): void;
+}
+export default YearPicker;
+export type { YearPickerChangeEventDetail, YearPickerNavigateEventDetail, };