@sapudex/web-components 2.36.0 → 2.38.0

package/cypress/specs/TabNavigation.cy.tsx

@@ -1613,6 +1613,320 @@ describe("Tab Navigation component", () => {
     });
   });
 
+  // ── Disabled tab behaviour ──────────────────────────────────────────────────
+
+  describe("Disabled tab", () => {
+    describe("Rendering", () => {
+      it("renders aria-disabled='true' on a disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-disabled", "true");
+      });
+
+      it("does not set native disabled attribute — tab remains in DOM for assistive technology", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("not.have.attr", "disabled");
+      });
+
+      it("applies disabled opacity style to the disabled tab button", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.css", "opacity", "0.4");
+      });
+
+      it("does not apply aria-disabled on enabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("not.have.attr", "aria-disabled");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("not.have.attr", "aria-disabled");
+      });
+    });
+
+    describe("Interaction", () => {
+      it("does not change the selected tab when a disabled tab is clicked", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Force click because pointer-events: none prevents normal click
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        // Tab 1 should remain selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 1");
+
+        // Tab 2 should NOT be selected
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .should("have.attr", "aria-selected", "false");
+      });
+
+      it("does not fire tab-select event when a disabled tab is clicked", () => {
+        const tabSelectHandler = cy.stub().as("tabSelect");
+
+        cy.mount(
+          <UDExTabNavigation onTabSelect={tabSelectHandler}>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(1)
+          .click({ force: true });
+
+        cy.get("@tabSelect").should("not.have.been.called");
+      });
+    });
+
+    describe("Keyboard navigation", () => {
+      it("disabled tab has tabindex='-1' even when it would otherwise be the roving-tabindex target", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab should always have tabindex -1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-disabled='true']")
+          .should("have.attr", "tabindex", "-1");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowRight)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 1 and press ArrowRight — should skip Tab 2 (disabled) and land on Tab 3
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tab (ArrowLeft)", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1"><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" selected><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // Focus Tab 3 and press ArrowLeft — should skip Tab 2 (disabled) and land on Tab 1
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .focus()
+          .realPress("ArrowLeft");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips multiple consecutive disabled tabs", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3" disabled><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowRight");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(3)
+          .should("be.focused");
+      });
+
+      it("arrow-key navigation skips disabled tabs in vertical mode (ArrowDown)", () => {
+        cy.mount(
+          <UDExTabNavigation orientation="Vertical">
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(0)
+          .focus()
+          .realPress("ArrowDown");
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab']")
+          .eq(2)
+          .should("be.focused");
+      });
+    });
+
+    describe("Default selection", () => {
+      it("selects the first non-disabled tab when the first tab is disabled and none are explicitly selected", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+
+      it("selects the first non-disabled tab when multiple leading tabs are disabled", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+            <UDExTab text="Tab 4"><div>Content 4</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+
+      it("ignores selected attribute on a disabled tab and falls back to first enabled tab", () => {
+        cy.mount(
+          <UDExTabNavigation>
+            <UDExTab text="Tab 1" disabled selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2"><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // The disabled tab cannot be selected, so the first enabled tab is chosen
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 2");
+      });
+    });
+
+    describe("Auto-play skips disabled tabs", () => {
+      it("auto-play advances past disabled tabs", () => {
+        cy.clock(0, ["setInterval", "clearInterval"]);
+        cy.mount(
+          <UDExTabNavigation
+            orientation="Vertical"
+            autoPlay
+            autoPlayInterval={1000}
+          >
+            <UDExTab text="Tab 1" selected><div>Content 1</div></UDExTab>
+            <UDExTab text="Tab 2" disabled><div>Content 2</div></UDExTab>
+            <UDExTab text="Tab 3"><div>Content 3</div></UDExTab>
+          </UDExTabNavigation>
+        );
+
+        // After 1 tick, auto-play should skip disabled Tab 2 and select Tab 3
+        cy.tick(1000);
+
+        cy.get("[udex-tab-navigation]")
+          .shadow()
+          .find("button[role='tab'][aria-selected='true']")
+          .should("contain.text", "Tab 3");
+      });
+    });
+  });
+
   // ── Process Tab variant ──────────────────────────────────────────────────────
 
   describe("TabNavigation - Process Tab variant", () => {

package/cypress/specs/Table.cy.tsx

@@ -269,6 +269,10 @@ describe("Table", () => {
     cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
   });
 
+  it("header holder has role presentation to be transparent in the ARIA tree", () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").should("have.attr", "role", "presentation");
+  });
+
   it("renders the right amount of header rows",  () => {
     cy.get("#table").find("udex-table-header-row").should("have.length", 1)
   });
@@ -357,3 +361,169 @@ describe("Table", () => {
     })
   });
 });
+
+const multipleGroupRowsTable = <UDExTable id="table-multi-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="group-row-1" group-title="Group A" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item A1</UDExTableCell>
+      <UDExTableCell>$100</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-2" group-title="Group B" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item B1</UDExTableCell>
+      <UDExTableCell>$200</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+  <UDExTableGroupRow id="group-row-3" group-title="Group C" collapsible>
+    <UDExTableRow>
+      <UDExTableCell>Item C1</UDExTableCell>
+      <UDExTableCell>$300</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow Accessibility", () => {
+  beforeEach(() => {
+    cy.mount(multipleGroupRowsTable);
+  });
+
+  it("generates unique button IDs for each collapsible group row", () => {
+    const ids: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-opener-/);
+        ids.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(ids);
+      expect(uniqueIds.size).to.equal(ids.length, "All group row button IDs must be unique");
+    });
+  });
+
+  it("button aria-controls references an existing element in the shadow DOM", () => {
+    cy.get("#group-row-1").shadow().find(".udex-table-grow-btn").then($btn => {
+      const controlsId = $btn.attr("aria-controls");
+      expect(controlsId).to.match(/^udex-table-group-rows-/);
+      cy.get("#group-row-1").shadow().find(`#${controlsId}`).should("exist").and("have.class", "udex-table-grow-rows");
+    });
+  });
+
+  it("button aria-controls value matches the rows container ID on the same instance", () => {
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-btn").invoke("attr", "aria-controls").then(controlsValue => {
+        cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").should("equal", controlsValue);
+      });
+    });
+  });
+
+  it("each rows container has a unique ID matching its group row instance", () => {
+    const containerIds: string[] = [];
+
+    cy.get("[udex-table-group-row]").each($groupRow => {
+      cy.wrap($groupRow).shadow().find(".udex-table-grow-rows").invoke("attr", "id").then(id => {
+        expect(id).to.match(/^udex-table-group-rows-/);
+        containerIds.push(id as string);
+      });
+    }).then(() => {
+      const uniqueIds = new Set(containerIds);
+      expect(uniqueIds.size).to.equal(containerIds.length, "All rows container IDs must be unique");
+    });
+  });
+});
+
+const nonCollapsibleGroupRowTable = <UDExTable id="table-non-collapsible-group">
+  <UDExTableHeaderRow slot="headerRow">
+    <UDExTableHeaderCell>Product</UDExTableHeaderCell>
+    <UDExTableHeaderCell>Price</UDExTableHeaderCell>
+  </UDExTableHeaderRow>
+  <UDExTableGroupRow id="non-collapsible-group" group-title="Static Group">
+    <UDExTableRow>
+      <UDExTableCell>Item 1</UDExTableCell>
+      <UDExTableCell>$50</UDExTableCell>
+    </UDExTableRow>
+  </UDExTableGroupRow>
+</UDExTable>;
+
+describe("TableGroupRow ARIA Structure", () => {
+  describe("Collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(multipleGroupRowsTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains the button with class 'udex-table-grow-btn'", () => {
+      cy.get("#group-row-1").shadow().find("div[role='rowheader'] > button.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#group-row-1").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+
+    it("all collapsible group rows have the row > rowheader > button structure", () => {
+      cy.get("[udex-table-group-row]").each($groupRow => {
+        cy.wrap($groupRow).shadow().find("div[role='row'] > div[role='rowheader'] > button.udex-table-grow-btn")
+          .should("exist");
+      });
+    });
+  });
+
+  describe("Non-collapsible group row", () => {
+    beforeEach(() => {
+      cy.mount(nonCollapsibleGroupRowTable);
+    });
+
+    it("contains a div with role='row' and class 'udex-table-group-header-row'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-row");
+    });
+
+    it("the row wrapper contains a div with role='rowheader'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='row'] > div[role='rowheader']")
+        .should("exist")
+        .and("have.class", "udex-table-group-header-cell");
+    });
+
+    it("the rowheader contains a div (not button) with class 'udex-table-grow-btn'", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] > div.udex-table-grow-btn")
+        .should("exist");
+    });
+
+    it("the non-collapsible title div displays the group title", () => {
+      cy.get("#non-collapsible-group").shadow().find("div[role='rowheader'] .udex-table-grow-btn")
+        .should("have.text", "Static Group");
+    });
+
+    it("the row and rowheader wrappers have display:contents", () => {
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-row").then($row => {
+        expect(window.getComputedStyle($row[0]).display).to.equal("contents");
+      });
+      cy.get("#non-collapsible-group").shadow().find(".udex-table-group-header-cell").then($cell => {
+        expect(window.getComputedStyle($cell[0]).display).to.equal("contents");
+      });
+    });
+  });
+});

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

@@ -43,6 +43,7 @@ import UDExMessageStrip from "../../instrumented/MessageStrip.js";
 import UDExModal from "../../instrumented/Modal.js";
 import UDExSearch from "../../instrumented/Search.js";
 import UDExMediaPlayer from "../../instrumented/MediaPlayer.js";
+import UDExPagination from "../../instrumented/Pagination.js";
 import UDExPasswordField from "../../instrumented/PasswordField.js";
 import UDExPhoneNumberField from "../../instrumented/PhoneNumberField.js";
 import UDExPromoTile from "../../instrumented/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

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

@@ -43,6 +43,7 @@ import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExModal from "../../src/Modal.js";
 import UDExSearch from "../../src/Search.js";
 import UDExMediaPlayer from "../../src/MediaPlayer.js";
+import UDExPagination from "../../src/Pagination.js";
 import UDExPasswordField from "../../src/PasswordField.js";
 import UDExPhoneNumberField from "../../src/PhoneNumberField.js";
 import UDExPromoTile from "../../src/PromoTile.js";
@@ -128,6 +129,7 @@ export {
   UDExModal,
   UDExMediaPlayer,
   UDExSearch,
+  UDExPagination,
   UDExPasswordField,
   UDExPhoneNumberField,
   UDExPromoTile,

package/dist/CountrySelector.d.ts

@@ -71,6 +71,8 @@ declare class UDExCountrySelector extends UDExSelectBase {
     prepareCountrySelectorItems(): void;
     getItemTemplate(country: Country): string | undefined;
     getCountryLabel(countryName?: string, localName?: string): string | null;
+    get countryFlag(): object;
+    get searchableList(): import("@ui5/webcomponents-base").JSX.Element;
     get selectedCountryName(): string | null;
     get flagAriaLabel(): string;
     get selectedCountryFlagX(): string | undefined;

package/dist/CountrySelector.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import UI5Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/navigation-down-arrow.js";
@@ -20,7 +20,9 @@ import UDExSelectBase from "./SelectBase.js";
 import UDExListItem from "./ListItem.js";
 import UDExTextField from "./TextField.js";
 import UDExStatusMessage from "./StatusMessage.js";
-import SelectBoxTemplate from "./generated/templates/SelectBoxTemplate.lit.js";
+import SelectBoxTemplate from "./SelectBoxTemplate.js";
+import CountrySelectorTemplate from "./CountrySelectorTemplate.js";
+import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 // Styles
 import CountrySelectorCss from "./generated/themes/CountrySelector.css.js";
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -143,6 +145,13 @@ let UDExCountrySelector = class UDExCountrySelector extends UDExSelectBase {
     getCountryLabel(countryName, localName) {
         return localName ? `${countryName} (${localName})` : countryName || null;
     }
+    get countryFlag() {
+        return CountrySelectorTemplate.call(this);
+    }
+    get searchableList() {
+        this.defaultAccessibleRole = this._listBoxRole;
+        return SearchableListBaseTemplate.call(this);
+    }
     get selectedCountryName() {
         return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : "";
     }
@@ -174,7 +183,7 @@ __decorate([
 UDExCountrySelector = __decorate([
     customElement({
         tag: "udex-country-selector",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [
             TextFieldCss,
             SelectBaseCss,

package/dist/CountrySelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport IllustratedMessage from \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";\nimport \"@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js\";\nimport UDExSearch from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSelectBase from \"./SelectBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport SelectBoxTemplate from \"./generated/templates/SelectBoxTemplate.lit.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\nimport TextFieldCss from \"./generated/themes/TextField.css.js\";\nimport SelectBaseCss from \"./generated/themes/SelectBase.css.js\";\nimport SearchableListCss from \"./generated/themes/SearchableList.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n  value: string,\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSelectBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n  tag: \"udex-country-selector\",\n  renderer: litRender,\n  styles: [\n    TextFieldCss,\n    SelectBaseCss,\n    CountrySelectorCss,\n    SearchableListCss,\n    getEffectiveScrollbarStyle(),\n  ],\n  template: SelectBoxTemplate,\n  dependencies: [\n    UI5Button,\n    UDExList,\n    UDExSearch,\n    UDExListItem,\n    UDExDropdown,\n    UDExTextField,\n    UDExStatusMessage,\n    IllustratedMessage,\n  ],\n})\n\nclass UDExCountrySelector extends UDExSelectBase {\n  /**\n   * Allows to define the initially preselected country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    preselectedCountry!: string;\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Allows to hide the flag images in the country selector.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideFlagImages?: boolean;\n\n  /**\n   * Indicates whether the country selector is enabled.\n   *\n   * @default true\n   * @private\n   */\n  @property({ type: Boolean })\n    _countrySelector: boolean = true;\n\n  _countryList: Country[] = CountryListDB;\n  _selectedCountry!: Country | undefined;\n\n  onAfterRendering(): void {\n    super.onAfterRendering();\n    this.handleOutsideClick();\n  }\n\n  onBeforeRendering(): void {\n    super.onBeforeRendering();\n    this.filterBlockedCountries();\n    this.setPreselectedCountry();\n    this.prepareCountrySelectorItems();\n  }\n\n  handleItemPress(e: CustomEvent): void {\n    this.handleItemSelection(e);\n    this.selectCountryByElement(e.target as HTMLElement);\n  }\n\n  handleInputFocusIn(): void {\n    this.inputFocusIn();\n  }\n\n  handleInputFocusOut(e: FocusEvent): void {\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);\n\n    if (!isInsideComponent) {\n      this.closeDropdown();\n      this.resetSearchState();\n      this.updateImagePosition();\n    }\n\n    this._focused = false;\n  }\n\n  handleKeyDownSearch(e: KeyboardEvent): void {\n    this.onKeyDownSearch(e);\n  }\n\n  handleDropdownBeforeOpen(): void {\n    this.dropdownBeforeOpen();\n  }\n\n  handleDropdownClose(): void {\n    this._open = false;\n    this.fireEventDropdownClose();\n  }\n\n  handleOutsideClick(): void {\n    document.addEventListener(\"click\", (e: Event) => {\n      if (e.target !== this) {\n        this._open = this._popover.open;\n      }\n    });\n  }\n\n  updateImagePosition(): void {\n    const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(\".udex-text-field__input > .udex-text-field__image\");\n    if (imagePlaceholder) {\n      imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || \"\";\n    }\n  }\n\n  filterBlockedCountries(): void {\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this._countryList = this._countryList.filter(country => !blockedCountryCodesArray.includes(country.iso.toUpperCase()));\n    }\n  }\n\n  setPreselectedCountry(): void {\n    if (!this._selectedCountry && this.preselectedCountry) {\n      const preselectedISO = this.preselectedCountry.toUpperCase();\n      this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);\n    }\n  }\n\n  selectCountryByElement(el: HTMLElement): void {\n    const tokenId = el?.getAttribute(\"data-token-id\") || \"\";\n    const itemObj = this.getItemFromList(tokenId);\n    this._selectedCountry = this._countryList.find(country => country.iso === itemObj?._id);\n    this._selectedOption = this.selectedCountryName || \"\";\n  }\n\n  prepareCountrySelectorItems(): void {\n    this.items.length = 0;\n    this._countryList.forEach(country => {\n      const selected = country.iso.toUpperCase() === this._selectedCountry?.iso.toUpperCase();\n      this.items.push({\n        label: this.getCountryLabel(country.countryName, country.localName),\n        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } as UDExListItem);\n    });\n  }\n\n  getItemTemplate(country: Country) :string | undefined {\n    return this.hideFlagImages ? undefined : `<span class=\"udex-text-field__image\" style=\"background-position:${country.flagX}\">`;\n  }\n\n  getCountryLabel(countryName?: string, localName?: string): string | null {\n    return localName ? `${countryName} (${localName})` : countryName || null;\n  }\n\n  get selectedCountryName(): string | null {\n    return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : \"\";\n  }\n\n  get flagAriaLabel(): string {\n    return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || \"None\";\n  }\n\n  get selectedCountryFlagX(): string | undefined {\n    return this._selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY(): string | undefined {\n    return this._selectedCountry?.flagY;\n  }\n\n  get showImageFlags(): boolean {\n    return true;\n  }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\nexport type { UDExCountrySelectorChangeSearchEventDetail };\n"]}
+{"version":3,"file":"CountrySelector.js","sourceRoot":"","sources":["../src/CountrySelector.ts"],"names":[],"mappings":"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","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport UI5Button from \"@ui5/webcomponents/dist/Button.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-down-arrow.js\";\nimport \"@ui5/webcomponents-icons/dist/navigation-up-arrow.js\";\nimport type { Country } from \"./data/CountryListISO3166.js\";\nimport { CountryListDB } from \"./data/CountryListISO3166.js\";\nimport IllustratedMessage from \"@ui5/webcomponents-fiori/dist/IllustratedMessage.js\";\nimport \"@ui5/webcomponents-fiori/dist/illustrations/NoSearchResults.js\";\nimport UDExSearch from \"./Search.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExList from \"./List.js\";\nimport UDExSelectBase from \"./SelectBase.js\";\nimport UDExListItem from \"./ListItem.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport SelectBoxTemplate from \"./SelectBoxTemplate.js\";\nimport CountrySelectorTemplate from \"./CountrySelectorTemplate.js\";\nimport SearchableListBaseTemplate from \"./SearchableListBaseTemplate.js\";\n\n// Styles\nimport CountrySelectorCss from \"./generated/themes/CountrySelector.css.js\";\nimport TextFieldCss from \"./generated/themes/TextField.css.js\";\nimport SelectBaseCss from \"./generated/themes/SelectBase.css.js\";\nimport SearchableListCss from \"./generated/themes/SearchableList.css.js\";\nimport getEffectiveScrollbarStyle from \"./utils/getEffectiveScrollbarStyle.js\";\n\ntype UDExCountrySelectorChangeSearchEventDetail = {\n  value: string,\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-country-selector</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/CountrySelector.js\";</code>\n *\n * @constructor\n * @extends UDExSelectBase\n * @tagname udex-country-selector\n * @public\n */\n@customElement({\n  tag: \"udex-country-selector\",\n  renderer: jsxRenderer,\n  styles: [\n    TextFieldCss,\n    SelectBaseCss,\n    CountrySelectorCss,\n    SearchableListCss,\n    getEffectiveScrollbarStyle(),\n  ],\n  template: SelectBoxTemplate,\n  dependencies: [\n    UI5Button,\n    UDExList,\n    UDExSearch,\n    UDExListItem,\n    UDExDropdown,\n    UDExTextField,\n    UDExStatusMessage,\n    IllustratedMessage,\n  ],\n})\n\nclass UDExCountrySelector extends UDExSelectBase {\n  /**\n   * Allows to define the initially preselected country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    preselectedCountry!: string;\n\n  /**\n   * Allows to define the list of blocked country.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    blockedCountryCodes?: string;\n\n  /**\n   * Allows to hide the flag images in the country selector.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    hideFlagImages?: boolean;\n\n  /**\n   * Indicates whether the country selector is enabled.\n   *\n   * @default true\n   * @private\n   */\n  @property({ type: Boolean })\n    _countrySelector: boolean = true;\n\n  _countryList: Country[] = CountryListDB;\n  _selectedCountry!: Country | undefined;\n\n  onAfterRendering(): void {\n    super.onAfterRendering();\n    this.handleOutsideClick();\n  }\n\n  onBeforeRendering(): void {\n    super.onBeforeRendering();\n    this.filterBlockedCountries();\n    this.setPreselectedCountry();\n    this.prepareCountrySelectorItems();\n  }\n\n  handleItemPress(e: CustomEvent): void {\n    this.handleItemSelection(e);\n    this.selectCountryByElement(e.target as HTMLElement);\n  }\n\n  handleInputFocusIn(): void {\n    this.inputFocusIn();\n  }\n\n  handleInputFocusOut(e: FocusEvent): void {\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const isInsideComponent = relatedTarget?.closest(`.${this._rootClass}`);\n\n    if (!isInsideComponent) {\n      this.closeDropdown();\n      this.resetSearchState();\n      this.updateImagePosition();\n    }\n\n    this._focused = false;\n  }\n\n  handleKeyDownSearch(e: KeyboardEvent): void {\n    this.onKeyDownSearch(e);\n  }\n\n  handleDropdownBeforeOpen(): void {\n    this.dropdownBeforeOpen();\n  }\n\n  handleDropdownClose(): void {\n    this._open = false;\n    this.fireEventDropdownClose();\n  }\n\n  handleOutsideClick(): void {\n    document.addEventListener(\"click\", (e: Event) => {\n      if (e.target !== this) {\n        this._open = this._popover.open;\n      }\n    });\n  }\n\n  updateImagePosition(): void {\n    const imagePlaceholder = this.shadowRoot!.querySelector<HTMLElement>(\".udex-text-field__input > .udex-text-field__image\");\n    if (imagePlaceholder) {\n      imagePlaceholder.style.backgroundPosition = this.selectedCountryFlagX || \"\";\n    }\n  }\n\n  filterBlockedCountries(): void {\n    if (this.blockedCountryCodes?.length) {\n      const blockedCountryCodesArray = this.blockedCountryCodes.split(\",\").map(code => code.trim().toUpperCase());\n      this._countryList = this._countryList.filter(country => !blockedCountryCodesArray.includes(country.iso.toUpperCase()));\n    }\n  }\n\n  setPreselectedCountry(): void {\n    if (!this._selectedCountry && this.preselectedCountry) {\n      const preselectedISO = this.preselectedCountry.toUpperCase();\n      this._selectedCountry = this._countryList.find(({ iso }) => iso.toUpperCase() === preselectedISO);\n    }\n  }\n\n  selectCountryByElement(el: HTMLElement): void {\n    const tokenId = el?.getAttribute(\"data-token-id\") || \"\";\n    const itemObj = this.getItemFromList(tokenId);\n    this._selectedCountry = this._countryList.find(country => country.iso === itemObj?._id);\n    this._selectedOption = this.selectedCountryName || \"\";\n  }\n\n  prepareCountrySelectorItems(): void {\n    this.items.length = 0;\n    this._countryList.forEach(country => {\n      const selected = country.iso.toUpperCase() === this._selectedCountry?.iso.toUpperCase();\n      this.items.push({\n        label: this.getCountryLabel(country.countryName, country.localName),\n        innerHTML: this.getItemTemplate(country),\n        selected,\n        _id: country.iso.toUpperCase(),\n      } as UDExListItem);\n    });\n  }\n\n  getItemTemplate(country: Country) :string | undefined {\n    return this.hideFlagImages ? undefined : `<span class=\"udex-text-field__image\" style=\"background-position:${country.flagX}\">`;\n  }\n\n  getCountryLabel(countryName?: string, localName?: string): string | null {\n    return localName ? `${countryName} (${localName})` : countryName || null;\n  }\n\n  override get countryFlag(): object {\n    return CountrySelectorTemplate.call(this) as object;\n  }\n\n  override get searchableList() {\n    this.defaultAccessibleRole = this._listBoxRole;\n    return SearchableListBaseTemplate.call(this);\n  }\n\n  get selectedCountryName(): string | null {\n    return this._selectedCountry ? this.getCountryLabel(this._selectedCountry.countryName, this._selectedCountry.localName) : \"\";\n  }\n\n  get flagAriaLabel(): string {\n    return this.getCountryLabel(this._selectedCountry?.countryName, this._selectedCountry?.localName) || \"None\";\n  }\n\n  get selectedCountryFlagX(): string | undefined {\n    return this._selectedCountry?.flagX;\n  }\n\n  get selectedCountryFlagY(): string | undefined {\n    return this._selectedCountry?.flagY;\n  }\n\n  get showImageFlags(): boolean {\n    return true;\n  }\n}\n\nUDExCountrySelector.define();\n\nexport default UDExCountrySelector;\nexport type { UDExCountrySelectorChangeSearchEventDetail };\n"]}

package/dist/CountrySelectorTemplate.d.ts

@@ -0,0 +1,2 @@
+import type UDExCountrySelector from "./CountrySelector.js";
+export default function CountrySelectorTemplate(this: UDExCountrySelector): import("@ui5/webcomponents-base").JSX.Element;