@sapudex/web-components 2.0.0 → 2.1.1

package/cypress/specs/Table.cy.tsx

@@ -0,0 +1,361 @@
+import UDExTable from "../../src/Table.js";
+import UDExTableHeaderRow from "../../src/TableHeaderRow.js";
+import UDExTableHeaderCell from "../../src/TableHeaderCell.js";
+import UDExTableRow from "../../src/TableRow.js";
+import UDExTableGroupRow from "../../src/TableGroupRow.js";
+import UDExTableCell from "../../src/TableCell.js";
+import UDExButton from "../../src/Button.js";
+import UDExLink from "../../src/Link.js";
+import UDExRatingIndicator from "../../src/RatingIndicator.js";
+
+const defaultTable = <UDExTable
+    id="table"
+    sticky-header
+    heading="Microsoft Surface and Apple MacBook"
+    accessibleName="table devices"
+    maxHeight="200px">
+      <UDExTableHeaderRow id="tableHeaderRow" slot="headerRow">
+        <UDExTableHeaderCell
+          id="tableHeaderCell"
+          icon-start="sap-icon://bell"
+          icon-end="sap-icon://accessibility"
+          highlighted>
+          Product
+        </UDExTableHeaderCell>
+        <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+        <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+        <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+        <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+      </UDExTableHeaderRow>
+      <UDExTableRow id="table-row">
+        <UDExTableCell id="table-cell" icon="sap-icon://bell">
+          <i><UDExLink id="link-row1">SURFACE PRO4</UDExLink></i>
+        </UDExTableCell>
+        <UDExTableCell><UDExButton id="button-row1" size="Small">Intel Core M3, i5</UDExButton></UDExTableCell>
+        <UDExTableCell>12.3 inches</UDExTableCell>
+        <UDExTableCell>2736 x 1824</UDExTableCell>
+        <UDExTableCell>4GB, 8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator id="rating-row1" class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><UDExButton id="button-row2" size="Small">SURFACE PRO3</UDExButton></UDExTableCell>
+        <UDExTableCell><UDExLink id="link-row2">Intel Core i3, Core i7</UDExLink></UDExTableCell>
+        <UDExTableCell>12 inches</UDExTableCell>
+        <UDExTableCell>2160 x 1440</UDExTableCell>
+        <UDExTableCell>4GB, 8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="sale">$799</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>1440 x 900</UDExTableCell>
+        <UDExTableCell>8GB</UDExTableCell>
+        <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$899</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableRow>
+        <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+        <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+        <UDExTableCell>13.3 inches</UDExTableCell>
+        <UDExTableCell>2560 x 1600</UDExTableCell>
+        <UDExTableCell>8GB, 16GB</UDExTableCell>
+        <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+        <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+        <UDExTableCell _highlighted><span class="price">$1,299</span></UDExTableCell>
+        <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+      </UDExTableRow>
+      <UDExTableGroupRow
+        id="table-group-row"
+        group-title="Apple MacBook"
+        collapsible>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK PRO</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>2560 x 1600</UDExTableCell>
+          <UDExTableCell>8GB, 16GB</UDExTableCell>
+          <UDExTableCell>256GB, 512GB, 1TB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$1,299</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+        <UDExTableRow>
+          <UDExTableCell><i>MACBOOK AIR</i></UDExTableCell>
+          <UDExTableCell>Intel Core i5 or i7</UDExTableCell>
+          <UDExTableCell>13.3 inches</UDExTableCell>
+          <UDExTableCell>1440 x 900</UDExTableCell>
+          <UDExTableCell>8GB</UDExTableCell>
+          <UDExTableCell>128GB, 256GB, 512GB</UDExTableCell>
+          <UDExTableCell><UDExRatingIndicator class="rating-indicator" value={5} max={5} readonly display="Desktop"></UDExRatingIndicator></UDExTableCell>
+          <UDExTableCell><span class="price">$899</span></UDExTableCell>
+          <UDExTableCell><UDExButton size="Small">Buy now</UDExButton></UDExTableCell>
+        </UDExTableRow>
+      </UDExTableGroupRow>
+      <UDExButton size="Small" icon="sap-icon://retail-store" design="Secondary" slot="actions">Back to Store</UDExButton>
+      <UDExButton size="Small" design="Tertiary" icon="sap-icon://cart" slot="actions">Cart</UDExButton>
+      <div class="footnotes" slot="footnotes">
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Microsoft Surface</UDExLink>: It's a line of touchscreen-based personal computers and interactive whiteboards designed and developed by Microsoft.</p>
+        <p><UDExLink id="UDExLink-example" href="/" design="Default">Apple MacBook</UDExLink>: It's known for its sleek design, high-quality performance, and integration with the macOS operating system.</p>
+      </div>
+  </UDExTable>
+
+const noDataTableDefault = <UDExTable
+    id="table-no-data-default">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const noDataTable = <UDExTable
+    id="table-no-data">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+      <p id="customNoData" slot="noData">No custom data found</p>
+  </UDExTable>
+
+
+const loadingTable =  <UDExTable loading={true}
+    id="table-loading">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+      <UDExTableHeaderCell>RAM</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Storage</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Rating</UDExTableHeaderCell>
+      <UDExTableHeaderCell highlighted>Price</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Action</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+  </UDExTable>
+
+const customWidthTable =  <UDExTable customColumns="50px 50px 50px"
+    id="table-custom-width">
+    <UDExTableHeaderRow slot="headerRow">
+      <UDExTableHeaderCell
+        id="tableHeaderCell"
+        icon-start="sap-icon://bell"
+        icon-end="sap-icon://accessibility"
+        highlighted>
+        Product
+      </UDExTableHeaderCell>
+      <UDExTableHeaderCell>Processor</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Display</UDExTableHeaderCell>
+      <UDExTableHeaderCell>Resolution</UDExTableHeaderCell>
+    </UDExTableHeaderRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell1</UDExTableCell>
+      <UDExTableCell>Cell2</UDExTableCell>
+      <UDExTableCell>Cell3</UDExTableCell>
+    </UDExTableRow>
+    <UDExTableRow>
+      <UDExTableCell>Cell3</UDExTableCell>
+      <UDExTableCell>Cell4</UDExTableCell>
+      <UDExTableCell>Cell5</UDExTableCell>
+    </UDExTableRow>
+  </UDExTable>
+
+
+describe("Table", () => {
+  beforeEach(() => {
+   cy.mount(defaultTable)
+  });
+
+  it("is correctly rendered", () => {
+    cy.get("#table").shadow().find(".udex-table").should("be.visible")
+  });
+
+  it("renders rows slot",  () => {
+    cy.get("#table").shadow().find("slot").should("have.length", 4)
+  });
+
+  it("renders header row slot",  () => {
+    cy.get("#table").shadow().find('slot[name="headerRow"]').should("have.length", 1)
+  });
+
+  it("renders actions slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-toolbar__actions > slot[name="actions"]').should("have.length", 1)
+  });
+
+  it("renders footnotes slot",  () => {
+    cy.get("#table").shadow().find('.udex-table-footnotes > slot[name="footnotes"]').should("have.length", 1)
+  });
+
+  it("renders default no data content", () => {
+    cy.mount(noDataTableDefault)
+    cy.get("#table-no-data-default").shadow().find(".udex-table__no-data").should("have.text", "No data found")
+  });
+
+  it("renders custom no data slot", () => {
+    cy.mount(noDataTable)
+    cy.get("#table-no-data").shadow().find('.udex-table__no-data > slot[name="noData"]').should("have.length", 1)
+    expect(cy.get("#table-no-data").find("#customNoData").should("be.visible"))
+  });
+
+  it("renders header",  () => {
+    cy.get("#table").shadow().find(".udex-table-toolbar__title").should("have.text", "Microsoft Surface and Apple MacBook")
+  });
+
+  it("tests render the right maximum height",  () => {
+    cy.get("#table").shadow().find(".udex-table").then($tableWrap => {
+      const { maxHeight: tableMaxHeight } = window.getComputedStyle($tableWrap[0], "max-height")
+      expect(tableMaxHeight).eqls("200px")
+    })
+  });
+
+  it("tests render the sticky header",  () => {
+    cy.get("#table").shadow().find(".udex-table__header-holder").then($tableHeaderWrap => {
+      const { position: tableHeaderPosition } = window.getComputedStyle($tableHeaderWrap[0], "position")
+      expect(tableHeaderPosition).eqls("sticky")
+    })
+  });
+
+  it("renders the loading indicator", () => {
+    cy.mount(loadingTable)
+    cy.get("#table-loading").shadow().find("ui5-busy-indicator").should("be.visible")
+  });
+
+  it("renders accessible name",  () => {
+    cy.get("#table").shadow().find(".udex-table").should("have.attr", "aria-label", "table devices")
+  });
+
+  it("renders the right amount of header rows",  () => {
+    cy.get("#table").find("udex-table-header-row").should("have.length", 1)
+  });
+
+  it("renders correct number of table-header-row-cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of table-row-cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").should("have.length", 9)
+  });
+
+  it("renders correct number of rows of group", () => {
+   cy.get("#table").find("#table-group-row").find("udex-table-row").should("have.length", 3)
+  });
+
+  it("renders correct title of group button", () => {
+    cy.get("#table").find("#table-group-row").shadow().find(".udex-table-grow-btn").should("have.text", "Apple MacBook")
+  });
+
+  it("test hidden rows of group", () => {
+    cy.get("#table").find("#table-group-row").find(".udex-table-grow-rows").should("not.exist")
+  });
+
+  it("renders correct content in the header cell", () => {
+    cy.get("#table").find("#tableHeaderRow").find("udex-table-header-cell").first().should("have.text", "Product")
+  });
+
+  it("renders correct content in the cell", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").first().should("have.text", "SURFACE PRO4")
+  });
+
+  it("renders icons in the header cell", () => {
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").first().should("have.attr", "name", "sap-icon://bell")
+    cy.get("#table").find("#tableHeaderCell").shadow().find("ui5-icon").eq(1).should("have.attr", "name", "sap-icon://accessibility")
+  });
+
+  it("renders icons in the cell", () => {
+    cy.get("#table").find("#table-cell").shadow().find(".udex-table-cell__icon").should("have.attr", "name", "sap-icon://bell")
+  });
+
+  it("renders columns with custom width when specified",  () => {
+    cy.mount(customWidthTable)
+    cy.get("#table-custom-width").find("udex-table-row").find("udex-table-cell").then($tableCell => {
+      const { width: cellWidth } = window.getComputedStyle($tableCell[0], "width")
+      expect(cellWidth).eqls("50px")
+    })
+  });
+
+  it("moves focus to previous interactive element after \"Arrow Left\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(6).find("#rating-row1").click({force: true}).realPress("{leftarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element after \"Arrow Right\" press", () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{rightarrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(1).find("#button-row1").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element below after \"Arrow Down\" press",  () => {
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").click({force: true}).realPress("{downarrow}")
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").shadow().find("button").then($button => {
+      const { borderColor: buttonBorder } = window.getComputedStyle($button[0], "::after");
+      expect(buttonBorder).eqls("rgb(255, 255, 255)")
+    })
+  });
+
+  it("moves focus to next interactive element above after \"Arrow Up\" press",  () => {
+    cy.get("#table").find("udex-table-row").eq(1).find("udex-table-cell").eq(0).find("#button-row2").click({force: true}).realPress("{uparrow}")
+    cy.get("#table").find("#table-row").find("udex-table-cell").eq(0).find("#link-row1").shadow().find("a").then($link => {
+      const { outlineColor } = window.getComputedStyle($link[0]);
+      expect(outlineColor).eqls("rgb(34, 53, 72)")
+    })
+  });
+});

package/cypress/specs/TextField.cy.tsx

@@ -55,6 +55,10 @@ describe("Text Field", () => {
     cy.get("#defaultTextField").shadow().find("input").should("not.have.attr", "required");
   });
 
+  it("Autocomplete is off by default", () => {
+    cy.get("#defaultTextField").shadow().find("input").should("have.attr", "autocomplete", "off");
+  });
+
   it("Disabled attribute is set", () => {
     cy.mount(<UDExTextField disabled></UDExTextField>)
     cy.get("[udex-text-field]").shadow().find("input").should("have.attr", "disabled");

package/cypress/specs/Tooltip.cy.tsx

@@ -72,4 +72,30 @@ describe("Tooltip", () => {
           .should("have.attr", "open");
       });
   });
+
+  it("sync open when close by clicking outside", () => {
+    cy.mount(
+        <>
+          {tooltipOpener}
+          {basicTooltip}
+        </>
+      );
+
+      cy.get('#udex-tooltip').as("tooltip")
+      .invoke('attr', 'open', 'true');
+    
+      cy.get("@tooltip")
+          .should("have.attr", "open");
+
+      cy.get("body").realClick();
+
+      cy.get("@tooltip")
+          .should("not.have.attr", "open");
+
+      cy.get('#udex-tooltip').as("tooltip")
+      .invoke('attr', 'open', 'true');
+    
+      cy.get("@tooltip")
+          .should("have.attr", "open");
+  });
 });

package/cypress/specs/Upload.cy.tsx

@@ -18,13 +18,22 @@ const requiredUpload = <UDExUpload
   required>
 </UDExUpload>
 
+const disabledUpload = <UDExUpload 
+  id="disabledUpload" 
+  additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
+  uploadButtonText="Choose file(s)"
+  uploadTitle="Upload title"
+  multiple={false}
+  disabled>
+</UDExUpload>
+
 const singleUpload = <UDExUpload 
   id="singleUpload" 
   additionalText="Max 10MB files are allowed. Only support .jpg, .png and .svg files"
   uploadButtonText="Choose file(s)"
   uploadTitle="Upload title"
   multiple={false}
-  errorText="Only one attachment is allowed">
+  supportingText="Only one attachment is allowed">
     <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
 </UDExUpload>
 
@@ -59,6 +68,14 @@ describe("Upload", () => {
     });
   })
 
+  describe("Disabled", () => {
+    it("correctly disabled button for uploading when specified", () => {
+      cy.mount(disabledUpload)
+      cy.get("#disabledUpload").shadow().find("udex-button").should("have.attr", "disabled")
+      cy.get("#disabledUpload").shadow().find("udex-button").should("have.attr", "aria-disabled", "true")
+    });
+  })
+
   describe("Single", () => {
     beforeEach(() => {
       cy.mount(singleUpload)
@@ -69,7 +86,7 @@ describe("Upload", () => {
       .find("#fileUploader").click()
 
      cy.get("#singleUpload").shadow()
-      .find(".udex-upload__error").should("have.text", "Only one attachment is allowed")
+      .find(".udex-upload__supporting-error-text").should("have.text", "Only one attachment is allowed")
     });
   })
 
@@ -83,7 +100,7 @@ describe("Upload", () => {
       uploadTitle="Upload title"
       multiple={false}
       onFileDelete={handleDelete}
-      errorText="Only one attachment is allowed">
+      supportingText="Only one attachment is allowed">
           <UDExUploadItem fileName="File1" uploadState="Uploading" uploadPercentage={33}></UDExUploadItem>
       </UDExUpload>
     );

package/dist/AssetsVariables.js

@@ -1,7 +1,7 @@
 import { getScopedVarName } from "@ui5/webcomponents-base/dist/CustomElementsScope.js";
 const variablesOverwrite = `:root {
   /* Browser Scrollbar */
-  ${getScopedVarName("browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
+  ${getScopedVarName("--browser_scrollbar_border_radius")}: var(--udexRadiusM, 8px);
 
   /* Tooltip */
   ${getScopedVarName("--_ui5_popover_box_shadow")}: 0px 0px 0px 1px var(--udexColorGrey4);

package/dist/AssetsVariables.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,gBAAgB,CAAC,iCAAiC,CAAC;;;IAGnD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;;;MAGhD,gBAAgB,CAAC,4CAA4C,CAAC;;;;;;;MAO9D,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;;CAEtD,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\nconst variablesOverwrite = `:root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n\n  udex-search {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}
+{"version":3,"file":"AssetsVariables.js","sourceRoot":"","sources":["../src/AssetsVariables.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,qDAAqD,CAAC;AAEvF,MAAM,kBAAkB,GAAG;;IAEvB,gBAAgB,CAAC,mCAAmC,CAAC;;;IAGrD,gBAAgB,CAAC,2BAA2B,CAAC;;;IAG7C,gBAAgB,CAAC,0BAA0B,CAAC;;;IAG5C,gBAAgB,CAAC,sCAAsC,CAAC;IACxD,gBAAgB,CAAC,kCAAkC,CAAC;;;IAGpD,gBAAgB,CAAC,4CAA4C,CAAC;IAC9D,gBAAgB,CAAC,gCAAgC,CAAC;IAClD,gBAAgB,CAAC,wCAAwC,CAAC;IAC1D,gBAAgB,CAAC,uCAAuC,CAAC;IACzD,gBAAgB,CAAC,6CAA6C,CAAC;IAC/D,gBAAgB,CAAC,oDAAoD,CAAC;IACtE,gBAAgB,CAAC,gDAAgD,CAAC;IAClE,gBAAgB,CAAC,gCAAgC,CAAC;;;MAGhD,gBAAgB,CAAC,4CAA4C,CAAC;;;;;;;MAO9D,gBAAgB,CAAC,uBAAuB,CAAC;MACzC,gBAAgB,CAAC,wBAAwB,CAAC;MAC1C,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,oCAAoC,CAAC;MACtD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,2CAA2C,CAAC;MAC7D,gBAAgB,CAAC,8BAA8B,CAAC;MAChD,gBAAgB,CAAC,+BAA+B,CAAC;MACjD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,uCAAuC,CAAC;MACzD,gBAAgB,CAAC,iCAAiC,CAAC;MACnD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,gCAAgC,CAAC;MAClD,gBAAgB,CAAC,+BAA+B,CAAC;;CAEtD,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["import { getScopedVarName } from \"@ui5/webcomponents-base/dist/CustomElementsScope.js\";\n\nconst variablesOverwrite = `:root {\n  /* Browser Scrollbar */\n  ${getScopedVarName(\"--browser_scrollbar_border_radius\")}: var(--udexRadiusM, 8px);\n\n  /* Tooltip */\n  ${getScopedVarName(\"--_ui5_popover_box_shadow\")}: 0px 0px 0px 1px var(--udexColorGrey4);\n\n  /* Tokenizer */\n  ${getScopedVarName(\"--_ui5_tokenizer_padding\")}: var(--udexSpacer12, 12px);\n\n  /* Carousel */\n  ${getScopedVarName(\"--ui5_carousel_active_dot_background\")}: var(--udexColorBlue8, #0057D2);\n  ${getScopedVarName(\"--ui5_carousel_active_dot_border\")}: 1px solid var(--udexColorBlue8, #0057D2);\n\n  /* Calendar & Date Picker */\n  ${getScopedVarName(\"--_ui5_daypicker_daynames_container_height\")}: 42px;\n  ${getScopedVarName(\"--_ui5_daypicker_dayname_color\")}: var(--udexColorGrey6, #5B738B);\n  ${getScopedVarName(\"--_ui5_daypicker_item_now_border_color\")}: var(--udexColorPink8, #A100C2);\n  ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n  ${getScopedVarName(\"--_ui5_daypicker_item_select_between_border\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_middle_button_focus_outline\")}: 1px solid var(--udexColorBlue9, #0040B0);\n  ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_box_shadow\")}: none;\n  ${getScopedVarName(\"--_ui5_calendar_header_padding\")}: 0;\n\n  udex-search {\n    ${getScopedVarName(\"--_ui5_button_pressed_focused_border_color\")}: transparent;\n  }\n\n  .sapUiSizeCompact,\n  .ui5-content-density-compact,\n  [data-ui5-compact-size] {\n    /* Calendar & Date Picker */\n    ${getScopedVarName(\"--_ui5_calendar_width\")}: 371px;\n    ${getScopedVarName(\"--_ui5_calendar_height\")}: auto;\n    ${getScopedVarName(\"--_ui5_calendar_top_bottom_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_left_right_padding\")}: var(--udexSpacer8, 8px);\n    ${getScopedVarName(\"--_ui5_calendar_header_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_calendar_header_arrow_button_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_width\")}: 42px;\n    ${getScopedVarName(\"--_ui5_day_picker_item_height\")}: 42px;\n    ${getScopedVarName(\"--_ui5_daypicker_weekname_color\")}: var(--udexColorGrey6, #5B738B);\n    ${getScopedVarName(\"--_ui5_daypicker_item_weeekend_filter\")}: none;\n    ${getScopedVarName(\"--_ui5_month_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_monthpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n    ${getScopedVarName(\"--_ui5_year_picker_item_height\")}: 36px;\n    ${getScopedVarName(\"--_ui5_yearpicker_item_margin\")}: -8px 0 var(--udexSpacer16, 16px) 0;\n  }\n`;\n\nexport default variablesOverwrite;\n"]}

package/dist/Checkbox.d.ts

@@ -1,6 +1,9 @@
 import CheckBox from "@ui5/webcomponents/dist/CheckBox.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+import type Label from "@ui5/webcomponents/dist/Label.js";
 /**
  * @class
  *
@@ -29,8 +32,22 @@ declare class UDExCheckbox extends CheckBox {
      */
     /** @ts-expect-error */
     valueState: `${UDExCheckboxValueState}`;
+    /**
+     * Defines whether the component text wraps when there is not enough space..
+     *
+     * @default "None"
+     * @public
+     */
+    wrappingType: `${WrappingType}`;
     static i18nBundle: I18nBundle;
+    _handleResizeBound: ResizeObserverCallback;
+    constructor();
+    onEnterDOM(): void;
+    onExitDOM(): void;
     valueStateMappings(): Record<string, string>;
+    _handleResize(): void;
     get valueStateText(): string | undefined;
+    get label(): Label | null;
+    get labelHeight(): number;
 }
 export default UDExCheckbox;

package/dist/Checkbox.js

@@ -12,8 +12,11 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from "./generated/i18n/i18n-defaults.js";
 import UDExCheckboxValueState from "./types/Checkbox.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 // Styles
 import CheckboxCss from "./generated/themes/Checkbox.css.js";
+import WrappingType from "@ui5/webcomponents/dist/types/WrappingType.js";
+const LABEL_TEXT_HEIGHT = 18.5;
 /**
  * @class
  *
@@ -35,7 +38,7 @@ import CheckboxCss from "./generated/themes/Checkbox.css.js";
  */
 let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
     constructor() {
-        super(...arguments);
+        super();
         /**
          * Defines the value state of the component.
          *
@@ -43,6 +46,20 @@ let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
          * @public
          */
         this.valueState = UDExCheckboxValueState.None;
+        /**
+         * Defines whether the component text wraps when there is not enough space..
+         *
+         * @default "None"
+         * @public
+         */
+        this.wrappingType = WrappingType.None;
+        this._handleResizeBound = this._handleResize.bind(this);
+    }
+    onEnterDOM() {
+        ResizeHandler.register(this, this._handleResizeBound);
+    }
+    onExitDOM() {
+        ResizeHandler.deregister(this, this._handleResizeBound);
     }
     valueStateMappings() {
         return {
@@ -50,16 +67,34 @@ let UDExCheckbox = UDExCheckbox_1 = class UDExCheckbox extends CheckBox {
             [UDExCheckboxValueState.Success]: UDExCheckbox_1.i18nBundle.getText(VALUE_STATE_SUCCESS),
         };
     }
+    _handleResize() {
+        const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;
+        if (labelOverflows && this.wrappingType === WrappingType.Normal) {
+            this.label?.classList.add("udex-checkbox__label-multiline");
+        }
+        else {
+            this.label?.classList.remove("udex-checkbox__label-multiline");
+        }
+    }
     get valueStateText() {
         if (this.valueState !== UDExCheckboxValueState.None) {
             return this.valueStateMappings()[this.valueState];
         }
     }
+    get label() {
+        return this.shadowRoot.querySelector("[ui5-label]");
+    }
+    get labelHeight() {
+        return this.label?.getBoundingClientRect().height || 0;
+    }
 };
 __decorate([
     property()
     /** @ts-expect-error */
 ], UDExCheckbox.prototype, "valueState", void 0);
+__decorate([
+    property()
+], UDExCheckbox.prototype, "wrappingType", void 0);
 __decorate([
     i18n("@sapudex/web-components")
 ], UDExCheckbox, "i18nBundle", void 0);

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,WAAW,MAAM,sDAAsD,CAAC;AAC/E,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAC3D,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE3F,OAAO,sBAAsB,MAAM,qBAAqB,CAAC;AAEzD,SAAS;AACT,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AAOH,IAAM,YAAY,oBAAlB,MAAM,YAAa,SAAQ,QAAQ;IAAnC;;QACE;;;;;WAKG;QAGD,eAAU,GAAgC,sBAAsB,CAAC,IAAI,CAAC;IAiB1E,CAAC;IAZC,kBAAkB;QAChB,OAAO;YACL,CAAC,sBAAsB,CAAC,KAAK,CAAC,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,iBAAiB,CAAC;YAClF,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE,cAAY,CAAC,UAAU,CAAC,OAAO,CAAC,mBAAmB,CAAC;SACvF,CAAC;IACJ,CAAC;IAED,IAAI,cAAc;QAChB,IAAI,IAAI,CAAC,UAAU,KAAK,sBAAsB,CAAC,IAAI,EAAE,CAAC;YACpD,OAAO,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACpD,CAAC;IACH,CAAC;CACF,CAAA;AAjBG;IAFD,QAAQ,EAAE;IACX,uBAAuB;gDACiD;AAGjE;IADN,IAAI,CAAC,yBAAyB,CAAC;sCACF;AAZ1B,YAAY;IANjB,aAAa,CAAC;QACb,GAAG,EAAE,eAAe;QACpB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE,WAAW,CAAC;KACvC,CAAC;GAEI,YAAY,CA0BjB;AAED,YAAY,CAAC,MAAM,EAAE,CAAC;AAEtB,eAAe,YAAY,CAAC","sourcesContent":["import customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../src/Checkbox.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 CheckBox from \"@ui5/webcomponents/dist/CheckBox.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport { VALUE_STATE_ERROR, VALUE_STATE_SUCCESS } from \"./generated/i18n/i18n-defaults.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExCheckboxValueState from \"./types/Checkbox.js\";\nimport type { ResizeObserverCallback } from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\nimport ResizeHandler from \"@ui5/webcomponents-base/dist/delegate/ResizeHandler.js\";\n\n// Styles\nimport CheckboxCss from \"./generated/themes/Checkbox.css.js\";\nimport WrappingType from \"@ui5/webcomponents/dist/types/WrappingType.js\";\nimport type Label from \"@ui5/webcomponents/dist/Label.js\";\n\nconst LABEL_TEXT_HEIGHT = 18.5;\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-checkbox</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Checkbox.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends CheckBox\n * @tagname udex-checkbox\n * @public\n */\n@customElement({\n  tag: \"udex-checkbox\",\n  renderer: jsxRenderer,\n  styles: [CheckBox.styles, CheckboxCss],\n})\n\nclass UDExCheckbox extends CheckBox {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n  /** @ts-expect-error */\n    valueState: `${UDExCheckboxValueState}` = UDExCheckboxValueState.None;\n\n  /**\n   * Defines whether the component text wraps when there is not enough space..\n   *\n   * @default \"None\"\n   * @public\n   */\n  @property()\n    wrappingType: `${WrappingType}` = WrappingType.None;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _handleResizeBound: ResizeObserverCallback;\n\n  constructor() {\n    super();\n    this._handleResizeBound = this._handleResize.bind(this);\n  }\n\n  onEnterDOM(): void {\n    ResizeHandler.register(this, this._handleResizeBound);\n  }\n\n  onExitDOM(): void {\n    ResizeHandler.deregister(this, this._handleResizeBound);\n  }\n\n  valueStateMappings(): Record<string, string> {\n    return {\n      [UDExCheckboxValueState.Error]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_ERROR),\n      [UDExCheckboxValueState.Success]: UDExCheckbox.i18nBundle.getText(VALUE_STATE_SUCCESS),\n    };\n  }\n\n  _handleResize(): void {\n    const labelOverflows = this.labelHeight > LABEL_TEXT_HEIGHT;\n\n    if (labelOverflows && this.wrappingType === WrappingType.Normal) {\n      this.label?.classList.add(\"udex-checkbox__label-multiline\");\n    } else {\n      this.label?.classList.remove(\"udex-checkbox__label-multiline\");\n    }\n  }\n\n  get valueStateText(): string | undefined {\n    if (this.valueState !== UDExCheckboxValueState.None) {\n      return this.valueStateMappings()[this.valueState];\n    }\n  }\n\n  get label(): Label | null {\n    return this.shadowRoot!.querySelector<Label>(\"[ui5-label]\");\n  }\n\n  get labelHeight(): number {\n    return this.label?.getBoundingClientRect().height || 0;\n  }\n}\n\nUDExCheckbox.define();\n\nexport default UDExCheckbox;\n"]}

package/dist/FilterMenu.d.ts

@@ -148,6 +148,13 @@ declare class UDExFilterMenu extends UDExSearchableListBase {
      * @public
      */
     accessibleName?: string;
+    /**
+     * Defines id (or many ids) of the elements that contain the ARIA name of the component.
+     *
+     * @default ""
+     * @public
+     */
+    accessibleNameRef: string;
     /**
      * Allows setting a custom role.
      * @default "None"

package/dist/FilterMenu.js

@@ -349,6 +349,9 @@ __decorate([
 __decorate([
     property()
 ], UDExFilterMenu.prototype, "accessibleName", void 0);
+__decorate([
+    property()
+], UDExFilterMenu.prototype, "accessibleNameRef", void 0);
 __decorate([
     property()
 ], UDExFilterMenu.prototype, "accessibleRole", void 0);