@sapudex/web-components 2.21.0 → 2.22.0

package/dist/ImageGridCloud.d.ts

@@ -0,0 +1,76 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+export declare enum UDExImageGridCloudVariable {
+    itemGapL = "--udex-image-grid-cloud-item-gap-l",
+    itemGapS = "--udex-image-grid-cloud-item-gap-s",
+    itemWidthL = "--udex-image-grid-cloud-item-width-l",
+    itemWidthS = "--udex-image-grid-cloud-item-width-s",
+    itemBorderWidth = "--udex-image-grid-cloud-item-border-width"
+}
+export declare enum UDExImageGridCloudSize {
+    Small = "Small",
+    Large = "Large"
+}
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloud.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExImageGridCloud extends UI5Element {
+    /**
+     * Grayscale mode enhances visual harmony and can be used for minimal,
+     * professional layouts or to de-emphasize logos.
+     *
+     * @default undefined
+     * @public
+     */
+    grayscale?: boolean;
+    /**
+     * Defines the size of the items.
+     *
+     * @default "Large"
+     * @private
+     */
+    size: `${UDExImageGridCloudSize}`;
+    /**
+     * Slot for image grid cloud items.
+     *
+     * @slot
+     * @public
+     */
+    items: Array<UDExImageGridCloudItem>;
+    _rootId: string;
+    _rowClassName: string;
+    _container: HTMLElement;
+    _items: Array<Element>;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    onAfterRendering(): void;
+    handleResize(): void;
+    renderLayout(): void;
+    _getVariableValue(variableName: string): string;
+    get itemWidth(): number;
+    get itemGap(): number;
+    get itemHorizontalBorderWidth(): number;
+    get isSmallSize(): boolean;
+    get containerElement(): HTMLElement;
+    get itemsElements(): Array<Element>;
+    get isMobile(): boolean;
+    get isContainerEmpty(): boolean;
+}
+export default UDExImageGridCloud;

package/dist/ImageGridCloud.js

@@ -0,0 +1,153 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import 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 ImageGridCloudTemplate from "./ImageGridCloudTemplate.js";
+// Styles
+import ImageGridCloudCss from "./generated/themes/ImageGridCloud.css.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
+export var UDExImageGridCloudVariable;
+(function (UDExImageGridCloudVariable) {
+    UDExImageGridCloudVariable["itemGapL"] = "--udex-image-grid-cloud-item-gap-l";
+    UDExImageGridCloudVariable["itemGapS"] = "--udex-image-grid-cloud-item-gap-s";
+    UDExImageGridCloudVariable["itemWidthL"] = "--udex-image-grid-cloud-item-width-l";
+    UDExImageGridCloudVariable["itemWidthS"] = "--udex-image-grid-cloud-item-width-s";
+    UDExImageGridCloudVariable["itemBorderWidth"] = "--udex-image-grid-cloud-item-border-width";
+})(UDExImageGridCloudVariable || (UDExImageGridCloudVariable = {}));
+export var UDExImageGridCloudSize;
+(function (UDExImageGridCloudSize) {
+    UDExImageGridCloudSize["Small"] = "Small";
+    UDExImageGridCloudSize["Large"] = "Large";
+})(UDExImageGridCloudSize || (UDExImageGridCloudSize = {}));
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloud.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridCloud = class UDExImageGridCloud extends UI5Element {
+    constructor() {
+        super();
+        /**
+         * Defines the size of the items.
+         *
+         * @default "Large"
+         * @private
+         */
+        this.size = UDExImageGridCloudSize.Large;
+        this._rootId = "udex-image-grid-cloud";
+        this._rowClassName = "udex-image-grid-cloud__row";
+        this._items = [];
+        this._handleResizeBound = this.handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
+    }
+    onAfterRendering() {
+        this._container = this.containerElement;
+        this._items = this.itemsElements;
+        this.renderLayout();
+    }
+    handleResize() {
+        this.renderLayout();
+    }
+    renderLayout() {
+        if (this.isContainerEmpty) {
+            return;
+        }
+        const ITEM_WIDTH = this.itemWidth + this.itemHorizontalBorderWidth;
+        const GAP = this.itemGap;
+        const existingRows = Array.from(this._container.querySelectorAll(`.${this._rowClassName}`));
+        existingRows.forEach(row => row.remove());
+        const containerWidth = this._container.clientWidth;
+        const itemsPerRow = Math.max(Math.floor((containerWidth + GAP) / (ITEM_WIDTH + GAP)) || 0, 1);
+        let index = 0;
+        let rowIndex = 0;
+        while (index < this._items.length) {
+            const count = rowIndex % 2 === 0 ? itemsPerRow : Math.max(itemsPerRow - 1, 1);
+            const row = document.createElement("div");
+            row.className = this._rowClassName;
+            for (let i = 0; i < count && index < this._items.length; i++, index++) {
+                row.appendChild(this._items[index]);
+            }
+            this._container.appendChild(row);
+            rowIndex++;
+        }
+    }
+    _getVariableValue(variableName) {
+        return window.getComputedStyle(this).getPropertyValue(`${variableName}`);
+    }
+    get itemWidth() {
+        const variableName = this.isSmallSize || this.isMobile
+            ? UDExImageGridCloudVariable.itemWidthS
+            : UDExImageGridCloudVariable.itemWidthL;
+        return parseInt(this._getVariableValue(variableName));
+    }
+    get itemGap() {
+        const variableName = this.isSmallSize || this.isMobile
+            ? UDExImageGridCloudVariable.itemGapS
+            : UDExImageGridCloudVariable.itemGapL;
+        return parseInt(this._getVariableValue(variableName));
+    }
+    get itemHorizontalBorderWidth() {
+        const border = parseInt(this._getVariableValue(UDExImageGridCloudVariable.itemBorderWidth));
+        return border * 2;
+    }
+    get isSmallSize() {
+        return this.size === UDExImageGridCloudSize.Small;
+    }
+    get containerElement() {
+        return this.shadowRoot.getElementById(this._rootId);
+    }
+    get itemsElements() {
+        return Array.from(this.containerElement.children);
+    }
+    get isMobile() {
+        return BreakpointUtils.isAtMost("S");
+    }
+    get isContainerEmpty() {
+        return !this._container || this._items.length === 0;
+    }
+};
+__decorate([
+    property({ type: Boolean })
+], UDExImageGridCloud.prototype, "grayscale", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridCloud.prototype, "size", void 0);
+__decorate([
+    slot({ type: HTMLElement, "default": true })
+], UDExImageGridCloud.prototype, "items", void 0);
+UDExImageGridCloud = __decorate([
+    customElement({
+        tag: "udex-image-grid-cloud",
+        renderer: jsxRenderer,
+        styles: ImageGridCloudCss,
+        template: ImageGridCloudTemplate,
+    })
+], UDExImageGridCloud);
+UDExImageGridCloud.define();
+export default UDExImageGridCloud;
+//# sourceMappingURL=ImageGridCloud.js.map

package/dist/ImageGridCloud.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridCloud.js","sourceRoot":"","sources":["../src/ImageGridCloud.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport 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 ImageGridCloudTemplate from \"./ImageGridCloudTemplate.js\";\nimport type UDExImageGridCloudItem from \"./ImageGridCloudItem.js\";\n\n// Styles\nimport ImageGridCloudCss from \"./generated/themes/ImageGridCloud.css.js\";\nimport { BreakpointUtils } from \"./utils/Breakpoints.js\";\n\nexport enum UDExImageGridCloudVariable {\n  itemGapL = \"--udex-image-grid-cloud-item-gap-l\",\n  itemGapS = \"--udex-image-grid-cloud-item-gap-s\",\n  itemWidthL = \"--udex-image-grid-cloud-item-width-l\",\n  itemWidthS = \"--udex-image-grid-cloud-item-width-s\",\n  itemBorderWidth = \"--udex-image-grid-cloud-item-border-width\",\n}\n\nexport enum UDExImageGridCloudSize {\n  Small = \"Small\",\n  Large = \"Large\",\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-cloud</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridCloud.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-cloud\",\n  renderer: jsxRenderer,\n  styles: ImageGridCloudCss,\n  template: ImageGridCloudTemplate,\n})\n\nclass UDExImageGridCloud extends UI5Element {\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   * Defines the size of the items.\n   *\n   * @default \"Large\"\n   * @private\n   */\n  @property({ type: String })\n    size: `${UDExImageGridCloudSize}` = UDExImageGridCloudSize.Large;\n\n  /**\n   * Slot for image grid cloud items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    items!: Array<UDExImageGridCloudItem>;\n\n  _rootId = \"udex-image-grid-cloud\";\n  _rowClassName = \"udex-image-grid-cloud__row\";\n  _container!: HTMLElement;\n  _items: Array<Element> = [];\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this.handleResize.bind(this);\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  onAfterRendering() {\n    this._container = this.containerElement;\n    this._items = this.itemsElements;\n    this.renderLayout();\n  }\n\n  handleResize(): void {\n    this.renderLayout();\n  }\n\n  renderLayout() {\n    if (this.isContainerEmpty) {\n      return;\n    }\n\n    const ITEM_WIDTH = this.itemWidth + this.itemHorizontalBorderWidth;\n    const GAP = this.itemGap;\n\n    const existingRows = Array.from(this._container.querySelectorAll(`.${this._rowClassName}`));\n    existingRows.forEach(row => row.remove());\n\n    const containerWidth = this._container.clientWidth;\n    const itemsPerRow = Math.max(Math.floor((containerWidth + GAP) / (ITEM_WIDTH + GAP)) || 0, 1);\n\n    let index = 0;\n    let rowIndex = 0;\n\n    while (index < this._items.length) {\n      const count = rowIndex % 2 === 0 ? itemsPerRow : Math.max(itemsPerRow - 1, 1);\n      const row = document.createElement(\"div\");\n      row.className = this._rowClassName;\n\n      for (let i = 0; i < count && index < this._items.length; i++, index++) {\n        row.appendChild(this._items[index]);\n      }\n\n      this._container.appendChild(row);\n      rowIndex++;\n    }\n  }\n\n  _getVariableValue(variableName: string): string {\n    return window.getComputedStyle(this).getPropertyValue(`${variableName}`);\n  }\n\n  get itemWidth(): number {\n    const variableName = this.isSmallSize || this.isMobile\n      ? UDExImageGridCloudVariable.itemWidthS\n      : UDExImageGridCloudVariable.itemWidthL;\n    return parseInt(this._getVariableValue(variableName));\n  }\n\n  get itemGap(): number {\n    const variableName = this.isSmallSize || this.isMobile\n      ? UDExImageGridCloudVariable.itemGapS\n      : UDExImageGridCloudVariable.itemGapL;\n    return parseInt(this._getVariableValue(variableName));\n  }\n\n  get itemHorizontalBorderWidth(): number {\n    const border = parseInt(this._getVariableValue(UDExImageGridCloudVariable.itemBorderWidth));\n    return border * 2;\n  }\n\n  get isSmallSize(): boolean {\n    return this.size === UDExImageGridCloudSize.Small;\n  }\n\n  get containerElement(): HTMLElement {\n    return this.shadowRoot!.getElementById(this._rootId)!;\n  }\n\n  get itemsElements(): Array<Element> {\n    return Array.from(this.containerElement.children);\n  }\n\n  get isMobile(): boolean {\n    return BreakpointUtils.isAtMost(\"S\");\n  }\n\n  get isContainerEmpty(): boolean {\n    return !this._container || this._items.length === 0;\n  }\n}\n\nUDExImageGridCloud.define();\n\nexport default UDExImageGridCloud;\n"]}

package/dist/ImageGridCloudItem.d.ts

@@ -0,0 +1,35 @@
+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-cloud-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloudItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExImageGridCloudItem extends UI5Element {
+    /**
+     * Defines the source URL
+     *
+     * @default ""
+     * @public
+     */
+    src: string;
+    /**
+     * Defines image alt text
+     *
+     * @default ""
+     * @public
+     */
+    alt: string;
+}
+export default UDExImageGridCloudItem;

package/dist/ImageGridCloudItem.js

@@ -0,0 +1,49 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
+import ImageGridCloudItemTemplate from "./ImageGridCloudItemTemplate.js";
+// Styles
+import ImageGridCloudItemCss from "./generated/themes/ImageGridCloudItem.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-image-grid-cloud-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/ImageGridCloudItem.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExImageGridCloudItem = class UDExImageGridCloudItem extends UI5Element {
+};
+__decorate([
+    property({ type: String })
+], UDExImageGridCloudItem.prototype, "src", void 0);
+__decorate([
+    property({ type: String })
+], UDExImageGridCloudItem.prototype, "alt", void 0);
+UDExImageGridCloudItem = __decorate([
+    customElement({
+        tag: "udex-image-grid-cloud-item",
+        renderer: jsxRenderer,
+        styles: ImageGridCloudItemCss,
+        template: ImageGridCloudItemTemplate,
+    })
+], UDExImageGridCloudItem);
+UDExImageGridCloudItem.define();
+export default UDExImageGridCloudItem;
+//# sourceMappingURL=ImageGridCloudItem.js.map

package/dist/ImageGridCloudItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridCloudItem.js","sourceRoot":"","sources":["../src/ImageGridCloudItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAE/E,OAAO,0BAA0B,MAAM,iCAAiC,CAAC;AAEzE,SAAS;AACT,OAAO,qBAAqB,MAAM,8CAA8C,CAAC;AAEjF;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,UAAU;CAkB9C,CAAA;AAVG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AASb;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACZ;AAjBX,sBAAsB;IAP3B,aAAa,CAAC;QACb,GAAG,EAAE,4BAA4B;QACjC,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,qBAAqB;QAC7B,QAAQ,EAAE,0BAA0B;KACrC,CAAC;GAEI,sBAAsB,CAkB3B;AAED,sBAAsB,CAAC,MAAM,EAAE,CAAC;AAEhC,eAAe,sBAAsB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\n\nimport ImageGridCloudItemTemplate from \"./ImageGridCloudItemTemplate.js\";\n\n// Styles\nimport ImageGridCloudItemCss from \"./generated/themes/ImageGridCloudItem.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-cloud-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ImageGridCloudItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-image-grid-cloud-item\",\n  renderer: jsxRenderer,\n  styles: ImageGridCloudItemCss,\n  template: ImageGridCloudItemTemplate,\n})\n\nclass UDExImageGridCloudItem 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 \"\"\n   * @public\n   */\n  @property({ type: String })\n    alt!: string;\n}\n\nUDExImageGridCloudItem.define();\n\nexport default UDExImageGridCloudItem;\n"]}

package/dist/ImageGridCloudItemTemplate.d.ts

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

package/dist/ImageGridCloudItemTemplate.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+export default function ImageGridCloudItemTemplate() {
+    return (_jsx("img", { class: "udex-image-grid-cloud-item-img", src: this.src, alt: this.alt }));
+}
+//# sourceMappingURL=ImageGridCloudItemTemplate.js.map

package/dist/ImageGridCloudItemTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridCloudItemTemplate.js","sourceRoot":"","sources":["../src/ImageGridCloudItemTemplate.tsx"],"names":[],"mappings":";AAEA,MAAM,CAAC,OAAO,UAAU,0BAA0B;IAChD,OAAO,CACL,cACE,KAAK,EAAC,gCAAgC,EACtC,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,GACb,CACH,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridCloudItem from \"./ImageGridCloudItem.js\";\n\nexport default function ImageGridCloudItemTemplate(this: ImageGridCloudItem) {\n  return (\n    <img\n      class=\"udex-image-grid-cloud-item-img\"\n      src={this.src}\n      alt={this.alt}\n    />\n  );\n}\n"]}

package/dist/ImageGridCloudTemplate.d.ts

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

package/dist/ImageGridCloudTemplate.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import UDExImageGridCloudItem from "./ImageGridCloudItem.js";
+export default function ImageGridCloudTemplate() {
+    return (_jsx("div", { id: "udex-image-grid-cloud", children: this.items.map(({ src, alt }) => _jsx(UDExImageGridCloudItem, { class: "udex-image-grid-cloud__item", src: src, alt: alt })) }));
+}
+//# sourceMappingURL=ImageGridCloudTemplate.js.map

package/dist/ImageGridCloudTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageGridCloudTemplate.js","sourceRoot":"","sources":["../src/ImageGridCloudTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,sBAAsB,MAAM,yBAAyB,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC5C,OAAO,CACL,cAAK,EAAE,EAAC,uBAAuB,YAC5B,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE,CAC/B,KAAC,sBAAsB,IACrB,KAAK,EAAC,6BAA6B,EACnC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,GACe,CAC1B,GACG,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type ImageGridCloud from \"./ImageGridCloud.js\";\nimport UDExImageGridCloudItem from \"./ImageGridCloudItem.js\";\n\nexport default function ImageGridCloudTemplate(this: ImageGridCloud) {\n  return (\n    <div id=\"udex-image-grid-cloud\">\n      {this.items.map(({ src, alt }) =>\n        <UDExImageGridCloudItem\n          class=\"udex-image-grid-cloud__item\"\n          src={src}\n          alt={alt}>\n        </UDExImageGridCloudItem>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/ImageGridTicker.d.ts

@@ -41,10 +41,10 @@ declare class UDExImageGridTicker extends UI5Element {
      * Grayscale mode enhances visual harmony and can be used for minimal,
      * professional layouts or to de-emphasize logos.
      *
-     * @default false
+     * @default undefined
      * @public
      */
-    grayscale: boolean;
+    grayscale?: boolean;
     /**
      * Indicates whether the image grid ticker is scrollable.
      *

package/dist/ImageGridTicker.js

@@ -46,14 +46,6 @@ export var UDExImageGridTickerVariable;
 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.
          *
@@ -296,6 +288,7 @@ UDExImageGridTicker = UDExImageGridTicker_1 = __decorate([
      * Fired event when the user click on a play/paused button.
      *
      * @public
+     * @param {boolean} isPaused - Indicates whether the animation is paused.
      */
     ,
     event("play-button-click", { bubbles: true })

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 */\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"]}
+{"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"]}

package/dist/LinkListItem.js

@@ -88,6 +88,7 @@ UDExLinkListItem = __decorate([
     /**
      * Triggered when the user clicks on an item.
      * @public
+     * @param {Event} originalEvent the original event object
      */
     ,
     event("item-click", { bubbles: true })

package/dist/LinkListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"LinkListItem.js","sourceRoot":"","sources":["../src/LinkListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,SAAS;AACT,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAMrE;;;;;;;;;;;;;;;;;GAiBG;AAcH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAaE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;QAW7C;;;;WAIG;QAED,SAAI,GAA0B,gBAAgB,CAAC,IAAI,CAAC;IAsCxD,CAAC;IATC,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa;SACxD,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,CAAC;IAC7C,CAAC;CACF,CAAA;AA/DG;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;gDACkC;AAS3C;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;8CAC2C;AASpD;IADD,QAAQ,EAAE;wDACe;AASxB;IADD,QAAQ,EAAE;yDACgB;AASzB;IADD,QAAQ,EAAE;+CACM;AA/Db,gBAAgB;IAbrB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,oBAAoB;KAC/B,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEjC,gBAAgB,CA0ErB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { UDExLinkListType } from \"./LinkList.js\";\nimport LinkListItemTemplate from \"./LinkListItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\n\n// Styles\nimport LinkListItemCss from \"./generated/themes/LinkListItem.css.js\";\n\ntype UDExListLinkItemClickEventDetail = {\n  originalEvent: Event,\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-link-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/LinkListItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-link-list-item\n * @public\n */\n@customElement({\n  tag: \"udex-link-list-item\",\n  renderer: jsxRenderer,\n  styles: LinkListItemCss,\n  template: LinkListItemTemplate,\n})\n\n/**\n * Triggered when the user clicks on an item.\n * @public\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExLinkListItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExListLinkItemClickEventDetail,\n  };\n\n  /**\n   * Defines the href for the item.\n   * @default undefined\n   * @public\n   */\n  @property()\n    href?: string;\n\n  /**\n   * Defines target for the item\n   * @default \"_self\"\n   * @public\n   */\n  @property()\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Defines the icon, displayed as graphical element within the component before the item's label.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    icon?: string;\n\n  /**\n   * Defines the type of the item.\n   * @default \"link\"\n   * @public\n   */\n  @property()\n    type: `${UDExLinkListType}` = UDExLinkListType.Link;\n\n  /**\n   * Defines the accessible aria-label of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Defines the role of the item.\n   * @private\n   * @default \"listitem\"\n   *\n   */\n  @property()\n    _accessibleRole?: string;\n\n  /**\n   * Defines the label of the item.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    label?: string;\n\n  fireItemClickEvent(e: CustomEvent): void {\n    this.fireDecoratorEvent(\"item-click\", {\n      originalEvent: this.isLink ? e : e.detail.originalEvent,\n    });\n  }\n\n  get isLink(): boolean {\n    return this.type === UDExLinkListType.Link;\n  }\n}\n\nUDExLinkListItem.define();\n\nexport default UDExLinkListItem;\nexport type { UDExListLinkItemClickEventDetail };\n"]}
+{"version":3,"file":"LinkListItem.js","sourceRoot":"","sources":["../src/LinkListItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,oBAAoB,MAAM,2BAA2B,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAE/C,SAAS;AACT,OAAO,eAAe,MAAM,wCAAwC,CAAC;AAMrE;;;;;;;;;;;;;;;;;GAiBG;AAeH,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QAaE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;QAW7C;;;;WAIG;QAED,SAAI,GAA0B,gBAAgB,CAAC,IAAI,CAAC;IAsCxD,CAAC;IATC,kBAAkB,CAAC,CAAc;QAC/B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,aAAa,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa;SACxD,CAAC,CAAC;IACL,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,IAAI,KAAK,gBAAgB,CAAC,IAAI,CAAC;IAC7C,CAAC;CACF,CAAA;AA/DG;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;gDACkC;AAS3C;IADD,QAAQ,EAAE;8CACK;AAQd;IADD,QAAQ,EAAE;8CAC2C;AASpD;IADD,QAAQ,EAAE;wDACe;AASxB;IADD,QAAQ,EAAE;yDACgB;AASzB;IADD,QAAQ,EAAE;+CACM;AA/Db,gBAAgB;IAdrB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,eAAe;QACvB,QAAQ,EAAE,oBAAoB;KAC/B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEjC,gBAAgB,CA0ErB;AAED,gBAAgB,CAAC,MAAM,EAAE,CAAC;AAE1B,eAAe,gBAAgB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport { UDExLinkListType } from \"./LinkList.js\";\nimport LinkListItemTemplate from \"./LinkListItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\n\n// Styles\nimport LinkListItemCss from \"./generated/themes/LinkListItem.css.js\";\n\ntype UDExListLinkItemClickEventDetail = {\n  originalEvent: Event,\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-link-list-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/LinkListItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-link-list-item\n * @public\n */\n@customElement({\n  tag: \"udex-link-list-item\",\n  renderer: jsxRenderer,\n  styles: LinkListItemCss,\n  template: LinkListItemTemplate,\n})\n\n/**\n * Triggered when the user clicks on an item.\n * @public\n * @param {Event} originalEvent the original event object\n */\n@event(\"item-click\", { bubbles: true })\n\nclass UDExLinkListItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExListLinkItemClickEventDetail,\n  };\n\n  /**\n   * Defines the href for the item.\n   * @default undefined\n   * @public\n   */\n  @property()\n    href?: string;\n\n  /**\n   * Defines target for the item\n   * @default \"_self\"\n   * @public\n   */\n  @property()\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Defines the icon, displayed as graphical element within the component before the item's label.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    icon?: string;\n\n  /**\n   * Defines the type of the item.\n   * @default \"link\"\n   * @public\n   */\n  @property()\n    type: `${UDExLinkListType}` = UDExLinkListType.Link;\n\n  /**\n   * Defines the accessible aria-label of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    accessibleName?: string;\n\n  /**\n   * Defines the role of the item.\n   * @private\n   * @default \"listitem\"\n   *\n   */\n  @property()\n    _accessibleRole?: string;\n\n  /**\n   * Defines the label of the item.\n   *\n   * @default undefined\n   * @public\n   */\n  @property()\n    label?: string;\n\n  fireItemClickEvent(e: CustomEvent): void {\n    this.fireDecoratorEvent(\"item-click\", {\n      originalEvent: this.isLink ? e : e.detail.originalEvent,\n    });\n  }\n\n  get isLink(): boolean {\n    return this.type === UDExLinkListType.Link;\n  }\n}\n\nUDExLinkListItem.define();\n\nexport default UDExLinkListItem;\nexport type { UDExListLinkItemClickEventDetail };\n"]}

package/dist/List.js

@@ -392,6 +392,9 @@ UDExList = UDExList_1 = __decorate([
        * Fired when selection is changed by user interaction
        *
        * @public
+       * @param {Array<UDExListItemBase>} listItems All items inside the list
+       * @param {Array<UDExListItemBase>} selectedItems Currently selected items
+       * @param {HTMLElement} item The item that triggered the event
        */
     ,
     event("selection-change", { bubbles: true })