@sapudex/web-components 0.147.0 → 0.172.0

package/.eslintignore

@@ -7,3 +7,4 @@ src/generated
 jsdoc-dist
 .eslintrc.js
 package-scripts.js
+bundle.esm.js

package/bundle.esm.js

@@ -9,6 +9,15 @@ import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/confi
 import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js";
 import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js";
 
+// test scoping
+// import {
+// 	setCustomElementsScopingSuffix,
+// 	setCustomElementsScopingRules,
+// } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
+// setCustomElementsScopingRules({ include: [/^udex-/, /^ui5-/], exclude: [] });
+// setCustomElementsScopingSuffix("dcp-lib");
+
+
 // Enable additional themes and i18n texts
 import "./dist/Assets.js";
 

package/dist/Badge.d.ts

@@ -1,5 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import "@ui5/webcomponents/dist/Badge.js";
+import IconPlacement from "./types/IconPlacement.js";
+import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
 export declare enum BadgeType {
     text = "Text",
     number = "Number"
@@ -8,17 +10,6 @@ export declare enum BadgeSize {
     small = "Small",
     large = "Large"
 }
-export declare enum BadgeTextDesign {
-    Info = "Info",
-    Success = "Success",
-    Error = "Error",
-    Warning = "Warning"
-}
-export declare enum BadgeNumberDesign {
-    Blue = "Blue",
-    Red = "Red",
-    White = "White"
-}
 /**
  * @class
  *
@@ -57,22 +48,38 @@ declare class UDExBadge extends UI5Element {
      * @default "Info"
      * @public
      */
-    design: `${BadgeTextDesign}`;
+    design: `${TextBadgeDesign}`;
     /**
      * Defines the design of number type component.
      *
      * @default "Blue"
      * @public
      */
-    numberDesign: `${BadgeNumberDesign}`;
+    numberDesign: `${NumberBadgeDesign}`;
+    /**
+     * Defines icon placement if icon was provided
+    *
+    * @default "End"
+    * @public
+    */
+    iconPlacement?: `${IconPlacement}`;
+    /**
+     * Defines icon name
+    *
+    * @default ""
+    * @public
+    */
+    icon: string;
     /**
      * Defines the content of the component.
      *
      * @public
      */
     default: Array<Node>;
-    get textType(): boolean;
+    get startIcon(): boolean;
+    get endIcon(): boolean;
     get textClasses(): string;
     get numberClasses(): string;
+    get badgeClasses(): string;
 }
 export default UDExBadge;

package/dist/Badge.js

@@ -13,6 +13,8 @@ import "@ui5/webcomponents/dist/Badge.js";
 import BadgeTemplate from "./generated/templates/BadgeTemplate.lit.js";
 // Styles
 import BadgeCss from "./generated/themes/Badge.css.js";
+import IconPlacement from "./types/IconPlacement.js";
+import { NumberBadgeDesign, TextBadgeDesign } from "./types/BadgeDesign.js";
 export var BadgeType;
 (function (BadgeType) {
     BadgeType["text"] = "Text";
@@ -23,19 +25,6 @@ export var BadgeSize;
     BadgeSize["small"] = "Small";
     BadgeSize["large"] = "Large";
 })(BadgeSize || (BadgeSize = {}));
-export var BadgeTextDesign;
-(function (BadgeTextDesign) {
-    BadgeTextDesign["Info"] = "Info";
-    BadgeTextDesign["Success"] = "Success";
-    BadgeTextDesign["Error"] = "Error";
-    BadgeTextDesign["Warning"] = "Warning";
-})(BadgeTextDesign || (BadgeTextDesign = {}));
-export var BadgeNumberDesign;
-(function (BadgeNumberDesign) {
-    BadgeNumberDesign["Blue"] = "Blue";
-    BadgeNumberDesign["Red"] = "Red";
-    BadgeNumberDesign["White"] = "White";
-})(BadgeNumberDesign || (BadgeNumberDesign = {}));
 /**
  * @class
  *
@@ -54,18 +43,11 @@ export var BadgeNumberDesign;
  * @public
  */
 let UDExBadge = class UDExBadge extends UI5Element {
-    constructor() {
-        super(...arguments);
-        /**
-         * Defines the design of text type component.
-         *
-         * @default "Info"
-         * @public
-         */
-        this.design = BadgeTextDesign.Info;
+    get startIcon() {
+        return !!this.icon && this.iconPlacement === IconPlacement.Start;
     }
-    get textType() {
-        return this.type === BadgeType.text;
+    get endIcon() {
+        return !!this.icon && this.iconPlacement === IconPlacement.End;
     }
     get textClasses() {
         return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
@@ -73,6 +55,12 @@ let UDExBadge = class UDExBadge extends UI5Element {
     get numberClasses() {
         return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;
     }
+    get badgeClasses() {
+        if (this.type === BadgeType.text) {
+            return this.textClasses;
+        }
+        return this.numberClasses;
+    }
 };
 __decorate([
     property({ defaultValue: BadgeType.text })
@@ -81,11 +69,17 @@ __decorate([
     property({ defaultValue: BadgeSize.large })
 ], UDExBadge.prototype, "size", void 0);
 __decorate([
-    property({ defaultValue: BadgeTextDesign.Info })
+    property({ defaultValue: TextBadgeDesign.Info })
 ], UDExBadge.prototype, "design", void 0);
 __decorate([
-    property({ defaultValue: BadgeNumberDesign.Blue })
+    property({ defaultValue: NumberBadgeDesign.Blue })
 ], UDExBadge.prototype, "numberDesign", void 0);
+__decorate([
+    property({ type: IconPlacement, defaultValue: IconPlacement.End })
+], UDExBadge.prototype, "iconPlacement", void 0);
+__decorate([
+    property()
+], UDExBadge.prototype, "icon", void 0);
 __decorate([
     slot({ type: Node, "default": true })
 ], UDExBadge.prototype, "default", void 0);

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,kCAAkC,CAAC;AAE1C,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,4BAAe,CAAA;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,eAKX;AALD,WAAY,eAAe;IACzB,gCAAa,CAAA;IACb,sCAAmB,CAAA;IACnB,kCAAe,CAAA;IACf,sCAAmB,CAAA;AACrB,CAAC,EALW,eAAe,KAAf,eAAe,QAK1B;AAED,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,kCAAa,CAAA;IACb,gCAAW,CAAA;IACX,oCAAe,CAAA;AACjB,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAmBE;;;;;WAKG;QAED,WAAM,GAAyB,eAAe,CAAC,IAAI,CAAC;IA6BxD,CAAC;IAXC,IAAI,QAAQ;QACV,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,CAAC;IACtC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;uCACnB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;uCACpB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,eAAe,CAAC,IAAI,EAAE,CAAC;yCACK;AAQpD;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAC;+CACX;AAQtC;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1CpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,EAAE;KACjB,CAAC;GACI,SAAS,CAuDd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Badge.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\nexport enum BadgeType {\n  text = \"Text\",\n  number = \"Number\",\n}\n\nexport enum BadgeSize {\n  small = \"Small\",\n  large = \"Large\",\n}\n\nexport enum BadgeTextDesign {\n  Info = \"Info\",\n  Success = \"Success\",\n  Error = \"Error\",\n  Warning = \"Warning\",\n}\n\nexport enum BadgeNumberDesign {\n  Blue = \"Blue\",\n  Red = \"Red\",\n  White = \"White\",\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-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property({ defaultValue: BadgeType.text })\n    type!: `${BadgeType}`;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Large\"\n   * @public\n   */\n  @property({ defaultValue: BadgeSize.large })\n    size!: `${BadgeSize}`;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property({ defaultValue: BadgeTextDesign.Info })\n    design: `${BadgeTextDesign}` = BadgeTextDesign.Info;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ defaultValue: BadgeNumberDesign.Blue })\n    numberDesign!: `${BadgeNumberDesign}`;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get textType(): boolean {\n    return this.type === BadgeType.text;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,kCAAkC,CAAC;AAE1C,OAAO,aAAa,MAAM,4CAA4C,CAAC;AAEvE,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AACvD,OAAO,aAAa,MAAM,0BAA0B,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAE5E,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,0BAAa,CAAA;IACb,8BAAiB,CAAA;AACnB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED,MAAM,CAAN,IAAY,SAGX;AAHD,WAAY,SAAS;IACnB,4BAAe,CAAA;IACf,4BAAe,CAAA;AACjB,CAAC,EAHW,SAAS,KAAT,SAAS,QAGpB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IA4DhC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,KAAK,CAAC;IACnE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,GAAG,CAAC;IACjE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,IAAI,EAAE;YAChC,OAAO,IAAI,CAAC,WAAW,CAAC;SACzB;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA3EG;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,IAAI,EAAE,CAAC;uCACnB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,SAAS,CAAC,KAAK,EAAE,CAAC;uCACpB;AAStB;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,eAAe,CAAC,IAAI,EAAE,CAAC;yCACjB;AAQ9B;IADD,QAAQ,CAAC,EAAE,YAAY,EAAE,iBAAiB,CAAC,IAAI,EAAE,CAAC;+CACX;AAQtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,YAAY,EAAE,aAAa,CAAC,GAAG,EAAE,CAAC;gDAC/B;AAQpC;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACd;AA1DpB,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;QACvB,YAAY,EAAE,EAAE;KACjB,CAAC;GACI,SAAS,CAmFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,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 slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Badge.js\";\n\nimport BadgeTemplate from \"./generated/templates/BadgeTemplate.lit.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\nimport IconPlacement from \"./types/IconPlacement.js\";\nimport { NumberBadgeDesign, TextBadgeDesign } from \"./types/BadgeDesign.js\";\n\nexport enum BadgeType {\n  text = \"Text\",\n  number = \"Number\",\n}\n\nexport enum BadgeSize {\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-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: litRender,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n  dependencies: [],\n})\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property({ defaultValue: BadgeType.text })\n    type!: `${BadgeType}`;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Large\"\n   * @public\n   */\n  @property({ defaultValue: BadgeSize.large })\n    size!: `${BadgeSize}`;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Info\"\n   * @public\n   */\n  @property({ defaultValue: TextBadgeDesign.Info })\n    design!: `${TextBadgeDesign}`;\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property({ defaultValue: NumberBadgeDesign.Blue })\n    numberDesign!: `${NumberBadgeDesign}`;\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n    @property({ type: IconPlacement, defaultValue: IconPlacement.End })\n    iconPlacement? : `${IconPlacement}`;\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: Array<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === IconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type === BadgeType.text) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}

package/dist/Breadcrumbs.d.ts

@@ -1,6 +1,6 @@
 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 ItemNavigation 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";
@@ -55,23 +55,16 @@ declare class UDExBreadcrumbs extends UI5Element {
     items: Array<UDExBreadcrumbsItem>;
     responsivePopover?: Dropdown;
     _itemNavigation?: ItemNavigation;
+    _shouldFocusFirstVisibleItem: boolean;
     static i18nBundle: I18nBundle;
+    static onDefine(): Promise<void>;
     onBeforeRendering(): void;
+    onAfterRendering(): 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[];
+    _getFocusableItems(): Array<Link>;
     _initItemNavigation(): void;
-    onAfterRendering(): void;
-    _getItems(): UDExBreadcrumbsItem[];
+    _getItems(): Array<UDExBreadcrumbsItem>;
     _closeRespPopover(): void;
     _openRespPopover(): Promise<void>;
     _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void;
@@ -79,18 +72,27 @@ declare class UDExBreadcrumbs extends UI5Element {
     _isItemVisible(item: UDExBreadcrumbsItem): boolean;
     _afterDropdownOpen(): void;
     _afterDropdownClose(): void;
-    get _visibleItems(): UDExBreadcrumbsItem[];
+    _toggleDropdown(): void;
+    _onfocusin(e: FocusEvent): void;
+    _handleKeydown(e: KeyboardEvent): void;
+    _focusFirstVisibleItem(): void;
+    /**
+     * 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(): Array<Link>;
     /**
      * 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 _linksData(): Array<UDExBreadcrumbsItem>;
+    get _visibleItems(): Array<UDExBreadcrumbsItem>;
+    get _dropdownItems(): Array<UDExBreadcrumbsItem>;
+    get _triggerClass(): string;
     get _accessibleNameText(): string;
     get _dropdownArrowAccessibleNameText(): string;
-    _onfocusin(e: FocusEvent): void;
-    static onDefine(): Promise<void>;
 }
 export default UDExBreadcrumbs;

package/dist/Breadcrumbs.js

@@ -11,6 +11,7 @@ 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 { isTabNext, isTabPrevious, } from "@ui5/webcomponents-base/dist/Keys.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";
@@ -28,6 +29,7 @@ import "@ui5/webcomponents-icons/dist/home.js";
 // Styles
 import BreadcrumbsCss from "./generated/themes/Breadcrumbs.css.js";
 import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js";
+const triggerActiveClass = "udex-breadcrumbs__trigger--opened";
 /**
  * @class
  *
@@ -46,9 +48,15 @@ import BreadcrumbsPopoverCss from "./generated/themes/BreadcrumbsPopover.css.js"
  * @public
  */
 let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Element {
+    static async onDefine() {
+        UDExBreadcrumbs_1.i18nBundle = await getI18nBundle("@udex/web-components");
+    }
     onBeforeRendering() {
         this._preprocessItems();
     }
+    onAfterRendering() {
+        this._initItemNavigation();
+    }
     _preprocessItems() {
         this.items.forEach(item => {
             item._getRealDomRef = () => this.getDomRef().querySelector(`[data-ui5-stable*=${item.stableDomRef}]`);
@@ -58,19 +66,6 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
         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);
@@ -84,9 +79,6 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
             });
         }
     }
-    onAfterRendering() {
-        this._initItemNavigation();
-    }
     _getItems() {
         return this.getSlottedNodes("items");
     }
@@ -127,13 +119,50 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
     }
     _afterDropdownClose() {
         this._dropdownOpened = false;
+        if (this._shouldFocusFirstVisibleItem) {
+            this._focusFirstVisibleItem();
+        }
     }
-    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));
+    _toggleDropdown() {
+        if (this._dropdownOpened) {
+            this._closeRespPopover();
+        }
+        else {
+            this._openRespPopover();
+        }
+    }
+    _onfocusin(e) {
+        const currentItem = e.target;
+        this._itemNavigation?.setCurrentItem(currentItem);
+    }
+    _handleKeydown(e) {
+        const itemIndex = e.target.getAttribute("index");
+        const isLastItem = itemIndex === (this.items.length - 2).toString();
+        const isFirstItem = itemIndex === "0";
+        if (isTabNext(e) && isLastItem) {
+            this._closeRespPopover();
+            this._shouldFocusFirstVisibleItem = true;
+        }
+        if (isTabPrevious(e) && isFirstItem) {
+            this._closeRespPopover();
+        }
+    }
+    _focusFirstVisibleItem() {
+        Array.from(this.shadowRoot.querySelectorAll("[udex-link]"))[0].focus();
+        this._shouldFocusFirstVisibleItem = false;
+    }
+    /**
+     * 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]"));
     }
     /**
      * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow
@@ -147,22 +176,18 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
             return item;
         });
     }
-    get _isOverflowEmpty() {
-        return this._dropdownItems.length === 0;
-    }
-    _toggleDropdown() {
-        if (this._dropdownOpened) {
-            this._closeRespPopover();
-        }
-        else {
-            this._openRespPopover();
-        }
+    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));
     }
     get _dropdownItems() {
         return this._getItems().filter(i => this._isItemVisible(i));
     }
     get _triggerClass() {
-        return this._dropdownOpened ? "udex-breadcrumbs__trigger--opened" : "";
+        return this._dropdownOpened ? triggerActiveClass : "";
     }
     get _accessibleNameText() {
         return UDExBreadcrumbs_1.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);
@@ -170,13 +195,6 @@ let UDExBreadcrumbs = UDExBreadcrumbs_1 = class UDExBreadcrumbs extends UI5Eleme
     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("@udex/web-components");
-    }
 };
 __decorate([
     property({ noAttribute: true, type: Boolean })

package/dist/Breadcrumbs.js.map

@@ -1 +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(\"@udex/web-components\");\n  }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\n"]}
+{"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\";\nimport {\n  isTabNext,\n  isTabPrevious,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\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 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\nconst triggerActiveClass = \"udex-breadcrumbs__trigger--opened\";\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  _shouldFocusFirstVisibleItem!: boolean;\n\n  static i18nBundle: I18nBundle;\n\n  static async onDefine(): Promise<void> {\n    UDExBreadcrumbs.i18nBundle = await getI18nBundle(\"@udex/web-components\");\n  }\n\n  onBeforeRendering(): void {\n    this._preprocessItems();\n  }\n\n  onAfterRendering(): void {\n    this._initItemNavigation();\n  }\n\n  _preprocessItems(): void {\n    this.items.forEach(item => {\n      item._getRealDomRef = () => this.getDomRef()!.querySelector(`[data-ui5-stable*=${item.stableDomRef}]`)!;\n    });\n  }\n\n  async _getResponsePopover(): Promise<Dropdown> {\n    const staticAreaItem = await this.getStaticAreaItemDomRef();\n    return staticAreaItem!.querySelector<Dropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n  }\n\n  _getFocusableItems(): Array<Link> {\n    const items = this._links;\n    items.unshift(this._dropdownArrowLink);\n\n    return items;\n  }\n\n  _initItemNavigation(): void {\n    if (!this._itemNavigation) {\n      this._itemNavigation = new ItemNavigation(this, {\n        navigationMode: NavigationMode.Horizontal,\n        getItemsCallback: () => this._getFocusableItems(),\n      });\n    }\n  }\n\n  _getItems(): Array<UDExBreadcrumbsItem> {\n    return this.getSlottedNodes<UDExBreadcrumbsItem>(\"items\");\n  }\n\n  _closeRespPopover(): void {\n    this.responsivePopover && this.responsivePopover.onClose();\n  }\n\n  async _openRespPopover(): Promise<void> {\n    this.responsivePopover = await this._getResponsePopover();\n    this.responsivePopover.onOpen(this._dropdownArrowLink);\n  }\n\n  _onDropdownLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\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>): void {\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): boolean {\n    return !item.hidden;\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownOpened = true;\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownOpened = false;\n    if (this._shouldFocusFirstVisibleItem) {\n      this._focusFirstVisibleItem();\n    }\n  }\n\n  _toggleDropdown(): void {\n    if (this._dropdownOpened) {\n      this._closeRespPopover();\n    } else {\n      this._openRespPopover();\n    }\n  }\n\n  _onfocusin(e: FocusEvent): void {\n    const currentItem = e.target as Link;\n\n    this._itemNavigation?.setCurrentItem(currentItem);\n  }\n\n  _handleKeydown(e: KeyboardEvent): void {\n    const itemIndex = (e.target as HTMLElement).getAttribute(\"index\");\n    const isLastItem = itemIndex === (this.items.length - 2).toString();\n    const isFirstItem = itemIndex === \"0\";\n\n    if (isTabNext(e) && isLastItem) {\n      this._closeRespPopover();\n      this._shouldFocusFirstVisibleItem = true;\n    }\n\n    if (isTabPrevious(e) && isFirstItem) {\n      this._closeRespPopover();\n    }\n  }\n\n  _focusFirstVisibleItem(): void {\n    Array.from(this.shadowRoot!.querySelectorAll<Link>(\"[udex-link]\"))[0].focus();\n    this._shouldFocusFirstVisibleItem = false;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownArrowLink(): Link {\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(): Array<Link> {\n    return Array.from(this.shadowRoot!.querySelectorAll<Link>(\".udex-breadcrumbs__link-wrapper [ui5-link]\"));\n  }\n\n  /**\n   * Getter for the list of abstract breadcrumb items to be rendered as links outside the overflow\n   */\n  get _linksData(): Array<UDExBreadcrumbsItem> {\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 _visibleItems(): Array<UDExBreadcrumbsItem> {\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  get _dropdownItems(): Array<UDExBreadcrumbsItem> {\n    return this._getItems().filter(i => this._isItemVisible(i));\n  }\n\n  get _triggerClass(): string {\n    return this._dropdownOpened ? triggerActiveClass : \"\";\n  }\n\n  get _accessibleNameText(): string {\n    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_ARIA_LABEL);\n  }\n\n  get _dropdownArrowAccessibleNameText(): string {\n    return UDExBreadcrumbs.i18nBundle.getText(BREADCRUMBS_OVERFLOW_ARIA_LABEL);\n  }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\n"]}

package/dist/BreadcrumbsItem.js

@@ -34,7 +34,6 @@ UDExBreadcrumbsItem = __decorate([
     customElement({
         tag: "udex-breadcrumbs-item",
         renderer: litRender,
-        dependencies: [],
     })
 ], UDExBreadcrumbsItem);
 UDExBreadcrumbsItem.define();

package/dist/BreadcrumbsItem.js.map

@@ -1 +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"]}
+{"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;AAKH,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,eAAe;CAShD,CAAA;AADG;IADD,QAAQ,EAAE;iDACK;AARZ,mBAAmB;IAJxB,aAAa,CAAC;QACb,GAAG,EAAE,uBAAuB;QAC5B,QAAQ,EAAE,SAAS;KACpB,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})\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/Checkbox.js

@@ -36,7 +36,6 @@ UDExCheckbox = __decorate([
         tag: "udex-checkbox",
         renderer: litRender,
         styles: [checkboxCss, CheckboxCss],
-        dependencies: [CheckBox],
     })
 ], UDExCheckbox);
 UDExCheckbox.define();

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,SAAS;AACT,OAAO,WAAW,MAAM,0DAA0D,CAAC;AACnF,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;CAClC,CAAA;AADK,YAAY;IANjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;QAClC,YAAY,EAAE,CAAC,QAAQ,CAAC;KACzB,CAAC;GACI,YAAY,CACjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\n\n// Styles\nimport checkboxCss from \"@ui5/webcomponents/dist/generated/themes/CheckBox.css.js\";\nimport CheckboxCss from \"./generated/themes/Checkbox.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-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: litRender,\n  styles: [checkboxCss, CheckboxCss],\n  dependencies: [CheckBox],\n})\nclass UDExCheckbox extends CheckBox {\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,SAAS;AACT,OAAO,WAAW,MAAM,0DAA0D,CAAC;AACnF,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AAMH,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,QAAQ;CAClC,CAAA;AADK,YAAY;IALjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC;KACnC,CAAC;GACI,YAAY,CACjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\n\n// Styles\nimport checkboxCss from \"@ui5/webcomponents/dist/generated/themes/CheckBox.css.js\";\nimport CheckboxCss from \"./generated/themes/Checkbox.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-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@udex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: litRender,\n  styles: [checkboxCss, CheckboxCss],\n})\nclass UDExCheckbox extends CheckBox {\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}

package/dist/CountrySelector.d.ts

@@ -165,11 +165,11 @@ declare class CountrySelector extends UDExSearchableListBase {
     getCountryLabel(countryName?: string, localName?: string): string | null;
     handleCloseSearch(): void;
     handleItemPress(e: CustomEvent): void;
-    handleKeyDown(e: CustomEvent): void;
+    handleKeyDown(e: KeyboardEvent): void;
+    handleKeyPress(keyEvent: KeyboardEvent): void;
     handleInputMouseDown(e: CustomEvent): void;
     onValueSearch(searchValue: string): void;
     handleTriggerClick(): void;
-    isLetterKey(key: string): boolean;
     handleValueSearch(e: CustomEvent): void;
     handleSubmitSearch(): void;
     handleKeyDownSearch(e: CustomEvent): void;

package/dist/CountrySelector.js

@@ -29,6 +29,7 @@ import { CountryListDB } from "./data/CountryListISO3166.js";
 import UDExSearchableListBase from "./SearchableListBase.js";
 import UDExListItem from "./ListItem.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
+import isLetterKey from "./utils/isLetterKeyPressed.js";
 /**
  * @class
  *
@@ -170,9 +171,11 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
         if (this.disabled || this.readonly || this.displayonly) {
             return;
         }
-        const keyEvent = e.detail;
-        const key = keyEvent.key;
-        if (isEnter(keyEvent) || isSpace(keyEvent)) {
+        const key = e.key;
+        const isTabNextPress = isTabNext(e) && !this._search;
+        const isTabPrevPress = isTabPrevious(e) && !this._search;
+        const isEscPress = isEscape(e) && !this._search;
+        if (isEnter(e) || isSpace(e)) {
             if (this._dropdown.open) {
                 this.dropDownClose();
             }
@@ -180,17 +183,25 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
                 this._dropdown.onTriggerClick();
             }
         }
-        else if (isBackSpace(keyEvent) || isDelete(keyEvent)) {
+        if (isTabNextPress || isTabPrevPress || isEscPress) {
+            this._dropdown.open = false;
+        }
+        if (isBackSpace(e) || isDelete(e)) {
             this.selectedCountry = undefined;
             this._render();
         }
-        else if (this.isLetterKey(key)) {
-            this._dropdown.onOpen(this.getInput());
-            this._search.focus();
-            this._search.value = key;
-            this.onValueSearch(key);
+        if (isLetterKey(key)) {
+            e.preventDefault();
+            this.handleKeyPress(e);
         }
     }
+    handleKeyPress(keyEvent) {
+        const key = keyEvent.key;
+        this._dropdown.onOpen(this.getInput());
+        this._search.focus();
+        this._search.value = key;
+        this.onValueSearch(key);
+    }
     handleInputMouseDown(e) {
         e.preventDefault();
     }
@@ -204,9 +215,6 @@ let CountrySelector = CountrySelector_1 = class CountrySelector extends UDExSear
             this.dropDownClose();
         }
     }
-    isLetterKey(key) {
-        return /^[a-zA-Z]$/.test(key);
-    }
     handleValueSearch(e) {
         this.onValueSearch(e.detail.value);
     }