@sapudex/web-components 2.21.0 → 2.23.0

package/cypress/specs/Tag.cy.tsx

@@ -16,7 +16,7 @@ const linkTag = <UDExTag id="tag-link" text="SAP home page" href="https://sap.co
 
 describe("Tag", () => {
   it("is rendered", () => {
-    cy.mount(<UDExTag></UDExTag>)
+    cy.mount(<UDExTag text="tag"></UDExTag>)
     cy.get("[udex-tag]").should("exist")
   });
 

package/cypress/specs/TextField.cy.tsx

@@ -85,6 +85,12 @@ describe("Text Field", () => {
     cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "readonly")
   });
 
+  it("sets name attribute to input element", () => {
+    const name = "my-name";
+    cy.mount(<UDExTextField name={name}></UDExTextField>);
+    cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "name", name)
+  });
+
   it("Value attribute is set", () => {
     const TEST_VALUE = "Test value";
     cy.get("#defaultTextField").shadow().find("input").should("have.value", TEST_VALUE);
@@ -132,6 +138,15 @@ describe("Text Field", () => {
     })
   });
 
+  it("sets object fieldRef current to input element inside shadow root", () => {
+    const fieldRefObj = { current: null as HTMLInputElement | null };
+    cy.mount(<UDExTextField fieldRef={fieldRefObj}></UDExTextField>);
+    cy.get('[udex-text-field]').shadow().find('.udex-text-field__input').then(($input) => {
+        expect(fieldRefObj.current).to.be.instanceOf(HTMLInputElement);
+        expect(fieldRefObj.current?.className).to.include("udex-text-field__input");
+      });
+  });
+
   describe("Label classes", () => {
     beforeEach(() => {
       cy.mount(textFieldWithLabel)

package/cypress/specs/Textarea.cy.tsx

@@ -1,36 +1,18 @@
 import { UDExTextArea } from  "../support/component-imports.js";
+import { UDExValueState } from "../../src/types/common.js";
 
-const defaultTextarea = <UDExTextArea
-  valueState="Standard"
-  id="defaultTextArea">
-</UDExTextArea>
-
-const textareaWithAttributes = <UDExTextArea
-  valueState="Standard"
-  label="Label"
-  value="Value"
-  rows={3}
-  supportingText="Supporting Text"
-  id="textAreaWithAttributes">
-</UDExTextArea>
-
-const textareaWithMaxLength = <UDExTextArea       
-  value="Test value"
-  maxlength={10}
-  id="limitedTextArea">
-</UDExTextArea>
-
-const growingTextarea = <UDExTextArea       
-  valueState="Standard"
-  value="123"
-  growing
-  growingMaxLines={5}
-  id="growingTextarea">
-</UDExTextArea>
+const state = UDExValueState.Standard;
+const label = "Label";
+const value = "Value";
+const text = "Supporting Text";
+const LABEL_ACTIVE_CLASS = "udex-textarea__label--active";
 
-describe("Textarea", () => {
-  const LABEL_ACTIVE_CLASS = "udex-textarea__label--active";
+const defaultTextarea = <UDExTextArea valueState={state} id="defaultTextArea"></UDExTextArea>
+const textareaWithAttributes = <UDExTextArea valueState={state} label={label} value={value} rows={3} supportingText={text} id="textAreaWithAttributes"></UDExTextArea>
+const textareaWithMaxLength = <UDExTextArea value="Test value" maxlength={10} id="limitedTextArea"></UDExTextArea>
+const growingTextarea = <UDExTextArea valueState={state} value="123" growing growingMaxLines={5} id="growingTextarea"></UDExTextArea>
 
+describe("Textarea", () => {
   beforeEach(() => {
     cy.mount(defaultTextarea);
   })
@@ -70,13 +52,13 @@ describe("Textarea", () => {
 
     it("label attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("label")).eqls("Label")
+        expect($textArea.attr("label")).eqls(label)
       })
     });
 
     it("value attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("value")).eqls("Value")
+        expect($textArea.attr("value")).eqls(value)
       })
     });
 
@@ -88,7 +70,7 @@ describe("Textarea", () => {
 
     it("supportingText attribute is set", () => {
       cy.get("#textAreaWithAttributes").then($textArea => {
-        expect($textArea.attr("supporting-text")).eqls("Supporting Text")
+        expect($textArea.attr("supporting-text")).eqls(text)
       })
     });
 
@@ -122,7 +104,7 @@ describe("Textarea", () => {
     });
 
     it("aria-invalid attribute is set when valueState is Error", () => {
-      cy.mount(<UDExTextArea id="invalidTextArea" valueState="Error"></UDExTextArea>)
+      cy.mount(<UDExTextArea id="invalidTextArea" valueState={UDExValueState.Error}></UDExTextArea>)
       cy.get("#invalidTextArea").shadow().find("textarea").should("have.attr", "aria-invalid")
     });
   });

package/cypress/support/component-imports.instrumented.ts

@@ -21,6 +21,8 @@ import UDExFilterMenuItem from "../../instrumented/FilterMenuItem.js";
 import UDExFilterMenuSelectAll from "../../instrumented/FilterMenuSelectAll.js";
 import UDExFooter from "../../instrumented/Footer.js";
 import UDExHeroBanner from "../../instrumented/HeroBanner.js";
+import UDExImageGridCloud from "../../instrumented/ImageGridCloud.js";
+import UDExImageGridCloudItem from "../../instrumented/ImageGridCloudItem.js";
 import UDExImageGridTicker from "../../instrumented/ImageGridTicker.js";
 import UDExImageGridTickerItem from "../../instrumented/ImageGridTickerItem.js";
 import UDExInputGroup from "../../instrumented/InputGroup.js";
@@ -90,6 +92,8 @@ export {
   UDExFilterMenuSelectAll,
   UDExFooter,
   UDExHeroBanner,
+  UDExImageGridCloud,
+  UDExImageGridCloudItem,
   UDExImageGridTicker,
   UDExImageGridTickerItem,
   UDExInputGroup,

package/cypress/support/component-imports.src.ts

@@ -21,6 +21,8 @@ import UDExFilterMenuItem from "../../src/FilterMenuItem.js";
 import UDExFilterMenuSelectAll from "../../src/FilterMenuSelectAll.js";
 import UDExFooter from "../../src/Footer.js";
 import UDExHeroBanner from "../../src/HeroBanner.js";
+import UDExImageGridCloud from "../../src/ImageGridCloud.js";
+import UDExImageGridCloudItem from "../../src/ImageGridCloudItem.js";
 import UDExImageGridTicker from "../../src/ImageGridTicker.js";
 import UDExImageGridTickerItem from "../../src/ImageGridTickerItem.js";
 import UDExInputGroup from "../../src/InputGroup.js";
@@ -90,6 +92,8 @@ export {
   UDExFilterMenuSelectAll,
   UDExFooter,
   UDExHeroBanner,
+  UDExImageGridCloud,
+  UDExImageGridCloudItem,
   UDExImageGridTicker,
   UDExImageGridTickerItem,
   UDExInputGroup,

package/dist/Accordion.js

@@ -189,6 +189,7 @@ UDExAccordion = UDExAccordion_1 = __decorate([
      * Triggered when the user clicks on the Expand/Collapse All button..
      *
      * @public
+     * @param {boolean} isOpen Indicates whether all items are expanded or collapsed
      */
     ,
     event("toggle-items", { bubbles: true })

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: 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-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isDown(e) || isUp(e)) {\n      return;\n    }\n\n    this.handleTabKey(e);\n  }\n\n  handleTabKey(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.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,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,+CAA+C,CAAC;AACvD,OAAO,EACL,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,EAAE,IAAI,GACxE,MAAM,sCAAsC,CAAC;AAC9C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,mCAAmC,CAAC;AAE7E,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D,MAAM,CAAN,IAAY,0BAOX;AAPD,WAAY,0BAA0B;IACpC,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;IACT,uCAAS,CAAA;AACX,CAAC,EAPW,0BAA0B,KAA1B,0BAA0B,QAOrC;AAMD;;;;;;;;;;;;;;;;;;GAkBG;AAgBH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IA8DpC;QACE,KAAK,EAAE,CAAC;QAxBV;;;;;WAKG;QAED,kBAAa,GAA+B,0BAA0B,CAAC,EAAE,CAAC;QAkB1E,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,UAAU;QACR,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC;QACvC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACxC,IAAI,CAAC,kBAAkB,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;IACzE,CAAC;IAED,eAAe,CAAC,MAAe;QAC7B,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YACzB,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,mBAAmB,CAAC,CAAgB;QAClC,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC;YAC7B,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;QAC3B,CAAC;IACH,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,IAAI,MAAM,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QAED,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,CAAC;IAED,YAAY,CAAC,CAAgB;QAC3B,MAAM,UAAU,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACtD,MAAM,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC;QAC5D,MAAM,UAAU,GAAG,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;QACpE,MAAM,WAAW,GAAG,IAAI,CAAC,gBAAgB,KAAK,CAAC,CAAC;QAChD,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QAErD,MAAM,cAAc,GAAG,CAAC,QAA6B,EAAE,KAAa,EAAE,EAAE;YACtE,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;QACvE,CAAC,CAAC;QAEF,MAAM,sBAAsB,GAAG,CAAC,IAAiB,EAAE,EAAE;YACnD,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,CAAC,CAAC;YACrF,OAAO,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;QACpD,CAAC,CAAC;QAEF,MAAM,mBAAmB,GAAG,CAAC,aAA4B,EAAE,EAAE;YAC3D,IAAI,UAAU,IAAI,SAAS,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;gBACjE,cAAc,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,IAAI,CAAC,CAAC;gBACzD,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,CAAC,UAAU,EAAE,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CAAC;mBACrC,CAAC,YAAY,EAAE,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC;mBAC5C,CAAC,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBACvC,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,OAAO,CAAC,CAAC,CAAC,IAAI,UAAU,EAAE,CAAC;gBAC7B,cAAc,CAAC,sBAAsB,CAAC,UAAU,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1D,CAAC;YAED,OAAO,KAAK,CAAC;QACf,CAAC,CAAC;QAEF,MAAM,WAAW,GAAG,CAAC,SAAiB,EAAE,EAAE;YACxC,MAAM,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC;YACpC,IAAI,CAAC,gBAAgB,GAAG,SAAS,CAAC;YACjC,IAAI,EAAE,UAAU,EAAE,aAAa,CAAC,8BAA8B,CAAiB,EAAE,KAAK,EAAE,CAAC;QAC5F,CAAC,CAAC;QAEF,IAAI,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;YAC3B,OAAO;QACT,CAAC;QAED,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,MAAM,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC;QAE/B,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;YACd,WAAW,CAAC,CAAC,CAAC,CAAC;QACjB,CAAC;QAED,IAAI,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;YACb,WAAW,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QACvB,CAAC;QAED,IAAI,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;YACrB,WAAW,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;QAC/E,CAAC;QAED,IAAI,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;YACjB,WAAW,CAAC,IAAI,CAAC,gBAAgB,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/E,CAAC;IACH,CAAC;IAED,gBAAgB,CAAC,CAAc;QAC7B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA2B,CAAC;QAC7C,IAAI,MAAM,EAAE,CAAC;YACX,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QAC7D,CAAC;IACH,CAAC;IAED,uBAAuB;QACrB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC/D,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAC,YAAY;YACtB,CAAC,CAAC,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC;YAChD,CAAC,CAAC,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACnD,CAAC;IAED,IAAI,KAAK;QACP,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE;YAC1B,OAAO;gBACL,IAAI,EAAE,EAAE;aACT,CAAC;QACJ,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AAjLG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;mDACtB;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDACC;AAQ3B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACL;AASpB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACP;AASlB;IADD,QAAQ,EAAE;oDACiE;AAS1E;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC;6CAChC;AAG7B;IADN,IAAI,CAAC,yBAAyB,CAAC;uCACF;AA1D1B,aAAa;IAflB,aAAa,CAAC;QACb,GAAG,EAAE,gBAAgB;QACrB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,YAAY;QACpB,QAAQ,EAAE,iBAAiB;KAC5B,CAAC;IAEF;;;;;OAKG;;IACF,KAAK,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAEnC,aAAa,CA4LlB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,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 event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter, isSpace, isEnd, isHome, isTabPrevious, isTabNext, isDown, isUp,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./AccordionTemplate.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\n\nexport enum UDExAccordionHeadlineLevel {\n  H1 = \"H1\",\n  H2 = \"H2\",\n  H3 = \"H3\",\n  H4 = \"H4\",\n  H5 = \"H5\",\n  H6 = \"H6\"\n}\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: 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-accordion</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Accordion.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion\n * @public\n */\n@customElement({\n  tag: \"udex-accordion\",\n  renderer: jsxRenderer,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n})\n\n/**\n * Triggered when the user clicks on the Expand/Collapse All button..\n *\n * @public\n * @param {boolean} isOpen Indicates whether all items are expanded or collapsed\n */\n@event(\"toggle-items\", { bubbles: true })\n\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    _allExpanded!: boolean;\n\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    headline!: string;\n\n  /**\n   * Defines the semantic level of the headline.\n   *\n   * @default UDExAccordionHeadlineLevel.h3\n   * @public\n   */\n  @property()\n    headlineLevel: UDExAccordionHeadlineLevel = UDExAccordionHeadlineLevel.H3;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true })\n    _items!: Array<UDExAccordionItem>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _activeItemIndex: number;\n\n  constructor() {\n    super();\n    this._allExpanded = false;\n    this._activeItemIndex = -1;\n  }\n\n  onEnterDOM() {\n    this.updateAllExpandedStatus();\n  }\n\n  toggleAllHandler(e: Event) {\n    e.preventDefault();\n    this._allExpanded = !this._allExpanded;\n    this.toggleOpenItems(this._allExpanded);\n    this.fireDecoratorEvent(\"toggle-items\", { isOpen: this._allExpanded });\n  }\n\n  toggleOpenItems(isOpen: boolean) {\n    this._items.forEach(item => {\n      item.expanded = isOpen;\n    });\n  }\n\n  toggleKeyAllHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.toggleAllHandler(e);\n    }\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isDown(e) || isUp(e)) {\n      return;\n    }\n\n    this.handleTabKey(e);\n  }\n\n  handleTabKey(e: KeyboardEvent) {\n    const activeItem = this._items[this._activeItemIndex];\n    const previousItem = this._items[this._activeItemIndex - 1];\n    const isLastItem = this._activeItemIndex === this._items.length - 1;\n    const isFirstItem = this._activeItemIndex === 0;\n    const lastItem = this._items[this._items.length - 1];\n\n    const updateTabIndex = (elements: NodeListOf<Element>, value: string) => {\n      elements.forEach(element => element.setAttribute(\"tabindex\", value));\n    };\n\n    const getInteractiveElements = (item: HTMLElement) => {\n      const selectors = [\"button\", \"a[href]\", \"input\", \"select\", \"textarea\", \"[tabindex]\"];\n      return item.querySelectorAll(selectors.join(\",\"));\n    };\n\n    const handleTabNavigation = (keyboardEvent: KeyboardEvent) => {\n      if (isLastItem && isTabNext(keyboardEvent) && !lastItem.expanded) {\n        updateTabIndex(getInteractiveElements(activeItem), \"-1\");\n        return true;\n      }\n\n      if ((activeItem?.expanded && isTabNext(e))\n        || (previousItem?.expanded && isTabPrevious(e))\n        || (isFirstItem && isTabPrevious(e))) {\n        return true;\n      }\n\n      if (isEnter(e) && isLastItem) {\n        updateTabIndex(getInteractiveElements(activeItem), \"0\");\n      }\n\n      return false;\n    };\n\n    const focusOnItem = (itemIndex: number) => {\n      const item = this._items[itemIndex];\n      this._activeItemIndex = itemIndex;\n      (item?.shadowRoot?.querySelector(\".udex-accordion-item__header\") as HTMLElement)?.focus();\n    };\n\n    if (handleTabNavigation(e)) {\n      return;\n    }\n\n    e.preventDefault();\n    const len = this._items.length;\n\n    if (isHome(e)) {\n      focusOnItem(0);\n    }\n\n    if (isEnd(e)) {\n      focusOnItem(len - 1);\n    }\n\n    if (isTabPrevious(e)) {\n      focusOnItem(this._activeItemIndex > 0 ? this._activeItemIndex - 1 : len - 1);\n    }\n\n    if (isTabNext(e)) {\n      focusOnItem(this._activeItemIndex < len - 1 ? this._activeItemIndex + 1 : 0);\n    }\n  }\n\n  itemFocusHandler(e: CustomEvent) {\n    const target = e.target as UDExAccordionItem;\n    if (target) {\n      this._activeItemIndex = this._items?.indexOf(target) ?? -1;\n    }\n  }\n\n  updateAllExpandedStatus() {\n    this._allExpanded = this._items.every(item => item.expanded);\n  }\n\n  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get items(): {item: UDExAccordionItem}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n}\n\nUDExAccordion.define();\n\nexport default UDExAccordion;\nexport type { UDExAccordionToggleItemsEventDetail };\n"]}

package/dist/AccordionItem.js

@@ -171,6 +171,8 @@ UDExAccordionItem = __decorate([
     /**
      * Triggered when the user clicks on an accordion item.
      * @public
+     * @param { string } name
+     * @param { boolean } expanded
      */
     ,
     event("accordion-item-click", { bubbles: true })

package/dist/AccordionItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\nimport { UDExNumberBadgeDesign } from \"./types/BadgeDesign.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n  Standard = \"Standard\",\n  Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n  name: string | undefined;\n  expanded: 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-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the design of the number badge.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberBadgeDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the size of label.\n   *\n   * @default UDExAccordionItemTitleSize.Standard\n   * @public\n   */\n  @property()\n    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n  /**\n   * Defines icon name to be display with title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    labelIcon!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n    this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n    this.setContentHeight();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.contentElement) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n  }\n\n  _onResize(): void {\n    this.setContentHeight();\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.setContentHeight();\n    this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}
+{"version":3,"file":"AccordionItem.js","sourceRoot":"","sources":["../src/AccordionItem.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isEnter, isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport AccordionItemTemplate from \"./AccordionItemTemplate.js\";\nimport { UDExNumberBadgeDesign } from \"./types/BadgeDesign.js\";\n\n// Styles\nimport AccordionItemCss from \"./generated/themes/AccordionItem.css.js\";\n\nexport enum UDExAccordionItemTitleSize {\n  Standard = \"Standard\",\n  Large = \"Large\"\n}\n\ntype UDExAccordionItemClickEventDetail = {\n  name: string | undefined;\n  expanded: 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-accordion-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/AccordionItem.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-accordion-item\n * @public\n */\n@customElement({\n  tag: \"udex-accordion-item\",\n  renderer: jsxRenderer,\n  styles: AccordionItemCss,\n  template: AccordionItemTemplate,\n})\n\n/**\n * Triggered when the user focuses on an accordion item.\n * @public\n */\n@event(\"accordion-item-focus\", { bubbles: true })\n\n/**\n * Triggered when the user clicks on an accordion item.\n * @public\n * @param { string } name\n * @param { boolean } expanded\n */\n@event(\"accordion-item-click\", { bubbles: true })\n\nclass UDExAccordionItem extends UI5Element {\n  eventDetails!: {\n    \"accordion-item-focus\": void,\n    \"accordion-item-click\": UDExAccordionItemClickEventDetail,\n  };\n  /**\n   * Defines the Badge at the end of the label item.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    numberBadge!: string;\n\n  /**\n   * Defines the design of the number badge.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberBadgeDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n  /**\n   * Defines the label of the accordion item component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    label!: string;\n\n  /**\n   * Defines the size of label.\n   *\n   * @default UDExAccordionItemTitleSize.Standard\n   * @public\n   */\n  @property()\n    labelSize: UDExAccordionItemTitleSize = UDExAccordionItemTitleSize.Standard;\n\n  /**\n   * Defines icon name to be display with title.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property()\n    labelIcon!: string;\n\n  /**\n   * Defines if the accordion item is expanded by default\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    expanded = false;\n\n  /**\n   * Used internally to understand the component's open or closed state.\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isOpen = false;\n\n  /**\n   * Defines direction of the accordion item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    _direction?: string;\n\n  /**\n   * Slot for accordion item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _resizeHandler: () => void;\n  contentElement: HTMLElement | null | undefined;\n\n  constructor() {\n    super();\n    this._resizeHandler = this._onResize.bind(this);\n    this.contentElement = null;\n  }\n\n  onAfterRendering() {\n    this.handleDirection();\n    this.contentElement = this.shadowRoot?.querySelector(\".udex-accordion-item__content-inner\");\n    this.setContentHeight();\n  }\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n    if (this.contentElement) {\n      ResizeHandler.register(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  onExitDOM(): void {\n    if (this.contentElement) {\n      ResizeHandler.deregister(this.contentElement, this._resizeHandler);\n    }\n  }\n\n  setContentHeight() {\n    this.style.setProperty(\"--udex-accordion-item-content-max-height\", `${this.contentElement?.scrollHeight}px`);\n  }\n\n  _onResize(): void {\n    this.setContentHeight();\n  }\n\n  contentKeydown(e: KeyboardEvent) {\n    e.stopPropagation();\n  }\n\n  itemClickHandler(e: Event) {\n    e.preventDefault();\n    this.expanded = !this.expanded;\n    this.setContentHeight();\n    this.fireDecoratorEvent(\"accordion-item-click\", { name: this.label, expanded: this.expanded });\n  }\n\n  focusHandler() {\n    this.fireDecoratorEvent(\"accordion-item-focus\");\n  }\n\n  keydownHandler(e: KeyboardEvent) {\n    if (isEnter(e) || isSpace(e)) {\n      this.itemClickHandler(e);\n    }\n  }\n\n  handleDirection() {\n    const directionStyles: string = window\n      .getComputedStyle(this)\n      .getPropertyValue(\"direction\");\n\n    if (!directionStyles) {\n      this._direction = \"ltr\";\n    } else {\n      this._direction = directionStyles;\n    }\n  }\n}\n\nUDExAccordionItem.define();\n\nexport default UDExAccordionItem;\nexport type { UDExAccordionItemClickEventDetail };\n"]}

package/dist/AssetsVariables.js

@@ -57,7 +57,8 @@ const variablesOverwrite = `
     ${getScopedVarName("--_ui5_input_focus_outline_color")}: var(--sapContent_FocusColor);
   }
 
-  [udex-feed] {
+  [udex-feed],
+  [udex-promo-tile] {
     ${getScopedVarName("--_ui5_icon_transform_scale")}: none;
   }
 

package/dist/AssetsVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,kBAAkB,GAAG;IACvB,0BAA0B,EAAE;;;;IAI5B,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,uBAAuB,CAAC;IACzC,gBAAgB,CAAC,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,2CAA2C,CAAC;IAC7D,gBAAgB,CAAC,8BAA8B,CAAC;IAChD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;;;;MAIpD,gBAAgB,CAAC,uBAAuB,CAAC;;;;MAIzC,gBAAgB,CAAC,4CAA4C,CAAC;;;;MAI9D,gBAAgB,CAAC,2BAA2B,CAAC;MAC7C,gBAAgB,CAAC,kCAAkC,CAAC;MACpD,gBAAgB,CAAC,kCAAkC,CAAC;;;;MAIpD,gBAAgB,CAAC,6BAA6B,CAAC;;;;;;;MAO/C,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;;CAE3D,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nconst variablesOverwrite = `\n  ${getEffectiveScrollbarStyle()}\n  \n  :root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n  ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  \n  /* Avatar */\n  [udex-avatar].dark {\n    ${getScopedVarName(\"--_ui5_avatar_outline\")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);\n  }\n\n  [udex-search] {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n  \n  [udex-upload] {\n    ${getScopedVarName(\"--_ui5_input_focus_offset\")}: 2px;\n    ${getScopedVarName(\"--_ui5_input_focus_border_radius\")}: 0.375rem;\n    ${getScopedVarName(\"--_ui5_input_focus_outline_color\")}: var(--sapContent_FocusColor);\n  }\n\n  [udex-feed] {\n    ${getScopedVarName(\"--_ui5_icon_transform_scale\")}: none;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}
+{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AACvF,OAAO,0BAA0B,MAAM,uCAAuC,CAAC;AAE/E,MAAM,kBAAkB,GAAG;IACvB,0BAA0B,EAAE;;;;IAI5B,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,uBAAuB,CAAC;IACzC,gBAAgB,CAAC,wBAAwB,CAAC;IAC1C,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,2CAA2C,CAAC;IAC7D,gBAAgB,CAAC,8BAA8B,CAAC;IAChD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,iCAAiC,CAAC;IACnD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,+BAA+B,CAAC;IACjD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,oCAAoC,CAAC;IACtD,gBAAgB,CAAC,oCAAoC,CAAC;;;;MAIpD,gBAAgB,CAAC,uBAAuB,CAAC;;;;MAIzC,gBAAgB,CAAC,4CAA4C,CAAC;;;;MAI9D,gBAAgB,CAAC,2BAA2B,CAAC;MAC7C,gBAAgB,CAAC,kCAAkC,CAAC;MACpD,gBAAgB,CAAC,kCAAkC,CAAC;;;;;MAKpD,gBAAgB,CAAC,6BAA6B,CAAC;;;;;;;MAO/C,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;;CAE3D,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\nconst variablesOverwrite = `\n  ${getEffectiveScrollbarStyle()}\n  \n  :root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n  ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n  ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n  ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n  ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n  ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  \n  /* Avatar */\n  [udex-avatar].dark {\n    ${getScopedVarName(\"--_ui5_avatar_outline\")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);\n  }\n\n  [udex-search] {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n  \n  [udex-upload] {\n    ${getScopedVarName(\"--_ui5_input_focus_offset\")}: 2px;\n    ${getScopedVarName(\"--_ui5_input_focus_border_radius\")}: 0.375rem;\n    ${getScopedVarName(\"--_ui5_input_focus_outline_color\")}: var(--sapContent_FocusColor);\n  }\n\n  [udex-feed],\n  [udex-promo-tile] {\n    ${getScopedVarName(\"--_ui5_icon_transform_scale\")}: none;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: 0;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}

package/dist/Breadcrumbs.js

@@ -234,6 +234,11 @@ UDExBreadcrumbs = UDExBreadcrumbs_1 = __decorate([
     })
     /**
      * @public
+     * @param { UDExBreadcrumbsItem } item The clicked breadcrumb item
+     * @param { boolean } altKey
+     * @param { boolean } ctrlKey
+     * @param { boolean } metaKey
+     * @param { boolean } shiftKey
      */
     ,
     event("item-click", { cancelable: true, bubbles: true })

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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.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-strict.js\";\nimport { isTabNext, isTabPrevious, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./BreadcrumbsTemplate.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport {\n  AVAILABLE_VALUES,\n  BREADCRUMBS_ARIA_LABEL,\n  BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\ntype 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 \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-breadcrumbs\",\n  renderer: jsxRenderer,\n  styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n  template: BreadcrumbsTemplate,\n  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n    \"open\": void,\n    \"close\": void,\n  };\n  /**\n   * Defines how many breadcrumb items should be visible\n   *\n   * @default 3\n   * @public\n   */\n  @property({ type: Number })\n    showItems: number = 3;\n\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 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  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _responsivePopover?: UDExDropdown;\n  _itemNavigation?: ItemNavigation;\n  _shouldFocusFirstVisibleItem!: boolean;\n  _rootClass: string;\n\n  constructor() {\n    super();\n    this._rootClass = \"udex-breadcrumbs\";\n  }\n\n  onBeforeRendering(): void {\n    this._preprocessItems();\n  }\n\n  onAfterRendering(): void {\n    this._responsivePopover = this._getResponsePopover();\n    this._initItemNavigation();\n    this._dropdownArrowLink.forcedTabIndex = \"0\";\n    this._handleOutsideClick();\n\n    if (this._shouldFocusFirstVisibleItem) {\n      this._getFocusableItems()[1].focus();\n      this._shouldFocusFirstVisibleItem = false;\n    }\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  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n  }\n\n  _getFocusableItems(): Array<UDExLink> {\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  _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.fireDecoratorEvent(\"item-click\", { item })) {\n      window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n      this._toggleDropdown();\n    }\n\n    this.setDropdownCloseState();\n  }\n\n  _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n    const link = e.target as UDExLink,\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.fireDecoratorEvent(\"item-click\", {\n      item,\n      altKey,\n      ctrlKey,\n      metaKey,\n      shiftKey,\n    })) {\n      e.preventDefault();\n    }\n\n    this.setDropdownCloseState();\n  }\n\n  _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n    return !item.hidden;\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownOpened = true;\n    this.fireDecoratorEvent(\"open\");\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownOpened = false;\n    this.fireDecoratorEvent(\"close\");\n  }\n\n  _toggleDropdown(): void {\n    if (this._responsivePopover) {\n      this._responsivePopover.open = !this._responsivePopover.open;\n      this._dropdownOpened = !this._dropdownOpened;\n    }\n  }\n\n  _onfocusin(e: FocusEvent): void {\n    const currentItem = e.target as UDExLink;\n\n    this._itemNavigation?.setCurrentItem(currentItem);\n  }\n\n  _handleKeydown(e: KeyboardEvent): void {\n    const itemIndex = (e.target as HTMLElement).getAttribute(\"data-index\");\n    const isLastItem = itemIndex === (this.items.length - 2).toString();\n    const isFirstItem = itemIndex === \"0\";\n\n    if (isTabNext(e) && isLastItem) {\n      this._shouldFocusFirstVisibleItem = true;\n      this._toggleDropdown();\n      return;\n    }\n\n    if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {\n      this._toggleDropdown();\n    }\n  }\n\n  _handleOutsideClick(): void {\n    document.addEventListener(\"mousedown\", (e: Event) => {\n      if (e.target !== this) {\n        this.setDropdownCloseState();\n      }\n    });\n  }\n\n  setDropdownCloseState(): void {\n    if (this._responsivePopover) {\n      this._dropdownOpened = false;\n    }\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownArrowLink(): UDExLink {\n    return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n  }\n\n  /**\n   * Getter for the list of links corresponding to the abstract breadcrumb items\n   */\n  get _links(): Array<UDExLink> {\n    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-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    const rootClass = \"udex-breadcrumbs\";\n    return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;\n  }\n\n  get _breadcrumbsAccessibleNameText(): 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  get _dropdownAccessibleNameText(): string {\n    return UDExBreadcrumbs.i18nBundle.getText(AVAILABLE_VALUES);\n  }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\nexport type { UDExBreadcrumbsItemClickEventDetail };\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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.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-strict.js\";\nimport { isTabNext, isTabPrevious, isEscape } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport type { LinkClickEventDetail } from \"@ui5/webcomponents/dist/Link.js\";\nimport NavigationMode from \"@ui5/webcomponents-base/dist/types/NavigationMode.js\";\nimport ItemNavigation from \"@ui5/webcomponents-base/dist/delegate/ItemNavigation.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UI5BreadcrumbsCss from \"@ui5/webcomponents/dist/generated/themes/Breadcrumbs.css.js\";\nimport \"@ui5/webcomponents-icons/dist/slim-arrow-down.js\";\nimport \"@ui5/webcomponents-icons/dist/home.js\";\nimport BreadcrumbsTemplate from \"./BreadcrumbsTemplate.js\";\nimport UDExBreadcrumbsItem from \"./BreadcrumbsItem.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExLink from \"./Link.js\";\nimport {\n  AVAILABLE_VALUES,\n  BREADCRUMBS_ARIA_LABEL,\n  BREADCRUMBS_OVERFLOW_ARIA_LABEL,\n} from \"./generated/i18n/i18n-defaults.js\";\n\n// Styles\nimport BreadcrumbsCss from \"./generated/themes/Breadcrumbs.css.js\";\nimport BreadcrumbsPopoverCss from \"./generated/themes/BreadcrumbsPopover.css.js\";\n\ntype 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 \"@sapudex/web-components/dist/Breadcrumbs.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-breadcrumbs\",\n  renderer: jsxRenderer,\n  styles: [UI5BreadcrumbsCss, BreadcrumbsCss, BreadcrumbsPopoverCss],\n  template: BreadcrumbsTemplate,\n  dependencies: [UDExBreadcrumbsItem, UDExLink, UDExDropdown, UI5Icon],\n})\n/**\n * @public\n * @param { UDExBreadcrumbsItem } item The clicked breadcrumb item\n * @param { boolean } altKey\n * @param { boolean } ctrlKey\n * @param { boolean } metaKey\n * @param { boolean } shiftKey\n */\n@event(\"item-click\", { cancelable: true, bubbles: true })\n\n/**\n * Fired after the dropdown is opened.\n *\n * @public\n */\n@event(\"open\", { bubbles: true })\n\n/**\n * Fired after the dropdown is closed.\n *\n * @public\n */\n@event(\"close\", { bubbles: true })\n\nclass UDExBreadcrumbs extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExBreadcrumbsItemClickEventDetail,\n    \"open\": void,\n    \"close\": void,\n  };\n  /**\n   * Defines how many breadcrumb items should be visible\n   *\n   * @default 3\n   * @public\n   */\n  @property({ type: Number })\n    showItems: number = 3;\n\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 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  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _responsivePopover?: UDExDropdown;\n  _itemNavigation?: ItemNavigation;\n  _shouldFocusFirstVisibleItem!: boolean;\n  _rootClass: string;\n\n  constructor() {\n    super();\n    this._rootClass = \"udex-breadcrumbs\";\n  }\n\n  onBeforeRendering(): void {\n    this._preprocessItems();\n  }\n\n  onAfterRendering(): void {\n    this._responsivePopover = this._getResponsePopover();\n    this._initItemNavigation();\n    this._dropdownArrowLink.forcedTabIndex = \"0\";\n    this._handleOutsideClick();\n\n    if (this._shouldFocusFirstVisibleItem) {\n      this._getFocusableItems()[1].focus();\n      this._shouldFocusFirstVisibleItem = false;\n    }\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  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-breadcrumbs__popover`)!;\n  }\n\n  _getFocusableItems(): Array<UDExLink> {\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  _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.fireDecoratorEvent(\"item-click\", { item })) {\n      window.open(item.href, item.target || \"_self\", \"noopener,noreferrer\");\n      this._toggleDropdown();\n    }\n\n    this.setDropdownCloseState();\n  }\n\n  _onLinkPress(e: CustomEvent<LinkClickEventDetail>): void {\n    const link = e.target as UDExLink,\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.fireDecoratorEvent(\"item-click\", {\n      item,\n      altKey,\n      ctrlKey,\n      metaKey,\n      shiftKey,\n    })) {\n      e.preventDefault();\n    }\n\n    this.setDropdownCloseState();\n  }\n\n  _isItemVisible(item: UDExBreadcrumbsItem): boolean {\n    return !item.hidden;\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownOpened = true;\n    this.fireDecoratorEvent(\"open\");\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownOpened = false;\n    this.fireDecoratorEvent(\"close\");\n  }\n\n  _toggleDropdown(): void {\n    if (this._responsivePopover) {\n      this._responsivePopover.open = !this._responsivePopover.open;\n      this._dropdownOpened = !this._dropdownOpened;\n    }\n  }\n\n  _onfocusin(e: FocusEvent): void {\n    const currentItem = e.target as UDExLink;\n\n    this._itemNavigation?.setCurrentItem(currentItem);\n  }\n\n  _handleKeydown(e: KeyboardEvent): void {\n    const itemIndex = (e.target as HTMLElement).getAttribute(\"data-index\");\n    const isLastItem = itemIndex === (this.items.length - 2).toString();\n    const isFirstItem = itemIndex === \"0\";\n\n    if (isTabNext(e) && isLastItem) {\n      this._shouldFocusFirstVisibleItem = true;\n      this._toggleDropdown();\n      return;\n    }\n\n    if ((isTabNext(e) && isLastItem) || (isTabPrevious(e) && isFirstItem) || isEscape(e)) {\n      this._toggleDropdown();\n    }\n  }\n\n  _handleOutsideClick(): void {\n    document.addEventListener(\"mousedown\", (e: Event) => {\n      if (e.target !== this) {\n        this.setDropdownCloseState();\n      }\n    });\n  }\n\n  setDropdownCloseState(): void {\n    if (this._responsivePopover) {\n      this._dropdownOpened = false;\n    }\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownArrowLink(): UDExLink {\n    return this.shadowRoot!.querySelector<UDExLink>(\".udex-breadcrumbs__trigger\")!;\n  }\n\n  /**\n   * Getter for the list of links corresponding to the abstract breadcrumb items\n   */\n  get _links(): Array<UDExLink> {\n    return Array.from(this.shadowRoot!.querySelectorAll<UDExLink>(\".udex-breadcrumbs__link-wrapper [udex-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    const rootClass = \"udex-breadcrumbs\";\n    return this._dropdownOpened ? `${rootClass} ${rootClass}__trigger--opened` : rootClass;\n  }\n\n  get _breadcrumbsAccessibleNameText(): 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  get _dropdownAccessibleNameText(): string {\n    return UDExBreadcrumbs.i18nBundle.getText(AVAILABLE_VALUES);\n  }\n}\n\nUDExBreadcrumbs.define();\n\nexport default UDExBreadcrumbs;\nexport type { UDExBreadcrumbsItemClickEventDetail };\n"]}

package/dist/ContactItem.js

@@ -84,6 +84,8 @@ UDExContactItem = __decorate([
      * Fires when item is clicked
      *
      * @public
+     * @param {Event} originalEvent the original event object
+     * @param {UDExContactItem} item the clicked item
      */
     ,
     event("item-click", {

package/dist/ContactItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactItem.js","sourceRoot":"","sources":["../src/ContactItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,4CAA4C,CAAC;AAC9D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,wCAAwC,CAAC;AAEhD,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAOnE;;;;;;;;;;;;;;;;;GAiBG;AAkBH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6BE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;IAuB/C,CAAC;IAZC,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;QACtD,CAAC;IACH,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAQf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACO;AAQhC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACkB;AAS3C;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDACd;AA5CpB,eAAe;IAjBpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC;IAEF;;;;OAIG;;IACF,KAAK,CAAC,YAAY,EAAE;QACnB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC;GAEI,eAAe,CA0DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ContactItemTemplate from \"./ContactItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport UDExContactItemIcon from \"./types/ContactItemIcon.js\";\nimport \"@ui5/webcomponents-icons/dist/headset.js\";\nimport \"@ui5/webcomponents-icons/dist/discussion-2.js\";\nimport \"@ui5/webcomponents-icons/dist/email.js\";\n\n// Styles\nimport ContactItemCss from \"./generated/themes/ContactItem.css.js\";\n\ntype UDExContactItemClickEventDetail = {\n  originalEvent: Event,\n  item: UDExContactItem,\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-contact-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-contact-item\n * @public\n */\n@customElement({\n  tag: \"udex-contact-item\",\n  renderer: jsxRenderer,\n  styles: ContactItemCss,\n  template: ContactItemTemplate,\n})\n\n/**\n * Fires when item is clicked\n *\n * @public\n */\n@event(\"item-click\", {\n  bubbles: true,\n  cancelable: true,\n})\n\nclass UDExContactItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExContactItemClickEventDetail,\n  };\n\n  /**\n   * Defines the label for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the href for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Defines the icon name for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon?: `${UDExContactItemIcon}`;\n\n  /**\n   * Defines target for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Slot for the item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _fireItemClickEvent(e: Event): void {\n    this.fireDecoratorEvent(\"item-click\", {\n      item: this,\n      originalEvent: e,\n    });\n  }\n\n  get _iconName(): string | undefined {\n    if (this.icon) {\n      return UDExContactItemIcon[this.icon].toLowerCase();\n    }\n  }\n}\n\nUDExContactItem.define();\n\nexport default UDExContactItem;\nexport type { UDExContactItemClickEventDetail };\n"]}
+{"version":3,"file":"ContactItem.js","sourceRoot":"","sources":["../src/ContactItem.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,IAAI,MAAM,4CAA4C,CAAC;AAC9D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,4BAA4B,CAAC;AAC7D,OAAO,0CAA0C,CAAC;AAClD,OAAO,+CAA+C,CAAC;AACvD,OAAO,wCAAwC,CAAC;AAEhD,SAAS;AACT,OAAO,cAAc,MAAM,uCAAuC,CAAC;AAOnE;;;;;;;;;;;;;;;;;GAiBG;AAoBH,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,UAAU;IAAxC;;QA6BE;;;;WAIG;QAED,WAAM,GAAoB,UAAU,CAAC,KAAK,CAAC;IAuB/C,CAAC;IAZC,mBAAmB,CAAC,CAAQ;QAC1B,IAAI,CAAC,kBAAkB,CAAC,YAAY,EAAE;YACpC,IAAI,EAAE,IAAI;YACV,aAAa,EAAE,CAAC;SACjB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,SAAS;QACX,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,OAAO,mBAAmB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,EAAE,CAAC;QACtD,CAAC;IACH,CAAC;CACF,CAAA;AA/CG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACV;AAQf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACX;AAQd;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACO;AAQhC;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACkB;AAS3C;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;gDACd;AA5CpB,eAAe;IAnBpB,aAAa,CAAC;QACb,GAAG,EAAE,mBAAmB;QACxB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,cAAc;QACtB,QAAQ,EAAE,mBAAmB;KAC9B,CAAC;IAEF;;;;;;OAMG;;IACF,KAAK,CAAC,YAAY,EAAE;QACnB,OAAO,EAAE,IAAI;QACb,UAAU,EAAE,IAAI;KACjB,CAAC;GAEI,eAAe,CA0DpB;AAED,eAAe,CAAC,MAAM,EAAE,CAAC;AAEzB,eAAe,eAAe,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport slot from \"@ui5/webcomponents-base/decorators/slot.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport ContactItemTemplate from \"./ContactItemTemplate.js\";\nimport { UDExTarget } from \"./types/common.js\";\nimport UDExContactItemIcon from \"./types/ContactItemIcon.js\";\nimport \"@ui5/webcomponents-icons/dist/headset.js\";\nimport \"@ui5/webcomponents-icons/dist/discussion-2.js\";\nimport \"@ui5/webcomponents-icons/dist/email.js\";\n\n// Styles\nimport ContactItemCss from \"./generated/themes/ContactItem.css.js\";\n\ntype UDExContactItemClickEventDetail = {\n  originalEvent: Event,\n  item: UDExContactItem,\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-contact-item</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/ContactItem.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-contact-item\n * @public\n */\n@customElement({\n  tag: \"udex-contact-item\",\n  renderer: jsxRenderer,\n  styles: ContactItemCss,\n  template: ContactItemTemplate,\n})\n\n/**\n * Fires when item is clicked\n *\n * @public\n * @param {Event} originalEvent the original event object\n * @param {UDExContactItem} item the clicked item\n */\n@event(\"item-click\", {\n  bubbles: true,\n  cancelable: true,\n})\n\nclass UDExContactItem extends UI5Element {\n  eventDetails!: {\n    \"item-click\": UDExContactItemClickEventDetail,\n  };\n\n  /**\n   * Defines the label for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    label!: string;\n\n  /**\n   * Defines the href for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    href!: string;\n\n  /**\n   * Defines the icon name for the item.\n   *\n   * @public\n   */\n  @property({ type: String })\n    icon?: `${UDExContactItemIcon}`;\n\n  /**\n   * Defines target for the item\n   *\n   * @public\n   */\n  @property({ type: String })\n    target: `${UDExTarget}` = UDExTarget._self;\n\n  /**\n   * Slot for the item content.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    content!: Array<Node>;\n\n  _fireItemClickEvent(e: Event): void {\n    this.fireDecoratorEvent(\"item-click\", {\n      item: this,\n      originalEvent: e,\n    });\n  }\n\n  get _iconName(): string | undefined {\n    if (this.icon) {\n      return UDExContactItemIcon[this.icon].toLowerCase();\n    }\n  }\n}\n\nUDExContactItem.define();\n\nexport default UDExContactItem;\nexport type { UDExContactItemClickEventDetail };\n"]}