@sapudex/web-components 0.111.0

package/config/dist/Breadcrumbs.d.ts

@@ -0,0 +1,97 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import { LinkClickEventDetail } from "@ui5/webcomponents/dist/Link.js";
+import ItemNavigation, { ITabbable } from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
+import Link from "./Link.js";
+import Dropdown from "./Dropdown.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+export type UDExBreadcrumbsItemClickEventDetail = {
+    item: UDExBreadcrumbsItem;
+    altKey: boolean;
+    ctrlKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-breadcrumbs</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Breadcrumbs.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+declare class UDExBreadcrumbs extends UI5Element {
+    /**
+     * Indicates if dropdown is opened
+     * @type {boolean}
+     * @defaultValue false
+     * @private
+     */
+    _dropdownOpened: boolean;
+    /**
+     * Defines how many breadcrumb items should be visible
+     * @type {number}
+     * @name sap.ui.web-components.UDExBreadcrumbs.prototype.showItems
+     * @defaultValue 3
+     * @public
+     */
+    showItems?: number;
+    /**
+     * Defines the component items.
+     *
+     * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.
+     * @public
+     */
+    items: Array<UDExBreadcrumbsItem>;
+    responsivePopover?: Dropdown;
+    _itemNavigation?: ItemNavigation;
+    static i18nBundle: I18nBundle;
+    onBeforeRendering(): void;
+    _preprocessItems(): void;
+    _getResponsePopover(): Promise<Dropdown>;
+    /**
+     * Getter for the interactive element that opens the overflow
+     * @private
+     */
+    get _dropdownArrowLink(): Link;
+    /**
+     * Getter for the list of links corresponding to the abstract breadcrumb items
+     */
+    get _links(): Link[];
+    _getFocusableItems(): ITabbable[];
+    _initItemNavigation(): void;
+    onAfterRendering(): void;
+    _getItems(): UDExBreadcrumbsItem[];
+    _closeRespPopover(): void;
+    _openRespPopover(): Promise<void>;
+    _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void;
+    _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void;
+    _isItemVisible(item: UDExBreadcrumbsItem): boolean;
+    _afterDropdownOpen(): void;
+    _afterDropdownClose(): void;
+    get _visibleItems(): UDExBreadcrumbsItem[];
+    /**
+     * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
+     */
+    get _linksData(): UDExBreadcrumbsItem[];
+    get _isOverflowEmpty(): boolean;
+    _toggleDropdown(): void;
+    get _dropdownItems(): UDExBreadcrumbsItem[];
+    get _triggerClass(): "" | "udex-breadcrumbs__trigger--opened";
+    get _accessibleNameText(): string;
+    get _dropdownArrowAccessibleNameText(): string;
+    _onfocusin(e: FocusEvent): void;
+    static onDefine(): Promise<void>;
+}
+export default UDExBreadcrumbs;

package/config/dist/Breadcrumbs.js

@@ -0,0 +1,240 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var UDExBreadcrumbs_1;
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import event from "@ui5/webcomponents-base/dist/decorators/event.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
+import NavigationMode from "@ui5/webcomponents-base/dist/types/NavigationMode.js";
+import ItemNavigation from "@ui5/webcomponents-base/dist/delegate/ItemNavigation.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import breadcrumbsCss from "@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js";
+import BreadcrumbsTemplate from "./generated/templates/BreadcrumbsTemplate.lit.js";
+import BreadcrumbsPopover from "./generated/templates/BreadcrumbsPopoverTemplate.lit.js";
+import UDExBreadcrumbsItem from "./BreadcrumbsItem.js";
+import Link from "./Link.js";
+import Dropdown from "./Dropdown.js";
+import { BREADCRUMBS_ARIA_LABEL, BREADCRUMBS_OVERFLOW_ARIA_LABEL, } from "./generated/i18n/i18n-defaults.js";
+import "@ui5/webcomponents-icons/dist/slim-arrow-down.js";
+import "@ui5/webcomponents-icons/dist/home.js";
+// Styles
+import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
+import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-breadcrumbs</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/Breadcrumbs.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @public
+ */
+let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Element {
+    onBeforeRendering() {
+        this._preprocessItems();
+    }
+    _preprocessItems() {
+        this.items.forEach(item => {
+            item._getRealDomRef = () => this.getDomRef().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`);
+        });
+    }
+    async _getResponsePopover() {
+        const staticAreaItem = await this.getStaticAreaItemDomRef();
+        return staticAreaItem.querySelector(`#udex-${this.__id}-breadcrumbs__popover`);
+    }
+    /**
+     * Getter for the interactive element that opens the overflow
+     * @private
+     */
+    get _dropdownArrowLink() {
+        return this.shadowRoot.querySelector(".udex-breadcrumbs__trigger");
+    }
+    /**
+     * Getter for the list of links corresponding to the abstract breadcrumb items
+     */
+    get _links() {
+        return Array.from(this.shadowRoot.querySelectorAll(".udex-breadcrumbs__link-wrapper [ui5-link]"));
+    }
+    _getFocusableItems() {
+        const items = this._links;
+        items.unshift(this._dropdownArrowLink);
+        return items;
+    }
+    _initItemNavigation() {
+        if (!this._itemNavigation) {
+            this._itemNavigation = new ItemNavigation(this, {
+                navigationMode: NavigationMode.Horizontal,
+                getItemsCallback: () => this._getFocusableItems(),
+            });
+        }
+    }
+    onAfterRendering() {
+        this._initItemNavigation();
+    }
+    _getItems() {
+        return this.getSlottedNodes("items");
+    }
+    _closeRespPopover() {
+        this.responsivePopover && this.responsivePopover.onClose();
+    }
+    async _openRespPopover() {
+        this.responsivePopover = await this._getResponsePopover();
+        this.responsivePopover.onOpen(this._dropdownArrowLink);
+    }
+    _onDropdownLinkPress(e) {
+        const listItem = e.target, items = this._getItems(), item = items.find(x => `${x._id}-li` === listItem.id);
+        if (item._isCurrentPageItem) {
+            return;
+        }
+        if (this.fireEvent("item-click", { item }, true)) {
+            window.open(item.href, item.target || "_self", "noopener,noreferrer");
+            this.responsivePopover.onClose();
+        }
+    }
+    _onLinkPress(e) {
+        const link = e.target, items = this._getItems(), item = items.find(x => `${x._id}-link` === link.id), { altKey, ctrlKey, metaKey, shiftKey, } = e.detail;
+        if (!this.fireEvent("item-click", {
+            item,
+            altKey,
+            ctrlKey,
+            metaKey,
+            shiftKey,
+        }, true)) {
+            e.preventDefault();
+        }
+    }
+    _isItemVisible(item) {
+        return !item.hidden;
+    }
+    _afterDropdownOpen() {
+        this._dropdownOpened = true;
+    }
+    _afterDropdownClose() {
+        this._dropdownOpened = false;
+    }
+    get _visibleItems() {
+        const items = this._getItems();
+        const itemsLength = this.showItems ?? 0;
+        return this._getItems()
+            .slice(items.length - itemsLength - 1)
+            .filter(i => this._isItemVisible(i));
+    }
+    /**
+     * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
+     */
+    get _linksData() {
+        const items = this._visibleItems;
+        const itemsCount = items.length;
+        return items
+            .map((item, index) => {
+            item._isCurrentPageItem = index === (itemsCount - 1);
+            return item;
+        });
+    }
+    get _isOverflowEmpty() {
+        return this._dropdownItems.length === 0;
+    }
+    _toggleDropdown() {
+        if (this._dropdownOpened) {
+            this._closeRespPopover();
+        }
+        else {
+            this._openRespPopover();
+        }
+    }
+    get _dropdownItems() {
+        return this._getItems().filter(i => this._isItemVisible(i));
+    }
+    get _triggerClass() {
+        return this._dropdownOpened ? "udex-breadcrumbs__trigger--opened" : "";
+    }
+    get _accessibleNameText() {
+        return UDExBreadcrumbs_1.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
+    }
+    get _dropdownArrowAccessibleNameText() {
+        return UDExBreadcrumbs_1.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);
+    }
+    _onfocusin(e) {
+        const currentItem = e.target;
+        this._itemNavigation?.setCurrentItem(currentItem);
+    }
+    static async onDefine() {
+        UDExBreadcrumbs_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+};
+__decorate([
+    property({ noAttribute: true, defaultValue: false, type: Boolean })
+], UDExBreadcrumbs.prototype, "_dropdownOpened", void 0);
+__decorate([
+    property({ type: Number, defaultValue: 3, validator: Integer })
+], UDExBreadcrumbs.prototype, "showItems", void 0);
+__decorate([
+    slot({ type: HTMLElement, invalidateOnChildChange: true, "default": true })
+], UDExBreadcrumbs.prototype, "items", void 0);
+UDExBreadcrumbs = UDExBreadcrumbs_1 = __decorate([
+    customElement({
+        tag: "udex-breadcrumbs",
+        renderer: litRender,
+        styles: [breadcrumbsCss, BreadcrumbsCss],
+        template: BreadcrumbsTemplate,
+        staticAreaTemplate: BreadcrumbsPopover,
+        staticAreaStyles: [BreadcrumbsPopoverCss],
+        dependencies: [UDExBreadcrumbsItem, Link, Dropdown, Icon],
+    })
+    /**
+     * Fires when a `BreadcrumbsItem` is clicked.
+     *
+     * **Note:** You can prevent browser location change by calling `event.preventDefault()`.
+     * @allowPreventDefault
+     * @param {HTMLElement} item The clicked item.
+     * @param {Boolean} altKey Returns whether the "ALT" key was pressed when the event was triggered.
+     * @param {Boolean} ctrlKey Returns whether the "CTRL" key was pressed when the event was triggered.
+     * @param {Boolean} metaKey Returns whether the "META" key was pressed when the event was triggered.
+     * @param {Boolean} shiftKey Returns whether the "SHIFT" key was pressed when the event was triggered.
+     * @public
+     */
+    ,
+    event("item-click", {
+        detail: {
+            /**
+             * @public
+             */
+            item: { type: HTMLElement },
+            /**
+             * @public
+             */
+            altKey: { type: Boolean },
+            /**
+             * @public
+             */
+            ctrlKey: { type: Boolean },
+            /**
+             * @public
+             */
+            metaKey: { type: Boolean },
+            /**
+             * @public
+             */
+            shiftKey: { type: Boolean },
+        },
+    })
+], UDExBreadcrumbs);
+UDExBreadcrumbs.define();
+export default UDExBreadcrumbs;
+//# sourceMappingURL=Breadcrumbs.js.map

package/config/dist/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sourceRoot":"","sources":["../src/Breadcrumbs.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event.js\";\n\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport Integer from \"@ui5/webcomponents-base/dist/types/Integer.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport ItemNavigation, { ITabbable } from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport breadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsTemplate from \"./generated/templates/BreadcrumbsTemplate.lit.js\";\nimport BreadcrumbsPopover from \"./generated/templates/BreadcrumbsPopoverTemplate.lit.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport Link from \"./Link.js\";\nimport Dropdown from \"./Dropdown.js\";\nimport {\n  BREADCRUMBS_ARIA_LABEL,\n  BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\nexport type UDExBreadcrumbsItemClickEventDetail = {\n  item: UDExBreadcrumbsItem;\n  altKey: boolean;\n  ctrlKey: boolean;\n  metaKey: boolean;\n  shiftKey: 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-breadcrumbs</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-breadcrumbs\",\n  renderer: litRender,\n  styles: [breadcrumbsCss, BreadcrumbsCss],\n  template: BreadcrumbsTemplate,\n  staticAreaTemplate: BreadcrumbsPopover,\n  staticAreaStyles: [BreadcrumbsPopoverCss],\n  dependencies: [UDExBreadcrumbsItem, Link, Dropdown, Icon],\n})\n/**\n * Fires when a `BreadcrumbsItem` is clicked.\n *\n * **Note:** You can prevent browser location change by calling `event.preventDefault()`.\n * @allowPreventDefault\n * @param {HTMLElement} item The clicked item.\n * @param {Boolean} altKey Returns whether the \"ALT\" key was pressed when the event was triggered.\n * @param {Boolean} ctrlKey Returns whether the \"CTRL\" key was pressed when the event was triggered.\n * @param {Boolean} metaKey Returns whether the \"META\" key was pressed when the event was triggered.\n * @param {Boolean} shiftKey Returns whether the \"SHIFT\" key was pressed when the event was triggered.\n * @public\n */\n@event<UDExBreadcrumbsItemClickEventDetail>(\"item-click\", {\n  detail: {\n    /**\n     * @public\n     */\n    item: { type: HTMLElement },\n    /**\n     * @public\n     */\n    altKey: { type: Boolean },\n    /**\n     * @public\n     */\n    ctrlKey: { type: Boolean },\n    /**\n     * @public\n     */\n    metaKey: { type: Boolean },\n    /**\n     * @public\n     */\n    shiftKey: { type: Boolean },\n  },\n})\nclass UDExBreadcrumbs extends UI5Element {\n  /**\n   * Indicates if dropdown is opened\n   * @type {boolean}\n   * @defaultValue false\n   * @private\n   */\n  @property({ noAttribute: true, defaultValue: false, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines how many breadcrumb items should be visible\n   * @type {number}\n   * @name sap.ui.web-components.UDExBreadcrumbs.prototype.showItems\n   * @defaultValue 3\n   * @public\n   */\n  @property({ type: Number, defaultValue: 3, validator: Integer })\n    showItems?: number;\n\n  /**\n   * Defines the component items.\n   *\n   * **Note:** Use the `udex-breadcrumbs-item` component to define the desired items.\n   * @public\n   */\n  @slot({ type: HTMLElement, invalidateOnChildChange: true, \"default\": true })\n    items!: Array<UDExBreadcrumbsItem>;\n\n  responsivePopover?: Dropdown;\n  _itemNavigation?: ItemNavigation;\n  static i18nBundle: I18nBundle;\n\n  onBeforeRendering() {\n    this._preprocessItems();\n  }\n\n  _preprocessItems() {\n    this.items.forEach(item => {\n      item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n    });\n  }\n\n  async _getResponsePopover() {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<Dropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownArrowLink() {\n    return this.shadowRoot!.querySelector<Link>(\".udex-breadcrumbs__trigger\")!;\n  }\n\n  /**\n   * Getter for the list of links corresponding to the abstract breadcrumb items\n   */\n  get _links() {\n    return Array.from(this.shadowRoot!.querySelectorAll<Link>(\".udex-breadcrumbs__link-wrapper [ui5-link]\"));\n  }\n\n  _getFocusableItems() {\n    const items: Array<ITabbable> = this._links;\n    items.unshift(this._dropdownArrowLink);\n\n    return items;\n  }\n\n  _initItemNavigation() {\n    if (!this._itemNavigation) {\n      this._itemNavigation = new ItemNavigation(this, {\n        navigationMode: NavigationMode.Horizontal,\n        getItemsCallback: () => this._getFocusableItems(),\n      });\n    }\n  }\n\n  onAfterRendering(): void {\n    this._initItemNavigation();\n  }\n\n  _getItems() {\n    return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n  }\n\n  _closeRespPopover() {\n    this.responsivePopover && this.responsivePopover.onClose();\n  }\n\n  async _openRespPopover() {\n    this.responsivePopover = await this._getResponsePopover();\n    this.responsivePopover.onOpen(this._dropdownArrowLink);\n  }\n\n  _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>) {\n    const listItem = e.target as HTMLElement,\n      items = this._getItems(),\n      item = items.find(x => `${x._id}-li` === listItem.id)!;\n\n    if (item._isCurrentPageItem) {\n      return;\n    }\n\n    if (this.fireEvent(\"item-click\", { item }, true)) {\n      window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n      this.responsivePopover!.onClose();\n    }\n  }\n\n  _onLinkPress(e: CustomEvent<LinkClickEventDetail>) {\n    const link = e.target as Link,\n      items = this._getItems(),\n      item = items.find(x => `${x._id}-link` === link.id)!,\n      {\n        altKey,\n        ctrlKey,\n        metaKey,\n        shiftKey,\n      } = e.detail;\n\n    if (!this.fireEvent<UDExBreadcrumbsItemClickEventDetail>(\"item-click\", {\n      item,\n      altKey,\n      ctrlKey,\n      metaKey,\n      shiftKey,\n    }, true)) {\n      e.preventDefault();\n    }\n  }\n\n  _isItemVisible(item: UDExBreadcrumbsItem) {\n    return !item.hidden;\n  }\n\n  _afterDropdownOpen() {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose() {\n    this._dropdownOpened = false;\n  }\n\n  get _visibleItems() {\n    const items = this._getItems();\n    const itemsLength = this.showItems ?? 0;\n\n    return this._getItems()\n      .slice(items.length - itemsLength - 1)\n      .filter(i => this._isItemVisible(i));\n  }\n\n  /**\n   * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n   */\n  get _linksData() {\n    const items = this._visibleItems;\n    const itemsCount = items.length;\n\n    return items\n      .map((item, index) => {\n        item._isCurrentPageItem = index === (itemsCount - 1);\n        return item;\n      });\n  }\n\n  get _isOverflowEmpty() {\n    return this._dropdownItems.length === 0;\n  }\n\n  _toggleDropdown() {\n    if (this._dropdownOpened) {\n      this._closeRespPopover();\n    } else {\n      this._openRespPopover();\n    }\n  }\n\n  get _dropdownItems() {\n    return this._getItems().filter(i => this._isItemVisible(i));\n  }\n\n  get _triggerClass() {\n    return this._dropdownOpened ? \"udex-breadcrumbs__trigger--opened\" : \"\";\n  }\n\n  get _accessibleNameText() {\n    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);\n  }\n\n  get _dropdownArrowAccessibleNameText() {\n    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n  }\n\n  _onfocusin(e: FocusEvent) {\n    const currentItem = e.target as Link;\n\n    this._itemNavigation?.setCurrentItem(currentItem);\n  }\n\n  static async onDefine() {\n    UDExBreadcrumbs.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n  }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\n"]}

package/config/dist/BreadcrumbsItem.d.ts

@@ -0,0 +1,28 @@
+import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-breadcrumbs-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/BreadcrumbsItem.js";</code>
+ *
+ * @constructor
+ * @extends BreadcrumbsItem
+ * @public
+ */
+declare class UDExBreadcrumbsItem extends BreadcrumbsItem {
+    /**
+     * Defines item icon to be display before the item name.
+     *
+     * @default ""
+     * @public
+     */
+    icon?: string;
+}
+export default UDExBreadcrumbsItem;

package/config/dist/BreadcrumbsItem.js

@@ -0,0 +1,42 @@
+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 customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import BreadcrumbsItem from "@ui5/webcomponents/dist/BreadcrumbsItem.js";
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-breadcrumbs-item</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@udex/web-components/dist/BreadcrumbsItem.js";</code>
+ *
+ * @constructor
+ * @extends BreadcrumbsItem
+ * @public
+ */
+let UDExBreadcrumbsItem = class UDExBreadcrumbsItem extends BreadcrumbsItem {
+};
+__decorate([
+    property()
+], UDExBreadcrumbsItem.prototype, "icon", void 0);
+UDExBreadcrumbsItem = __decorate([
+    customElement({
+        tag: "udex-breadcrumbs-item",
+        renderer: litRender,
+        dependencies: [],
+    })
+], UDExBreadcrumbsItem);
+UDExBreadcrumbsItem.define();
+export default UDExBreadcrumbsItem;
+//# sourceMappingURL=BreadcrumbsItem.js.map

package/config/dist/BreadcrumbsItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsItem.js","sourceRoot":"","sources":["../src/BreadcrumbsItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,eAAe,MAAM,4CAA4C,CAAC;AAEzE;;;;;;;;;;;;;;;;GAgBG;AAMH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;CAShD,CAAA;AADG;IADD,QAAQ,EAAE;iDACK;AARZ,mBAAmB;IALxB,aAAa,CAAC;QACb,GAAG,EAAE,uBAAuB;QAC5B,QAAQ,EAAE,SAAS;QACnB,YAAY,EAAE,EAAE;KACjB,CAAC;GACI,mBAAmB,CASxB;AAED,mBAAmB,CAAC,MAAM,EAAE,CAAC;AAE7B,eAAe,mBAAmB,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport BreadcrumbsItem from \"@ui5/webcomponents/dist/BreadcrumbsItem.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-breadcrumbs-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/BreadcrumbsItem.js\";</code>\n *\n * @constructor\n * @extends BreadcrumbsItem\n * @public\n */\n@customElement({\n  tag: \"udex-breadcrumbs-item\",\n  renderer: litRender,\n  dependencies: [],\n})\nclass UDExBreadcrumbsItem extends BreadcrumbsItem {\n  /**\n   * Defines item icon to be display before the item name.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    icon?: string;\n}\n\nUDExBreadcrumbsItem.define();\n\nexport default UDExBreadcrumbsItem;\n"]}

package/config/dist/Button.d.ts

@@ -0,0 +1,133 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+type AccessibilityAttributes = {
+    expanded?: boolean;
+    hasPopup?: string;
+    controls?: string;
+};
+declare class UDExButton extends UI5Element {
+    /**
+     * Defines whether the component is in disabled state.
+     * <br><br>
+     * <b>Note:</b> A disabled component is completely noninteractive.
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExButton.prototype.disabled
+     * @defaultvalue false
+     * @public
+     */
+    disabled: boolean;
+    /**
+     * Defines the size of the component.
+     * <br><br>
+     * <b>Note:</b> There are three different sizes to choose from.
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.size
+     * @defaultvalue "cozy"
+     * @public
+     */
+    size: string;
+    /**
+     * Defines the tooltip of the component.
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.tooltip
+     * @defaultvalue ""
+     * @public
+     */
+    tooltip: string;
+    /**
+     * Defines the design of the component.
+     * <br><br>
+     * <b>Note:</b> The color-schema is different for each design.
+     *
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.design
+     * @defaultvalue "primary"
+     * @public
+     */
+    design: "Primary" | "Secondary" | "Tertiary" | "Positive" | "Negative" | "Warning";
+    /**
+     * TODO:Beschreibung
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.size
+     * @defaultvalue "cozy"
+     * @public
+     */
+    icon: "Small" | "Medium" | "Large";
+    /**
+     * Controls if the buttons will only show an icon and no text
+     * <br><br>
+     * <b>Note:</b> It should be provided an icon with the "icon" property
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExButton.prototype.iconOnly
+     * @defaultvalue false
+     * @public
+     */
+    iconOnly: boolean;
+    /**
+     * Renders the slot with name "icon" before or after the buttonlabel.
+     * <br><br>
+     * <b>Note:</b> Only has effect if a slot with name "icon" is provided
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExButton.prototype.iconEnd
+     * @defaultvalue false
+     * @public
+     */
+    iconEnd: boolean;
+    /**
+     * Sets a toggled state of the component.
+     * <br><br>
+     * <b>Note:</b> The Color-schema is different in toggled state.
+     * @type {boolean}
+     * @name sap.ui.webc.udex.UDExButton.prototype.toggled
+     * @defaultvalue false
+     * @public
+     */
+    toggled: boolean;
+    /**
+     * Controls id of the element that label the component
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.accessibleNameRef
+     * @defaultvalue ""
+     * @public
+     */
+    accessibleNameRef: string;
+    /**
+     * Controls the ARIA name of the button
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.accessibleName
+     * @defaultvalue ""
+     * @public
+     */
+    accessibleName: string;
+    /**
+     * Describes the accessibility role of the button
+     * @type {string}
+     * @name sap.ui.webc.udex.UDExButton.prototype.accessibleRole
+     * @defaultvalue ""
+     * @public
+     */
+    accessibleRole: "Button" | "Link";
+    /**
+     * Defines several additional accessibility attribute values for customization depending on the use case.
+     * @type {object}
+     * @name sap.ui.webc.udex.UDExButton.prototype.accessibilityAttributes
+     * @defaultvalue ""
+     * @public
+     */
+    accessibilityAttributes: AccessibilityAttributes;
+    /**
+     * Defines the label of the component.
+     * <br><br>
+     * <b>Note:</b> Provide an "icon"-slot and an empty label to create an icon-only button.
+     * @type {Node}
+     * @name sap.ui.webc.udex.UDExButton.prototype.default
+     * @defaultvalue undefined
+     * @public
+     */
+    default: Node;
+    onButtonClick(e: Event): void;
+    get renderIconOnlyButton(): boolean;
+    get sizeClass(): "udex-button--small" | "udex-button--medium" | "udex-button--large";
+}
+export default UDExButton;