@sapudex/web-components 2.52.0 → 2.54.0

package/cypress/specs/Avatar.cy.tsx

@@ -69,3 +69,106 @@ describe("Avatar", () => {
     cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.be.disabled");
   });
 });
+
+describe("Avatar - fallback icon on image error", () => {
+  // A valid 1x1 transparent PNG so the browser does not auto-fire `error`;
+  // the error/load events are dispatched manually to keep tests deterministic.
+  const VALID_IMAGE =
+    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
+
+  it("shows the explicit fallback icon and hides the broken image when the slotted <img> errors", () => {
+    // Use a non-default icon ("camera") so the assertion proves the explicit
+    // fallbackIcon is honoured rather than the "employee" default.
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "camera");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+
+  it("shows the default 'employee' fallback icon on error when no fallbackIcon is set", () => {
+    // fallbackIcon defaults to "employee"; a broken image with no explicit
+    // fallbackIcon should surface the default icon.
+    cy.mount(
+      <UDExAvatar>
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "employee");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+
+  it("keeps the image and shows no fallback icon when the slotted <img> loads successfully", () => {
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("load"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.attr", "icon", "camera");
+  });
+
+  it("recovers and shows the image again when a new valid image loads after an error", () => {
+    cy.mount(
+      <UDExAvatar fallbackIcon="camera">
+        <img src={VALID_IMAGE} alt="Profile" />
+      </UDExAvatar>
+    );
+
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].dispatchEvent(new Event("error"));
+    });
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").find("img").then($img => {
+      $img[0].setAttribute("src", VALID_IMAGE);
+      $img[0].dispatchEvent(new Event("load"));
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.attr", "icon", "camera");
+  });
+
+  it("shows the fallback icon immediately when the slotted image is already errored on mount", () => {
+    cy.mount(<UDExAvatar fallbackIcon="camera"></UDExAvatar>);
+
+    cy.get("[udex-avatar]").then($host => {
+      const img = document.createElement("img");
+      Object.defineProperty(img, "complete", { value: true });
+      Object.defineProperty(img, "naturalWidth", { value: 0 });
+      img.setAttribute("src", "broken.png");
+      img.setAttribute("alt", "Profile");
+      $host[0].appendChild(img);
+    });
+
+    cy.get("[udex-avatar]").shadow().find("slot:not([name])").should("not.exist");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("not.have.class", "udex-avatar--with-image");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").should("have.attr", "icon", "camera");
+    cy.get("[udex-avatar]").shadow().find("ui5-avatar").shadow().find("ui5-icon").should("exist");
+  });
+});

package/cypress/specs/FilterMenu.cy.tsx

@@ -860,6 +860,40 @@ describe("Filter Menu component", () => {
       expect(selectionChangedItem).to.equal(selectedIds[0]);
     });
 
+    it("emit selection-change with group header as item when group header is clicked", () => {
+      let selectionChangedItem: string | undefined;
+
+      cy.mount(filterMenuGroupWithSearch);
+
+      cy.get("[udex-filter-menu]").then(menu => {
+        menu.get(0).addEventListener('ui5-selection-change', function(e: CustomEvent) {
+          selectionChangedItem = e.detail.item?._id;
+        });
+      });
+
+      cy.get("[udex-filter-menu]").shadow().find(".udex-filter-menu__trigger").click();
+
+      cy.get("[udex-filter-menu]").shadow()
+        .find(".udex-searchable-list__header")
+        .as("groupHeader");
+
+      let groupHeaderId: string;
+      cy.get("[udex-filter-menu]").then(($el) => {
+        const element = $el[0] as UDExFilterMenu;
+        groupHeaderId = (element.items[0] as UDExFilterMenuGroupHeader)._id;
+      });
+
+      cy.get("@groupHeader").shadow()
+        .find("udex-list-item")
+        .shadow()
+        .find(".udex-list__item")
+        .click();
+
+      cy.then(() => {
+        expect(selectionChangedItem).to.equal(groupHeaderId);
+      });
+    });
+
     it("emit change-search when search field typing", () => {
       cy.mount(filterMenuSingleWithSearch);
       cy.window().then((win) => {

package/cypress/specs/SelectBox.cy.tsx

@@ -806,6 +806,49 @@ describe("SelectBox", () => {
     });
   });
 
+  // Added: covers the listboxRole getter change in SelectBase — aria-haspopup on the
+  // combobox search input reflects "tree" when the dropdown contains group headers
+  // (isTreeStructure === true) and "listbox" for a flat list (no group headers).
+  describe("Select Box aria-haspopup (listboxRole)", () => {
+    it("sets aria-haspopup=\"tree\" on the search input when the SelectBox has group headers", () => {
+      cy.mount(groupHeader);
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("have.attr", "aria-haspopup", "tree");
+    });
+
+    it("sets aria-haspopup=\"tree\" for a collapsible group header as well", () => {
+      cy.mount(groupHeaderCollapsible);
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("have.attr", "aria-haspopup", "tree");
+    });
+
+    it("sets aria-haspopup=\"listbox\" on the search input when the SelectBox has no group headers", () => {
+      cy.mount(fullComponent);
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("have.attr", "aria-haspopup", "listbox");
+    });
+
+    it("keeps aria-haspopup=\"tree\" while the dropdown is open for a grouped SelectBox", () => {
+      cy.mount(groupHeader);
+
+      cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+
+      cy.get("#select-box").shadow()
+        .find(".udex-select-box__dropdown")
+        .should("have.attr", "open");
+
+      cy.get("#select-box").shadow()
+        .find(".udex-text-field__search")
+        .should("have.attr", "aria-haspopup", "tree");
+    });
+  });
+
   describe("Select Box focus tests", () => {
     it("focus moves to previous interactive element on the page when press Shift+Tab on a tag", () => {
       cy.mount(multiSelect);
@@ -957,6 +1000,18 @@ describe("SelectBox", () => {
       .find(".udex-select-box__dropdown")
       .should("not.have.attr","open");
     });
+
+    it("focus() method moves focus to the inner search input", () => {
+      cy.mount(<UDExSelectBox id="select-box" label="Languages">
+        <UDExSelectBoxItem label="JavaScript"></UDExSelectBoxItem>
+      </UDExSelectBox>);
+
+      cy.get("#select-box").then($el => {
+        ($el[0] as any).focus();
+      });
+
+      cy.get("#select-box").shadow().find(".udex-text-field__search").should("be.focused");
+    });
   });
 
   describe("Select Box Select All header tests",async () => {

package/dist/Accordion.js

@@ -8,7 +8,7 @@ var UDExAccordion_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";

package/dist/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../src/Accordion.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,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;AAC7E,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAE7C,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,SAAS,CAAC,eAAa,EAAE,YAAY,CAAC;YACxC,CAAC,CAAC,SAAS,CAAC,eAAa,EAAE,UAAU,CAAC,CAAC;IAC3C,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;6CAC1B;AAGnC;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 type { DefaultSlot } 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\";\nimport translate from \"./utils/translate.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!: DefaultSlot<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      ? translate(UDExAccordion, COLLAPSE_ALL)\n      : translate(UDExAccordion, 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":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.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\";\nimport translate from \"./utils/translate.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!: DefaultSlot<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      ? translate(UDExAccordion, COLLAPSE_ALL)\n      : translate(UDExAccordion, 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

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isEnter, isSpace } from "@ui5/webcomponents-base/dist/Keys.js";

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 type { DefaultSlot } 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!: DefaultSlot<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":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,KAAK,MAAM,yDAAyD,CAAC;AAC5E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,wCAAwC,CAAC;AACnE,OAAO,aAAa,MAAM,wDAAwD,CAAC;AACnF,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,0BAGX;AAHD,WAAY,0BAA0B;IACpC,mDAAqB,CAAA;IACrB,6CAAe,CAAA;AACjB,CAAC,EAHW,0BAA0B,KAA1B,0BAA0B,QAGrC;AAOD;;;;;;;;;;;;;;;;;;GAkBG;AAsBH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAwFxC;QACE,KAAK,EAAE,CAAC;QA3EV;;;;;WAKG;QAED,sBAAiB,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QAW7E;;;;;WAKG;QAED,cAAS,GAA+B,0BAA0B,CAAC,QAAQ,CAAC;QAW9E;;;;;WAKG;QAED,aAAQ,GAAG,KAAK,CAAC;QAEnB;;;;;WAKG;QAED,WAAM,GAAG,KAAK,CAAC;QAwBf,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChD,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;IAC7B,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,UAAU,EAAE,aAAa,CAAC,qCAAqC,CAAC,CAAC;QAC5F,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,UAAU;QACR,IAAI,SAAS,EAAE,EAAE,CAAC;YAChB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,aAAa,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACnE,CAAC;IACH,CAAC;IAED,SAAS;QACP,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACrE,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,0CAA0C,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,YAAY,IAAI,CAAC,CAAC;IAC/G,CAAC;IAED,SAAS;QACP,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAED,gBAAgB,CAAC,CAAQ;QACvB,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;QAC/B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,kBAAkB,CAAC,sBAAsB,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;IACjG,CAAC;IAED,YAAY;QACV,IAAI,CAAC,kBAAkB,CAAC,sBAAsB,CAAC,CAAC;IAClD,CAAC;IAED,cAAc,CAAC,CAAgB;QAC7B,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,eAAe;QACb,MAAM,eAAe,GAAW,MAAM;aACnC,gBAAgB,CAAC,IAAI,CAAC;aACtB,gBAAgB,CAAC,WAAW,CAAC,CAAC;QAEjC,IAAI,CAAC,eAAe,EAAE,CAAC;YACrB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,GAAG,eAAe,CAAC;QACpC,CAAC;IACH,CAAC;CACF,CAAA;AA/IG;IADD,QAAQ,EAAE;sDACY;AASrB;IADD,QAAQ,EAAE;4DACkE;AAS3E;IADD,QAAQ,EAAE;gDACM;AASf;IADD,QAAQ,EAAE;oDACmE;AAS5E;IADD,QAAQ,EAAE;oDACU;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;mDACT;AASjB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;iDAC9B;AAQf;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qDACL;AASpB;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;kDACR;AAnF1B,iBAAiB;IArBtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;KAChC,CAAC;IAEF;;;OAGG;;IACF,KAAK,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;IAEjD;;;;;OAKG;;IACF,KAAK,CAAC,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;GAE3C,iBAAiB,CA2JtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.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!: DefaultSlot<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/Avatar.d.ts

@@ -1,7 +1,8 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type { DefaultSlot, Slot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
 export declare enum UDExAvatarColorScheme {
     Mango = "Mango",
     Red = "Red",
@@ -86,7 +87,7 @@ declare class UDExAvatar extends UI5Element {
     /**
      * Defines the name of the fallback icon.
      *
-     * @default ""
+     * @default "employee"
      * @public
      */
     fallbackIcon: string;
@@ -131,8 +132,16 @@ declare class UDExAvatar extends UI5Element {
      * @slot
      * @public
      */
-    badge: Array<HTMLElement>;
+    badge: Slot<HTMLElement>;
+    /**
+     * @private
+     */
+    _imageErrored: boolean;
     static i18nBundle: I18nBundle;
+    private _trackedImageElement;
+    private _handleImageError;
+    private _handleImageLoad;
+    private _syncImageListener;
     onAfterRendering(): void;
     handleClick(e: Event): void;
     /**

package/dist/Avatar.js

@@ -9,11 +9,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from "./generated/i18n/i18n-defaults.js";
 import translate from "./utils/translate.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
 // Template
 import AvatarTemplate from "./AvatarTemplate.js";
 // Styles
@@ -95,10 +96,10 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
         /**
          * Defines the name of the fallback icon.
          *
-         * @default ""
+         * @default "employee"
          * @public
          */
-        this.fallbackIcon = "";
+        this.fallbackIcon = "employee";
         /**
          * Defines the name of the UI5 Icon, that will be displayed.
          *
@@ -120,9 +121,45 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
          * @public
          */
         this.size = UDExAvatarSize.S;
+        /**
+         * @private
+         */
+        this._imageErrored = false;
+        this._trackedImageElement = null;
+        this._handleImageError = () => {
+            this._imageErrored = true;
+        };
+        this._handleImageLoad = () => {
+            if (this._imageErrored) {
+                this._imageErrored = false;
+            }
+        };
+    }
+    _syncImageListener() {
+        const newImage = this.image.find((el) => el instanceof HTMLImageElement) ?? null;
+        if (newImage === this._trackedImageElement) {
+            return;
+        }
+        if (this._trackedImageElement) {
+            this._trackedImageElement.removeEventListener("error", this._handleImageError);
+            this._trackedImageElement.removeEventListener("load", this._handleImageLoad);
+        }
+        this._trackedImageElement = newImage;
+        if (newImage) {
+            newImage.addEventListener("error", this._handleImageError);
+            newImage.addEventListener("load", this._handleImageLoad);
+            if (newImage.complete && newImage.src) {
+                this._imageErrored = !newImage.naturalWidth;
+                return;
+            }
+        }
+        if (this._imageErrored) {
+            this._imageErrored = false;
+        }
     }
     onAfterRendering() {
         this.title = this.initials;
+        this._syncImageListener();
     }
     handleClick(e) {
         e.stopPropagation();
@@ -161,7 +198,7 @@ let UDExAvatar = UDExAvatar_1 = class UDExAvatar extends UI5Element {
     }
     get udexAvatarClass() {
         let avatarClass = "udex-avatar";
-        if (this.imageSlot) {
+        if (this.imageSlot && !this._imageErrored) {
             avatarClass += " udex-avatar--with-image";
         }
         return avatarClass;
@@ -209,6 +246,9 @@ __decorate([
 __decorate([
     slot({ type: HTMLElement })
 ], UDExAvatar.prototype, "badge", void 0);
+__decorate([
+    property({ noAttribute: true })
+], UDExAvatar.prototype, "_imageErrored", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExAvatar, "i18nBundle", void 0);

package/dist/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.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 { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\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-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: jsxRenderer,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click-default\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n  eventDetails!: {\n    \"click\": void,\n    \"click-default\": void,\n  };\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    initials: string = \"\";\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    fallbackIcon: string = \"\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon: string = \"\";\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property()\n    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Array<HTMLElement>;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n  }\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\");\n      return;\n    }\n    this.fireDecoratorEvent(\"click-default\");\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): UDExAvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): UDExAvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n  }\n\n  get getUDExAvatarColorScheme(): AvatarColorScheme {\n    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}
+{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot, Slot } from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.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-strict.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 { ATTENTION_BADGE, AVATAR_TEXT, DISABLED } from \"./generated/i18n/i18n-defaults.js\";\nimport type AvatarColorScheme from \"@ui5/webcomponents/dist/types/AvatarColorScheme.js\";\nimport translate from \"./utils/translate.js\";\nimport \"@ui5/webcomponents-icons/dist/employee.js\";\n\n// Template\nimport AvatarTemplate from \"./AvatarTemplate.js\";\n\n// Styles\nimport AvatarCss from \"./generated/themes/Avatar.css.js\";\n\nexport enum UDExAvatarColorScheme {\n  Mango = \"Mango\",\n  Red = \"Red\",\n  Raspberry = \"Raspberry\",\n  Pink = \"Pink\",\n  Indigo = \"Indigo\",\n  Blue = \"Blue\",\n  Teal = \"Teal\",\n  Green = \"Green\",\n  Grey = \"Grey\",\n  Transparent = \"Transparent\",\n  Neutral = \"Neutral\",\n}\n\nexport enum UDExAvatarShape {\n  Circle = \"Circle\",\n  Square = \"Square\",\n}\n\nexport enum UDExAvatarSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\n}\n\nconst UDExToUi5ColorSchemeMap = {\n  Mango: \"Accent1\",\n  Red: \"Accent2\",\n  Raspberry: \"Accent3\",\n  Pink: \"Accent4\",\n  Indigo: \"Accent5\",\n  Blue: \"Accent6\",\n  Transparent: \"Accent6\",\n  Neutral: \"Accent6\",\n  Teal: \"Accent7\",\n  Green: \"Accent8\",\n  Grey: \"Accent10\",\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-avatar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Avatar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-avatar\",\n  renderer: jsxRenderer,\n  styles: AvatarCss,\n  template: AvatarTemplate,\n})\n\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click\", { bubbles: true })\n/**\n * Fires when the avatar is clicked.\n *\n * @public\n */\n@event(\"click-default\", { bubbles: true })\n\nclass UDExAvatar extends UI5Element {\n  eventDetails!: {\n    \"click\": void,\n    \"click-default\": void,\n  };\n  /**\n   * Defines the displayed initials.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    initials: string = \"\";\n\n  /**\n   * Defines if the avatar is interactive (focusable and pressable).\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    interactive!: boolean;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  /**\n   * Defines the design of the component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    colorScheme: `${UDExAvatarColorScheme}` = UDExAvatarColorScheme.Blue;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the name of the fallback icon.\n   *\n   * @default \"employee\"\n   * @public\n   */\n  @property({ type: String })\n    fallbackIcon: string = \"employee\";\n\n  /**\n   * Defines the name of the UI5 Icon, that will be displayed.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    icon: string = \"\";\n\n  /**\n   * Defines the shape of the component.\n   *\n   * @default \"Circle\"\n   * @public\n   */\n  @property()\n    shape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${UDExAvatarSize}` = UDExAvatarSize.S;\n\n  /**\n   * Defines the displaying attention badge.\n   *\n   * @public\n   * @default false\n   */\n    @property({ type: Boolean })\n      showAttentionBadge!: boolean;\n\n  /**\n   * Receives the desired <img> tag\n   *\n   * @slot image\n   * @public\n   */\n  @slot({ type: HTMLElement, \"default\": true })\n    image!: DefaultSlot<HTMLElement>;\n\n  /**\n   * Defines the optional badge that will be used for visual affordance.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ type: HTMLElement })\n    badge!: Slot<HTMLElement>;\n\n  /**\n   * @private\n   */\n  @property({ noAttribute: true })\n    _imageErrored: boolean = false;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  private _trackedImageElement: HTMLImageElement | null = null;\n\n  private _handleImageError = (): void => {\n    this._imageErrored = true;\n  };\n\n  private _handleImageLoad = (): void => {\n    if (this._imageErrored) {\n      this._imageErrored = false;\n    }\n  };\n\n  private _syncImageListener(): void {\n    const newImage = this.image.find((el): el is HTMLImageElement => el instanceof HTMLImageElement) ?? null;\n\n    if (newImage === this._trackedImageElement) {\n      return;\n    }\n\n    if (this._trackedImageElement) {\n      this._trackedImageElement.removeEventListener(\"error\", this._handleImageError);\n      this._trackedImageElement.removeEventListener(\"load\", this._handleImageLoad);\n    }\n\n    this._trackedImageElement = newImage;\n\n    if (newImage) {\n      newImage.addEventListener(\"error\", this._handleImageError);\n      newImage.addEventListener(\"load\", this._handleImageLoad);\n\n      if (newImage.complete && newImage.src) {\n        this._imageErrored = !newImage.naturalWidth;\n        return;\n      }\n    }\n\n    if (this._imageErrored) {\n      this._imageErrored = false;\n    }\n  }\n\n  onAfterRendering(): void {\n    this.title = this.initials;\n    this._syncImageListener();\n  }\n  handleClick(e: Event) {\n    e.stopPropagation();\n    if (this.interactive) {\n      this.fireDecoratorEvent(\"click\");\n      return;\n    }\n    this.fireDecoratorEvent(\"click-default\");\n  }\n\n  /**\n   * Returns the effective avatar size.\n   * @default \"S\"\n   * @private\n   */\n  get effectiveSize(): UDExAvatarSize {\n    // we read the attribute, because the \"size\" property will always have a default value\n    return this.getAttribute(\"size\") as UDExAvatarSize || this.size;\n  }\n\n  /**\n   * Returns the effective background color.\n   * @default \"Blue\"\n   * @private\n   */\n  get effectiveBackgroundColor(): UDExAvatarColorScheme {\n    // we read the attribute, because the \"background-color\" property will always have a default value\n    return this.getAttribute(\"color-scheme\") as UDExAvatarColorScheme || this.colorScheme;\n  }\n\n  get getUDExAvatarColorScheme(): AvatarColorScheme {\n    return UDExToUi5ColorSchemeMap[this.colorScheme] as AvatarColorScheme;\n  }\n\n  get imageSlot(): boolean {\n    return !!this.image.length;\n  }\n\n  get badgeSlot(): boolean {\n    return !!this.badge.length;\n  }\n\n  get udexAvatarClass(): string {\n    let avatarClass = \"udex-avatar\";\n\n    if (this.imageSlot && !this._imageErrored) {\n      avatarClass += \" udex-avatar--with-image\";\n    }\n\n    return avatarClass;\n  }\n\n  get avatarAccessibleName(): string {\n    let accName = `${this.accessibleName ? this.accessibleName : `${translate(UDExAvatar, AVATAR_TEXT)} ${this.initials}`}`;\n    accName += ` ${this.disabled ? translate(UDExAvatar, DISABLED) : \"\"}`;\n    accName += ` ${this.showAttentionBadge ? translate(UDExAvatar, ATTENTION_BADGE) : \"\"}`;\n    return accName;\n  }\n}\n\nUDExAvatar.define();\n\nexport default UDExAvatar;\n"]}

package/dist/AvatarTemplate.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
 import UI5Avatar from "@ui5/webcomponents/dist/Avatar.js";
 export default function AvatarTemplate() {
-    return (_jsxs(UI5Avatar, { class: this.udexAvatarClass, accessibleName: this.avatarAccessibleName, colorScheme: this.getUDExAvatarColorScheme, onClick: this.handleClick, disabled: this.disabled, initials: this.initials, interactive: this.interactive, fallbackIcon: this.fallbackIcon, icon: this.icon, shape: this.shape, size: this.size, children: [this.imageSlot && _jsx("slot", {}), this.badgeSlot && _jsx("slot", { name: "badge", slot: "badge" })] }));
+    return (_jsxs(UI5Avatar, { class: this.udexAvatarClass, accessibleName: this.avatarAccessibleName, colorScheme: this.getUDExAvatarColorScheme, onClick: this.handleClick, disabled: this.disabled, initials: this.initials, interactive: this.interactive, fallbackIcon: this.fallbackIcon, icon: this._imageErrored ? this.fallbackIcon : this.icon, shape: this.shape, size: this.size, children: [this.imageSlot && !this._imageErrored && _jsx("slot", {}), this.badgeSlot && _jsx("slot", { name: "badge", slot: "badge" })] }));
 }
 //# sourceMappingURL=AvatarTemplate.js.map

package/dist/AvatarTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarTemplate.js","sourceRoot":"","sources":["../src/AvatarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,OAAO,CACL,MAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,cAAc,EAAE,IAAI,CAAC,oBAAoB,EACzC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,aACd,IAAI,CAAC,SAAS,IAAI,gBAAa,EAC/B,IAAI,CAAC,SAAS,IAAI,eAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,IAChD,CACb,CAAC;AACJ,CAAC","sourcesContent":["import type Avatar from \"./Avatar.js\";\nimport UI5Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\n\nexport default function AvatarTemplate(this: Avatar) {\n  return (\n    <UI5Avatar\n      class={this.udexAvatarClass}\n      accessibleName={this.avatarAccessibleName}\n      colorScheme={this.getUDExAvatarColorScheme}\n      onClick={this.handleClick}\n      disabled={this.disabled}\n      initials={this.initials}\n      interactive={this.interactive}\n      fallbackIcon={this.fallbackIcon}\n      icon={this.icon}\n      shape={this.shape}\n      size={this.size}>\n      {this.imageSlot && <slot></slot>}\n      {this.badgeSlot && <slot name=\"badge\" slot=\"badge\"></slot>}\n    </UI5Avatar>\n  );\n}\n"]}
+{"version":3,"file":"AvatarTemplate.js","sourceRoot":"","sources":["../src/AvatarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,OAAO,CACL,MAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,eAAe,EAC3B,cAAc,EAAE,IAAI,CAAC,oBAAoB,EACzC,WAAW,EAAE,IAAI,CAAC,wBAAwB,EAC1C,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EACxD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,aACd,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,gBAAa,EACtD,IAAI,CAAC,SAAS,IAAI,eAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,IAChD,CACb,CAAC;AACJ,CAAC","sourcesContent":["import type Avatar from \"./Avatar.js\";\nimport UI5Avatar from \"@ui5/webcomponents/dist/Avatar.js\";\n\nexport default function AvatarTemplate(this: Avatar) {\n  return (\n    <UI5Avatar\n      class={this.udexAvatarClass}\n      accessibleName={this.avatarAccessibleName}\n      colorScheme={this.getUDExAvatarColorScheme}\n      onClick={this.handleClick}\n      disabled={this.disabled}\n      initials={this.initials}\n      interactive={this.interactive}\n      fallbackIcon={this.fallbackIcon}\n      icon={this._imageErrored ? this.fallbackIcon : this.icon}\n      shape={this.shape}\n      size={this.size}>\n      {this.imageSlot && !this._imageErrored && <slot></slot>}\n      {this.badgeSlot && <slot name=\"badge\" slot=\"badge\"></slot>}\n    </UI5Avatar>\n  );\n}\n"]}

package/dist/Badge.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import BadgeTemplate from "./BadgeTemplate.js";
 import UDExIconPlacement from "./types/IconPlacement.js";

package/dist/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QAErE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QAExE;;;;;UAKE;QAEA,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IA0ClE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA9EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AASnE;IADD,QAAQ,EAAE;+CAC6D;AAStE;IADD,QAAQ,EAAE;gDACqD;AAS9D;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AA7D1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CAsFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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 jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport BadgeTemplate from \"./BadgeTemplate.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\nimport {\n  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: jsxRenderer,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n})\n\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property()\n    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property()\n    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property()\n    iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: DefaultSlot<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type !== UDExTypeBadgeDesign.Number) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../src/Badge.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AAEpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,wDAAwD,CAAC;AAC1E,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,aAAa,MAAM,oBAAoB,CAAC;AAC/C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EACL,qBAAqB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,mBAAmB,GACrF,MAAM,wBAAwB,CAAC;AAEhC,SAAS;AACT,OAAO,QAAQ,MAAM,iCAAiC,CAAC;AAEvD;;;;;;;;;;;;;;;GAeG;AAQH,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QACE;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,IAAI,CAAC;QAE5D;;;;;WAKG;QAED,SAAI,GAA6B,mBAAmB,CAAC,MAAM,CAAC;QAE9D;;;;;WAKG;QAED,WAAM,GAA6B,mBAAmB,CAAC,WAAW,CAAC;QAErE;;;;;WAKG;QAED,iBAAY,GAA+B,qBAAqB,CAAC,IAAI,CAAC;QAExE;;;;;UAKE;QAEA,kBAAa,GAA2B,iBAAiB,CAAC,GAAG,CAAC;IA0ClE,CAAC;IAvBC,IAAI,SAAS;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,KAAK,CAAC;IACvE,CAAC;IAED,IAAI,OAAO;QACT,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,KAAK,iBAAiB,CAAC,GAAG,CAAC;IACrE,CAAC;IAED,IAAI,WAAW;QACb,OAAO,2CAA2C,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IACvH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,6CAA6C,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,gBAAgB,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC;IAC/H,CAAC;IAED,IAAI,YAAY;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,mBAAmB,CAAC,MAAM,EAAE,CAAC;YAC7C,OAAO,IAAI,CAAC,WAAW,CAAC;QAC1B,CAAC;QAED,OAAO,IAAI,CAAC,aAAa,CAAC;IAC5B,CAAC;CACF,CAAA;AA9EG;IADD,QAAQ,EAAE;uCACiD;AAS1D;IADD,QAAQ,EAAE;uCACmD;AAS5D;IADD,QAAQ,EAAE;yCAC0D;AASnE;IADD,QAAQ,EAAE;+CAC6D;AAStE;IADD,QAAQ,EAAE;gDACqD;AAS9D;IADD,QAAQ,EAAE;uCACK;AAQd;IADD,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CACR;AA7D1B,SAAS;IAPd,aAAa,CAAC;QACb,GAAG,EAAE,YAAY;QACjB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,QAAQ;QAChB,QAAQ,EAAE,aAAa;KACxB,CAAC;GAEI,SAAS,CAsFd;AAED,SAAS,CAAC,MAAM,EAAE,CAAC;AAEnB,eAAe,SAAS,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport type { DefaultSlot } 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-strict.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport BadgeTemplate from \"./BadgeTemplate.js\";\nimport UDExIconPlacement from \"./types/IconPlacement.js\";\nimport {\n  UDExNumberBadgeDesign, UDExSizeBadgeDesign, UDExTextBadgeDesign, UDExTypeBadgeDesign,\n} from \"./types/BadgeDesign.js\";\n\n// Styles\nimport BadgeCss from \"./generated/themes/Badge.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Badge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-badge\",\n  renderer: jsxRenderer,\n  styles: BadgeCss,\n  template: BadgeTemplate,\n})\n\nclass UDExBadge extends UI5Element {\n  /**\n   * Defines the type of the component.\n   *\n   * @default \"Text\"\n   * @public\n   */\n  @property()\n    type: `${UDExTypeBadgeDesign}` = UDExTypeBadgeDesign.Text;\n\n  /**\n   * Defines the size of the component.\n   *\n   * @default \"Medium\"\n   * @public\n   */\n  @property()\n    size: `${UDExSizeBadgeDesign}` = UDExSizeBadgeDesign.Medium;\n\n  /**\n   * Defines the design of text type component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    design: `${UDExTextBadgeDesign}` = UDExTextBadgeDesign.Information;\n\n  /**\n   * Defines the design of number type component.\n   *\n   * @default \"Blue\"\n   * @public\n   */\n  @property()\n    numberDesign: `${UDExNumberBadgeDesign}` = UDExNumberBadgeDesign.Blue;\n\n  /**\n   * Defines icon placement if icon was provided\n  *\n  * @default \"End\"\n  * @public\n  */\n  @property()\n    iconPlacement: `${UDExIconPlacement}` = UDExIconPlacement.End;\n\n  /**\n   * Defines icon name\n  *\n  * @default \"\"\n  * @public\n  */\n  @property()\n    icon!: string;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @public\n   */\n  @slot({ type: Node, \"default\": true })\n    default!: DefaultSlot<Node>;\n\n  get startIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.Start;\n  }\n\n  get endIcon(): boolean {\n    return !!this.icon && this.iconPlacement === UDExIconPlacement.End;\n  }\n\n  get textClasses(): string {\n    return `udex-badge udex-badge--text udex-badge--${this.design.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get numberClasses(): string {\n    return `udex-badge udex-badge--number udex-badge--${this.numberDesign.toLowerCase()} udex-badge--${this.size.toLowerCase()}`;\n  }\n\n  get badgeClasses(): string {\n    if (this.type !== UDExTypeBadgeDesign.Number) {\n      return this.textClasses;\n    }\n\n    return this.numberClasses;\n  }\n}\n\nUDExBadge.define();\n\nexport default UDExBadge;\n"]}

package/dist/Breadcrumbs.js

@@ -9,7 +9,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
+import slot from "@ui5/webcomponents-base/dist/decorators/slot-strict.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isTabNext, isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import UI5Icon from "@ui5/webcomponents/dist/Icon.js";