@sapudex/web-components 2.32.0 → 2.32.1

package/cypress/specs/SelectBox.cy.tsx

@@ -439,6 +439,41 @@ describe("SelectBox", () => {
     .should("have.text", "JavaScript");
   });
 
+  it("SingleSelect mode - typing after selecting an item shows typed character in the search field", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow().find(".udex-text-field__search").as("searchField");
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("#select-box").shadow().find("udex-list-item").eq(0).click();
+
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "JavaScript");
+
+    cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();
+    cy.get("@searchField").realPress("j");
+
+    cy.get("@searchField").should("have.value", "j");
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+  });
+
+  it("SingleSelect mode - programmatic selection change updates the displayed value", () => {
+    cy.mount(shortComponent);
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("not.exist");
+
+    cy.get("#select-box").find("udex-select-box-item").eq(1)
+      .then($el => {
+        ($el[0] as any).selected = true;
+      });
+
+    cy.get("#select-box").shadow()
+      .find(".udex-text-field__single-label")
+      .should("have.text", "Python");
+  });
+
   it("MultiSelect mode - after clicking on the item dropdown is opened", () => {
     cy.mount(multiSelect);
     cy.get("#select-box").shadow().find(".udex-text-field__trigger").click();

package/cypress/specs/StepInput.cy.tsx

@@ -0,0 +1,507 @@
+import { UDExStepInput } from "../support/component-imports.js";
+
+// ---------------------------------------------------------------------------
+// Helper: asserts focus has moved to the native <input> inside udex-text-field.
+// _incValue()/_decValue() call this.input.focus() when a boundary is hit.
+//
+// With nested shadow DOMs, document.activeElement returns the outermost shadow
+// host visible to the document (<udex-step-input>). To confirm focus is
+// specifically on <udex-text-field>, we traverse one level deeper using
+// shadowRoot.activeElement on the step-input's shadow root.
+// ---------------------------------------------------------------------------
+function assertFocusIsInput() {
+  cy.get("[udex-step-input]").then(($host) => {
+    cy.document().then((doc) => {
+      const stepInput = $host[0];
+      const textField = stepInput.shadowRoot?.querySelector("[udex-text-field]");
+      expect(
+        doc.activeElement === stepInput && stepInput.shadowRoot?.activeElement === textField,
+        "focus is inside the text field after boundary was reached",
+      ).to.be.true;
+    });
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Cypress component tests — StepInput focus management on button disable
+// ---------------------------------------------------------------------------
+describe("UDExStepInput — focus management on button disable", () => {
+  // -------------------------------------------------------------------------
+  // Scenario 1: increment to max via click
+  //   Setup: value=4, min=0, max=5, step=1
+  //   Action: click the + button (value becomes 5, _incIconDisabled becomes true)
+  //   Expect: focus moves to the inner text input, NOT lost to document.body
+  // -------------------------------------------------------------------------
+  describe("incrementing to max value — click", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-inc-to-max"
+          value={4}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the increment button after reaching max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+
+    // Updated: source sends focus to this.input (inner text input), not the opposite button
+    it("moves focus to the text input when increment button becomes disabled on click", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      assertFocusIsInput();
+    });
+
+    it("keeps the decrement button enabled after incrementing to max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 2: increment to max via keyboard (Enter on the + button)
+  //   Setup: value=4, min=0, max=5, step=1
+  //   Action: focus the + button, press Enter (triggers onClick → _incValue)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("incrementing to max value — Enter key", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-inc-to-max-kbd"
+          value={4}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("moves focus to the text input when increment button becomes disabled via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      assertFocusIsInput();
+    });
+
+    it("disables the increment button after reaching max via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 3: decrement to min via click
+  //   Setup: value=1, min=0, max=5, step=1
+  //   Action: click the - button (value becomes 0, _decIconDisabled becomes true)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("decrementing to min value — click", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-dec-to-min"
+          value={1}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the decrement button after reaching min", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+
+    // Updated: source sends focus to this.input (inner text input), not the opposite button
+    it("moves focus to the text input when decrement button becomes disabled on click", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      assertFocusIsInput();
+    });
+
+    it("keeps the increment button enabled after decrementing to min", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 4: decrement to min via keyboard (Enter on the - button)
+  //   Setup: value=1, min=0, max=5, step=1
+  //   Action: focus the - button, press Enter (triggers onClick → _decValue)
+  //   Expect: focus moves to the inner text input
+  // -------------------------------------------------------------------------
+  describe("decrementing to min value — Enter key", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-dec-to-min-kbd"
+          value={1}
+          min={0}
+          max={5}
+          step={1}
+        />,
+      );
+    });
+
+    it("moves focus to the text input when decrement button becomes disabled via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      assertFocusIsInput();
+    });
+
+    it("disables the decrement button after reaching min via Enter key", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .shadow()
+        .find(".ui5-button-root")
+        .focus()
+        .realPress("Enter");
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 5: min equals max — both buttons disabled on render
+  //   Both buttons are disabled from the start; clicking them (forced) must
+  //   not change the value because _incIconInactive / _decIconInactive is true.
+  // -------------------------------------------------------------------------
+  describe("min equals max — both buttons disabled on render", () => {
+    beforeEach(() => {
+      cy.mount(
+        <UDExStepInput
+          id="si-min-eq-max"
+          value={3}
+          min={3}
+          max={3}
+          step={1}
+        />,
+      );
+    });
+
+    it("disables the increment button when min equals max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+    });
+
+    it("disables the decrement button when min equals max", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+    });
+
+    it("does not change value when increment button is clicked while both are disabled", () => {
+      // The click guard (_incIconInactive) prevents any value change.
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click({ force: true }); // force because the element is disabled
+      cy.get("[udex-step-input]").should("have.attr", "value", "3");
+    });
+
+    it("does not change value when decrement button is clicked while both are disabled", () => {
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click({ force: true });
+      cy.get("[udex-step-input]").should("have.attr", "value", "3");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 6: focus stays inside the component boundary
+  //   After hitting a boundary the active element must still be a descendant
+  //   of udex-step-input — focus must never escape to document.body.
+  //   This validates the core WCAG requirement for focus management.
+  // -------------------------------------------------------------------------
+  describe("focus stays inside component when a button becomes disabled", () => {
+    it("focus remains within step-input after incrementing to max", () => {
+      cy.mount(
+        <UDExStepInput value={4} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      cy.document().then((doc) => {
+        cy.get("[udex-step-input]").then(($host) => {
+          const activeEl = doc.activeElement;
+          expect(
+            activeEl === $host[0] || $host[0].contains(activeEl),
+            "focus stays within udex-step-input after incrementing to max",
+          ).to.be.true;
+        });
+      });
+    });
+
+    it("focus remains within step-input after decrementing to min", () => {
+      cy.mount(
+        <UDExStepInput value={1} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      cy.document().then((doc) => {
+        cy.get("[udex-step-input]").then(($host) => {
+          const activeEl = doc.activeElement;
+          expect(
+            activeEl === $host[0] || $host[0].contains(activeEl),
+            "focus stays within udex-step-input after decrementing to min",
+          ).to.be.true;
+        });
+      });
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 7: focus is NOT redirected when boundary is not reached
+  //   _incValue / _decValue must only redirect focus when the boundary is hit.
+  //   Increments and decrements that land in the middle of the range must leave
+  //   focus on the clicked button (default browser behaviour).
+  // -------------------------------------------------------------------------
+  describe("focus is not redirected when boundary is not reached", () => {
+    it("does not redirect focus to text input after a non-boundary increment", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // Button must still be enabled (value 3, below max 5)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+
+      // Focus must NOT have been redirected to the text field
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[udex-text-field]")
+        .then(($textField) => {
+          cy.document().then((doc) => {
+            const activeEl = doc.activeElement;
+            expect(
+              activeEl === $textField[0] || $textField[0].contains(activeEl),
+              "focus was NOT incorrectly redirected to text input after non-boundary increment",
+            ).to.be.false;
+          });
+        });
+    });
+
+    it("does not redirect focus to text input after a non-boundary decrement", () => {
+      cy.mount(
+        <UDExStepInput value={3} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // Button must still be enabled (value 2, above min 0)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+
+      // Focus must NOT have been redirected to the text field
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[udex-text-field]")
+        .then(($textField) => {
+          cy.document().then((doc) => {
+            const activeEl = doc.activeElement;
+            expect(
+              activeEl === $textField[0] || $textField[0].contains(activeEl),
+              "focus was NOT incorrectly redirected to text input after non-boundary decrement",
+            ).to.be.false;
+          });
+        });
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 8: aria-live region suppressed on boundary hit
+  //   When _incValue / _decValue hits a boundary and redirects focus to the
+  //   input, the aria-live region must be empty so the screen reader does not
+  //   double-announce the value (once from the live region and once from the
+  //   focused input).
+  // -------------------------------------------------------------------------
+  describe("aria-live region suppressed on boundary hit", () => {
+    it("clears the aria-live region when incrementing to max", () => {
+      cy.mount(
+        <UDExStepInput value={4} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The increment button must be disabled (boundary reached)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("have.attr", "disabled");
+
+      // The aria-live div must be empty to prevent SR double-announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "");
+    });
+
+    it("clears the aria-live region when decrementing to min", () => {
+      cy.mount(
+        <UDExStepInput value={1} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // The decrement button must be disabled (boundary reached)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("have.attr", "disabled");
+
+      // The aria-live div must be empty to prevent SR double-announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "");
+    });
+  });
+
+  // -------------------------------------------------------------------------
+  // Scenario 9: aria-live region still announces for mid-range changes
+  //   When the value changes but does NOT hit a boundary, the aria-live
+  //   region must contain the updated value so the screen reader announces
+  //   it normally.
+  // -------------------------------------------------------------------------
+  describe("aria-live region announces value for mid-range changes", () => {
+    it("shows the updated value in the aria-live region after a non-boundary increment", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The increment button must still be enabled (value 3, below max 5)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .should("not.have.attr", "disabled");
+
+      // The aria-live div must contain the new value for SR announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "3");
+    });
+
+    it("shows the updated value in the aria-live region after a non-boundary decrement", () => {
+      cy.mount(
+        <UDExStepInput value={3} min={0} max={5} step={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .click();
+
+      // The decrement button must still be enabled (value 2, above min 0)
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_dec")
+        .should("not.have.attr", "disabled");
+
+      // The aria-live div must contain the new value for SR announcement
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "2");
+    });
+
+    it("shows the precision-formatted value in the aria-live region", () => {
+      cy.mount(
+        <UDExStepInput value={2} min={0} max={5} step={0.1} valuePrecision={1} />,
+      );
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find(".udex-step-input__button_inc")
+        .click();
+
+      // The aria-live div must contain the precision-formatted value
+      cy.get("[udex-step-input]")
+        .shadow()
+        .find("[aria-live]")
+        .should("have.text", "2.1");
+    });
+  });
+});

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

@@ -54,6 +54,7 @@ import UDExSlider from "../../instrumented/Slider.js";
 import UDExSocialMediaButton from "../../instrumented/SocialMediaButton.js";
 import UDExStatusBadge from "../../instrumented/StatusBadge.js";
 import UDExStatusMessage from "../../instrumented/StatusMessage.js";
+import UDExStepInput from "../../instrumented/StepInput.js";
 import UDExSwitch from "../../instrumented/Switch.js";
 import UDExTable from "../../instrumented/Table.js";
 import UDExTableCell from "../../instrumented/TableCell.js";
@@ -130,6 +131,7 @@ export {
   UDExSocialMediaButton,
   UDExStatusBadge,
   UDExStatusMessage,
+  UDExStepInput,
   UDExSwitch,
   UDExTable,
   UDExTableCell,

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

@@ -31,9 +31,9 @@ import UDExInputGroup from "../../src/InputGroup.js";
 import UDExLink from "../../src/Link.js";
 import UDExLinkList from "../../src/LinkList.js";
 import UDExLinkListItem from "../../src/LinkListItem.js";
-import UDExList from "../../instrumented/List.js";
-import UDExListGroupHeader from "../../instrumented/ListGroupHeader.js";
-import UDExListItem from "../../instrumented/ListItem.js";
+import UDExList from "../../src/List.js";
+import UDExListGroupHeader from "../../src/ListGroupHeader.js";
+import UDExListItem from "../../src/ListItem.js";
 import UDExMastheadProfileMenu from "../../src/MastheadProfileMenu.js";
 import UDExMessageStrip from "../../src/MessageStrip.js";
 import UDExMediaPlayer from "../../src/MediaPlayer.js";
@@ -54,6 +54,7 @@ import UDExSlider from "../../src/Slider.js";
 import UDExSocialMediaButton from "../../src/SocialMediaButton.js";
 import UDExStatusBadge from "../../src/StatusBadge.js";
 import UDExStatusMessage from "../../src/StatusMessage.js";
+import UDExStepInput from "../../src/StepInput.js";
 import UDExSwitch from "../../src/Switch.js";
 import UDExTab from "../../src/Tab.js";
 import UDExTabNavigation from "../../src/TabNavigation.js";
@@ -132,6 +133,7 @@ export {
   UDExSocialMediaButton,
   UDExStatusBadge,
   UDExStatusMessage,
+  UDExStepInput,
   UDExSwitch,
   UDExTab,
   UDExTabNavigation,

package/dist/HeroBanner.d.ts

@@ -1,6 +1,4 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
-import "@ui5/webcomponents-icons/dist/media-play.js";
-import "@ui5/webcomponents-icons/dist/media-pause.js";
 export declare enum UDExImageLoadingStrategies {
     Eager = "eager",
     Lazy = "lazy"
@@ -106,7 +104,6 @@ declare class UDExHeroBanner extends UI5Element {
     get hasMediaContent(): boolean;
     get hasAdditionalContent(): boolean;
     get hasCustomBackgroundPicture(): boolean;
-    get mediaButtonIconName(): "media-play" | "media-pause";
     get _video(): HTMLVideoElement | null | undefined;
     _toggleMediaButton(): void;
     _calculateMediaButtonState(): void;

package/dist/HeroBanner.js

@@ -11,8 +11,6 @@ import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/media-play.js";
-import "@ui5/webcomponents-icons/dist/media-pause.js";
 import HeroBannerTemplate from "./HeroBannerTemplate.js";
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
@@ -76,9 +74,6 @@ let UDExHeroBanner = class UDExHeroBanner extends UI5Element {
     get hasCustomBackgroundPicture() {
         return !!this.backgroundPicture?.length;
     }
-    get mediaButtonIconName() {
-        return this._isVideoRunning ? "media-pause" : "media-play";
-    }
     get _video() {
         return this.shadowRoot?.querySelector("video");
     }

package/dist/HeroBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeroBanner.js","sourceRoot":"","sources":["../src/HeroBanner.ts"],"names":[],"mappings":"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","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/media-play.js\";\nimport \"@ui5/webcomponents-icons/dist/media-pause.js\";\nimport HeroBannerTemplate from \"./HeroBannerTemplate.js\";\n\n// Styles\nimport HeroBannerCss from \"./generated/themes/HeroBanner.css.js\";\n\nexport enum UDExImageLoadingStrategies {\n  Eager = \"eager\",\n  Lazy = \"lazy\",\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-hero-banner\n * @public\n */\n@customElement({\n  tag: \"udex-hero-banner\",\n  renderer: jsxRenderer,\n  styles: HeroBannerCss,\n  template: HeroBannerTemplate,\n  dependencies: [Icon],\n})\nclass UDExHeroBanner extends UI5Element {\n  /**\n   * Allows control over the background image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImage?: string;\n\n  /**\n   * Allows control over the background image loading strategy.\n   *\n   * @public\n   */\n  @property()\n    backgroundImageLoadingStrategy: `${UDExImageLoadingStrategies}` = UDExImageLoadingStrategies.Eager;\n\n  /**\n   * Used as the label for background image.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImageLabel?: string;\n\n  /**\n   * Allows control over the background video source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideo?: string;\n\n  /**\n   * Used as the label for background video.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideoLabel?: string;\n\n  /**\n   * Allows control over the background color.\n   * Value provided should be compatible with standard CSS rendering, e.g:\n   *  - HEX: \"#FFF\", \"#FFFFFF\", \"FFFFFFFF\"\n   *  - RGB/A: \"rgb(255, 255, 255)\", \"rgba(255, 255, 255, 1)\"\n   *  - HSL/A: \"hsl(0, 100%, 100%)\", \"hsla(0, 100%, 100%, 1\"\n   *  - Variables: \"var(--sapShell_Background)\", \"var(--udexColorNeutralWhite)\"\n   *  - Text values: \"white\", \"red\"\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundColor?: string;\n\n  /**\n   * Allows control over the background-image to set css gradient.\n   * Value provided should be compatible with standard CSS linear-gradient rendering, e.g:\n   *  linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);\n   *  linear-gradient(to bottom, var(--udexColorBlue2) 0%,var(--udexColorBlue4) 100%);\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundGradient?: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _isVideoRunning?: boolean;\n\n  /**\n   * Slot for primary content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    content?: Array<HTMLElement>;\n\n  /**\n   * Slot for image or video content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    mediaContent?: Array<HTMLElement>;\n\n  /**\n   * Slot for any additional content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    additionalContent?: Array<HTMLElement>;\n\n  /**\n   * Slot background picture override.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    backgroundPicture?: Array<HTMLElement>;\n\n  get hasBackgroundImage(): boolean {\n    return !!this.backgroundImage;\n  }\n  get hasBackgroundVideo(): boolean {\n    return !!this.backgroundVideo;\n  }\n  get wrapperBackgroundColor(): string {\n    return this.backgroundColor ? this.backgroundColor : \"transparent\";\n  }\n\n  get wrapperBackgroundImage(): string {\n    return this.backgroundGradient ? this.backgroundGradient : \"\";\n  }\n\n  /**\n   * Determines if the video should autoplay based on the user's global preference.\n   */\n  get shouldVideoAutoplay() {\n    return !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  }\n\n  get heroBannerClasses(): string {\n    const heroBannerClasses = [\"udex-hero-banner\"];\n    if (this.hasBackgroundVideo) {\n      heroBannerClasses.push(\"udex-hero-banner--video\");\n    }\n    return heroBannerClasses.join(\" \");\n  }\n\n  get hasMediaContent() {\n    return !!this.mediaContent?.length;\n  }\n\n  get hasAdditionalContent() {\n    return !!this.additionalContent?.length;\n  }\n\n  get hasCustomBackgroundPicture() {\n    return !!this.backgroundPicture?.length;\n  }\n\n  get mediaButtonIconName() {\n    return this._isVideoRunning ? \"media-pause\" : \"media-play\";\n  }\n  get _video() {\n    return this.shadowRoot?.querySelector<HTMLVideoElement>(\"video\");\n  }\n\n  _toggleMediaButton(): void {\n    if (this._video?.paused) {\n      this._video?.play();\n    } else {\n      this._video?.pause();\n    }\n    this._calculateMediaButtonState();\n  }\n\n  _calculateMediaButtonState() {\n    this._isVideoRunning = this._video ? !this._video.paused : false;\n  }\n\n  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {\n    return element.tagName === \"DIV\";\n  };\n\n  _handleKeydown(event: KeyboardEvent): void {\n    const target = <HTMLElement>event.target;\n    if (this._isHTMLDivElement(target) && isSpace(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._toggleMediaButton();\n    }\n  }\n\n  onEnterDOM() {\n    if (this.backgroundVideo) {\n      if (this.backgroundColor) {\n        this.style.setProperty(\"--udexHeroBannerBackgroundVideoColor\", `${this.wrapperBackgroundColor}`);\n      }\n      this._video?.addEventListener(\"play\", () => {\n        this._calculateMediaButtonState();\n      });\n    }\n  }\n}\nUDExHeroBanner.define();\n\nexport default UDExHeroBanner;\n"]}
+{"version":3,"file":"HeroBanner.js","sourceRoot":"","sources":["../src/HeroBanner.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AACnE,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,EAAE,OAAO,EAAE,MAAM,sCAAsC,CAAC;AAC/D,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,kBAAkB,MAAM,yBAAyB,CAAC;AAEzD,SAAS;AACT,OAAO,aAAa,MAAM,sCAAsC,CAAC;AAEjE,MAAM,CAAN,IAAY,0BAGX;AAHD,WAAY,0BAA0B;IACpC,6CAAe,CAAA;IACf,2CAAa,CAAA;AACf,CAAC,EAHW,0BAA0B,KAA1B,0BAA0B,QAGrC;AAED;;;;;;;GAOG;AAQH,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QASE;;;;WAIG;QAED,mCAA8B,GAAoC,0BAA0B,CAAC,KAAK,CAAC;QAoJrG,sBAAiB,GAAG,CAAC,OAAoB,EAA6B,EAAE;YACtE,OAAO,OAAO,CAAC,OAAO,KAAK,KAAK,CAAC;QACnC,CAAC,CAAC;IAqBJ,CAAC;IAjFC,IAAI,kBAAkB;QACpB,OAAO,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAI,kBAAkB;QACpB,OAAO,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IACD,IAAI,sBAAsB;QACxB,OAAO,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC;IACrE,CAAC;IAED,IAAI,sBAAsB;QACxB,OAAO,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAChE,CAAC;IAED;;OAEG;IACH,IAAI,mBAAmB;QACrB,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;IACxE,CAAC;IAED,IAAI,iBAAiB;QACnB,MAAM,iBAAiB,GAAG,CAAC,kBAAkB,CAAC,CAAC;QAC/C,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YAC5B,iBAAiB,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;QACpD,CAAC;QACD,OAAO,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrC,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,YAAY,EAAE,MAAM,CAAC;IACrC,CAAC;IAED,IAAI,oBAAoB;QACtB,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC1C,CAAC;IAED,IAAI,0BAA0B;QAC5B,OAAO,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,MAAM,CAAC;IAC1C,CAAC;IAED,IAAI,MAAM;QACR,OAAO,IAAI,CAAC,UAAU,EAAE,aAAa,CAAmB,OAAO,CAAC,CAAC;IACnE,CAAC;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YACxB,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,CAAC;QACvB,CAAC;QACD,IAAI,CAAC,0BAA0B,EAAE,CAAC;IACpC,CAAC;IAED,0BAA0B;QACxB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC;IACnE,CAAC;IAMD,cAAc,CAAC,KAAoB;QACjC,MAAM,MAAM,GAAgB,KAAK,CAAC,MAAM,CAAC;QACzC,IAAI,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;YACrD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,UAAU;QACR,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,sCAAsC,EAAE,GAAG,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;YACnG,CAAC;YACD,IAAI,CAAC,MAAM,EAAE,gBAAgB,CAAC,MAAM,EAAE,GAAG,EAAE;gBACzC,IAAI,CAAC,0BAA0B,EAAE,CAAC;YACpC,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;CACF,CAAA;AAnLG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACA;AAQzB;IADD,QAAQ,EAAE;sEAC0F;AAQnG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACK;AAQ9B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACA;AAQzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4DACK;AAc9B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uDACA;AAWzB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0DACG;AAG5B;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;uDACnB;AAS1B;IADD,IAAI,EAAE;+CACwB;AAS7B;IADD,IAAI,EAAE;oDAC6B;AASlC;IADD,IAAI,EAAE;yDACkC;AASvC;IADD,IAAI,EAAE;yDACkC;AAvGrC,cAAc;IAPnB,aAAa,CAAC;QACb,GAAG,EAAE,kBAAkB;QACvB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,aAAa;QACrB,QAAQ,EAAE,kBAAkB;QAC5B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,cAAc,CA0LnB;AACD,cAAc,CAAC,MAAM,EAAE,CAAC;AAExB,eAAe,cAAc,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport slot from \"@ui5/webcomponents-base/dist/decorators/slot.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport { isSpace } from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport HeroBannerTemplate from \"./HeroBannerTemplate.js\";\n\n// Styles\nimport HeroBannerCss from \"./generated/themes/HeroBanner.css.js\";\n\nexport enum UDExImageLoadingStrategies {\n  Eager = \"eager\",\n  Lazy = \"lazy\",\n}\n\n/**\n * @class\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-hero-banner\n * @public\n */\n@customElement({\n  tag: \"udex-hero-banner\",\n  renderer: jsxRenderer,\n  styles: HeroBannerCss,\n  template: HeroBannerTemplate,\n  dependencies: [Icon],\n})\nclass UDExHeroBanner extends UI5Element {\n  /**\n   * Allows control over the background image source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImage?: string;\n\n  /**\n   * Allows control over the background image loading strategy.\n   *\n   * @public\n   */\n  @property()\n    backgroundImageLoadingStrategy: `${UDExImageLoadingStrategies}` = UDExImageLoadingStrategies.Eager;\n\n  /**\n   * Used as the label for background image.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundImageLabel?: string;\n\n  /**\n   * Allows control over the background video source.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideo?: string;\n\n  /**\n   * Used as the label for background video.\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundVideoLabel?: string;\n\n  /**\n   * Allows control over the background color.\n   * Value provided should be compatible with standard CSS rendering, e.g:\n   *  - HEX: \"#FFF\", \"#FFFFFF\", \"FFFFFFFF\"\n   *  - RGB/A: \"rgb(255, 255, 255)\", \"rgba(255, 255, 255, 1)\"\n   *  - HSL/A: \"hsl(0, 100%, 100%)\", \"hsla(0, 100%, 100%, 1\"\n   *  - Variables: \"var(--sapShell_Background)\", \"var(--udexColorNeutralWhite)\"\n   *  - Text values: \"white\", \"red\"\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundColor?: string;\n\n  /**\n   * Allows control over the background-image to set css gradient.\n   * Value provided should be compatible with standard CSS linear-gradient rendering, e.g:\n   *  linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);\n   *  linear-gradient(to bottom, var(--udexColorBlue2) 0%,var(--udexColorBlue4) 100%);\n   *\n   * @public\n   */\n  @property({ type: String })\n    backgroundGradient?: string;\n\n  @property({ type: Boolean, noAttribute: true })\n    _isVideoRunning?: boolean;\n\n  /**\n   * Slot for primary content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    content?: Array<HTMLElement>;\n\n  /**\n   * Slot for image or video content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    mediaContent?: Array<HTMLElement>;\n\n  /**\n   * Slot for any additional content.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    additionalContent?: Array<HTMLElement>;\n\n  /**\n   * Slot background picture override.\n   *\n   * @slot\n   * @public\n   */\n  @slot()\n    backgroundPicture?: Array<HTMLElement>;\n\n  get hasBackgroundImage(): boolean {\n    return !!this.backgroundImage;\n  }\n  get hasBackgroundVideo(): boolean {\n    return !!this.backgroundVideo;\n  }\n  get wrapperBackgroundColor(): string {\n    return this.backgroundColor ? this.backgroundColor : \"transparent\";\n  }\n\n  get wrapperBackgroundImage(): string {\n    return this.backgroundGradient ? this.backgroundGradient : \"\";\n  }\n\n  /**\n   * Determines if the video should autoplay based on the user's global preference.\n   */\n  get shouldVideoAutoplay() {\n    return !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  }\n\n  get heroBannerClasses(): string {\n    const heroBannerClasses = [\"udex-hero-banner\"];\n    if (this.hasBackgroundVideo) {\n      heroBannerClasses.push(\"udex-hero-banner--video\");\n    }\n    return heroBannerClasses.join(\" \");\n  }\n\n  get hasMediaContent() {\n    return !!this.mediaContent?.length;\n  }\n\n  get hasAdditionalContent() {\n    return !!this.additionalContent?.length;\n  }\n\n  get hasCustomBackgroundPicture() {\n    return !!this.backgroundPicture?.length;\n  }\n\n  get _video() {\n    return this.shadowRoot?.querySelector<HTMLVideoElement>(\"video\");\n  }\n\n  _toggleMediaButton(): void {\n    if (this._video?.paused) {\n      this._video?.play();\n    } else {\n      this._video?.pause();\n    }\n    this._calculateMediaButtonState();\n  }\n\n  _calculateMediaButtonState() {\n    this._isVideoRunning = this._video ? !this._video.paused : false;\n  }\n\n  _isHTMLDivElement = (element: HTMLElement): element is HTMLDivElement => {\n    return element.tagName === \"DIV\";\n  };\n\n  _handleKeydown(event: KeyboardEvent): void {\n    const target = <HTMLElement>event.target;\n    if (this._isHTMLDivElement(target) && isSpace(event)) {\n      event.preventDefault();\n      event.stopPropagation();\n      this._toggleMediaButton();\n    }\n  }\n\n  onEnterDOM() {\n    if (this.backgroundVideo) {\n      if (this.backgroundColor) {\n        this.style.setProperty(\"--udexHeroBannerBackgroundVideoColor\", `${this.wrapperBackgroundColor}`);\n      }\n      this._video?.addEventListener(\"play\", () => {\n        this._calculateMediaButtonState();\n      });\n    }\n  }\n}\nUDExHeroBanner.define();\n\nexport default UDExHeroBanner;\n"]}