@sapudex/web-components 2.3.0 → 2.4.1

package/.eslintignore

@@ -2,9 +2,12 @@
 
 config
 dist
+instrumented
+coverage
 test
 src/generated
 jsdoc-dist
+.nyc_output
 .eslintrc.cjs
 package-scripts.cjs
 bundle.esm.js

package/bundle.esm.js

@@ -32,6 +32,8 @@ import "./dist/BreadcrumbsItem.js";
 import "./dist/Button.js";
 import "./dist/Carousel.js";
 import "./dist/Checkbox.js";
+import "./dist/Contact.js";
+import "./dist/ContactItem.js";
 import "./dist/ControlButton.js";
 import "./dist/CountrySelector.js";
 import "./dist/DatePicker.js";

package/cypress/fixtures/contact-numbers.ts

@@ -0,0 +1,10 @@
+export const contactNumbers = [
+  {
+    "country":"Local Country Name",
+    "number":"+1-800-872-1727"
+  },
+  {
+    "country":"United States",
+    "number":"+1-800-872-1727"
+  }
+];

package/cypress/specs/Accordion.cy.tsx

@@ -18,6 +18,15 @@ const defaultAccordion = <UDExAccordion headline="Test headline" id="accordionCo
   </UDExAccordionItem>
 </UDExAccordion>
 
+const simpleAccordion = <UDExAccordion hide-expand-button id="accordionComponent">
+  <UDExAccordionItem label="Some label for item 1">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+    <UDExAccordionItem label="Some label for item 2">
+      <div>some content<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet aperiam aut eum ipsum natus necessitatibus neque officiis repellendus totam voluptatum!</p></div>
+  </UDExAccordionItem>
+</UDExAccordion>
+
 describe("Accordion", () => {
   beforeEach(() => {
     cy.mount(defaultAccordion)
@@ -138,4 +147,19 @@ describe("Accordion", () => {
     cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").click()
     cy.get("@toggleItems").should("have.been.called")
   });
+});
+
+describe("Accordion - simplified", () => {
+  beforeEach(() => {
+    cy.mount(simpleAccordion)
+  })
+
+  it("does not render empty headline", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__headline").should("not.exist");
+  });
+
+
+  it("hide expand all button", () => {
+    cy.get("[udex-accordion]").shadow().find(".udex-accordion__btn").should("not.exist");
+  });
 });

package/cypress/specs/Contact.cy.tsx

@@ -0,0 +1,92 @@
+import { UDExContact, UDExContactItem } from "../support/component-imports.js";
+import { contactNumbers } from "../fixtures/contact-numbers.js";
+
+const contactComponent = <UDExContact
+    button-text="Contact us"
+    local-country-numbers-link="local-country-numbers-link-href"
+    contact-numbers={JSON.stringify(contactNumbers)}
+  >
+  <UDExContactItem label="Call me now" href="www.sap.com" icon="Headset">SAP can call you to discuss any questions you have.</UDExContactItem>
+  <UDExContactItem label="Chat now" icon="Discussion-2">Get live help and chat with an SAP representative.</UDExContactItem>
+  <UDExContactItem label="Contact us" href="www.sap.com" icon="Email">E-mail us with comments, questions or feedback.</UDExContactItem>
+</UDExContact>
+
+describe("Contact component", () => {
+  beforeEach(() => {
+    cy.mount(contactComponent)
+  });
+
+  it("component is correctly rendered", () => {
+    cy.get("[udex-contact]").shadow().find(".udex-contact").should("be.visible");
+  });
+
+  it("renders the text for component", () => {
+    cy.get("[udex-contact]").shadow().find("[udex-button]").should("have.text", "Contact us");
+  });
+
+  it("test if the popover is closed after pressing \"Escape\" key", () => {
+    cy.get("[udex-contact]").shadow().find(".udex-contact__button").click().realPress("Escape");
+    cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("not.visible");
+  });
+
+  describe("Desktop tests", () => {
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").click();
+    });
+
+    it("renders the popover after clicking the button opener", () => {
+      cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("be.visible");
+    });
+
+    it("renders the popover after clicking the button opener", () => {
+      cy.get("[udex-contact]").shadow().find("[ui5-responsive-popover]").should("be.visible");
+    });
+
+    it("renders right amount of contact items", () => {
+      cy.get("[udex-contact]").find("udex-contact-item").should("have.length", 3);
+    });
+
+    it("renders the title of phone section", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__call-us-title").should("have.text", "Call us today!");
+    });
+
+    it("renders the text of complete list section", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__complete-list").should("have.text", "Complete list of local country numbers");
+    });
+
+    it("renders the href of complete list link", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__local-country-link").should("have.attr", "href", "local-country-numbers-link-href");
+    });
+
+    it("renders the list of phone numbers", () => {
+      const numbers = cy.get("[udex-contact]").shadow().find(".udex-contact__number-wrapper");
+      numbers.each(($item, index) => {
+        const currentContactNumber = contactNumbers[index];
+        const country = $item.find(".udex-contact__country").text();
+        const number = $item.find(".udex-contact__number").text();
+        expect(country).to.include(currentContactNumber.country);
+        expect(number).to.include(currentContactNumber.number);
+      })
+    });
+  });
+
+  describe("Mobile tests", () => {
+    beforeEach(() => {
+      cy.simulateDevice();
+    });
+
+    it("renders the close mobile button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").click();
+      cy.get("[udex-contact]").shadow().find(".udex-contact__close-btn").should("be.visible");
+    });
+
+    it("renders the tooltip for the opener button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").should("have.attr", "tooltip", "Contact us");
+    });
+
+    it("renders the accessibleName for the opener button", () => {
+      cy.get("[udex-contact]").shadow().find(".udex-contact__button").should("have.attr", "accessible-name", "Contact us");
+    });
+  });
+});

package/cypress/specs/ContactItem.cy.tsx

@@ -0,0 +1,56 @@
+import { UDExContactItem } from "../support/component-imports.js";
+
+const contactItemComponent = <UDExContactItem label="Call me now" href="www.sap.com" icon="Headset">SAP can call you to discuss any questions you have.</UDExContactItem>
+
+describe("Contact Item component", () => {
+  beforeEach(() => {
+    cy.mount(contactItemComponent)
+  })
+
+  it("component is correctly rendered", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item").should("be.visible");
+  });
+
+  it("renders the text for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__description").should("be.visible");
+  });
+
+  it("renders the link text for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").should("have.text", "Call me now");
+  });
+
+  it("renders the href for the link", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").should("have.attr", "href", "www.sap.com");
+  });
+
+  it("renders the icon for the item", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__icon").should("be.visible");
+  });
+
+  it("renders the name for the icon", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__icon").should("have.attr", "name", "headset");
+  });
+
+  it("test the contact item has custom \"item-click\" event with mouse click on the link", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link")
+      .then($link => {
+        $link.get(0).addEventListener("item-click", event => {
+          expect(event.type).to.equal("item-click");
+        });
+      });
+
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").click();
+  });
+
+  it("tests the \"item-click\" event is prevented when prevent default is called", () => {
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link")
+      .then($link => {
+        $link.get(0).addEventListener("item-click", event => {
+          event.preventDefault();
+        });
+      });
+
+    cy.get("[udex-contact-item]").shadow().find(".udex-contact-item__link").click();
+    cy.url().should("not.include", "www.sap.com");
+  });
+});

package/cypress/support/commands.ts

@@ -36,7 +36,8 @@
 //   }
 // }
 
-import { mount } from '@ui5/cypress-ct-ui5-webc'
+import { mount } from '@ui5/cypress-ct-ui5-webc';
+import { internals, isPhone } from "@ui5/webcomponents-base/dist/Device.js";
 import "cypress-real-events";
 
 const realEventCmdCallback = (originalFn: any, element: any, ...args: any) => {
@@ -52,6 +53,14 @@ const realEventCmdCallback = (originalFn: any, element: any, ...args: any) => {
 		});
 };
 
+const deviceFuncForStub: Record<SimulationDevices, keyof typeof internals> = {
+  phone: "_isPhone",
+};
+
+const deviceName: Record<SimulationDevices, Cypress.ViewportPreset> = {
+  phone: "iphone-x",
+};
+
 const commands = [
 	"realClick",
 	"realHover",
@@ -66,12 +75,32 @@ commands.forEach(cmd => {
 	Cypress.Commands.overwrite(cmd as any, realEventCmdCallback)
 });
 
+type SimulationDevices = "phone"
+
 declare global {
 	namespace Cypress {
 		interface Chainable {
 			mount: typeof mount;
+      simulateDevice(device?: SimulationDevices): Chainable<void>
 		}
 	}
 }
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add('mount', mount);
+
+Cypress.Commands.add("simulateDevice", (device: SimulationDevices = "phone") => {
+  cy.stub(internals, deviceFuncForStub[device])
+    .callsFake(() => {
+      return true;
+    });
+
+  if (device === "phone") {
+    cy.stub(internals, "windows").value(false);
+  }
+
+  cy.viewport(deviceName[device]);
+
+  cy.wrap({ isPhone })
+    .invoke("isPhone")
+    .should("be.true");
+});

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

@@ -41,6 +41,8 @@ import UDExRatingIndicator from "../../instrumented/RatingIndicator.js";
 import UDExSelectBoxSelectAll from "../../instrumented/SelectBoxSelectAll.js";
 import UDExSelectBoxGroupHeader from "../../instrumented/SelectBoxGroupHeader.js";
 import UDExSelectBoxItem from "../../instrumented/SelectBoxItem.js";
+import UDExContact from "../../instrumented/Contact.js";
+import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExEventRibbon from "../../instrumented/EventRibbon.js";
 
 export {
@@ -52,6 +54,8 @@ export {
   UDExBreadcrumbs,
   UDExBreadcrumbsItem,
   UDExButton,
+  UDExContact,
+  UDExContactItem,
   UDExCountrySelector,
   UDExEventRibbon,
   UDExFooter,

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

@@ -41,6 +41,8 @@ import UDExRatingIndicator from "../../src/RatingIndicator.js";
 import UDExSelectBoxSelectAll from "../../src/SelectBoxSelectAll.js";
 import UDExSelectBoxGroupHeader from "../../src/SelectBoxGroupHeader.js";
 import UDExSelectBoxItem from "../../src/SelectBoxItem.js";
+import UDExContact from "../../instrumented/Contact.js";
+import UDExContactItem from "../../instrumented/ContactItem.js";
 import UDExEventRibbon from "../../src/EventRibbon.js";
 
 export {
@@ -52,6 +54,8 @@ export {
   UDExBreadcrumbs,
   UDExBreadcrumbsItem,
   UDExButton,
+  UDExContact,
+  UDExContactItem,
   UDExCountrySelector,
   UDExEventRibbon,
   UDExFooter,

package/dist/Accordion.d.ts

@@ -34,6 +34,13 @@ declare class UDExAccordion extends UI5Element {
      * @private
      */
     _allExpanded: boolean;
+    /**
+     * Defines if expandAll button should be displayed.
+     *
+     * @default false
+     * @public
+     */
+    hideExpandButton: boolean;
     /**
      * Defines direction of the accordion component.
      *
@@ -62,7 +69,6 @@ declare class UDExAccordion extends UI5Element {
     get items(): {
         item: HTMLElement;
     }[];
-    get headlineText(): string;
     toggleAllHandler(e: Event): void;
     toggleOpenItems(isOpen: boolean): void;
     toggleKeyAllHandler(e: KeyboardEvent): void;

package/dist/Accordion.js

@@ -59,9 +59,6 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
             };
         });
     }
-    get headlineText() {
-        return this.headline ? this.headline : "Default headline";
-    }
     toggleAllHandler(e) {
         e.preventDefault();
         this._allExpanded = !this._allExpanded;
@@ -125,6 +122,9 @@ let UDExAccordion = UDExAccordion_1 = class UDExAccordion extends UI5Element {
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExAccordion.prototype, "_allExpanded", void 0);
+__decorate([
+    property({ type: Boolean })
+], UDExAccordion.prototype, "hideExpandButton", void 0);
 __decorate([
     property({ type: String })
 ], UDExAccordion.prototype, "_direction", void 0);

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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter,\n  isSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./generated/templates/AccordionTemplate.lit.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExButton from \"./Button.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\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: litRender,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n  dependencies: [UDExButton],\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 })\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String }) _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String }) headline!: string;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true }) _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  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get isExpanded(): boolean {\n    return this._allExpanded;\n  }\n\n  get items(): {item: HTMLElement}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\n  }\n\n  get headlineText(): string {\n    return this.headline ? this.headline : \"Default headline\";\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 (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n    const len = this._items.length;\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    switch (e.key) {\n    case \"Home\":\n      focusOnItem(0);\n      break;\n    case \"End\":\n      focusOnItem(len - 1);\n      break;\n    case \"ArrowUp\":\n      if (this._activeItemIndex > 0) {\n        focusOnItem(this._activeItemIndex - 1);\n      } else if (this._activeItemIndex === 0) {\n        focusOnItem(len - 1);\n      }\n      break;\n    case \"ArrowDown\":\n      if (this._activeItemIndex < len - 1) {\n        focusOnItem(this._activeItemIndex + 1);\n      } else if (this._activeItemIndex === len - 1) {\n        focusOnItem(0);\n      }\n      break;\n    default:\n      break;\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\nUDExAccordion.define();\n\nexport default UDExAccordion;\n"]}
+{"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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents-icons/dist/feeder-arrow.js\";\nimport {\n  isEnter,\n  isSpace,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport AccordionTemplate from \"./generated/templates/AccordionTemplate.lit.js\";\nimport { COLLAPSE_ALL, EXPAND_ALL } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExButton from \"./Button.js\";\n\n// Styles\nimport AccordionCss from \"./generated/themes/Accordion.css.js\";\nimport type UDExAccordionItem from \"./AccordionItem.js\";\n\ntype UDExAccordionToggleItemsEventDetail = {\n  isOpen: boolean\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: litRender,\n  styles: AccordionCss,\n  template: AccordionTemplate,\n  dependencies: [UDExButton],\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 })\nclass UDExAccordion extends UI5Element {\n  eventDetails!: {\n    \"toggle-items\": UDExAccordionToggleItemsEventDetail,\n  };\n  /**\n   * Used internally to store expand/collapse button state.\n   *\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true }) _allExpanded!: boolean;\n  /**\n   * Defines if expandAll button should be displayed.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean }) hideExpandButton!: boolean;\n\n  /**\n   * Defines direction of the accordion component.\n   *\n   * @private\n   */\n  @property({ type: String }) _direction?: string;\n\n  /**\n   * Defines the headline text of the accordion component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String }) headline!: string;\n\n  /**\n   * Slot for accordion items.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true, individualSlots: true }) _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  get toggleAllText(): string {\n    return this._allExpanded\n      ? UDExAccordion.i18nBundle.getText(COLLAPSE_ALL)\n      : UDExAccordion.i18nBundle.getText(EXPAND_ALL);\n  }\n\n  get isExpanded(): boolean {\n    return this._allExpanded;\n  }\n\n  get items(): {item: HTMLElement}[] {\n    return this._items.map(el => {\n      return {\n        item: el,\n      };\n    });\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 (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n    const len = this._items.length;\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    switch (e.key) {\n    case \"Home\":\n      focusOnItem(0);\n      break;\n    case \"End\":\n      focusOnItem(len - 1);\n      break;\n    case \"ArrowUp\":\n      if (this._activeItemIndex > 0) {\n        focusOnItem(this._activeItemIndex - 1);\n      } else if (this._activeItemIndex === 0) {\n        focusOnItem(len - 1);\n      }\n      break;\n    case \"ArrowDown\":\n      if (this._activeItemIndex < len - 1) {\n        focusOnItem(this._activeItemIndex + 1);\n      } else if (this._activeItemIndex === len - 1) {\n        focusOnItem(0);\n      }\n      break;\n    default:\n      break;\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\nUDExAccordion.define();\n\nexport default UDExAccordion;\n"]}

package/dist/Assets.js

@@ -6,4 +6,35 @@ import { registerCustomThemePropertiesLoader } from "@ui5/webcomponents-base/dis
 import variablesOverwrite from "./AssetsVariables.js";
 const customThemeLoader = () => Promise.resolve(variablesOverwrite);
 registerCustomThemePropertiesLoader("@ui5/webcomponents", "sap_glow", customThemeLoader);
+(function checkThemeCSSLink() {
+    if (typeof document === "undefined") {
+        return;
+    }
+    const runCheck = () => {
+        const cssLoaded = Array.from(document.styleSheets).some(sheet => {
+            try {
+                if (sheet.href && sheet.href.includes("css_variables.css")) {
+                    return true;
+                }
+                return Array.from(sheet.cssRules || []).some(rule => rule.cssText.includes(".sapThemeMetaData-Base-baseLib"));
+            }
+            catch {
+                return false;
+            }
+        });
+        if (!cssLoaded) {
+            const msg = `Required theme CSS not found.
+Please add:
+<link rel="stylesheet" href="path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css">
+or import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css'`;
+            console.warn(msg);
+        }
+    };
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", runCheck);
+    }
+    else {
+        runCheck();
+    }
+})();
 //# sourceMappingURL=Assets.js.map

package/dist/Assets.js.map

@@ -1 +1 @@
-{"version":3,"file":"Assets.js","sourceRoot":"","sources":["../src/Assets.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC,CAAC,UAAU;AAE9D,oCAAoC;AACpC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,mCAAmC,EAAE,MAAM,+CAA+C,CAAC;AACpG,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAEpE,mCAAmC,CAAC,oBAAoB,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC","sourcesContent":["import \"@ui5/webcomponents-theming/dist/Assets.js\"; // Theming\n\n// own web-components package assets\nimport \"./generated/json-imports/Themes.js\";\nimport \"./generated/json-imports/i18n.js\";\n\nimport { registerCustomThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/AssetRegistry.js\";\nimport variablesOverwrite from \"./AssetsVariables.js\";\n\nconst customThemeLoader = () => Promise.resolve(variablesOverwrite);\n\nregisterCustomThemePropertiesLoader(\"@ui5/webcomponents\", \"sap_glow\", customThemeLoader);\n"]}
+{"version":3,"file":"Assets.js","sourceRoot":"","sources":["../src/Assets.ts"],"names":[],"mappings":"AAAA,OAAO,2CAA2C,CAAC,CAAC,UAAU;AAE9D,oCAAoC;AACpC,OAAO,oCAAoC,CAAC;AAC5C,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAAE,mCAAmC,EAAE,MAAM,+CAA+C,CAAC;AACpG,OAAO,kBAAkB,MAAM,sBAAsB,CAAC;AAEtD,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAEpE,mCAAmC,CAAC,oBAAoB,EAAE,UAAU,EAAE,iBAAiB,CAAC,CAAC;AAEzF,CAAC,SAAS,iBAAiB;IACzB,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;QAAC,OAAO;IAAC,CAAC;IAEhD,MAAM,QAAQ,GAAG,GAAG,EAAE;QACpB,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;YAC9D,IAAI,CAAC;gBACH,IAAI,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC;oBAAC,OAAO,IAAI,CAAC;gBAAC,CAAC;gBAC5E,OAAO,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,gCAAgC,CAAC,CAAC,CAAC;YAChH,CAAC;YAAC,MAAM,CAAC;gBACP,OAAO,KAAK,CAAC;YACf,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,MAAM,GAAG,GAAG;;;0EAGwD,CAAC;YACrE,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpB,CAAC;IACH,CAAC,CAAC;IAEF,IAAI,QAAQ,CAAC,UAAU,KAAK,SAAS,EAAE,CAAC;QACtC,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,QAAQ,CAAC,CAAC;IAC1D,CAAC;SAAM,CAAC;QACN,QAAQ,EAAE,CAAC;IACb,CAAC;AACH,CAAC,CAAC,EAAE,CAAC","sourcesContent":["import \"@ui5/webcomponents-theming/dist/Assets.js\"; // Theming\n\n// own web-components package assets\nimport \"./generated/json-imports/Themes.js\";\nimport \"./generated/json-imports/i18n.js\";\n\nimport { registerCustomThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/AssetRegistry.js\";\nimport variablesOverwrite from \"./AssetsVariables.js\";\n\nconst customThemeLoader = () => Promise.resolve(variablesOverwrite);\n\nregisterCustomThemePropertiesLoader(\"@ui5/webcomponents\", \"sap_glow\", customThemeLoader);\n\n(function checkThemeCSSLink() {\n  if (typeof document === \"undefined\") { return; }\n\n  const runCheck = () => {\n    const cssLoaded = Array.from(document.styleSheets).some(sheet => {\n      try {\n        if (sheet.href && sheet.href.includes(\"css_variables.css\")) { return true; }\n        return Array.from(sheet.cssRules || []).some(rule => rule.cssText.includes(\".sapThemeMetaData-Base-baseLib\"));\n      } catch {\n        return false;\n      }\n    });\n\n    if (!cssLoaded) {\n      const msg = `Required theme CSS not found.\nPlease add:\n<link rel=\"stylesheet\" href=\"path/to/@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css\">\nor import '@sapudex/design-tokens/dist/themes/sap_glow/css_variables.css'`;\n      console.warn(msg);\n    }\n  };\n\n  if (document.readyState === \"loading\") {\n    document.addEventListener(\"DOMContentLoaded\", runCheck);\n  } else {\n    runCheck();\n  }\n})();\n"]}

package/dist/AssetsVariables.js

@@ -24,8 +24,13 @@ const variablesOverwrite = `:root {
   ${getScopedVarName("--_ui5_calendar_header_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_left_right_padding")}: 0;
   ${getScopedVarName("--_ui5_calendar_top_bottom_padding")}: 0;
+  
+  /* Avatar */
+  [udex-avatar].dark {
+    ${getScopedVarName("--_ui5_avatar_outline")}: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle)  var(--udexColorNeutralWhite, #FFFFFF);
+  }
 
-  udex-search {
+  [udex-search] {
     ${getScopedVarName("--_ui5_button_pressed_focused_border_color")}: transparent;
   }
 

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;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,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,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;;;MAGpD,gBAAgB,CAAC,4CAA4C,CAAC;;;;;;;MAO9D,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\";\n\nconst variablesOverwrite = `: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_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  udex-search {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\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;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,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,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;;;;;;;MAO9D,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\";\n\nconst variablesOverwrite = `: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_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  .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/Contact.d.ts

@@ -0,0 +1,102 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UDExContactItem from "./ContactItem.js";
+import type UI5ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import type I18nBundle from "@ui5/webcomponents-base/i18nBundle.js";
+export type ContactNumber = {
+    number: string;
+    country: string;
+};
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>udex-contact</code>
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@sapudex/web-components/dist/Contact.js";</code>
+ *
+ * @constructor
+ * @extends UI5Element
+ * @tagname udex-contact
+ * @public
+ */
+declare class UDExContact extends UI5Element {
+    /**
+     * Defines the <code>text</code> for the contact button.
+     *
+     * @public
+     */
+    buttonText: string;
+    /**
+     * List of the contact numbers
+     *
+     * @default "[]"
+     * @public
+     */
+    contactNumbers: string;
+    /**
+     * Defines the local country numbers link's href
+     *
+     * @default ""
+     * @public
+     */
+    localCountryNumbersLink: string;
+    /**
+     * Defines if the initial focus should be prevented.
+     * @public
+     */
+    preventInitialFocus: boolean;
+    /**
+     * Defines if the focus should be returned to the previously focused element.
+     * @public
+     */
+    preventFocusRestore: boolean;
+    /**
+     * Defines the accessible name of the component.
+     * @default undefined
+     * @public
+     */
+    accessibleName?: string;
+    /**
+     * Defines the IDs of the elements that label the component.
+     * @default undefined
+     * @public
+     */
+    accessibleNameRef?: string;
+    /**
+     * Slot for list items.
+     *
+     * @slot items
+     * @public
+     */
+    items: Array<UDExContactItem>;
+    /**
+     * Defines the mobile mode for component
+     *
+     * @private
+     */
+    _isMobileMode: boolean;
+    _screenResizeHandler: () => void;
+    _screenResizeHandlerAttached?: boolean;
+    static i18nBundle: I18nBundle;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
+    _openPopover(): void;
+    _closePopover(): void;
+    _screenResize(): void;
+    _attachScreenResizeHandler(): void;
+    _detachScreenResizeHandler(): void;
+    get _contactNumbersArray(): ContactNumber[];
+    get _responsivePopover(): UI5ResponsivePopover;
+    get _completeListTitle(): string;
+    get _localCountryTitle(): string;
+    get _numbersTitle(): string;
+    get _contactUsTitle(): string;
+    get _hasNumbersList(): boolean;
+}
+export default UDExContact;