@sapudex/web-components 2.18.0 → 2.20.0

package/dist/ImageGridTicker.d.ts

@@ -0,0 +1,129 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type UDExImageGridTickerItem from "./ImageGridTickerItem.js";
+export declare enum UDExImageGridTickerVariable {
+    itemGaps = "--udex-image-grid-ticker-item-gaps",
+    itemWidth = "--udex-image-grid-ticker-item-width"
+}
+type UDExImageGridTickerPlayBtnClickEventDetail = {
+    isPaused: boolean;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTicker.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExImageGridTicker extends UI5Element {
+    eventDetails: {
+        "play-button-click": UDExImageGridTickerPlayBtnClickEventDetail;
+    };
+    /**
+     * Slot for image grid ticker items.
+     *
+     * @slot
+     * @public
+     */
+    items: Array<UDExImageGridTickerItem>;
+    /**
+     * Grayscale mode enhances visual harmony and can be used for minimal,
+     * professional layouts or to de-emphasize logos.
+     *
+     * @default false
+     * @public
+     */
+    grayscale: boolean;
+    /**
+     * Indicates whether the image grid ticker is scrollable.
+     *
+     * @default false
+     * @private
+     */
+    _isScrollable: boolean;
+    /**
+     * Indicates whether the screen size is small.
+     *
+     * @default false
+     * @private
+     */
+    _isSmallScreen: boolean;
+    /**
+     * Indicates whether the animation is paused.
+     *
+     * @default false
+     * @private
+     */
+    _isPaused: boolean;
+    /**
+     * Indicates focus in state.
+     *
+     * @default false
+     * @private
+     */
+    _isFocusIn: boolean;
+    /**
+     * Indicates mobile view.
+     *
+     * @default false
+     * @private
+     */
+    _isMobileView: boolean;
+    /**
+     * Defines direction of the component.
+     *
+     * @default undefined
+     * @private
+     */
+    _direction: string;
+    _isPlayBtnClicked: boolean;
+    _isMouseDown: boolean;
+    _handleResizeBound: ResizeObserverCallback;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onAfterRendering(): void;
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _handleResize(): void;
+    _checkScrollable(): void;
+    _startAnimation(): void;
+    _stopAnimation(): void;
+    _toggleAnimation(): void;
+    _onFocusIn(): void;
+    _onFocusOut(): void;
+    _onKeyDown(e: KeyboardEvent): void;
+    _onMouseDown(): void;
+    _onMouseUp(): void;
+    _focusLastItem(): void;
+    _handleMobileView(): void;
+    _handleDesktopView(): void;
+    _focusItem(item: HTMLElement): void;
+    _handleDirection(): void;
+    _onPlayButtonClick(): void;
+    _firePlayButtonClickEvent(): void;
+    _getPropertyValues(variable: string): number;
+    get itemDimensions(): {
+        width: number;
+        gaps: number;
+    };
+    get trackItems(): HTMLElement[];
+    get focusedIndex(): number;
+    get isAtLeastBreakpointM(): boolean;
+    get track(): HTMLElement;
+    get grid(): HTMLElement;
+    get isRtl(): boolean;
+    get playBtnTooltipText(): string;
+}
+export default UDExImageGridTicker;
+export type { UDExImageGridTickerPlayBtnClickEventDetail };

package/dist/ImageGridTicker.js

@@ -0,0 +1,305 @@
+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;
+};
+var UDExImageGridTicker_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import { isLeft, isRight } from "@ui5/webcomponents-base/dist/Keys.js";
+import { PAUSE_BUTTON_ACCESSIBLE_NAME, PLAY_BUTTON_ACCESSIBLE_NAME } from "./generated/i18n/i18n-defaults.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+import ImageGridTickerItem from "./ImageGridTickerItem.js";
+import ImageGridTickerTemplate from "./ImageGridTickerTemplate.js";
+// Styles
+import ImageGridTickerCss from "./generated/themes/ImageGridTicker.css.js";
+export var UDExImageGridTickerVariable;
+(function (UDExImageGridTickerVariable) {
+    UDExImageGridTickerVariable["itemGaps"] = "--udex-image-grid-ticker-item-gaps";
+    UDExImageGridTickerVariable["itemWidth"] = "--udex-image-grid-ticker-item-width";
+})(UDExImageGridTickerVariable || (UDExImageGridTickerVariable = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTicker.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridTicker = UDExImageGridTicker_1 = class UDExImageGridTicker extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Grayscale mode enhances visual harmony and can be used for minimal,
+         * professional layouts or to de-emphasize logos.
+         *
+         * @default false
+         * @public
+         */
+        this.grayscale = false;
+        /**
+         * Indicates whether the image grid ticker is scrollable.
+         *
+         * @default false
+         * @private
+         */
+        this._isScrollable = false;
+        /**
+         * Indicates whether the screen size is small.
+         *
+         * @default false
+         * @private
+         */
+        this._isSmallScreen = false;
+        /**
+         * Indicates whether the animation is paused.
+         *
+         * @default false
+         * @private
+         */
+        this._isPaused = false;
+        /**
+         * Indicates focus in state.
+         *
+         * @default false
+         * @private
+         */
+        this._isFocusIn = false;
+        /**
+         * Indicates mobile view.
+         *
+         * @default false
+         * @private
+         */
+        this._isMobileView = false;
+        this._isPlayBtnClicked = false;
+        this._isMouseDown = false;
+        this._isMobileView = !this.isAtLeastBreakpointM;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onAfterRendering() {
+        if (this._isMobileView) {
+            this._handleMobileView();
+            return;
+        }
+        this._handleDesktopView();
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    _handleResize() {
+        this._isMobileView = !this.isAtLeastBreakpointM;
+        this._checkScrollable();
+    }
+    _checkScrollable() {
+        if (!this.grid || !this.track || this._isMobileView) {
+            this._isScrollable = false;
+            return;
+        }
+        const { width: itemWidth, gaps: itemGaps } = this.itemDimensions;
+        const totalItemWidth = itemWidth + itemGaps;
+        const totalWidth = this.items.length * totalItemWidth;
+        this._isScrollable = totalWidth > this.grid.offsetWidth;
+    }
+    _startAnimation() {
+        if (this._isScrollable && !this._isPlayBtnClicked && !this._isMobileView) {
+            this._isPaused = false;
+        }
+    }
+    _stopAnimation() {
+        if (this._isScrollable && !this._isMobileView) {
+            this._isPaused = true;
+        }
+    }
+    _toggleAnimation() {
+        this._isPlayBtnClicked = !this._isPlayBtnClicked;
+        if (this._isPaused) {
+            this._startAnimation();
+        }
+        else {
+            this._stopAnimation();
+        }
+    }
+    _onFocusIn() {
+        if (this._isMouseDown || !this._isScrollable) {
+            return;
+        }
+        this._isFocusIn = true;
+        this._stopAnimation();
+        const focusedItem = this.trackItems[this.focusedIndex];
+        const isLastItem = this.focusedIndex === this.trackItems.length - 1;
+        const { right, left } = focusedItem.getBoundingClientRect();
+        const windowWidth = window.innerWidth || document.documentElement.clientWidth;
+        const isPartiallyVisible = right > 0 && left < windowWidth;
+        if (isPartiallyVisible) {
+            focusedItem.scrollIntoView({
+                behavior: "smooth",
+                block: "nearest",
+                inline: "center",
+            });
+        }
+        if (isLastItem) {
+            this._focusLastItem();
+        }
+    }
+    _onFocusOut() {
+        this._isFocusIn = false;
+        this._startAnimation();
+    }
+    _onKeyDown(e) {
+        if (isLeft(e) || isRight(e)) {
+            e.preventDefault();
+            const direction = (isLeft(e) && !this.isRtl) || (isRight(e) && this.isRtl) ? -1 : 1;
+            const index = this.focusedIndex + direction;
+            if (index >= 0 && index < this.trackItems.length) {
+                this._focusItem(this.trackItems[index]);
+            }
+        }
+    }
+    _onMouseDown() {
+        this._isMouseDown = true;
+    }
+    _onMouseUp() {
+        this._isMouseDown = false;
+    }
+    _focusLastItem() {
+        const lastItem = this.trackItems[this.items.length - 1];
+        this._focusItem(lastItem);
+        lastItem.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+        });
+    }
+    _handleMobileView() {
+        this._isScrollable = false;
+        this._stopAnimation();
+    }
+    _handleDesktopView() {
+        this._handleDirection();
+        this._checkScrollable();
+        if (this._isScrollable && !this._isPaused && !this._isMobileView) {
+            this._startAnimation();
+        }
+        else {
+            this._stopAnimation();
+        }
+    }
+    _focusItem(item) {
+        const link = item.shadowRoot?.querySelector(".udex-image-grid-ticker-item__link");
+        link.focus();
+    }
+    _handleDirection() {
+        const directionStyles = window.getComputedStyle(this).getPropertyValue("direction");
+        this._direction = directionStyles || "ltr";
+    }
+    _onPlayButtonClick() {
+        this._toggleAnimation();
+        this._firePlayButtonClickEvent();
+    }
+    _firePlayButtonClickEvent() {
+        this.fireDecoratorEvent("play-button-click", {
+            isPaused: this._isPaused,
+        });
+    }
+    _getPropertyValues(variable) {
+        const itemStyles = window.getComputedStyle(this.items[0]);
+        return parseInt(itemStyles.getPropertyValue(variable));
+    }
+    get itemDimensions() {
+        const width = this._getPropertyValues(UDExImageGridTickerVariable.itemWidth);
+        const gaps = this._getPropertyValues(UDExImageGridTickerVariable.itemGaps) * 2;
+        return { width, gaps };
+    }
+    get trackItems() {
+        return Array.from(this.track.children);
+    }
+    get focusedIndex() {
+        return this.trackItems.findIndex(item => item.matches(":focus"));
+    }
+    get isAtLeastBreakpointM() {
+        return BreakpointUtils.isAtLeast("M");
+    }
+    get track() {
+        return this.shadowRoot?.querySelector(".udex-image-grid-ticker__track");
+    }
+    get grid() {
+        return this.shadowRoot?.querySelector(".udex-image-grid-ticker");
+    }
+    get isRtl() {
+        return this._direction === "rtl";
+    }
+    get playBtnTooltipText() {
+        return this._isPaused
+            ? UDExImageGridTicker_1.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)
+            : UDExImageGridTicker_1.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true, individualSlots: true })
+], UDExImageGridTicker.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "grayscale", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "_isScrollable", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "_isSmallScreen", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "_isPaused", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "_isFocusIn", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTicker.prototype, "_isMobileView", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTicker.prototype, "_direction", void 0);
+__decorate([
+    i18n("@sapudex/web-components")
+], UDExImageGridTicker, "i18nBundle", void 0);
+UDExImageGridTicker = UDExImageGridTicker_1 = __decorate([
+    customElement({
+        tag: "udex-image-grid-ticker",
+        renderer: jsxRenderer,
+        styles: ImageGridTickerCss,
+        template: ImageGridTickerTemplate,
+        dependencies: [ImageGridTickerItem],
+    })
+    /**
+     * Fired event when the user click on a play/paused button.
+     *
+     * @public
+     */
+    ,
+    event("play-button-click", { bubbles: true })
+], UDExImageGridTicker);
+UDExImageGridTicker.define();
+export default UDExImageGridTicker;
+//# sourceMappingURL=ImageGridTicker.js.map

package/dist/ImageGridTicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTicker.js","sourceRoot":"","sources":["../src/ImageGridTicker.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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/Device.js\";\nimport { isLeft, isRight } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { PAUSE_BUTTON_ACCESSIBLE_NAME, PLAY_BUTTON_ACCESSIBLE_NAME } from \"./generated/i18n/i18n-defaults.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\nimport type UDExImageGridTickerItem from \"./ImageGridTickerItem.js\";\nimport ImageGridTickerItem from \"./ImageGridTickerItem.js\";\nimport ImageGridTickerTemplate from \"./ImageGridTickerTemplate.js\";\n\n// Styles\nimport ImageGridTickerCss from \"./generated/themes/ImageGridTicker.css.js\";\n\nexport enum UDExImageGridTickerVariable {\n  itemGaps = \"--udex-image-grid-ticker-item-gaps\",\n  itemWidth = \"--udex-image-grid-ticker-item-width\",\n}\n\ntype UDExImageGridTickerPlayBtnClickEventDetail = {\n  isPaused: boolean;\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-image-grid-ticker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridTicker.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-ticker\",\n  renderer: jsxRenderer,\n  styles: ImageGridTickerCss,\n  template: ImageGridTickerTemplate,\n  dependencies: [ImageGridTickerItem],\n})\n\n/**\n * Fired event when the user click on a play/paused button.\n *\n * @public\n */\n@event(\"play-button-click\", { bubbles: true })\n\nclass UDExImageGridTicker extends UI5Element {\n  eventDetails!: {\n    \"play-button-click\": UDExImageGridTickerPlayBtnClickEventDetail;\n  };\n\n  /**\n   * Slot for image grid ticker items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    items!: Array<UDExImageGridTickerItem>;\n\n  /**\n   * Grayscale mode enhances visual harmony and can be used for minimal,\n   * professional layouts or to de-emphasize logos.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    grayscale = false;\n\n  /**\n   * Indicates whether the image grid ticker is scrollable.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isScrollable = false;\n\n  /**\n   * Indicates whether the screen size is small.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isSmallScreen = false;\n\n  /**\n   * Indicates whether the animation is paused.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isPaused = false;\n\n  /**\n   * Indicates focus in state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isFocusIn: boolean = false;\n\n  /**\n   * Indicates mobile view.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _isMobileView: boolean = false;\n\n  /**\n   * Defines direction of the component.\n   *\n   * @default undefined\n   * @private\n   */\n  @property({ type: String })\n    _direction!: string;\n\n  _isPlayBtnClicked: boolean = false;\n  _isMouseDown: boolean = false;\n  _handleResizeBound: ResizeObserverCallback;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  constructor() {\n    super();\n    this._isMobileView = !this.isAtLeastBreakpointM;\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onAfterRendering(): void {\n    if (this._isMobileView) {\n      this._handleMobileView();\n      return;\n    }\n\n    this._handleDesktopView();\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  _handleResize(): void {\n    this._isMobileView = !this.isAtLeastBreakpointM;\n    this._checkScrollable();\n  }\n\n  _checkScrollable(): void {\n    if (!this.grid || !this.track || this._isMobileView) {\n      this._isScrollable = false;\n      return;\n    }\n\n    const { width: itemWidth, gaps: itemGaps } = this.itemDimensions;\n    const totalItemWidth = itemWidth + itemGaps;\n    const totalWidth = this.items.length * totalItemWidth;\n\n    this._isScrollable = totalWidth > this.grid.offsetWidth;\n  }\n\n  _startAnimation(): void {\n    if (this._isScrollable && !this._isPlayBtnClicked && !this._isMobileView) {\n      this._isPaused = false;\n    }\n  }\n\n  _stopAnimation(): void {\n    if (this._isScrollable && !this._isMobileView) {\n      this._isPaused = true;\n    }\n  }\n\n  _toggleAnimation(): void {\n    this._isPlayBtnClicked = !this._isPlayBtnClicked;\n    if (this._isPaused) {\n      this._startAnimation();\n    } else {\n      this._stopAnimation();\n    }\n  }\n\n  _onFocusIn(): void {\n    if (this._isMouseDown || !this._isScrollable) {\n      return;\n    }\n\n    this._isFocusIn = true;\n    this._stopAnimation();\n\n    const focusedItem = this.trackItems[this.focusedIndex];\n    const isLastItem = this.focusedIndex === this.trackItems.length - 1;\n    const { right, left } = focusedItem.getBoundingClientRect();\n    const windowWidth = window.innerWidth || document.documentElement.clientWidth;\n    const isPartiallyVisible = right > 0 && left < windowWidth;\n\n    if (isPartiallyVisible) {\n      focusedItem.scrollIntoView({\n        behavior: \"smooth\",\n        block: \"nearest\",\n        inline: \"center\",\n      });\n    }\n\n    if (isLastItem) {\n      this._focusLastItem();\n    }\n  }\n\n  _onFocusOut(): void {\n    this._isFocusIn = false;\n    this._startAnimation();\n  }\n\n  _onKeyDown(e: KeyboardEvent): void {\n    if (isLeft(e) || isRight(e)) {\n      e.preventDefault();\n      const direction = (isLeft(e) && !this.isRtl) || (isRight(e) && this.isRtl) ? -1 : 1;\n      const index = this.focusedIndex + direction;\n\n      if (index >= 0 && index < this.trackItems.length) {\n        this._focusItem(this.trackItems[index]);\n      }\n    }\n  }\n\n  _onMouseDown(): void {\n    this._isMouseDown = true;\n  }\n\n  _onMouseUp(): void {\n    this._isMouseDown = false;\n  }\n\n  _focusLastItem(): void {\n    const lastItem = this.trackItems[this.items.length - 1];\n    this._focusItem(lastItem);\n    lastItem.scrollIntoView({\n      behavior: \"smooth\",\n      block: \"nearest\",\n    });\n  }\n\n  _handleMobileView(): void {\n    this._isScrollable = false;\n    this._stopAnimation();\n  }\n\n  _handleDesktopView(): void {\n    this._handleDirection();\n    this._checkScrollable();\n    if (this._isScrollable && !this._isPaused && !this._isMobileView) {\n      this._startAnimation();\n    } else {\n      this._stopAnimation();\n    }\n  }\n\n  _focusItem(item: HTMLElement): void {\n    const link = item.shadowRoot?.querySelector(\".udex-image-grid-ticker-item__link\") as HTMLElement;\n    link.focus();\n  }\n\n  _handleDirection(): void {\n    const directionStyles = window.getComputedStyle(this).getPropertyValue(\"direction\");\n    this._direction = directionStyles || \"ltr\";\n  }\n\n  _onPlayButtonClick(): void {\n    this._toggleAnimation();\n    this._firePlayButtonClickEvent();\n  }\n\n  _firePlayButtonClickEvent(): void {\n    this.fireDecoratorEvent(\"play-button-click\", {\n      isPaused: this._isPaused,\n    });\n  }\n\n  _getPropertyValues(variable: string): number {\n    const itemStyles = window.getComputedStyle(this.items[0]);\n    return parseInt(itemStyles.getPropertyValue(variable));\n  }\n\n  get itemDimensions(): { width: number; gaps: number } {\n    const width = this._getPropertyValues(UDExImageGridTickerVariable.itemWidth);\n    const gaps = this._getPropertyValues(UDExImageGridTickerVariable.itemGaps) * 2;\n    return { width, gaps };\n  }\n\n  get trackItems(): HTMLElement[] {\n    return Array.from(this.track.children) as HTMLElement[];\n  }\n\n  get focusedIndex(): number {\n    return this.trackItems.findIndex(item => item.matches(\":focus\"));\n  }\n\n  get isAtLeastBreakpointM(): boolean {\n    return BreakpointUtils.isAtLeast(\"M\");\n  }\n\n  get track(): HTMLElement {\n    return this.shadowRoot?.querySelector(\".udex-image-grid-ticker__track\") as HTMLElement;\n  }\n\n  get grid(): HTMLElement {\n    return this.shadowRoot?.querySelector(\".udex-image-grid-ticker\") as HTMLElement;\n  }\n\n  get isRtl(): boolean {\n    return this._direction === \"rtl\";\n  }\n\n  get playBtnTooltipText(): string {\n    return this._isPaused\n      ? UDExImageGridTicker.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)\n      : UDExImageGridTicker.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);\n  }\n}\n\nUDExImageGridTicker.define();\n\nexport default UDExImageGridTicker;\nexport type { UDExImageGridTickerPlayBtnClickEventDetail };\n"]}

package/dist/ImageGridTickerItem.d.ts

@@ -0,0 +1,50 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTickerItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExImageGridTickerItem extends UI5Element {
+    /**
+     * Defines the source URL
+     *
+     * @default ""
+     * @public
+     */
+    src: string;
+    /**
+     * Defines image alt text
+     *
+     * @default undefined
+     * @public
+     */
+    alt?: string;
+    /**
+     * Defines tooltip on hover
+     *
+     * @default undefined
+     * @public
+     */
+    tooltip?: string;
+    /**
+     * Defines link URL
+     *
+     * @default undefined
+     * @public
+     */
+    href?: string;
+    onEnterDOM(): void;
+}
+export default UDExImageGridTickerItem;

package/dist/ImageGridTickerItem.js

@@ -0,0 +1,61 @@
+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 { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridTickerItemTemplate from "./ImageGridTickerItemTemplate.js";
+// Styles
+import ImageGridTickerItemCss from "./generated/themes/ImageGridTickerItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-ticker-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTickerItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridTickerItem = class UDExImageGridTickerItem extends UI5Element {
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+};
+__decorate([
+    property({ type: String })
+], UDExImageGridTickerItem.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTickerItem.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTickerItem.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTickerItem.prototype, "href", void 0);
+UDExImageGridTickerItem = __decorate([
+    customElement({
+        tag: "udex-image-grid-ticker-item",
+        renderer: jsxRenderer,
+        styles: ImageGridTickerItemCss,
+        template: ImageGridTickerItemTemplate,
+    })
+], UDExImageGridTickerItem);
+UDExImageGridTickerItem.define();
+export default UDExImageGridTickerItem;
+//# sourceMappingURL=ImageGridTickerItem.js.map

package/dist/ImageGridTickerItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTickerItem.js","sourceRoot":"","sources":["../src/ImageGridTickerItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,2BAA2B,MAAM,kCAAkC,CAAC;AAE3E,SAAS;AACT,OAAO,sBAAsB,MAAM,+CAA+C,CAAC;AAEnF;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAqC9C,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;CACF,CAAA;AAlCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AASb;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACZ;AASb;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACR;AASjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACX;AAnCZ,uBAAuB;IAP5B,aAAa,CAAC;QACb,GAAG,EAAE,6BAA6B;QAClC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,sBAAsB;QAC9B,QAAQ,EAAE,2BAA2B;KACtC,CAAC;GAEI,uBAAuB,CA0C5B;AAED,uBAAuB,CAAC,MAAM,EAAE,CAAC;AAEjC,eAAe,uBAAuB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/Device.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ImageGridTickerItemTemplate from \"./ImageGridTickerItemTemplate.js\";\n\n// Styles\nimport ImageGridTickerItemCss from \"./generated/themes/ImageGridTickerItem.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-image-grid-ticker-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridTickerItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-ticker-item\",\n  renderer: jsxRenderer,\n  styles: ImageGridTickerItemCss,\n  template: ImageGridTickerItemTemplate,\n})\n\nclass UDExImageGridTickerItem extends UI5Element {\n  /**\n   * Defines the source URL\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    src!: string;\n\n  /**\n   * Defines image alt text\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    alt?: string;\n\n  /**\n   * Defines tooltip on hover\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    tooltip?: string;\n\n  /**\n   * Defines link URL\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    href?: string;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n}\n\nUDExImageGridTickerItem.define();\n\nexport default UDExImageGridTickerItem;\n"]}

package/dist/ImageGridTickerItemTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ImageGridTickerItem from "./ImageGridTickerItem.js";
+export default function ImageGridTickerItemTemplate(this: ImageGridTickerItem): import("@ui5/webcomponents-base").JSX.Element;

package/dist/ImageGridTickerItemTemplate.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ImageGridTickerItemTemplate() {
+    const rootClass = "udex-image-grid-ticker-item";
+    const img = (_jsx("img", { class: `${rootClass}__img`, part: "grid-image", src: this.src, alt: this.alt, title: this.tooltip }));
+    return (_jsx("div", { class: rootClass, children: this.href && this.href.length > 0
+            ? _jsx("a", { class: `${rootClass}__link`, href: this.href, title: this.tooltip, children: img })
+            : img }));
+}
+//# sourceMappingURL=ImageGridTickerItemTemplate.js.map

package/dist/ImageGridTickerItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTickerItemTemplate.js","sourceRoot":"","sources":["../src/ImageGridTickerItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,2BAA2B;IACjD,MAAM,SAAS,GAAG,6BAA6B,CAAC;IAChD,MAAM,GAAG,GAAG,CACV,cACE,KAAK,EAAE,GAAG,SAAS,OAAO,EAC1B,IAAI,EAAC,YAAY,EACjB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,GACnB,CACH,CAAC;IAEF,OAAO,CACL,cAAK,KAAK,EAAE,SAAS,YAClB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC;YAChC,CAAC,CAAC,YACA,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,OAAO,YAClB,GAAG,GACF;YACJ,CAAC,CAAC,GAAG,GAEH,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridTickerItem from \"./ImageGridTickerItem.js\";\n\nexport default function ImageGridTickerItemTemplate(this: ImageGridTickerItem) {\n  const rootClass = \"udex-image-grid-ticker-item\";\n  const img = (\n    <img\n      class={`${rootClass}__img`}\n      part=\"grid-image\"\n      src={this.src}\n      alt={this.alt}\n      title={this.tooltip}\n    />\n  );\n\n  return (\n    <div class={rootClass}>\n      {this.href && this.href.length > 0\n        ? <a\n          class={`${rootClass}__link`}\n          href={this.href}\n          title={this.tooltip}>\n          {img}\n        </a>\n        : img\n      }\n    </div>\n  );\n}\n"]}

package/dist/ImageGridTickerTemplate.d.ts

@@ -0,0 +1,2 @@
+import type ImageGridTicker from "./ImageGridTicker.js";
+export default function ImageGridTickerTemplate(this: ImageGridTicker): import("@ui5/webcomponents-base").JSX.Element;

package/dist/ImageGridTickerTemplate.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import ImageGridTickerItem from "./ImageGridTickerItem.js";
+import UDExButton from "./Button.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import playIcon from "@ui5/webcomponents-icons/dist/play.js";
+import pauseIcon from "@ui5/webcomponents-icons/dist/pause.js";
+export default function ImageGridTickerTemplate() {
+    const rootClass = "udex-image-grid-ticker";
+    const items = this._isScrollable && !this._isMobileView && !this._isFocusIn ? [...this.items, ...this.items] : this.items;
+    const btnIcon = this._isPaused ? playIcon : pauseIcon;
+    return (_jsxs("div", { class: rootClass, children: [this._isScrollable &&
+                _jsx("div", { className: `${rootClass}__play-button-holder`, children: _jsx(UDExButton, { class: `${rootClass}__play-button`, icon: btnIcon, design: UDExButtonDesign.Invisible, onClick: this._onPlayButtonClick, tooltip: this.playBtnTooltipText }) }), _jsx("div", { className: `${rootClass}__track-holder`, children: _jsx("div", { className: `${rootClass}__track-wrapper`, children: _jsx("div", { className: `${rootClass}__track`, onMouseEnter: this._stopAnimation, onMouseLeave: this._startAnimation, onFocusIn: this._onFocusIn, onFocusOut: this._onFocusOut, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onMouseUp: this._onMouseUp, children: items.map(item => _jsx(ImageGridTickerItem, { src: item.src, alt: item.alt, tooltip: item.tooltip, href: item.href })) }) }) })] }));
+}
+//# sourceMappingURL=ImageGridTickerTemplate.js.map

package/dist/ImageGridTickerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTickerTemplate.js","sourceRoot":"","sources":["../src/ImageGridTickerTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AACvD,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAC7D,OAAO,SAAS,MAAM,wCAAwC,CAAC;AAE/D,MAAM,CAAC,OAAO,UAAU,uBAAuB;IAC7C,MAAM,SAAS,GAAG,wBAAwB,CAAC;IAC3C,MAAM,KAAK,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC;IAC1H,MAAM,OAAO,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAEtD,OAAO,CACL,eAAK,KAAK,EAAE,SAAS,aAClB,IAAI,CAAC,aAAa;gBACjB,cAAK,SAAS,EAAE,GAAG,SAAS,sBAAsB,YAChD,KAAC,UAAU,IACT,KAAK,EAAE,GAAG,SAAS,eAAe,EAClC,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,gBAAgB,CAAC,SAAS,EAClC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAChC,OAAO,EAAE,IAAI,CAAC,kBAAkB,GACrB,GACT,EAER,cAAK,SAAS,EAAE,GAAG,SAAS,gBAAgB,YAC1C,cAAK,SAAS,EAAE,GAAG,SAAS,iBAAiB,YAC3C,cACE,SAAS,EAAE,GAAG,SAAS,SAAS,EAChC,YAAY,EAAE,IAAI,CAAC,cAAc,EACjC,YAAY,EAAE,IAAI,CAAC,eAAe,EAClC,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,UAAU,EAAE,IAAI,CAAC,WAAW,EAC5B,SAAS,EAAE,IAAI,CAAC,UAAU,EAC1B,WAAW,EAAE,IAAI,CAAC,YAAY,EAC9B,SAAS,EAAE,IAAI,CAAC,UAAU,YACzB,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAChB,KAAC,mBAAmB,IAClB,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,IAAI,GACK,CACvB,GACG,GACF,GACF,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridTicker from \"./ImageGridTicker.js\";\nimport ImageGridTickerItem from \"./ImageGridTickerItem.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport playIcon from \"@ui5/webcomponents-icons/dist/play.js\";\nimport pauseIcon from \"@ui5/webcomponents-icons/dist/pause.js\";\n\nexport default function ImageGridTickerTemplate(this: ImageGridTicker) {\n  const rootClass = \"udex-image-grid-ticker\";\n  const items = this._isScrollable && !this._isMobileView && !this._isFocusIn ? [...this.items, ...this.items] : this.items;\n  const btnIcon = this._isPaused ? playIcon : pauseIcon;\n\n  return (\n    <div class={rootClass}>\n      {this._isScrollable &&\n        <div className={`${rootClass}__play-button-holder`}>\n          <UDExButton\n            class={`${rootClass}__play-button`}\n            icon={btnIcon}\n            design={UDExButtonDesign.Invisible}\n            onClick={this._onPlayButtonClick}\n            tooltip={this.playBtnTooltipText}>\n          </UDExButton>\n        </div>\n      }\n      <div className={`${rootClass}__track-holder`}>\n        <div className={`${rootClass}__track-wrapper`}>\n          <div\n            className={`${rootClass}__track`}\n            onMouseEnter={this._stopAnimation}\n            onMouseLeave={this._startAnimation}\n            onFocusIn={this._onFocusIn}\n            onFocusOut={this._onFocusOut}\n            onKeyDown={this._onKeyDown}\n            onMouseDown={this._onMouseDown}\n            onMouseUp={this._onMouseUp}>\n            {items.map(item =>\n              <ImageGridTickerItem\n                src={item.src}\n                alt={item.alt}\n                tooltip={item.tooltip}\n                href={item.href}>\n              </ImageGridTickerItem>\n            )}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/SelectBox.js

@@ -30,6 +30,7 @@ import UDExButton from "./Button.js";
 import UDExValueState from "./types/common.js";
 import UDExStatusMessage from "./StatusMessage.js";
 import UDExControlButton from "./ControlButton.js";
+import UDExBusyIndicator from "./BusyIndicator.js";
 import { Placement } from "./types/Dropdown.js";
 import { UDExPopoverPart } from "./types/SearchableListBase.js";
 import UDExTagGroup from "./TagGroup.js";
@@ -549,6 +550,7 @@ UDExSelectBox = UDExSelectBox_1 = __decorate([
             UDExStatusMessage,
             UDExControlButton,
             UDExTagGroup,
+            UDExBusyIndicator,
             UDExListItem,
             UDExList,
             UDExSearch,