@sapudex/web-components 2.24.0 → 2.25.0

package/dist/ImageGridTable.js

@@ -0,0 +1,120 @@
+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 ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridTableTemplate from "./ImageGridTableTemplate.js";
+import { Breakpoints } from "./utils/Breakpoints.js";
+// Styles
+import ImageGridTableCss from "./generated/themes/ImageGridTable.css.js";
+import property from "@ui5/webcomponents-base/decorators/property.js";
+export var UDExImageGridTableVariable;
+(function (UDExImageGridTableVariable) {
+    UDExImageGridTableVariable["columns"] = "--udex-image-grid-table-columns";
+    UDExImageGridTableVariable["gapDesktop"] = "--udex-image-grid-table-gap-xl-m";
+    UDExImageGridTableVariable["gapMobile"] = "--udex-image-grid-table-gap-s";
+    UDExImageGridTableVariable["minWidth"] = "--udex-image-grid-table-item-min-width";
+})(UDExImageGridTableVariable || (UDExImageGridTableVariable = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTable.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridTable = class UDExImageGridTable extends UI5Element {
+    constructor() {
+        super();
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
+    onAfterRendering() {
+        if (!this.isSmallComponentSize) {
+            this._renderGrid();
+        }
+    }
+    onBeforeRendering() {
+        if (this.grayscale) {
+            this._setGrayscaleMode();
+        }
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    handleResize() {
+        if (!this.isSmallComponentSize) {
+            this._renderGrid();
+        }
+    }
+    _renderGrid() {
+        const containerWidth = this.offsetWidth;
+        const itemCount = this.items.length;
+        const minWidth = this.itemMinWidth;
+        const gap = this.itemGap;
+        if (!containerWidth || itemCount === 0) {
+            return;
+        }
+        let columns = Math.floor((containerWidth - gap) / (minWidth + gap));
+        columns = Math.max(1, columns);
+        if (itemCount % columns === 1 && columns > 1) {
+            columns -= 1;
+        }
+        this.style.setProperty(UDExImageGridTableVariable.columns, String(columns));
+    }
+    _setGrayscaleMode() {
+        this.items.forEach(item => {
+            item._grayscale = true;
+        });
+    }
+    get itemMinWidth() {
+        const variableName = UDExImageGridTableVariable.minWidth;
+        return parseInt(this.getVariableValue(variableName));
+    }
+    get itemGap() {
+        const variableName = this.isSmallComponentSize
+            ? UDExImageGridTableVariable.gapMobile
+            : UDExImageGridTableVariable.gapDesktop;
+        return parseInt(this.getVariableValue(variableName));
+    }
+    get isSmallComponentSize() {
+        return this.offsetWidth <= Breakpoints.S.max;
+    }
+    getVariableValue(variableName) {
+        return window.getComputedStyle(this).getPropertyValue(`${variableName}`);
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExImageGridTable.prototype, "items", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTable.prototype, "grayscale", void 0);
+UDExImageGridTable = __decorate([
+    customElement({
+        tag: "udex-image-grid-table",
+        renderer: jsxRenderer,
+        styles: ImageGridTableCss,
+        template: ImageGridTableTemplate,
+    })
+], UDExImageGridTable);
+UDExImageGridTable.define();
+export default UDExImageGridTable;
+//# sourceMappingURL=ImageGridTable.js.map

package/dist/ImageGridTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTable.js","sourceRoot":"","sources":["../src/ImageGridTable.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 type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport type UDExImageGridTableItem from \"./ImageGridTableItem.js\";\nimport ImageGridTableTemplate from \"./ImageGridTableTemplate.js\";\nimport { Breakpoints } from \"./utils/Breakpoints.js\";\n\n// Styles\nimport ImageGridTableCss from \"./generated/themes/ImageGridTable.css.js\";\nimport property from \"@ui5/webcomponents-base/decorators/property.js\";\n\nexport enum UDExImageGridTableVariable {\n  columns = \"--udex-image-grid-table-columns\",\n  gapDesktop = \"--udex-image-grid-table-gap-xl-m\",\n  gapMobile = \"--udex-image-grid-table-gap-s\",\n  minWidth = \"--udex-image-grid-table-item-min-width\",\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-table</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridTable.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-table\",\n  renderer: jsxRenderer,\n  styles: ImageGridTableCss,\n  template: ImageGridTableTemplate,\n})\n\nclass UDExImageGridTable extends UI5Element {\n  /**\n   * Slot for image grid table items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExImageGridTableItem>;\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 undefined\n   * @public\n   */\n  @property({ type: Boolean })\n    grayscale?: boolean;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this.handleResize.bind(this);\n  }\n\n  onAfterRendering(): void {\n    if (!this.isSmallComponentSize) {\n      this._renderGrid();\n    }\n  }\n\n  onBeforeRendering(): void {\n    if (this.grayscale) {\n      this._setGrayscaleMode();\n    }\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  handleResize(): void {\n    if (!this.isSmallComponentSize) {\n      this._renderGrid();\n    }\n  }\n\n  _renderGrid(): void {\n    const containerWidth = this.offsetWidth;\n    const itemCount = this.items.length;\n    const minWidth = this.itemMinWidth;\n    const gap = this.itemGap;\n\n    if (!containerWidth || itemCount === 0) {\n      return;\n    }\n\n    let columns = Math.floor((containerWidth - gap) / (minWidth + gap));\n    columns = Math.max(1, columns);\n\n    if (itemCount % columns === 1 && columns > 1) {\n      columns -= 1;\n    }\n\n    this.style.setProperty(\n      UDExImageGridTableVariable.columns,\n      String(columns),\n    );\n  }\n\n  _setGrayscaleMode(): void {\n    this.items.forEach(item => {\n      item._grayscale = true;\n    });\n  }\n\n  get itemMinWidth(): number {\n    const variableName = UDExImageGridTableVariable.minWidth;\n    return parseInt(this.getVariableValue(variableName));\n  }\n\n  get itemGap(): number {\n    const variableName = this.isSmallComponentSize\n      ? UDExImageGridTableVariable.gapMobile\n      : UDExImageGridTableVariable.gapDesktop;\n    return parseInt(this.getVariableValue(variableName));\n  }\n\n  get isSmallComponentSize(): boolean {\n    return this.offsetWidth <= Breakpoints.S.max;\n  }\n\n  getVariableValue(variableName: string): string {\n    return window.getComputedStyle(this).getPropertyValue(`${variableName}`);\n  }\n}\n\nUDExImageGridTable.define();\n\nexport default UDExImageGridTable;\n"]}

package/dist/ImageGridTableItem.d.ts

@@ -0,0 +1,89 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { UDExTarget } from "./types/common.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTableItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExImageGridTableItem extends UI5Element {
+    eventDetails: {
+        "item-click": void;
+    };
+    /**
+     * Defines the text content of the component.
+     *
+     * @slot content
+     * @public
+     */
+    content: Array<HTMLElement>;
+    /**
+     * Defines the header text of the component.
+     *
+     * @default ""
+     * @public
+     */
+    headline?: string;
+    /**
+     * Defines the link label of the component.
+     *
+     * @default ""
+     * @public
+     */
+    linkLabel?: string;
+    /**
+     * Defines link URL
+     *
+     * @default undefined
+     * @public
+     */
+    href?: string;
+    /**
+     * Defines the source URL of the image
+     *
+     * @default undefined
+     * @public
+     */
+    src?: string;
+    /**
+     * Defines image alt text
+     *
+     * @default undefined
+     * @public
+     */
+    alt?: string;
+    /**
+     * Defines tooltip on hover
+     *
+     * @default undefined
+     * @public
+     */
+    tooltip?: string;
+    /**
+     * Defines target for the mage grid table item.
+     *
+     * @public
+     */
+    target: `${UDExTarget}`;
+    /**
+     * Indicates whether the image grid table item is grayscale.
+     *
+     * @default false
+     * @private
+     */
+    _grayscale: boolean;
+    onEnterDOM(): void;
+    fireLinkItemClickEvent(e: Event): void;
+}
+export default UDExImageGridTableItem;

package/dist/ImageGridTableItem.js

@@ -0,0 +1,108 @@
+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 event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.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 { UDExTarget } from "./types/common.js";
+import ImageGridTableItemTemplate from "./ImageGridTableItemTemplate.js";
+// Styles
+import ImageGridTableItemCss from "./generated/themes/ImageGridTableItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-table-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridTableItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridTableItem = class UDExImageGridTableItem extends UI5Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines target for the mage grid table item.
+         *
+         * @public
+         */
+        this.target = UDExTarget._self;
+        /**
+         * Indicates whether the image grid table item is grayscale.
+         *
+         * @default false
+         * @private
+         */
+        this._grayscale = false;
+    }
+    onEnterDOM() {
+        if (isDesktop()) {
+            this.setAttribute("desktop", "");
+        }
+    }
+    fireLinkItemClickEvent(e) {
+        const executeEvent = this.fireDecoratorEvent("item-click");
+        if (!executeEvent) {
+            e.preventDefault();
+        }
+    }
+};
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExImageGridTableItem.prototype, "content", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "headline", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "linkLabel", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "href", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "alt", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "tooltip", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridTableItem.prototype, "target", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridTableItem.prototype, "_grayscale", void 0);
+UDExImageGridTableItem = __decorate([
+    customElement({
+        tag: "udex-image-grid-table-item",
+        renderer: jsxRenderer,
+        styles: ImageGridTableItemCss,
+        template: ImageGridTableItemTemplate,
+    })
+    /**
+     * Fired event when the user clicks on the item link.
+     *
+     * @public
+     */
+    ,
+    event("item-click", { cancelable: true, bubbles: true })
+], UDExImageGridTableItem);
+UDExImageGridTableItem.define();
+export default UDExImageGridTableItem;
+//# sourceMappingURL=ImageGridTableItem.js.map

package/dist/ImageGridTableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTableItem.js","sourceRoot":"","sources":["../src/ImageGridTableItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF;;;;;;;;;;;;;;;;GAgBG;AAeH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;IAA/C;;QAoEE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;QAE7C;;;;;WAKG;QAED,eAAU,GAAG,KAAK,CAAC;IAevB,CAAC;IAbC,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,sBAAsB,CAAC,CAAQ;QAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;QAE3D,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;CACF,CAAA;AAtFG;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;uDACd;AAS7B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACP;AASlB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oDACX;AASd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AASb;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AASb;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACR;AAQjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACkB;AAS3C;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0DACP;AAnFjB,sBAAsB;IAd3B,aAAa,CAAC;QACb,GAAG,EAAE,4BAA4B;QACjC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,0BAA0B;KACrC,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEnD,sBAAsB,CAkG3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/Device.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.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 { UDExTarget } from \"./types/common.js\";\n\nimport ImageGridTableItemTemplate from \"./ImageGridTableItemTemplate.js\";\n\n// Styles\nimport ImageGridTableItemCss from \"./generated/themes/ImageGridTableItem.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-table-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridTableItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-table-item\",\n  renderer: jsxRenderer,\n  styles: ImageGridTableItemCss,\n  template: ImageGridTableItemTemplate,\n})\n\n/**\n * Fired event when the user clicks on the item link.\n *\n * @public\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\nclass UDExImageGridTableItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": void,\n  };\n\n  /**\n   * Defines the text content of the component.\n   *\n   * @slot content\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    content!: Array<HTMLElement>;\n\n  /**\n   * Defines the header text of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline?: string;\n\n  /**\n   * Defines the link label of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    linkLabel?: string;\n\n  /**\n   * Defines link URL\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    href?: string;\n\n  /**\n   * Defines the source URL of the image\n   *\n   * @default undefined\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 target for the mage grid table item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Indicates whether the image grid table item is grayscale.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean })\n    _grayscale = false;\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  fireLinkItemClickEvent(e: Event): void {\n    const executeEvent = this.fireDecoratorEvent(\"item-click\");\n\n    if (!executeEvent) {\n      e.preventDefault();\n    }\n  }\n}\n\nUDExImageGridTableItem.define();\n\nexport default UDExImageGridTableItem;\n"]}

package/dist/ImageGridTableItemTemplate.d.ts

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

package/dist/ImageGridTableItemTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
+import UDExLink from "./Link.js";
+export default function ImageGridTableItemTemplate() {
+    const rootClass = "udex-image-grid-table-item";
+    const image = (_jsx("img", { class: `${rootClass}__image`, src: this.src, alt: this.alt, title: this.tooltip }));
+    return (_jsxs("div", { class: rootClass, children: [!this.linkLabel && this.href
+                ? _jsx("a", { class: `${rootClass}__image-holder`, onClick: this.fireLinkItemClickEvent, href: this.href, target: this.target, title: this.tooltip, children: image })
+                : _jsx("div", { class: `${rootClass}__image-holder`, children: image }), this.headline &&
+                _jsx("span", { class: `${rootClass}__headline`, children: this.headline }), _jsx("slot", {}), this.linkLabel &&
+                _jsx("div", { class: `${rootClass}__link-holder`, children: _jsx(UDExLink, { onClick: this.fireLinkItemClickEvent, target: this.target, class: `${rootClass}__link`, endIcon: slimArrowRight, href: this.href, children: this.linkLabel }) })] }));
+}
+//# sourceMappingURL=ImageGridTableItemTemplate.js.map

package/dist/ImageGridTableItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTableItemTemplate.js","sourceRoot":"","sources":["../src/ImageGridTableItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAC/E,OAAO,QAAQ,MAAM,WAAW,CAAC;AAEjC,MAAM,CAAC,OAAO,UAAU,0BAA0B;IAChD,MAAM,SAAS,GAAG,4BAA4B,CAAC;IAE/C,MAAM,KAAK,GAAG,CACZ,cACE,KAAK,EAAE,GAAG,SAAS,SAAS,EAC5B,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,OAAO,GACnB,CACH,CAAC;IAEF,OAAO,CACL,eAAK,KAAK,EAAE,SAAS,aAClB,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI;gBAC3B,CAAC,CAAC,YACA,KAAK,EAAE,GAAG,SAAS,gBAAgB,EACnC,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,IAAI,CAAC,OAAO,YAClB,KAAK,GACJ;gBACJ,CAAC,CAAC,cAAK,KAAK,EAAE,GAAG,SAAS,gBAAgB,YAAG,KAAK,GAAO,EAE1D,IAAI,CAAC,QAAQ;gBACZ,eAAM,KAAK,EAAE,GAAG,SAAS,YAAY,YAAG,IAAI,CAAC,QAAQ,GAAQ,EAE/D,gBAAa,EACZ,IAAI,CAAC,SAAS;gBACb,cAAK,KAAK,EAAE,GAAG,SAAS,eAAe,YACrC,KAAC,QAAQ,IACP,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,OAAO,EAAE,cAAc,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,YACd,IAAI,CAAC,SAAS,GACN,GACP,IAEJ,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridTableItem from \"./ImageGridTableItem.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\nimport UDExLink from \"./Link.js\";\n\nexport default function ImageGridTableItemTemplate(this: ImageGridTableItem) {\n  const rootClass = \"udex-image-grid-table-item\";\n\n  const image = (\n    <img\n      class={`${rootClass}__image`}\n      src={this.src}\n      alt={this.alt}\n      title={this.tooltip}\n    />\n  );\n\n  return (\n    <div class={rootClass}>\n      {!this.linkLabel && this.href\n        ? <a\n          class={`${rootClass}__image-holder`}\n          onClick={this.fireLinkItemClickEvent}\n          href={this.href}\n          target={this.target}\n          title={this.tooltip}>\n          {image}\n        </a>\n        : <div class={`${rootClass}__image-holder`}>{image}</div>\n      }\n      {this.headline &&\n        <span class={`${rootClass}__headline`}>{this.headline}</span>\n      }\n      <slot></slot>\n      {this.linkLabel &&\n        <div class={`${rootClass}__link-holder`}>\n          <UDExLink\n            onClick={this.fireLinkItemClickEvent}\n            target={this.target}\n            class={`${rootClass}__link`}\n            endIcon={slimArrowRight}\n            href={this.href}>\n            {this.linkLabel}\n          </UDExLink>\n        </div>\n      }\n    </div>\n  );\n}\n"]}

package/dist/ImageGridTableTemplate.d.ts

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

package/dist/ImageGridTableTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ImageGridTableTemplate() {
+    return (_jsx("div", { class: "udex-image-grid-table", children: _jsx("slot", {}) }));
+}
+//# sourceMappingURL=ImageGridTableTemplate.js.map

package/dist/ImageGridTableTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridTableTemplate.js","sourceRoot":"","sources":["../src/ImageGridTableTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC5C,OAAO,CACL,cAAK,KAAK,EAAC,uBAAuB,YAChC,gBAAa,GACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridTable from \"./ImageGridTable.js\";\n\nexport default function ImageGridTableTemplate(this: ImageGridTable) {\n  return (\n    <div class=\"udex-image-grid-table\">\n      <slot></slot>\n    </div>\n  );\n}\n"]}

package/dist/ImageGridTicker.js

@@ -19,6 +19,7 @@ import { PAUSE_BUTTON_ACCESSIBLE_NAME, PLAY_BUTTON_ACCESSIBLE_NAME } from "./gen
 import { BreakpointUtils } from "./utils/Breakpoints.js";
 import ImageGridTickerItem from "./ImageGridTickerItem.js";
 import ImageGridTickerTemplate from "./ImageGridTickerTemplate.js";
+import translate from "./utils/translate.js";
 // Styles
 import ImageGridTickerCss from "./generated/themes/ImageGridTicker.css.js";
 export var UDExImageGridTickerVariable;
@@ -245,8 +246,8 @@ let UDExImageGridTicker = UDExImageGridTicker_1 = class UDExImageGridTicker exte
     }
     get playBtnTooltipText() {
         return this._isPaused
-            ? UDExImageGridTicker_1.i18nBundle.getText(PLAY_BUTTON_ACCESSIBLE_NAME)
-            : UDExImageGridTicker_1.i18nBundle.getText(PAUSE_BUTTON_ACCESSIBLE_NAME);
+            ? translate(UDExImageGridTicker_1, PLAY_BUTTON_ACCESSIBLE_NAME)
+            : translate(UDExImageGridTicker_1, PAUSE_BUTTON_ACCESSIBLE_NAME);
     }
 };
 __decorate([

package/dist/ImageGridTicker.js.map

@@ -1 +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 * @param {boolean} isPaused - Indicates whether the animation is paused.\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 undefined\n   * @public\n   */\n  @property({ type: Boolean })\n    grayscale?: boolean;\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"]}
+{"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\";\nimport translate from \"./utils/translate.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 * @param {boolean} isPaused - Indicates whether the animation is paused.\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 undefined\n   * @public\n   */\n  @property({ type: Boolean })\n    grayscale?: boolean;\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      ? translate(UDExImageGridTicker, PLAY_BUTTON_ACCESSIBLE_NAME)\n      : translate(UDExImageGridTicker, PAUSE_BUTTON_ACCESSIBLE_NAME);\n  }\n}\n\nUDExImageGridTicker.define();\n\nexport default UDExImageGridTicker;\nexport type { UDExImageGridTickerPlayBtnClickEventDetail };\n"]}

package/dist/ImageGridTickerItem.d.ts

@@ -17,6 +17,9 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
  * @public
  */
 declare class UDExImageGridTickerItem extends UI5Element {
+    eventDetails: {
+        "item-click": void;
+    };
     /**
      * Defines the source URL
      *
@@ -46,5 +49,6 @@ declare class UDExImageGridTickerItem extends UI5Element {
      */
     href?: string;
     onEnterDOM(): void;
+    fireLinkItemClickEvent(e: Event): void;
 }
 export default UDExImageGridTickerItem;

package/dist/ImageGridTickerItem.js

@@ -6,6 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { isDesktop } from "@ui5/webcomponents-base/Device.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event-strict.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";
@@ -35,6 +36,12 @@ let UDExImageGridTickerItem = class UDExImageGridTickerItem extends UI5Element {
             this.setAttribute("desktop", "");
         }
     }
+    fireLinkItemClickEvent(e) {
+        const executeEvent = this.fireDecoratorEvent("item-click");
+        if (!executeEvent) {
+            e.preventDefault();
+        }
+    }
 };
 __decorate([
     property({ type: String })
@@ -55,6 +62,13 @@ UDExImageGridTickerItem = __decorate([
         styles: ImageGridTickerItemCss,
         template: ImageGridTickerItemTemplate,
     })
+    /**
+     * Fired event when the user clicks on the item link.
+     *
+     * @public
+     */
+    ,
+    event("item-click", { cancelable: true, bubbles: true })
 ], UDExImageGridTickerItem);
 UDExImageGridTickerItem.define();
 export default UDExImageGridTickerItem;

package/dist/ImageGridTickerItem.js.map

@@ -1 +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"]}
+{"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,KAAK,MAAM,yDAAyD,CAAC;AAC5E,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;AAeH,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;IAyC9C,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;IACH,CAAC;IAED,sBAAsB,CAAC,CAAQ;QAC7B,MAAM,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;QAE3D,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;IACH,CAAC;CACF,CAAA;AA1CG;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;AAvCZ,uBAAuB;IAd5B,aAAa,CAAC;QACb,GAAG,EAAE,6BAA6B;QAClC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,sBAAsB;QAC9B,QAAQ,EAAE,2BAA2B;KACtC,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEnD,uBAAuB,CAsD5B;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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.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\n/**\n * Fired event when the user clicks on the item link.\n *\n * @public\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\nclass UDExImageGridTickerItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": void,\n  };\n\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  fireLinkItemClickEvent(e: Event): void {\n    const executeEvent = this.fireDecoratorEvent(\"item-click\");\n\n    if (!executeEvent) {\n      e.preventDefault();\n    }\n  }\n}\n\nUDExImageGridTickerItem.define();\n\nexport default UDExImageGridTickerItem;\n"]}

package/dist/ImageGridTickerItemTemplate.js

@@ -3,7 +3,7 @@ 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 })
+            ? _jsx("a", { onClick: this.fireLinkItemClickEvent, class: `${rootClass}__link`, href: this.href, title: this.tooltip, children: img })
             : img }));
 }
 //# sourceMappingURL=ImageGridTickerItemTemplate.js.map

package/dist/ImageGridTickerItemTemplate.js.map

@@ -1 +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"]}
+{"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,OAAO,EAAE,IAAI,CAAC,sBAAsB,EACpC,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          onClick={this.fireLinkItemClickEvent}\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/InputGroup.js

@@ -15,6 +15,7 @@ import UDExStatusMessage from "./StatusMessage.js";
 import InputGroupTemplate from "./InputGroupTemplate.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS, } from "./generated/i18n/i18n-defaults.js";
+import translate from "./utils/translate.js";
 // Styles
 import InputGroupCss from "./generated/themes/InputGroup.css.js";
 export var UDExGroupValueState;
@@ -75,8 +76,8 @@ let UDExInputGroup = UDExInputGroup_1 = class UDExInputGroup extends UI5Element
     }
     get valueStateTypeMappings() {
         return {
-            "Success": UDExInputGroup_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
-            "Error": UDExInputGroup_1.i18nBundle.getText(VALUE_STATE_ERROR),
+            "Success": translate(UDExInputGroup_1, VALUE_STATE_SUCCESS),
+            "Error": translate(UDExInputGroup_1, VALUE_STATE_ERROR),
         };
     }
     get valueStateText() {