@sapudex/web-components 0.111.0

package/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(Math.max(items.length - itemsLength - 1, 0))
+            .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, 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/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   *\n   * @default false\n   * @private\n   */\n  @property({ noAttribute: true, type: Boolean })\n    _dropdownOpened!: boolean;\n\n  /**\n   * Defines how many breadcrumb items should be visible\n   *\n   * @default 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(Math.max(items.length - itemsLength - 1, 0))\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/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 displayed before the item name.
+     *
+     * @default ""
+     * @public
+     */
+    icon?: string;
+}
+export default UDExBreadcrumbsItem;

package/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/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 displayed 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/dist/Button.d.ts

@@ -0,0 +1,55 @@
+import Button from "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+import I18nBundle, { I18nText } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+export declare enum UDExButtonDesign {
+    Primary = "Primary",
+    Emphasized = "Emphasized",
+    Secondary = "Secondary",
+    Default = "Default",
+    Tertiary = "Tertiary",
+    Transparent = "Transparent",
+    Invisible = "Invisible",
+    Warning = "Warning",
+    Attention = "Attention",
+    Positive = "Positive",
+    Negative = "Negative"
+}
+/**
+ * @class
+ *
+ * @constructor
+ * @extends Button
+ * @tagname udex-button
+ * @public
+ */
+declare class UDExButton extends Button {
+    /**
+     * Defines the size of the component.
+     * <br><br>
+     * <b>Note:</b> There are three different sizes to choose from.
+     *
+     * @default "Medium"
+     * @public
+     */
+    size: string;
+    /**
+     * Defines if button is in toggled state
+     *
+     * @default false
+     * @public
+     */
+    toggled: boolean;
+    /**
+     * Defines the component design.
+     * @default "Primary"
+     * @public
+     */
+    /** @ts-expect-error */
+    design: `${UDExButtonDesign}`;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    static typeTextMappings(): Record<string, I18nText>;
+    get hasButtonType(): boolean;
+    get buttonTypeText(): string;
+}
+export default UDExButton;

package/dist/Button.js

@@ -0,0 +1,90 @@
+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 UDExButton_1;
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
+import property from "@ui5/webcomponents-base/dist/decorators/property.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import { BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED, } from "./generated/i18n/i18n-defaults.js";
+// Styles
+import ButtonCss from "./generated/themes/Button.css";
+export var UDExButtonDesign;
+(function (UDExButtonDesign) {
+    UDExButtonDesign["Primary"] = "Primary";
+    UDExButtonDesign["Emphasized"] = "Emphasized";
+    UDExButtonDesign["Secondary"] = "Secondary";
+    UDExButtonDesign["Default"] = "Default";
+    UDExButtonDesign["Tertiary"] = "Tertiary";
+    UDExButtonDesign["Transparent"] = "Transparent";
+    UDExButtonDesign["Invisible"] = "Invisible";
+    UDExButtonDesign["Warning"] = "Warning";
+    UDExButtonDesign["Attention"] = "Attention";
+    UDExButtonDesign["Positive"] = "Positive";
+    UDExButtonDesign["Negative"] = "Negative";
+})(UDExButtonDesign || (UDExButtonDesign = {}));
+/**
+ * @class
+ *
+ * @constructor
+ * @extends Button
+ * @tagname udex-button
+ * @public
+ */
+let UDExButton = UDExButton_1 = class UDExButton extends Button {
+    static async onDefine() {
+        UDExButton_1.i18nBundle = await getI18nBundle("@ui5/webcomponents");
+    }
+    static typeTextMappings() {
+        return {
+            "Primary": BUTTON_ARIA_TYPE_PRIMARY,
+            "Secondary": BUTTON_ARIA_TYPE_SECONDARY,
+            "Tertiary": BUTTON_ARIA_TYPE_TERTIARY,
+            "Positive": BUTTON_ARIA_TYPE_POSITIVE,
+            "Warning": BUTTON_ARIA_TYPE_WARNING,
+            "Negative": BUTTON_ARIA_TYPE_NEGATIVE,
+            "Emphasized": BUTTON_ARIA_EMPHASIZED,
+            "Default": BUTTON_ARIA_DEFAULT,
+            "Transparent": BUTTON_ARIA_TRANSPARENT,
+            "Attention": BUTTON_ARIA_ATTENTION,
+        };
+    }
+    get hasButtonType() {
+        return !!this.getAttribute("design") || this.toggled;
+    }
+    get buttonTypeText() {
+        const designValue = this.getAttribute("design");
+        const shouldReadDesign = designValue === UDExButtonDesign.Positive || designValue === UDExButtonDesign.Negative
+            || designValue === UDExButtonDesign.Warning || designValue === UDExButtonDesign.Attention;
+        let typeText;
+        if (designValue) {
+            typeText = shouldReadDesign ? UDExButton_1.i18nBundle.getText(UDExButton_1.typeTextMappings()[designValue]) : "";
+        }
+        return `${typeText} ${this.toggled ? UDExButton_1.i18nBundle.getText(TOGGLED) : ""}`.trim();
+    }
+};
+__decorate([
+    property({ type: String, defaultValue: "Medium" })
+], UDExButton.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExButton.prototype, "toggled", void 0);
+__decorate([
+    property({ type: UDExButtonDesign, defaultValue: UDExButtonDesign.Primary })
+    /** @ts-expect-error */
+], UDExButton.prototype, "design", void 0);
+UDExButton = UDExButton_1 = __decorate([
+    customElement({
+        tag: "udex-button",
+        renderer: litRender,
+        styles: [Button.styles, ButtonCss],
+    })
+], UDExButton);
+UDExButton.define();
+export default UDExButton;
+//# sourceMappingURL=Button.js.map

package/dist/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../src/Button.ts"],"names":[],"mappings":"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","sourcesContent":["import litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/AllIcons.js\";\nimport I18nBundle, { I18nText, getI18nBundle } from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  BUTTON_ARIA_ATTENTION, BUTTON_ARIA_DEFAULT, BUTTON_ARIA_EMPHASIZED, BUTTON_ARIA_TRANSPARENT, BUTTON_ARIA_TYPE_NEGATIVE, BUTTON_ARIA_TYPE_POSITIVE, BUTTON_ARIA_TYPE_PRIMARY, BUTTON_ARIA_TYPE_SECONDARY, BUTTON_ARIA_TYPE_TERTIARY, BUTTON_ARIA_TYPE_WARNING, TOGGLED,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport ButtonCss from \"./generated/themes/Button.css\";\n\nexport enum UDExButtonDesign {\n  Primary = \"Primary\",\n  Emphasized = \"Emphasized\",\n  Secondary = \"Secondary\",\n  Default = \"Default\",\n  Tertiary = \"Tertiary\",\n  Transparent = \"Transparent\",\n  Invisible = \"Invisible\",\n  Warning = \"Warning\",\n  Attention = \"Attention\",\n  Positive = \"Positive\",\n  Negative = \"Negative\",\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends Button\n * @tagname udex-button\n * @public\n */\n@customElement({\n  tag: \"udex-button\",\n  renderer: litRender,\n  styles: [Button.styles, ButtonCss],\n})\nclass UDExButton extends Button {\n  /**\n   * Defines the size of the component.\n   * <br><br>\n   * <b>Note:</b> There are three different sizes to choose from.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property({ type: String, defaultValue: \"Medium\" })\n    size!: string;\n  /**\n   * Defines if button is in toggled state\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    toggled!: boolean;\n  /**\n   * Defines the component design.\n   * @default \"Primary\"\n   * @public\n   */\n  @property({ type: UDExButtonDesign, defaultValue: UDExButtonDesign.Primary })\n  /** @ts-expect-error */\n    design!: `${UDExButtonDesign}`;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine() {\n    UDExButton.i18nBundle = await getI18nBundle(\"@ui5/webcomponents\");\n  }\n\n  static typeTextMappings(): Record<string, I18nText> {\n    return {\n      \"Primary\": BUTTON_ARIA_TYPE_PRIMARY,\n      \"Secondary\": BUTTON_ARIA_TYPE_SECONDARY,\n      \"Tertiary\": BUTTON_ARIA_TYPE_TERTIARY,\n      \"Positive\": BUTTON_ARIA_TYPE_POSITIVE,\n      \"Warning\": BUTTON_ARIA_TYPE_WARNING,\n      \"Negative\": BUTTON_ARIA_TYPE_NEGATIVE,\n      \"Emphasized\": BUTTON_ARIA_EMPHASIZED,\n      \"Default\": BUTTON_ARIA_DEFAULT,\n      \"Transparent\": BUTTON_ARIA_TRANSPARENT,\n      \"Attention\": BUTTON_ARIA_ATTENTION,\n    };\n  }\n\n  get hasButtonType() {\n    return !!this.getAttribute(\"design\") || this.toggled;\n  }\n\n  get buttonTypeText() {\n    const designValue = this.getAttribute(\"design\");\n    const shouldReadDesign = designValue === UDExButtonDesign.Positive || designValue === UDExButtonDesign.Negative\n    || designValue === UDExButtonDesign.Warning || designValue === UDExButtonDesign.Attention;\n\n    let typeText;\n    if (designValue) {\n      typeText = shouldReadDesign ? UDExButton.i18nBundle.getText(UDExButton.typeTextMappings()[designValue]) : \"\";\n    }\n    return `${typeText} ${this.toggled ? UDExButton.i18nBundle.getText(TOGGLED) : \"\"}`.trim();\n  }\n}\n\nUDExButton.define();\n\nexport default UDExButton;\n"]}

package/dist/Carousel.d.ts

@@ -0,0 +1,76 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+export declare enum CarouselNavigationPosition {
+    top = "top",
+    bottom = "bottom"
+}
+/**
+ * @class
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-carousel
+ * @public
+ */
+declare class UDExCarousel extends UI5Element {
+    /**
+     * Defines the position of the navigation.
+     * <br><br>
+     * Available options are:
+     * <ul>
+     * <li><code>top</code> - the navigation button are placed above the component.</li>
+     * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>
+     * </ul>
+     *
+     * @public
+     */
+    navigationPlacement: `${CarouselNavigationPosition}`;
+    /**
+     * Defines the content of the component.
+     *
+     * @slot
+     * @public
+     */
+    items: Array<HTMLElement>;
+    /**
+     * Defines the prev button is disabled
+     *
+     * @default false
+     * @private
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Defines the next button is disabled
+     *
+     * @default false
+     * @private
+     */
+    isNextButtonDisabled: boolean;
+    /**
+     * Defines the accessible ARIA name of the component.
+     *
+     * @default ''
+     * @public
+     */
+    accessibleName: string;
+    static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
+    get nextPageText(): string;
+    get previousPageText(): string;
+    get carouselClass(): string;
+    get buttonDesign(): "Secondary" | "Tertiary";
+    get showNavigationButtons(): {
+        top: boolean;
+        bottom: boolean;
+    };
+    get _hidePageIndicator(): boolean;
+    get _carousel(): UI5Carousel | null;
+    get _ui5CarouselRoot(): HTMLElement | null | undefined;
+    _calculateDisabledButtonsState(): void;
+    _prevButtonClick(): void;
+    _nextButtonClick(): void;
+    _onkeydown(e: KeyboardEvent): void;
+    onAfterRendering(): void;
+}
+export default UDExCarousel;