@sapudex/web-components 2.20.0 → 2.20.1

package/dist/Carousel.d.ts

@@ -1,6 +1,9 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type UI5Carousel from "@ui5/webcomponents/dist/Carousel.js";
+import type { UI5CustomEvent } from "@ui5/webcomponents-base";
+import type CarouselPageIndicatorType from "@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js";
+import type UDExButton from "./Button.js";
 export declare enum UDExCarouselNavigationPosition {
     top = "top",
     bottom = "bottom"
@@ -47,6 +50,30 @@ declare class UDExCarousel extends UI5Element {
      * @public
      */
     items: Array<HTMLElement>;
+    /**
+     * Defines the number of items per page depending on the carousel width.
+     *
+     * - 'S' for screens smaller than 600 pixels.
+     * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+     * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+     * - 'XL' for screens greater than or equal to 1440 pixels.
+     *
+     * One item per page is shown by default.
+     * @default "S1 M1 L1 XL1"
+     * @public
+     */
+    itemsPerPage: string;
+    /**
+     * Defines the style of the page indicator.
+     * Available options are:
+     *
+     * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
+     * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+     * @since 1.10
+     * @default "Default"
+     * @public
+     */
+    pageIndicatorType: `${CarouselPageIndicatorType}`;
     /**
      * Defines the prev button is disabled
      *
@@ -81,8 +108,8 @@ declare class UDExCarousel extends UI5Element {
     get _carousel(): UI5Carousel | null;
     get _ui5CarouselRoot(): HTMLElement | null | undefined;
     _calculateDisabledButtonsState(): void;
-    _prevButtonClick(): void;
-    _nextButtonClick(): void;
+    _prevButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
+    _nextButtonClick(e: UI5CustomEvent<UDExButton, "click">): void;
     _onkeydown(e: KeyboardEvent): void;
     onAfterRendering(): void;
 }

package/dist/Carousel.js

@@ -60,6 +60,30 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
          * @public
          */
         this.navigationPlacement = UDExCarouselNavigationPosition.top;
+        /**
+         * Defines the number of items per page depending on the carousel width.
+         *
+         * - 'S' for screens smaller than 600 pixels.
+         * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.
+         * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.
+         * - 'XL' for screens greater than or equal to 1440 pixels.
+         *
+         * One item per page is shown by default.
+         * @default "S1 M1 L1 XL1"
+         * @public
+         */
+        this.itemsPerPage = "S1 M1 L1 XL1";
+        /**
+         * Defines the style of the page indicator.
+         * Available options are:
+         *
+         * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)
+         * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)
+         * @since 1.10
+         * @default "Default"
+         * @public
+         */
+        this.pageIndicatorType = "Default";
         /**
          * Defines the accessible ARIA name of the component.
          *
@@ -102,20 +126,18 @@ let UDExCarousel = UDExCarousel_1 = class UDExCarousel extends UI5Element {
         this.isPrevButtonDisabled = !this._carousel?.hasPrev;
         this.isNextButtonDisabled = !this._carousel?.hasNext;
     }
-    _prevButtonClick() {
+    _prevButtonClick(e) {
         if (this.isPrevButtonDisabled) {
             return;
         }
-        this._carousel?.navigateLeft();
-        this._ui5CarouselRoot?.focus();
+        this._carousel?._navButtonClick(e);
         this._calculateDisabledButtonsState();
     }
-    _nextButtonClick() {
+    _nextButtonClick(e) {
         if (this.isNextButtonDisabled) {
             return;
         }
-        this._carousel?.navigateRight();
-        this._ui5CarouselRoot?.focus();
+        this._carousel?._navButtonClick(e);
         this._calculateDisabledButtonsState();
     }
     _onkeydown(e) {
@@ -134,6 +156,12 @@ __decorate([
 __decorate([
     slot({ "default": true, type: HTMLElement, individualSlots: true })
 ], UDExCarousel.prototype, "items", void 0);
+__decorate([
+    property()
+], UDExCarousel.prototype, "itemsPerPage", void 0);
+__decorate([
+    property()
+], UDExCarousel.prototype, "pageIndicatorType", void 0);
 __decorate([
     property({ type: Boolean, noAttribute: true })
 ], UDExCarousel.prototype, "isPrevButtonDisabled", void 0);

package/dist/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\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-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n\nclass UDExCarousel extends UI5Element {\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<HTMLElement>;\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick() {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateLeft();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick() {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?.navigateRight();\n    this._ui5CarouselRoot?.focus();\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}
+{"version":3,"file":"Carousel.js","sourceRoot":"","sources":["../src/Carousel.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 i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport {\n  isUp, isDown, isRight, isLeft,\n} from \"@ui5/webcomponents-base/dist/Keys.js\";\nimport { CAROUSEL_NEXT_ARROW_TEXT, CAROUSEL_PREVIOUS_ARROW_TEXT } from \"./generated/i18n/i18n-defaults.js\";\nimport redirectAttributes from \"./utils/redirectAttributes.js\";\nimport type UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport type { UI5CustomEvent } from \"@ui5/webcomponents-base\";\nimport type Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nimport CarouselTemplate from \"./CarouselTemplate.js\";\n\n// Styles\nimport CarouselCss from \"./generated/themes/Carousel.css.js\";\nimport type CarouselPageIndicatorType from \"@ui5/webcomponents/dist/types/CarouselPageIndicatorType.js\";\nimport type UDExButton from \"./Button.js\";\n\nexport enum UDExCarouselNavigationPosition {\n  top = \"top\",\n  bottom = \"bottom\",\n}\n\nexport enum UDExCarouselButtonDesign {\n  Secondary = \"Secondary\",\n  Tertiary = \"Tertiary\",\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-carousel</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Carousel.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @tagname udex-carousel\n * @public\n */\n@customElement({\n  tag: \"udex-carousel\",\n  renderer: jsxRenderer,\n  styles: CarouselCss,\n  template: CarouselTemplate,\n})\n\nclass UDExCarousel extends UI5Element {\n  /**\n   * Defines the position of the navigation.\n   * <br><br>\n   * Available options are:\n   * <ul>\n   * <li><code>top</code> - the navigation button are placed above the component.</li>\n   * <li><code>bottom</code> - the navigation button arrows are placed below the component.</li>\n   * </ul>\n   *\n   * @public\n   */\n  @property()\n    navigationPlacement: `${UDExCarouselNavigationPosition}` = UDExCarouselNavigationPosition.top;\n\n  /**\n   * Defines the content of the component.\n   *\n   * @slot\n   * @public\n   */\n  @slot({ \"default\": true, type: HTMLElement, individualSlots: true })\n    items!: Array<HTMLElement>;\n\n  /**\n   * Defines the number of items per page depending on the carousel width.\n   *\n   * - 'S' for screens smaller than 600 pixels.\n   * - 'M' for screens greater than or equal to 600 pixels and smaller than 1024 pixels.\n   * - 'L' for screens greater than or equal to 1024 pixels and smaller than 1440 pixels.\n   * - 'XL' for screens greater than or equal to 1440 pixels.\n   *\n   * One item per page is shown by default.\n   * @default \"S1 M1 L1 XL1\"\n   * @public\n   */\n  @property()\n    itemsPerPage = \"S1 M1 L1 XL1\";\n\n  /**\n   * Defines the style of the page indicator.\n   * Available options are:\n   *\n   * - `Default` - The page indicator will be visualized as dots if there are fewer than 9 pages. If there are more pages, the page indicator will switch to displaying the current page and the total number of pages. (e.g. X of Y)\n   * - `Numeric` - The page indicator will display the current page and the total number of pages. (e.g. X of Y)\n   * @since 1.10\n   * @default \"Default\"\n   * @public\n   */\n  @property()\n    pageIndicatorType: `${CarouselPageIndicatorType}` = \"Default\";\n\n  /**\n   * Defines the prev button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isPrevButtonDisabled!: boolean;\n\n  /**\n   * Defines the next button is disabled\n   *\n   * @default false\n   * @private\n   */\n  @property({ type: Boolean, noAttribute: true })\n    isNextButtonDisabled!: boolean;\n\n  /**\n   * Defines the accessible ARIA name of the component.\n   *\n   * @default ''\n   * @public\n   */\n  @property({ type: String })\n    accessibleName: string = \"\";\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get nextPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_NEXT_ARROW_TEXT);\n  }\n\n  get previousPageText(): string {\n    return UDExCarousel.i18nBundle.getText(CAROUSEL_PREVIOUS_ARROW_TEXT);\n  }\n\n  get carouselClass(): string {\n    const classes = \"udex-carousel\";\n\n    return `${classes} udex-carousel__navigation--${this.navigationPlacement}`;\n  }\n\n  get buttonDesign(): UDExCarouselButtonDesign {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top\n      ? UDExCarouselButtonDesign.Secondary\n      : UDExCarouselButtonDesign.Tertiary;\n  }\n\n  get showNavigationButtons(): { top: boolean; bottom: boolean } {\n    return {\n      top: this.navigationPlacement === UDExCarouselNavigationPosition.top,\n      bottom: this.navigationPlacement === UDExCarouselNavigationPosition.bottom,\n    };\n  }\n\n  get _hidePageIndicator(): boolean {\n    return this.navigationPlacement === UDExCarouselNavigationPosition.top;\n  }\n\n  get _carousel(): UI5Carousel | null {\n    return this.shadowRoot!.querySelector<UI5Carousel>(\"[ui5-carousel]\");\n  }\n\n  get _ui5CarouselRoot(): HTMLElement | null | undefined {\n    return this._carousel?.shadowRoot?.querySelector(\".ui5-carousel-root\");\n  }\n\n  _calculateDisabledButtonsState() {\n    this.isPrevButtonDisabled = !this._carousel?.hasPrev;\n    this.isNextButtonDisabled = !this._carousel?.hasNext;\n  }\n\n  _prevButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isPrevButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\n    this._calculateDisabledButtonsState();\n  }\n\n  _nextButtonClick(e: UI5CustomEvent<UDExButton, \"click\">) {\n    if (this.isNextButtonDisabled) {\n      return;\n    }\n\n    this._carousel?._navButtonClick(e as unknown as UI5CustomEvent<Icon, \"click\">);\n    this._calculateDisabledButtonsState();\n  }\n\n  _onkeydown(e: KeyboardEvent) {\n    if (isLeft(e) || isDown(e) || isRight(e) || isUp(e)) {\n      this._calculateDisabledButtonsState();\n    }\n  }\n\n  onAfterRendering() {\n    redirectAttributes(this, \"carousel\");\n\n    this._calculateDisabledButtonsState();\n  }\n}\n\nUDExCarousel.define();\n\nexport default UDExCarousel;\n"]}

package/dist/CarouselTemplate.js

@@ -6,10 +6,10 @@ import CarouselArrowsPlacement from "@ui5/webcomponents/dist/types/CarouselArrow
 import slimArrowLeft from "@ui5/webcomponents-icons/dist/slim-arrow-left.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 export default function CarouselTemplate() {
-    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
+    return (_jsxs("div", { className: this.carouselClass, onKeyDown: this._onkeydown, children: [this.showNavigationButtons.top && navigation.call(this), _jsx(UI5Carousel, { itemsPerPage: this.itemsPerPage, pageIndicatorType: this.pageIndicatorType, id: "carousel", hideNavigationArrows: true, arrowsPlacement: CarouselArrowsPlacement.Navigation, accessibleName: this.accessibleName, hidePageIndicator: this._hidePageIndicator, children: this.items.map(item => _jsx("slot", { name: item._individualSlot })) }), this.showNavigationButtons.bottom && navigation.call(this)] }));
 }
 function navigation() {
     const btnClassName = "udex-carousel__navigation-button";
-    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
+    return (_jsxs("div", { class: "udex-carousel__navigation-wrapper", part: "navigation", children: [_jsx(UDExButton, { "data-ui5-arrow-back": true, size: UDExButtonSize.Large, disabled: this.isPrevButtonDisabled, class: btnClassName, icon: slimArrowLeft, design: this.buttonDesign, tooltip: this.previousPageText, onClick: this._prevButtonClick, part: "prev-button" }), _jsx(UDExButton, { "data-ui5-arrow-forward": true, size: UDExButtonSize.Large, disabled: this.isNextButtonDisabled, class: btnClassName, icon: slimArrowRight, design: this.buttonDesign, tooltip: this.nextPageText, onClick: this._nextButtonClick, part: "next-button" })] }));
 }
 //# sourceMappingURL=CarouselTemplate.js.map

package/dist/CarouselTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"CarouselTemplate.js","sourceRoot":"","sources":["../src/CarouselTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,WAAW,MAAM,qCAAqC,CAAC;AAC9D,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAEnD,OAAO,uBAAuB,MAAM,0DAA0D,CAAC;AAC/F,OAAO,aAAa,MAAM,kDAAkD,CAAC;AAC7E,OAAO,cAAc,MAAM,mDAAmD,CAAC;AAE/E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACtC,OAAO,CACL,eAAK,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,EAAE,IAAI,CAAC,UAAU,aAC3D,IAAI,CAAC,qBAAqB,CAAC,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EACxD,KAAC,WAAW,IACV,YAAY,EAAE,IAAI,CAAC,YAAY,EAC/B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,EAAE,EAAC,UAAU,EACb,oBAAoB,QACpB,eAAe,EAAE,uBAAuB,CAAC,UAAU,EACnD,cAAc,EAAE,IAAI,CAAC,cAAc,EACnC,iBAAiB,EAAE,IAAI,CAAC,kBAAkB,YACzC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrB,eAAM,IAAI,EAAG,IAAqB,CAAC,eAAe,GAAS,CAC5D,GACW,EACb,IAAI,CAAC,qBAAqB,CAAC,MAAM,IAAI,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IACvD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU;IACjB,MAAM,YAAY,GAAG,kCAAkC,CAAC;IAExD,OAAO,CACL,eAAK,KAAK,EAAC,mCAAmC,EAAC,IAAI,EAAC,YAAY,aAC9D,KAAC,UAAU,iCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,EACb,KAAC,UAAU,oCAET,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,QAAQ,EAAE,IAAI,CAAC,oBAAoB,EACnC,KAAK,EAAE,YAAY,EACnB,IAAI,EAAE,cAAc,EACpB,MAAM,EAAE,IAAI,CAAC,YAAY,EACzB,OAAO,EAAE,IAAI,CAAC,YAAY,EAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,aAAa,GACP,IACT,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Carousel from \"./Carousel.js\";\nimport UI5Carousel from \"@ui5/webcomponents/dist/Carousel.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport type SlottedChild from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport CarouselArrowsPlacement from \"@ui5/webcomponents/dist/types/CarouselArrowsPlacement.js\";\nimport slimArrowLeft from \"@ui5/webcomponents-icons/dist/slim-arrow-left.js\";\nimport slimArrowRight from \"@ui5/webcomponents-icons/dist/slim-arrow-right.js\";\n\nexport default function CarouselTemplate(this: Carousel) {\n  return (\n    <div className={this.carouselClass} onKeyDown={this._onkeydown}>\n      {this.showNavigationButtons.top && navigation.call(this)}\n      <UI5Carousel\n        itemsPerPage={this.itemsPerPage}\n        pageIndicatorType={this.pageIndicatorType}\n        id=\"carousel\"\n        hideNavigationArrows\n        arrowsPlacement={CarouselArrowsPlacement.Navigation}\n        accessibleName={this.accessibleName}\n        hidePageIndicator={this._hidePageIndicator}>\n        {this.items.map(item =>\n          <slot name={(item as SlottedChild)._individualSlot}></slot>\n        )}\n      </UI5Carousel>\n      {this.showNavigationButtons.bottom && navigation.call(this)}\n    </div>\n  );\n}\n\nfunction navigation(this: Carousel) {\n  const btnClassName = \"udex-carousel__navigation-button\";\n\n  return (\n    <div class=\"udex-carousel__navigation-wrapper\" part=\"navigation\">\n      <UDExButton\n        data-ui5-arrow-back\n        size={UDExButtonSize.Large}\n        disabled={this.isPrevButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowLeft}\n        design={this.buttonDesign}\n        tooltip={this.previousPageText}\n        onClick={this._prevButtonClick}\n        part=\"prev-button\">\n      </UDExButton>\n      <UDExButton\n        data-ui5-arrow-forward\n        size={UDExButtonSize.Large}\n        disabled={this.isNextButtonDisabled}\n        class={btnClassName}\n        icon={slimArrowRight}\n        design={this.buttonDesign}\n        tooltip={this.nextPageText}\n        onClick={this._nextButtonClick}\n        part=\"next-button\">\n      </UDExButton>\n    </div>\n  );\n}\n"]}

package/dist/DatePicker.d.ts

@@ -1,10 +1,10 @@
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
+import type { CalendarSelectionChangeEventDetail } from "@ui5/webcomponents/dist/Calendar.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
+import type UDExTextField from "./TextField.js";
+import type UDExDropdown from "./Dropdown.js";
 import UDExValueState from "./types/common.js";
 export declare enum UDExDatePickerSelectionMode {
     Single = "Single",
@@ -193,7 +193,7 @@ declare class UDExDatePicker extends DateComponentBase {
     _buildEventData(value: string): UDExDatePickerSelectionChangeEventDetail;
     _updateValueAndFireDecoratorEvents(value: string, normalizeValue: boolean, e?: CustomEvent | null): void;
     _onInputChange(e: Event): void;
-    handleInputClick(e: MouseEvent | KeyboardEvent): void;
+    handleInputClick(e: CustomEvent<void>): void;
     /**
      * Used to provide selectedDates to the calendar based on the component's state
      * Override in derivatives to provide different rules for setting the calendar's selected dates

package/dist/DatePicker.js

@@ -6,23 +6,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var UDExDatePicker_1;
 import DateComponentBase from "@ui5/webcomponents/dist/DateComponentBase.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/dist/renderer/JsxRenderer.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
-// eslint-disable-next-line
-import Calendar from "@ui5/webcomponents/dist/Calendar.js";
-import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
 import "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/appointment-2.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from "./generated/i18n/i18n-defaults.js";
-import UDExTextField from "./TextField.js";
-import UDExDropdown from "./Dropdown.js";
-import UDExStatusMessage from "./StatusMessage.js";
 import UDExValueState from "./types/common.js";
 // Template
-import DatePickerTemplate from "./generated/templates/DatePickerTemplate.lit.js";
+import DatePickerTemplate from "./DatePickerTemplate.js";
 // Styles
 import DatePickerCss from "./generated/themes/DatePicker.css.js";
 import DatePickerPopoverCss from "./generated/themes/DatePickerPopover.css.js";
@@ -422,10 +416,9 @@ __decorate([
 UDExDatePicker = UDExDatePicker_1 = __decorate([
     customElement({
         tag: "udex-date-picker",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: [DatePickerCss, DatePickerPopoverCss],
         template: DatePickerTemplate,
-        dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],
     })
     /**
      * Fired when the selected dates change.

package/dist/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import DateComponentBase from \"@ui5/webcomponents/dist/DateComponentBase.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\n// eslint-disable-next-line\nimport Calendar, { CalendarSelectionChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport CalendarDate from \"@ui5/webcomponents/dist/CalendarDate.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from \"./generated/i18n/i18n-defaults.js\";\nimport UDExTextField from \"./TextField.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport UDExStatusMessage from \"./StatusMessage.js\";\nimport UDExValueState from \"./types/common.js\";\n\n// Template\nimport DatePickerTemplate from \"./generated/templates/DatePickerTemplate.lit.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css.js\";\nimport DatePickerPopoverCss from \"./generated/themes/DatePickerPopover.css.js\";\n\nexport enum UDExDatePickerSelectionMode {\n  Single = \"Single\",\n  Range = \"Range\",\n}\n\ntype UDExDatePickerSelectionChangeEventDetail = {\n  selectedValues: Array<string>;\n  selectedDates: Array<number | undefined>;\n  timestamp: number | undefined;\n};\n\ntype UDExDatePickerValueStateChangeEventDetail = {\n  valueState: `${UDExValueState}`,\n  valid: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-date-picker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/DatePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends DateComponentBase\n * @tagname udex-date-picker\n * @public\n */\n@customElement({\n  tag: \"udex-date-picker\",\n  renderer: litRender,\n  styles: [DatePickerCss, DatePickerPopoverCss],\n  template: DatePickerTemplate,\n  dependencies: [CalendarDate, Calendar, UDExTextField, UDExDropdown, UDExStatusMessage],\n})\n/**\n * Fired when the selected dates change.\n *\n * @allowPreventDefault\n * @param {Array<string>} selectedValues The selected dates\n * @param {Array<number>} selectedDates The selected dates as UTC timestamps\n * @public\n */\n@event(\"selection-change\", { cancelable: true, bubbles: true })\n\n/**\n * Fired before the value state of the component is updated internally.\n * The event is preventable, meaning that if it's default action is\n * prevented, the component will not update the value state.\n * @allowPreventDefault\n * @public\n * @param {string} UDExValueState The new `UDExValueState` that will be set.\n * @param {boolean} valid Indicator if the value is in between the min and max value.\n */\n@event(\"value-state-change\", { bubbles: true })\n\nclass UDExDatePicker extends DateComponentBase {\n  eventDetails!: {\n    \"selection-change\": UDExDatePickerSelectionChangeEventDetail,\n    \"value-state-change\": UDExDatePickerValueStateChangeEventDetail,\n  };\n  /**\n   * Defines selection mode of the calendar component.\n   *\n   * @default \"Single\"\n   * @public\n   */\n  @property()\n    selectionMode: `${UDExDatePickerSelectionMode}` = \"Single\";\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText: string = \"\";\n\n  /**\n   * Defines the value of the input.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    selectedDates: string = \"\";\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  /**\n   * Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").\n   * @default \"MMM dd, yyyy\"\n   * @public\n   */\n  @property({ type: String })\n    formatPattern: string = \"MMM dd, yyyy\";\n\n  /**\n   * The first date in the range during selection (this is a temporary value, not the first date in the value range)\n   * @private\n   */\n  @property()\n    _tempValue!: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  responsivePopover?: UDExDropdown;\n\n  private _prevDelimiter!: string | null;\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownTrigger(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownTrigger.active = false;\n    this._dropdownTrigger.iconActive = false;\n    this._dropdownTrigger.shadowRoot?.querySelector(\"input\")?.blur();\n    this._tempValue = \"\";\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownTrigger.iconActive = true;\n  }\n\n  _closeRespPopover(): void {\n    if (this.responsivePopover) {\n      this.responsivePopover.open = false;\n    }\n  }\n\n  _openRespPopover(): void {\n    this._dropdownTrigger.active = true;\n    this.responsivePopover = this._getResponsePopover();\n    this.responsivePopover.opener = this._dropdownTrigger._inputHolder;\n    this.responsivePopover.open = true;\n  }\n\n  hideCalendar(): void {\n    this._closeRespPopover();\n  }\n\n  showCalendar(): void {\n    this._openRespPopover();\n  }\n\n  handleCalendarChange(e: CustomEvent<CalendarSelectionChangeEventDetail>): void {\n    e.preventDefault();\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      const newValue = e.detail.selectedValues && e.detail.selectedValues[0];\n      this._updateValueAndFireDecoratorEvents(newValue, true, e);\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      const values = e.detail.selectedValues;\n\n      if (values.length === 0) {\n        return;\n      }\n\n      if (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date\n        this._tempValue = values[0];\n        return;\n      }\n\n      const newValue = this._buildValue(e.detail.selectedDates[0], e.detail.selectedDates[1]);\n      this._updateValueAndFireDecoratorEvents(newValue, true, e);\n    }\n\n    this.hideCalendar();\n  }\n\n  get _effectiveDelimiter(): string {\n    return \"-\";\n  }\n\n  _getInput(): HTMLInputElement | null | undefined {\n    return this._dropdownTrigger.shadowRoot?.querySelector(\"input\");\n  }\n\n  _splitValueByDelimiter(value: string) {\n    const valuesArray: Array<string> = [];\n    const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);\n\n    // if format successfully parse the value, the value contains only single date\n    if (this.getFormat().parse(value)) {\n      valuesArray[0] = partsArray.join(this._effectiveDelimiter);\n      valuesArray[1] = \"\";\n\n      return valuesArray;\n    }\n\n    valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);\n    valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);\n\n    return valuesArray;\n  }\n\n  /**\n   * Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date\n   * @private\n   */\n  _extractLastTimestamp(value: string) {\n    if (!value || !this._checkValueValidity(value)) {\n      return undefined;\n    }\n\n    const dateStrings = this._splitValueByDelimiter(value);\n    if (dateStrings[1]) {\n      const parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;\n      return parsedDate.getTime() / 1000;\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty\n   * @private\n   */\n  _extractFirstTimestamp(value: string) {\n    if (!value || !this._checkValueValidity(value)) {\n      return undefined;\n    }\n\n    const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)\n\n    const parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;\n    return parsedDate.getTime() / 1000;\n  }\n\n  /**\n   * Checks if a value is valid against the current date format of the DatePicker.\n   * @public\n   * @param value A value to be tested against the current date format\n   */\n  isValid(value: string): boolean {\n    if (value === \"\" || value === undefined) {\n      return true;\n    }\n\n    return !!this.getFormat().parse(value);\n  }\n\n  isValidRange(value: string): boolean {\n    const parts = this._splitValueByDelimiter(value);\n    return parts.length <= 2 && parts.every(dateString => this.isValid(dateString)); // must be at most 2 dates and each must be valid\n  }\n\n  isInValidRange(value: string): boolean {\n    if (value === \"\" || value === undefined) {\n      return true;\n    }\n\n    const calendarDate = this._getCalendarDateFromString(value);\n\n    if (!calendarDate || !this._minDate || !this._maxDate) {\n      return false;\n    }\n\n    return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();\n  }\n\n  /**\n   * Checks if a date is between the minimum and maximum date.\n   * @public\n   * @param value A value to be checked\n   */\n  isInValidRangeRange(value: string): boolean {\n    return this._splitValueByDelimiter(value).every(dateString => this.isInValidRange(dateString));\n  }\n\n  _checkValueValidity(value: string): boolean {\n    let result = false;\n    if (value === \"\") {\n      return true;\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      result = this.isValid(value) && this.isInValidRange(value);\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      result = this.isValidRange(value) && this.isInValidRangeRange(value);\n    }\n    return result;\n  }\n\n  /**\n   * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp\n   * @private\n   */\n  _buildValue(firstDateTimestamp: number | undefined, lastDateTimestamp: number | undefined) {\n    this._prevDelimiter = this._effectiveDelimiter;\n    if (firstDateTimestamp) {\n      const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);\n\n      if (!lastDateTimestamp) {\n        return firstDateString;\n      }\n\n      const lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);\n      return `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;\n    }\n\n    return \"\";\n  }\n\n  /**\n   * The parser understands many formats, but we need one format OR extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)\n   * @protected\n   */\n  normalizeValue(value: string) {\n    let result = \"\";\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      if (value === \"\") {\n        return value;\n      }\n      result = this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      const firstDateTimestamp = this._extractFirstTimestamp(value);\n      const lastDateTimestamp = this._extractLastTimestamp(value);\n      if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary\n        return this._buildValue(lastDateTimestamp, firstDateTimestamp);\n      }\n      result = this._buildValue(firstDateTimestamp, lastDateTimestamp);\n    }\n    return result;\n  }\n\n  _updateValueState() {\n    const valid = this._checkValueValidity(this.value);\n    const previousValueState = this.valueState;\n\n    this.valueState = valid ? UDExValueState.Standard : UDExValueState.Error;\n\n    const eventPrevented = !this.fireDecoratorEvent(\"value-state-change\", { valueState: this.valueState, valid });\n\n    if (eventPrevented) {\n      this.valueState = previousValueState;\n    }\n  }\n\n  _buildEventData(value: string): UDExDatePickerSelectionChangeEventDetail {\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      return {\n        selectedDates: [this._extractFirstTimestamp(value), this._extractLastTimestamp(value)],\n        selectedValues: this._splitValueByDelimiter(this.value),\n        timestamp: this._extractLastTimestamp(value),\n      };\n    }\n    return {\n      selectedDates: [this._extractFirstTimestamp(value)],\n      selectedValues: [value],\n      timestamp: this._extractFirstTimestamp(value),\n    };\n  }\n\n  _updateValueAndFireDecoratorEvents(value: string, normalizeValue: boolean, e?: CustomEvent | null) {\n    const valid = this._checkValueValidity(value);\n\n    if (valid && normalizeValue) {\n      value = this.normalizeValue(value); // transform valid values (in any format) to the correct format\n    }\n\n    this.value = value;\n    this._updateValueState(); // Change the value state to Error/None, but only if needed\n\n    if (!valid) { return; }\n\n    if (e) {\n      const { selectedDates, timestamp, selectedValues } = e.detail;\n\n      this.fireDecoratorEvent(\n        \"selection-change\",\n        {\n          timestamp,\n          selectedDates,\n          selectedValues,\n        },\n      );\n    } else {\n      this.fireDecoratorEvent(\n        \"selection-change\",\n        this._buildEventData(value),\n      );\n    }\n  }\n\n  _onInputChange(e: Event) {\n    this._updateValueAndFireDecoratorEvents((e.target as UDExDatePicker).value, true);\n  }\n\n  handleInputClick(e: MouseEvent | KeyboardEvent): void {\n    e.preventDefault();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.responsivePopover?.open) {\n      this.hideCalendar();\n    } else {\n      this.showCalendar();\n    }\n  }\n\n  /**\n   * Used to provide selectedDates to the calendar based on the component's state\n   * Override in derivatives to provide different rules for setting the calendar's selected dates\n   * @protected\n   */\n  get _calendarSelectedDates(): Array<string> {\n    if (this._tempValue) {\n      return [this._tempValue];\n    }\n\n    if (this.value && this._checkValueValidity(this.value)) {\n      return this.value.split(\" - \");\n    }\n\n    return [];\n  }\n\n  get startValue(): string {\n    return this._calendarSelectedDates[0] || \"\";\n  }\n\n  get endValue(): string {\n    return this._calendarSelectedDates[1] || \"\";\n  }\n\n  get accessibleIconName(): string {\n    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);\n  }\n\n  get dateAccessibleName(): string {\n    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);\n  }\n\n  get isRangeMode(): boolean {\n    return this.selectionMode === UDExDatePickerSelectionMode.Range;\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\nexport type { UDExDatePickerSelectionChangeEventDetail, UDExDatePickerValueStateChangeEventDetail };\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../src/DatePicker.ts"],"names":[],"mappings":"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","sourcesContent":["import DateComponentBase from \"@ui5/webcomponents/dist/DateComponentBase.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/dist/renderer/JsxRenderer.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport type { CalendarSelectionChangeEventDetail } from \"@ui5/webcomponents/dist/Calendar.js\";\nimport \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/appointment-2.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport { CALENDAR_ICON, DATEPICKER_DATE_DESCRIPTION } from \"./generated/i18n/i18n-defaults.js\";\nimport type UDExTextField from \"./TextField.js\";\nimport type UDExDropdown from \"./Dropdown.js\";\nimport UDExValueState from \"./types/common.js\";\n\n// Template\nimport DatePickerTemplate from \"./DatePickerTemplate.js\";\n\n// Styles\nimport DatePickerCss from \"./generated/themes/DatePicker.css.js\";\nimport DatePickerPopoverCss from \"./generated/themes/DatePickerPopover.css.js\";\n\nexport enum UDExDatePickerSelectionMode {\n  Single = \"Single\",\n  Range = \"Range\",\n}\n\ntype UDExDatePickerSelectionChangeEventDetail = {\n  selectedValues: Array<string>;\n  selectedDates: Array<number | undefined>;\n  timestamp: number | undefined;\n};\n\ntype UDExDatePickerValueStateChangeEventDetail = {\n  valueState: `${UDExValueState}`,\n  valid: boolean\n}\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-date-picker</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/DatePicker.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends DateComponentBase\n * @tagname udex-date-picker\n * @public\n */\n@customElement({\n  tag: \"udex-date-picker\",\n  renderer: jsxRenderer,\n  styles: [DatePickerCss, DatePickerPopoverCss],\n  template: DatePickerTemplate,\n})\n/**\n * Fired when the selected dates change.\n *\n * @allowPreventDefault\n * @param {Array<string>} selectedValues The selected dates\n * @param {Array<number>} selectedDates The selected dates as UTC timestamps\n * @public\n */\n@event(\"selection-change\", { cancelable: true, bubbles: true })\n\n/**\n * Fired before the value state of the component is updated internally.\n * The event is preventable, meaning that if it's default action is\n * prevented, the component will not update the value state.\n * @allowPreventDefault\n * @public\n * @param {string} UDExValueState The new `UDExValueState` that will be set.\n * @param {boolean} valid Indicator if the value is in between the min and max value.\n */\n@event(\"value-state-change\", { bubbles: true })\n\nclass UDExDatePicker extends DateComponentBase {\n  eventDetails!: {\n    \"selection-change\": UDExDatePickerSelectionChangeEventDetail,\n    \"value-state-change\": UDExDatePickerValueStateChangeEventDetail,\n  };\n  /**\n   * Defines selection mode of the calendar component.\n   *\n   * @default \"Single\"\n   * @public\n   */\n  @property()\n    selectionMode: `${UDExDatePickerSelectionMode}` = \"Single\";\n\n  /**\n   * Defines whether the component is read-only.\n   * <br><br>\n   * <b>Note:</b> A read-only component is not editable,\n   * but still provides visual feedback upon user interaction.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    readonly!: boolean;\n\n  /**\n   * Defines whether the component is required.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    required!: boolean;\n\n  /**\n   * Defines whether the component is in disabled state.\n   * <br><br>\n   * <b>Note:</b> A disabled component is completely noninteractive.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines supporting text under the input field.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingText: string = \"\";\n\n  /**\n   * Defines the value of the input.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    value: string = \"\";\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName!: string;\n\n  /**\n   * Receives id (or many ids) of the elements that label the component.\n   * @default \"\"\n   * @public\n   */\n  @property()\n    accessibleNameRef: string = \"\";\n\n  /**\n   * Defines label text for the input field.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines selected dates values.\n   *\n   * @default \"\"\n   * @private\n   */\n  @property({ type: String, noAttribute: true })\n    selectedDates: string = \"\";\n\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Standard\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExValueState}` = UDExValueState.Standard;\n\n  /**\n   * Defines the date format pattern (e.g., \\\"MMM dd, yyyy\\\" or \\\"MM/dd/yyyy\\\").\n   * @default \"MMM dd, yyyy\"\n   * @public\n   */\n  @property({ type: String })\n    formatPattern: string = \"MMM dd, yyyy\";\n\n  /**\n   * The first date in the range during selection (this is a temporary value, not the first date in the value range)\n   * @private\n   */\n  @property()\n    _tempValue!: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  responsivePopover?: UDExDropdown;\n\n  private _prevDelimiter!: string | null;\n\n  _getResponsePopover(): UDExDropdown {\n    return this.shadowRoot!.querySelector<UDExDropdown>(`#udex-${this.__id!}-calendar__popover`)!;\n  }\n\n  /**\n   * Getter for the interactive element that opens the overflow\n   * @private\n   */\n  get _dropdownTrigger(): UDExTextField {\n    return this.shadowRoot!.querySelector<UDExTextField>(\"[udex-text-field]\")!;\n  }\n\n  _afterDropdownClose(): void {\n    this._dropdownTrigger.active = false;\n    this._dropdownTrigger.iconActive = false;\n    this._dropdownTrigger.shadowRoot?.querySelector(\"input\")?.blur();\n    this._tempValue = \"\";\n  }\n\n  _afterDropdownOpen(): void {\n    this._dropdownTrigger.iconActive = true;\n  }\n\n  _closeRespPopover(): void {\n    if (this.responsivePopover) {\n      this.responsivePopover.open = false;\n    }\n  }\n\n  _openRespPopover(): void {\n    this._dropdownTrigger.active = true;\n    this.responsivePopover = this._getResponsePopover();\n    this.responsivePopover.opener = this._dropdownTrigger._inputHolder;\n    this.responsivePopover.open = true;\n  }\n\n  hideCalendar(): void {\n    this._closeRespPopover();\n  }\n\n  showCalendar(): void {\n    this._openRespPopover();\n  }\n\n  handleCalendarChange(e: CustomEvent<CalendarSelectionChangeEventDetail>): void {\n    e.preventDefault();\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      const newValue = e.detail.selectedValues && e.detail.selectedValues[0];\n      this._updateValueAndFireDecoratorEvents(newValue, true, e);\n    }\n\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      const values = e.detail.selectedValues;\n\n      if (values.length === 0) {\n        return;\n      }\n\n      if (values.length === 1) { // Do nothing until the user selects 2 dates, we don't change any state at all for one date\n        this._tempValue = values[0];\n        return;\n      }\n\n      const newValue = this._buildValue(e.detail.selectedDates[0], e.detail.selectedDates[1]);\n      this._updateValueAndFireDecoratorEvents(newValue, true, e);\n    }\n\n    this.hideCalendar();\n  }\n\n  get _effectiveDelimiter(): string {\n    return \"-\";\n  }\n\n  _getInput(): HTMLInputElement | null | undefined {\n    return this._dropdownTrigger.shadowRoot?.querySelector(\"input\");\n  }\n\n  _splitValueByDelimiter(value: string) {\n    const valuesArray: Array<string> = [];\n    const partsArray = value.split(this._prevDelimiter || this._effectiveDelimiter);\n\n    // if format successfully parse the value, the value contains only single date\n    if (this.getFormat().parse(value)) {\n      valuesArray[0] = partsArray.join(this._effectiveDelimiter);\n      valuesArray[1] = \"\";\n\n      return valuesArray;\n    }\n\n    valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);\n    valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);\n\n    return valuesArray;\n  }\n\n  /**\n   * Returns a UTC timestamp, representing the last date in the value string or undefined if the value is empty or there is just one date\n   * @private\n   */\n  _extractLastTimestamp(value: string) {\n    if (!value || !this._checkValueValidity(value)) {\n      return undefined;\n    }\n\n    const dateStrings = this._splitValueByDelimiter(value);\n    if (dateStrings[1]) {\n      const parsedDate = this.getFormat().parse(dateStrings[1], true) as Date;\n      return parsedDate.getTime() / 1000;\n    }\n\n    return undefined;\n  }\n\n  /**\n   * Returns a UTC timestamp, representing the first date in the value string or undefined if the value is empty\n   * @private\n   */\n  _extractFirstTimestamp(value: string) {\n    if (!value || !this._checkValueValidity(value)) {\n      return undefined;\n    }\n\n    const dateStrings = this._splitValueByDelimiter(value); // at least one item guaranteed due to the checks above (non-empty and valid)\n\n    const parsedDate = this.getFormat().parse(dateStrings[0], true) as Date;\n    return parsedDate.getTime() / 1000;\n  }\n\n  /**\n   * Checks if a value is valid against the current date format of the DatePicker.\n   * @public\n   * @param value A value to be tested against the current date format\n   */\n  isValid(value: string): boolean {\n    if (value === \"\" || value === undefined) {\n      return true;\n    }\n\n    return !!this.getFormat().parse(value);\n  }\n\n  isValidRange(value: string): boolean {\n    const parts = this._splitValueByDelimiter(value);\n    return parts.length <= 2 && parts.every(dateString => this.isValid(dateString)); // must be at most 2 dates and each must be valid\n  }\n\n  isInValidRange(value: string): boolean {\n    if (value === \"\" || value === undefined) {\n      return true;\n    }\n\n    const calendarDate = this._getCalendarDateFromString(value);\n\n    if (!calendarDate || !this._minDate || !this._maxDate) {\n      return false;\n    }\n\n    return calendarDate.valueOf() >= this._minDate.valueOf() && calendarDate.valueOf() <= this._maxDate.valueOf();\n  }\n\n  /**\n   * Checks if a date is between the minimum and maximum date.\n   * @public\n   * @param value A value to be checked\n   */\n  isInValidRangeRange(value: string): boolean {\n    return this._splitValueByDelimiter(value).every(dateString => this.isInValidRange(dateString));\n  }\n\n  _checkValueValidity(value: string): boolean {\n    let result = false;\n    if (value === \"\") {\n      return true;\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      result = this.isValid(value) && this.isInValidRange(value);\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      result = this.isValidRange(value) && this.isInValidRangeRange(value);\n    }\n    return result;\n  }\n\n  /**\n   * Builds a string value out of two UTC timestamps - this method is the counterpart to _extractFirstTimestamp/_extractLastTimestamp\n   * @private\n   */\n  _buildValue(firstDateTimestamp: number | undefined, lastDateTimestamp: number | undefined) {\n    this._prevDelimiter = this._effectiveDelimiter;\n    if (firstDateTimestamp) {\n      const firstDateString = this._getStringFromTimestamp(firstDateTimestamp * 1000);\n\n      if (!lastDateTimestamp) {\n        return firstDateString;\n      }\n\n      const lastDateString = this._getStringFromTimestamp(lastDateTimestamp * 1000);\n      return `${firstDateString} ${this._effectiveDelimiter} ${lastDateString}`;\n    }\n\n    return \"\";\n  }\n\n  /**\n   * The parser understands many formats, but we need one format OR extract both dates as timestamps, flip if necessary, and build (which will use the desired format so we enforce the format too)\n   * @protected\n   */\n  normalizeValue(value: string) {\n    let result = \"\";\n    if (this.selectionMode === UDExDatePickerSelectionMode.Single) {\n      if (value === \"\") {\n        return value;\n      }\n      result = this.getFormat().format(this.getFormat().parse(value, true), true); // it is important to both parse and format the date as UTC\n    }\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      const firstDateTimestamp = this._extractFirstTimestamp(value);\n      const lastDateTimestamp = this._extractLastTimestamp(value);\n      if (firstDateTimestamp && lastDateTimestamp && firstDateTimestamp > lastDateTimestamp) { // if both are timestamps (not undefined), flip if necessary\n        return this._buildValue(lastDateTimestamp, firstDateTimestamp);\n      }\n      result = this._buildValue(firstDateTimestamp, lastDateTimestamp);\n    }\n    return result;\n  }\n\n  _updateValueState() {\n    const valid = this._checkValueValidity(this.value);\n    const previousValueState = this.valueState;\n\n    this.valueState = valid ? UDExValueState.Standard : UDExValueState.Error;\n\n    const eventPrevented = !this.fireDecoratorEvent(\"value-state-change\", { valueState: this.valueState, valid });\n\n    if (eventPrevented) {\n      this.valueState = previousValueState;\n    }\n  }\n\n  _buildEventData(value: string): UDExDatePickerSelectionChangeEventDetail {\n    if (this.selectionMode === UDExDatePickerSelectionMode.Range) {\n      return {\n        selectedDates: [this._extractFirstTimestamp(value), this._extractLastTimestamp(value)],\n        selectedValues: this._splitValueByDelimiter(this.value),\n        timestamp: this._extractLastTimestamp(value),\n      };\n    }\n    return {\n      selectedDates: [this._extractFirstTimestamp(value)],\n      selectedValues: [value],\n      timestamp: this._extractFirstTimestamp(value),\n    };\n  }\n\n  _updateValueAndFireDecoratorEvents(value: string, normalizeValue: boolean, e?: CustomEvent | null) {\n    const valid = this._checkValueValidity(value);\n\n    if (valid && normalizeValue) {\n      value = this.normalizeValue(value); // transform valid values (in any format) to the correct format\n    }\n\n    this.value = value;\n    this._updateValueState(); // Change the value state to Error/None, but only if needed\n\n    if (!valid) { return; }\n\n    if (e) {\n      const { selectedDates, timestamp, selectedValues } = e.detail;\n\n      this.fireDecoratorEvent(\n        \"selection-change\",\n        {\n          timestamp,\n          selectedDates,\n          selectedValues,\n        },\n      );\n    } else {\n      this.fireDecoratorEvent(\n        \"selection-change\",\n        this._buildEventData(value),\n      );\n    }\n  }\n\n  _onInputChange(e: Event) {\n    this._updateValueAndFireDecoratorEvents((e.target as UDExDatePicker).value, true);\n  }\n\n  handleInputClick(e: CustomEvent<void>): void {\n    e.preventDefault();\n\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (this.responsivePopover?.open) {\n      this.hideCalendar();\n    } else {\n      this.showCalendar();\n    }\n  }\n\n  /**\n   * Used to provide selectedDates to the calendar based on the component's state\n   * Override in derivatives to provide different rules for setting the calendar's selected dates\n   * @protected\n   */\n  get _calendarSelectedDates(): Array<string> {\n    if (this._tempValue) {\n      return [this._tempValue];\n    }\n\n    if (this.value && this._checkValueValidity(this.value)) {\n      return this.value.split(\" - \");\n    }\n\n    return [];\n  }\n\n  get startValue(): string {\n    return this._calendarSelectedDates[0] || \"\";\n  }\n\n  get endValue(): string {\n    return this._calendarSelectedDates[1] || \"\";\n  }\n\n  get accessibleIconName(): string {\n    return UDExDatePicker.i18nBundle.getText(CALENDAR_ICON);\n  }\n\n  get dateAccessibleName(): string {\n    return this.accessibleName || UDExDatePicker.i18nBundle.getText(DATEPICKER_DATE_DESCRIPTION);\n  }\n\n  get isRangeMode(): boolean {\n    return this.selectionMode === UDExDatePickerSelectionMode.Range;\n  }\n}\n\nUDExDatePicker.define();\n\nexport default UDExDatePicker;\nexport type { UDExDatePickerSelectionChangeEventDetail, UDExDatePickerValueStateChangeEventDetail };\n"]}

package/dist/DatePickerPopoverTemplate.d.ts

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

package/dist/DatePickerPopoverTemplate.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import Calendar from "@ui5/webcomponents/dist/Calendar.js";
+import UDExDropdown from "./Dropdown.js";
+import { Placement } from "./types/Dropdown.js";
+import CalendarDate from "@ui5/webcomponents/dist/CalendarDate.js";
+import CalendarDateRange from "@ui5/webcomponents/dist/CalendarDateRange.js";
+export default function DatePickerPopoverTemplate() {
+    return (_jsx(UDExDropdown, { id: `udex-${this._id}-calendar__popover`, opener: `udex-${this._id}-calendar__opener`, class: "udex-date-picker__popover", placement: Placement.Bottom, "horizontal-align": "Start", onClose: this._afterDropdownClose, onOpen: this._afterDropdownOpen, children: _jsx(Calendar, { class: "udex-date-picker__calendar", onSelectionChange: this.handleCalendarChange, "selection-mode": this.selectionMode, "min-date": this.minDate, "max-date": this.maxDate, "format-pattern": this.formatPattern, children: this.isRangeMode ?
+                _jsx(CalendarDateRange, { "start-value": this.startValue, "end-value": this.endValue })
+                :
+                    this._calendarSelectedDates.map(date => _jsx(CalendarDate, { value: date })) }) }));
+}
+//# sourceMappingURL=DatePickerPopoverTemplate.js.map

package/dist/DatePickerPopoverTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPopoverTemplate.js","sourceRoot":"","sources":["../src/DatePickerPopoverTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,qCAAqC,CAAC;AAE3D,OAAO,YAAY,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,YAAY,MAAM,yCAAyC,CAAC;AACnE,OAAO,iBAAiB,MAAM,8CAA8C,CAAC;AAE7E,MAAM,CAAC,OAAO,UAAU,yBAAyB;IAC/C,OAAO,CACL,KAAC,YAAY,IACX,EAAE,EAAE,QAAQ,IAAI,CAAC,GAAG,oBAAoB,EACxC,MAAM,EAAE,QAAQ,IAAI,CAAC,GAAG,mBAAmB,EAC3C,KAAK,EAAC,2BAA2B,EACjC,SAAS,EAAE,SAAS,CAAC,MAAM,sBACV,OAAO,EACxB,OAAO,EAAE,IAAI,CAAC,mBAAmB,EACjC,MAAM,EAAE,IAAI,CAAC,kBAAkB,YAC/B,KAAC,QAAQ,IACP,KAAK,EAAC,4BAA4B,EAClC,iBAAiB,EAAE,IAAI,CAAC,oBAAoB,oBAC5B,IAAI,CAAC,aAAa,cACxB,IAAI,CAAC,OAAO,cACZ,IAAI,CAAC,OAAO,oBACN,IAAI,CAAC,aAAa,YAChC,IAAI,CAAC,WAAW,CAAC,CAAC;gBAClB,KAAC,iBAAiB,mBAAc,IAAI,CAAC,UAAU,eAAa,IAAI,CAAC,QAAQ,GAAsB;gBAC/F,CAAC;oBACD,IAAI,CAAC,sBAAsB,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACrC,KAAC,YAAY,IAAC,KAAK,EAAE,IAAI,GAAiB,CAC3C,GAEM,GACE,CAChB,CAAC;AACJ,CAAC","sourcesContent":["import Calendar from \"@ui5/webcomponents/dist/Calendar.js\";\nimport type DatePicker from \"./DatePicker.js\";\nimport UDExDropdown from \"./Dropdown.js\";\nimport { Placement } from \"./types/Dropdown.js\";\nimport CalendarDate from \"@ui5/webcomponents/dist/CalendarDate.js\";\nimport CalendarDateRange from \"@ui5/webcomponents/dist/CalendarDateRange.js\";\n\nexport default function DatePickerPopoverTemplate(this: DatePicker) {\n  return (\n    <UDExDropdown\n      id={`udex-${this._id}-calendar__popover`}\n      opener={`udex-${this._id}-calendar__opener`}\n      class=\"udex-date-picker__popover\"\n      placement={Placement.Bottom}\n      horizontal-align=\"Start\"\n      onClose={this._afterDropdownClose}\n      onOpen={this._afterDropdownOpen}>\n      <Calendar\n        class=\"udex-date-picker__calendar\"\n        onSelectionChange={this.handleCalendarChange}\n        selection-mode={this.selectionMode}\n        min-date={this.minDate}\n        max-date={this.maxDate}\n        format-pattern={this.formatPattern}>\n        { this.isRangeMode ?\n          <CalendarDateRange start-value={this.startValue} end-value={this.endValue}></CalendarDateRange>\n          :\n          this._calendarSelectedDates.map(date =>\n            <CalendarDate value={date}></CalendarDate>\n          )\n        }\n      </Calendar>\n    </UDExDropdown>\n  );\n}\n"]}

package/dist/DatePickerTemplate.d.ts

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

package/dist/DatePickerTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import DatePickerPopoverTemplate from "./DatePickerPopoverTemplate.js";
+import UDExTextField from "./TextField.js";
+export default function DatePickerTemplate() {
+    return (_jsxs(_Fragment, { children: [_jsx(UDExTextField, { class: "udex-date-picker__input", "_aria-has-popup": "grid", icon: "appointment-2", value: this.value, label: this.label, "accessible-name": this.dateAccessibleName, "accessible-name-ref": this.accessibleNameRef, "accessible-icon-name": this.accessibleIconName, ...(this.disabled ? { "disabled": true } : {}), ...(this.required ? { "required": true } : {}), ...(this.readonly ? { "readonly": true } : {}), onClickIcon: this.handleInputClick, onChange: this._onInputChange, "value-state": this.valueState, "supporting-text": this.supportingText }), DatePickerPopoverTemplate.call(this)] }));
+}
+//# sourceMappingURL=DatePickerTemplate.js.map

package/dist/DatePickerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerTemplate.js","sourceRoot":"","sources":["../src/DatePickerTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,yBAAyB,MAAM,gCAAgC,CAAC;AACvE,OAAO,aAAa,MAAM,gBAAgB,CAAC;AAE3C,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACxC,OAAO,CACL,8BACE,KAAC,aAAa,IACZ,KAAK,EAAC,yBAAyB,qBACf,MAAM,EACtB,IAAI,EAAC,eAAe,EACpB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,qBACA,IAAI,CAAC,kBAAkB,yBACnB,IAAI,CAAC,iBAAiB,0BACrB,IAAI,CAAC,kBAAkB,KACzC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC3C,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC3C,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAC/C,WAAW,EAAE,IAAI,CAAC,gBAAgB,EAClC,QAAQ,EAAE,IAAI,CAAC,cAAc,iBAChB,IAAI,CAAC,UAAU,qBACX,IAAI,CAAC,cAAc,GAAI,EACzC,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,IACpC,CACJ,CAAC;AACJ,CAAC","sourcesContent":["import type DatePicker from \"./DatePicker.js\";\nimport DatePickerPopoverTemplate from \"./DatePickerPopoverTemplate.js\";\nimport UDExTextField from \"./TextField.js\";\n\nexport default function DatePickerTemplate(this: DatePicker) {\n  return (\n    <>\n      <UDExTextField\n        class=\"udex-date-picker__input\"\n        _aria-has-popup=\"grid\"\n        icon=\"appointment-2\"\n        value={this.value}\n        label={this.label}\n        accessible-name={this.dateAccessibleName}\n        accessible-name-ref={this.accessibleNameRef}\n        accessible-icon-name={this.accessibleIconName}\n        {...(this.disabled ? { \"disabled\": true } : {})}\n        {...(this.required ? { \"required\": true } : {})}\n        {...(this.readonly ? { \"readonly\": true } : {})}\n        onClickIcon={this.handleInputClick}\n        onChange={this._onInputChange}\n        value-state={this.valueState}\n        supporting-text={this.supportingText} />\n      {DatePickerPopoverTemplate.call(this)}\n    </>\n  );\n}\n"]}

package/dist/MediaPlayerTemplate.js

@@ -13,10 +13,10 @@ function renderAudioOnlyTemplate(rootClass) {
     return (_jsx("audio", { id: this.playerElementId, class: `${rootClass} ${this.aspectRatioClass}`, preload: "auto", children: _jsx("source", { src: this.source, type: this.type }) }));
 }
 function renderStandardTemplate(rootClass) {
-    return (_jsx("video", { id: this.playerElementId, class: `${rootClass} ${this.aspectRatioClass}`, children: _jsx("source", { src: this.source, type: this.type, children: this._tracks.map((element, index) => {
+    return (_jsxs("video-js", { id: this.playerElementId, class: `${rootClass} ${this.aspectRatioClass}`, children: [_jsx("source", { src: this.source, type: this.type }), this._tracks.map((element, index) => {
                 const { "default": isDefault, kind, src, srclang, label } = element;
                 return (_jsx("track", { kind: kind, src: src, srclang: srclang, label: label, ...(isDefault ? { "default": true } : {}) }, index));
-            }) }) }));
+            })] }));
 }
 function renderEmbedTemplate() {
     if (this._iframePosterPreload) {

package/dist/MediaPlayerTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaPlayerTemplate.js","sourceRoot":"","sources":["../src/MediaPlayerTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type UDExMediaPlayer from \"./MediaPlayer.js\";\nimport UDExMediaPlayerYoutube from \"./MediaPlayerYoutube.js\";\nimport UDExMediaPlayerVimeo from \"./MediaPlayerVimeo.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function MediaPlayerTemplate(this: UDExMediaPlayer) {\n  const rootClass = \"udex-media-player__video video-js\";\n\n  return (\n    <>\n      {this.audioOnly ? renderAudioOnlyTemplate.call(this, rootClass) :\n        this._iframeLoad ? renderEmbedTemplate.call(this) :\n          renderStandardTemplate.call(this, rootClass)\n      }\n    </>\n  );\n}\n\nfunction renderAudioOnlyTemplate(this: UDExMediaPlayer, rootClass: string) {\n  return (\n    <audio\n      id={this.playerElementId}\n      class={`${rootClass} ${this.aspectRatioClass}`}\n      preload=\"auto\">\n      <source src={this.source} type={this.type}/>\n    </audio>\n  );\n}\n\nfunction renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {\n  return (\n    <video\n      id={this.playerElementId}\n      class={`${rootClass} ${this.aspectRatioClass}`}>\n      <source src={this.source} type={this.type}>\n        {this._tracks.map((element: HTMLTrackElement, index: number) => {\n          const {\n            \"default\": isDefault, kind, src, srclang, label\n          } = element;\n          return (\n            <track\n              key={index}\n              kind={kind}\n              src={src}\n              srclang={srclang}\n              label={label}\n              {...(isDefault ? { \"default\": true } : {})}\n            />\n          );\n        })}\n      </source>\n    </video>\n  );\n}\n\nfunction renderEmbedTemplate(this: UDExMediaPlayer) {\n  if (this._iframePosterPreload) {\n    return (\n      <div class={`video-js udex-media-player__iframe-poster ${this.aspectRatioClass}`}>\n        <div class=\"udex-media-player__vjs-poster\" aria-disabled=\"false\">\n          <picture tabindex={-1}><img loading=\"lazy\" alt=\"\" src={this.poster} width={this.width} height={this.height} /></picture>\n          <button class=\"vjs-big-play-button\" type=\"button\" title=\"Play Video\" aria-disabled=\"false\" onClick={this.handleEmbedPlay}>\n            <Icon aria-label=\"Play Video\" name=\"play\"></Icon>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  if (this._youtubeSrc) {\n    return (\n      <UDExMediaPlayerYoutube\n        source={this.source}\n        width={this.width}\n        height={this.height}\n        class={`video-js ${this.aspectRatioClass}`}\n        {...this.embedVideoFluidClass ? { \"fluid-mode\": this.embedVideoFluidClass } : {}}\n        onPlaying={this.handleEmbedVideoPlaying}\n        onEnded={this.handleEmbedVideoEnded}\n        onReady={this.handleEmbedVideoReady}\n        onPause={this.handleEmbedVideoPause}>\n      </UDExMediaPlayerYoutube>\n    );\n  }\n\n  if (this._vimeoSrc) {\n    return (\n      <UDExMediaPlayerVimeo\n        source={this.source}\n        width={this.width}\n        height={this.height}\n        title={this.title}\n        aspect-ratio-class={this.aspectRatioClass}\n        {...this.embedVideoFluidClass ? { \"fluid-mode\": this.embedVideoFluidClass } : {}}\n        onPlaying={this.handleEmbedVideoPlaying}\n        onEnded={this.handleEmbedVideoEnded}\n        onReady={this.handleEmbedVideoReady}\n        onPause={this.handleEmbedVideoPause}>\n      </UDExMediaPlayerVimeo>);\n  }\n}\n"]}
+{"version":3,"file":"MediaPlayerTemplate.js","sourceRoot":"","sources":["../src/MediaPlayerTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["// @ts-nocheck\n// No ts check required for video-js tag usage. Please remove during development.\nimport type UDExMediaPlayer from \"./MediaPlayer.js\";\nimport UDExMediaPlayerYoutube from \"./MediaPlayerYoutube.js\";\nimport UDExMediaPlayerVimeo from \"./MediaPlayerVimeo.js\";\nimport \"@ui5/webcomponents-icons/dist/play.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function MediaPlayerTemplate(this: UDExMediaPlayer) {\n  const rootClass = \"udex-media-player__video video-js\";\n\n  return (\n    <>\n      {this.audioOnly ? renderAudioOnlyTemplate.call(this, rootClass) :\n        this._iframeLoad ? renderEmbedTemplate.call(this) :\n          renderStandardTemplate.call(this, rootClass)\n      }\n    </>\n  );\n}\n\nfunction renderAudioOnlyTemplate(this: UDExMediaPlayer, rootClass: string) {\n  return (\n    <audio\n      id={this.playerElementId}\n      class={`${rootClass} ${this.aspectRatioClass}`}\n      preload=\"auto\">\n      <source src={this.source} type={this.type}/>\n    </audio>\n  );\n}\n\nfunction renderStandardTemplate(this: UDExMediaPlayer, rootClass: string) {\n  return (\n    <video-js\n      id={this.playerElementId}\n      class={`${rootClass} ${this.aspectRatioClass}`}>\n      <source src={this.source} type={this.type} />\n      {this._tracks.map((element: HTMLTrackElement, index: number) => {\n        const {\n          \"default\": isDefault, kind, src, srclang, label\n        } = element;\n        return (\n          <track\n            key={index}\n            kind={kind}\n            src={src}\n            srclang={srclang}\n            label={label}\n            {...(isDefault ? { \"default\": true } : {})}\n          />\n        );\n      })}\n    </video-js>\n  );\n}\n\nfunction renderEmbedTemplate(this: UDExMediaPlayer) {\n  if (this._iframePosterPreload) {\n    return (\n      <div class={`video-js udex-media-player__iframe-poster ${this.aspectRatioClass}`}>\n        <div class=\"udex-media-player__vjs-poster\" aria-disabled=\"false\">\n          <picture tabindex={-1}><img loading=\"lazy\" alt=\"\" src={this.poster} width={this.width} height={this.height} /></picture>\n          <button class=\"vjs-big-play-button\" type=\"button\" title=\"Play Video\" aria-disabled=\"false\" onClick={this.handleEmbedPlay}>\n            <Icon aria-label=\"Play Video\" name=\"play\"></Icon>\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  if (this._youtubeSrc) {\n    return (\n      <UDExMediaPlayerYoutube\n        source={this.source}\n        width={this.width}\n        height={this.height}\n        class={`video-js ${this.aspectRatioClass}`}\n        {...this.embedVideoFluidClass ? { \"fluid-mode\": this.embedVideoFluidClass } : {}}\n        onPlaying={this.handleEmbedVideoPlaying}\n        onEnded={this.handleEmbedVideoEnded}\n        onReady={this.handleEmbedVideoReady}\n        onPause={this.handleEmbedVideoPause}>\n      </UDExMediaPlayerYoutube>\n    );\n  }\n\n  if (this._vimeoSrc) {\n    return (\n      <UDExMediaPlayerVimeo\n        source={this.source}\n        width={this.width}\n        height={this.height}\n        title={this.title}\n        aspect-ratio-class={this.aspectRatioClass}\n        {...this.embedVideoFluidClass ? { \"fluid-mode\": this.embedVideoFluidClass } : {}}\n        onPlaying={this.handleEmbedVideoPlaying}\n        onEnded={this.handleEmbedVideoEnded}\n        onReady={this.handleEmbedVideoReady}\n        onPause={this.handleEmbedVideoPause}>\n      </UDExMediaPlayerVimeo>);\n  }\n}\n"]}

package/dist/MessageStripTemplate.js

@@ -7,6 +7,8 @@ import sysEnter2 from "@ui5/webcomponents-icons/dist/sys-enter-2.js";
 import error from "@ui5/webcomponents-icons/dist/error.js";
 import alert from "@ui5/webcomponents-icons/dist/alert.js";
 import { UDExMessageStripDesign } from "./types/MessageStrip.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
 export default function MessageStripTemplate() {
     return (_jsxs("div", { class: {
             "udex-message-strip": true,
@@ -15,7 +17,7 @@ export default function MessageStripTemplate() {
             "ui5-message-strip-root-hide-close-button": this.hideCloseButton,
             "ui5-message-strip-root--critical": this.isDesignWarning,
             [this.designClasses]: true,
-        }, id: this._id, role: "note", "aria-labelledby": this._id, children: [!this.shouldHideIcon && (_jsx("div", { class: "ui5-message-strip-icon-wrapper udex-message-strip", "aria-hidden": "true", children: this.hasIcon ? (_jsx("slot", { name: "icon" })) : (_jsx(Icon, { name: standardIconName.call(this), class: "ui5-message-strip-icon" })) })), _jsx("span", { class: "ui5-hidden-text", children: this.hiddenText }), _jsxs("span", { class: "ui5-message-strip-text message-strip__text", children: [!this.hideTextStatus && (_jsxs("strong", { class: "message-strip__text-status", children: [this.textStatus, ":"] })), _jsx("slot", {})] }), !this.hideCloseButton && (_jsx(UDExButton, { size: "Small", icon: decline, design: "Tertiary", onClick: this._closeClick, tooltip: this._closeButtonText, part: "close-button" }))] }));
+        }, id: this._id, role: "note", "aria-labelledby": this._id, children: [!this.shouldHideIcon && (_jsx("div", { class: "ui5-message-strip-icon-wrapper udex-message-strip", "aria-hidden": "true", children: this.hasIcon ? (_jsx("slot", { name: "icon" })) : (_jsx(Icon, { name: standardIconName.call(this), class: "ui5-message-strip-icon" })) })), _jsx("span", { class: "ui5-hidden-text", children: this.hiddenText }), _jsxs("span", { class: "ui5-message-strip-text message-strip__text", children: [!this.hideTextStatus && (_jsxs("strong", { class: "message-strip__text-status", children: [this.textStatus, ":"] })), _jsx("slot", {})] }), !this.hideCloseButton && (_jsx(UDExButton, { size: UDExButtonSize.Small, icon: decline, design: UDExButtonDesign.Tertiary, onClick: this._closeClick, tooltip: this._closeButtonText, part: "close-button" }))] }));
 }
 function standardIconName() {
     switch (this.design) {

package/dist/MessageStripTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"MessageStripTemplate.js","sourceRoot":"","sources":["../src/MessageStripTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,SAAS,MAAM,8CAA8C,CAAC;AACrE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,OAAO,CACL,eACE,KAAK,EAAE;YACL,oBAAoB,EAAE,IAAI;YAC1B,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,cAAc;YACvD,0CAA0C,EAAE,IAAI,CAAC,eAAe;YAChE,kCAAkC,EAAE,IAAI,CAAC,eAAe;YACxD,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;SAC3B,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,MAAM,qBACM,IAAI,CAAC,GAAG,aAExB,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,cACE,KAAK,EAAC,mDAAmD,iBAC7C,MAAM,YAEjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,KAAK,EAAC,wBAAwB,GAC9B,CACH,GACG,CACP,EACD,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,UAAU,GAAQ,EACtD,gBAAM,KAAK,EAAC,4CAA4C,aACrD,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,kBAAQ,KAAK,EAAC,4BAA4B,aAAE,IAAI,CAAC,UAAU,SAAW,CACvE,EACD,gBAAa,IACR,EACN,CAAC,IAAI,CAAC,eAAe,IAAI,CACxB,KAAC,UAAU,IACT,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,OAAO,EACb,MAAM,EAAC,UAAU,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,cAAc,GACnB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,KAAK,sBAAsB,CAAC,OAAO;YACjC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,SAAS,CAAC;QACnB,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,WAAW;YACrC,OAAO,WAAW,CAAC;QACrB;YACE,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC","sourcesContent":["import type UDExMessageStrip from \"./MessageStrip.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport information from \"@ui5/webcomponents-icons/dist/information.js\";\nimport sysEnter2 from \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport error from \"@ui5/webcomponents-icons/dist/error.js\";\nimport alert from \"@ui5/webcomponents-icons/dist/alert.js\";\nimport { UDExMessageStripDesign } from \"./types/MessageStrip.js\";\n\nexport default function MessageStripTemplate(this: UDExMessageStrip) {\n  return (\n    <div\n      class={{\n        \"udex-message-strip\": true,\n        \"ui5-message-strip-root\": true,\n        \"ui5-message-strip-root-hide-icon\": this.shouldHideIcon,\n        \"ui5-message-strip-root-hide-close-button\": this.hideCloseButton,\n        \"ui5-message-strip-root--critical\": this.isDesignWarning,\n        [this.designClasses]: true,\n      }}\n      id={this._id}\n      role=\"note\"\n      aria-labelledby={this._id}\n    >\n      {!this.shouldHideIcon && (\n        <div\n          class=\"ui5-message-strip-icon-wrapper udex-message-strip\"\n          aria-hidden=\"true\"\n        >\n          {this.hasIcon ? (\n            <slot name=\"icon\"></slot>\n          ) : (\n            <Icon\n              name={standardIconName.call(this)}\n              class=\"ui5-message-strip-icon\"\n            />\n          )}\n        </div>\n      )}\n      <span class=\"ui5-hidden-text\">{this.hiddenText}</span>\n      <span class=\"ui5-message-strip-text message-strip__text\">\n        {!this.hideTextStatus && (\n          <strong class=\"message-strip__text-status\">{this.textStatus}:</strong>\n        )}\n        <slot></slot>\n      </span>\n      {!this.hideCloseButton && (\n        <UDExButton\n          size=\"Small\"\n          icon={decline}\n          design=\"Tertiary\"\n          onClick={this._closeClick}\n          tooltip={this._closeButtonText}\n          part=\"close-button\"\n        />\n      )}\n    </div>\n  );\n}\n\nfunction standardIconName(this: UDExMessageStrip) {\n  switch (this.design) {\n  case UDExMessageStripDesign.Warning:\n    return alert;\n  case UDExMessageStripDesign.Positive:\n    return sysEnter2;\n  case UDExMessageStripDesign.Negative:\n    return error;\n  case UDExMessageStripDesign.Information:\n    return information;\n  default:\n    return undefined;\n  }\n}\n"]}
+{"version":3,"file":"MessageStripTemplate.js","sourceRoot":"","sources":["../src/MessageStripTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,UAAU,MAAM,aAAa,CAAC;AACrC,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,OAAO,MAAM,0CAA0C,CAAC;AAC/D,OAAO,WAAW,MAAM,8CAA8C,CAAC;AACvE,OAAO,SAAS,MAAM,8CAA8C,CAAC;AACrE,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,KAAK,MAAM,wCAAwC,CAAC;AAC3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,MAAM,yBAAyB,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,oBAAoB;IAC1C,OAAO,CACL,eACE,KAAK,EAAE;YACL,oBAAoB,EAAE,IAAI;YAC1B,wBAAwB,EAAE,IAAI;YAC9B,kCAAkC,EAAE,IAAI,CAAC,cAAc;YACvD,0CAA0C,EAAE,IAAI,CAAC,eAAe;YAChE,kCAAkC,EAAE,IAAI,CAAC,eAAe;YACxD,CAAC,IAAI,CAAC,aAAa,CAAC,EAAE,IAAI;SAC3B,EACD,EAAE,EAAE,IAAI,CAAC,GAAG,EACZ,IAAI,EAAC,MAAM,qBACM,IAAI,CAAC,GAAG,aAExB,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,cACE,KAAK,EAAC,mDAAmD,iBAC7C,MAAM,YAEjB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CACd,eAAM,IAAI,EAAC,MAAM,GAAQ,CAC1B,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IACH,IAAI,EAAE,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,EACjC,KAAK,EAAC,wBAAwB,GAC9B,CACH,GACG,CACP,EACD,eAAM,KAAK,EAAC,iBAAiB,YAAE,IAAI,CAAC,UAAU,GAAQ,EACtD,gBAAM,KAAK,EAAC,4CAA4C,aACrD,CAAC,IAAI,CAAC,cAAc,IAAI,CACvB,kBAAQ,KAAK,EAAC,4BAA4B,aAAE,IAAI,CAAC,UAAU,SAAW,CACvE,EACD,gBAAa,IACR,EACN,CAAC,IAAI,CAAC,eAAe,IAAI,CACxB,KAAC,UAAU,IACT,IAAI,EAAE,cAAc,CAAC,KAAK,EAC1B,IAAI,EAAE,OAAO,EACb,MAAM,EAAE,gBAAgB,CAAC,QAAQ,EACjC,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,gBAAgB,EAC9B,IAAI,EAAC,cAAc,GACnB,CACH,IACG,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB;IACvB,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC;QACtB,KAAK,sBAAsB,CAAC,OAAO;YACjC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,SAAS,CAAC;QACnB,KAAK,sBAAsB,CAAC,QAAQ;YAClC,OAAO,KAAK,CAAC;QACf,KAAK,sBAAsB,CAAC,WAAW;YACrC,OAAO,WAAW,CAAC;QACrB;YACE,OAAO,SAAS,CAAC;IACnB,CAAC;AACH,CAAC","sourcesContent":["import type UDExMessageStrip from \"./MessageStrip.js\";\nimport UDExButton from \"./Button.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport decline from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport information from \"@ui5/webcomponents-icons/dist/information.js\";\nimport sysEnter2 from \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport error from \"@ui5/webcomponents-icons/dist/error.js\";\nimport alert from \"@ui5/webcomponents-icons/dist/alert.js\";\nimport { UDExMessageStripDesign } from \"./types/MessageStrip.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\n\nexport default function MessageStripTemplate(this: UDExMessageStrip) {\n  return (\n    <div\n      class={{\n        \"udex-message-strip\": true,\n        \"ui5-message-strip-root\": true,\n        \"ui5-message-strip-root-hide-icon\": this.shouldHideIcon,\n        \"ui5-message-strip-root-hide-close-button\": this.hideCloseButton,\n        \"ui5-message-strip-root--critical\": this.isDesignWarning,\n        [this.designClasses]: true,\n      }}\n      id={this._id}\n      role=\"note\"\n      aria-labelledby={this._id}\n    >\n      {!this.shouldHideIcon && (\n        <div\n          class=\"ui5-message-strip-icon-wrapper udex-message-strip\"\n          aria-hidden=\"true\"\n        >\n          {this.hasIcon ? (\n            <slot name=\"icon\"></slot>\n          ) : (\n            <Icon\n              name={standardIconName.call(this)}\n              class=\"ui5-message-strip-icon\"\n            />\n          )}\n        </div>\n      )}\n      <span class=\"ui5-hidden-text\">{this.hiddenText}</span>\n      <span class=\"ui5-message-strip-text message-strip__text\">\n        {!this.hideTextStatus && (\n          <strong class=\"message-strip__text-status\">{this.textStatus}:</strong>\n        )}\n        <slot></slot>\n      </span>\n      {!this.hideCloseButton && (\n        <UDExButton\n          size={UDExButtonSize.Small}\n          icon={decline}\n          design={UDExButtonDesign.Tertiary}\n          onClick={this._closeClick}\n          tooltip={this._closeButtonText}\n          part=\"close-button\"\n        />\n      )}\n    </div>\n  );\n}\n\nfunction standardIconName(this: UDExMessageStrip) {\n  switch (this.design) {\n  case UDExMessageStripDesign.Warning:\n    return alert;\n  case UDExMessageStripDesign.Positive:\n    return sysEnter2;\n  case UDExMessageStripDesign.Negative:\n    return error;\n  case UDExMessageStripDesign.Information:\n    return information;\n  default:\n    return undefined;\n  }\n}\n"]}

package/dist/RatingBarTemplate.js

@@ -3,6 +3,6 @@ import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
 import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
 export default function RatingBarTemplate() {
     const rootClass = "udex-rating-bar";
-    return (_jsxs("div", { className: `${rootClass}__container`, children: [_jsx("div", { "aria-hidden": "true", className: `${rootClass}__rating`, children: this.validatedRating }), _jsx(UI5Icon, { "aria-labelledby": "ratingDescription", name: favorite, class: `${rootClass}__icon` }), _jsx("div", { className: `${rootClass}__track`, children: _jsx("div", { className: `${rootClass}__progress` }) }), this.showPercentage && (_jsx("div", { role: "note", className: `${rootClass}__percentage`, "aria-label": this.validatedPercentage, children: this.validatedPercentage })), _jsx("span", { id: "ratingDescription", className: "hidden-text", children: this._ratingDescription })] }));
+    return (_jsxs("div", { className: `${rootClass}__container`, children: [_jsx("div", { "aria-hidden": "true", className: `${rootClass}__rating`, children: this.validatedRating }), _jsx(UI5Icon, { "aria-labelledby": "ratingDescription", role: "img", name: favorite, class: `${rootClass}__icon` }), _jsx("div", { className: `${rootClass}__track`, children: _jsx("div", { className: `${rootClass}__progress` }) }), this.showPercentage && (_jsx("div", { role: "note", className: `${rootClass}__percentage`, "aria-label": this.validatedPercentage, children: this.validatedPercentage })), _jsx("span", { id: "ratingDescription", className: "hidden-text", children: this._ratingDescription })] }));
 }
 //# sourceMappingURL=RatingBarTemplate.js.map

package/dist/RatingBarTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingBarTemplate.js","sourceRoot":"","sources":["../src/RatingBarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,iBAAiB,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,SAAS,aAAa,aACvC,6BACc,MAAM,EAClB,SAAS,EAAE,GAAG,SAAS,UAAU,YAChC,IAAI,CAAC,eAAe,GACjB,EACN,KAAC,OAAO,uBACU,mBAAmB,EACnC,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,GAAG,SAAS,QAAQ,GACnB,EACV,cAAK,SAAS,EAAE,GAAG,SAAS,SAAS,YACnC,cAAK,SAAS,EAAE,GAAG,SAAS,YAAY,GAAQ,GAC5C,EACL,IAAI,CAAC,cAAc,IAAI,CACtB,cACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,GAAG,SAAS,cAAc,gBACzB,IAAI,CAAC,mBAAmB,YACnC,IAAI,CAAC,mBAAmB,GACrB,CACP,EACD,eACE,EAAE,EAAC,mBAAmB,EACtB,SAAS,EAAC,aAAa,YACtB,IAAI,CAAC,kBAAkB,GACnB,IACH,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type RatingBar from \"./RatingBar.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport favorite from \"@ui5/webcomponents-icons/dist/favorite.js\";\n\nexport default function RatingBarTemplate(this: RatingBar) {\n  const rootClass = \"udex-rating-bar\";\n\n  return (\n    <div className={`${rootClass}__container`}>\n      <div\n        aria-hidden=\"true\"\n        className={`${rootClass}__rating`}>\n        {this.validatedRating}\n      </div>\n      <UI5Icon\n        aria-labelledby=\"ratingDescription\"\n        name={favorite}\n        class={`${rootClass}__icon`}>\n      </UI5Icon>\n      <div className={`${rootClass}__track`}>\n        <div className={`${rootClass}__progress`}></div>\n      </div>\n      {this.showPercentage && (\n        <div\n          role=\"note\"\n          className={`${rootClass}__percentage`}\n          aria-label={this.validatedPercentage}>\n          {this.validatedPercentage}\n        </div>\n      )}\n      <span\n        id=\"ratingDescription\"\n        className=\"hidden-text\">\n        {this._ratingDescription}\n      </span>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"RatingBarTemplate.js","sourceRoot":"","sources":["../src/RatingBarTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,iBAAiB;IACvC,MAAM,SAAS,GAAG,iBAAiB,CAAC;IAEpC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,SAAS,aAAa,aACvC,6BACc,MAAM,EAClB,SAAS,EAAE,GAAG,SAAS,UAAU,YAChC,IAAI,CAAC,eAAe,GACjB,EACN,KAAC,OAAO,uBACU,mBAAmB,EACnC,IAAI,EAAC,KAAK,EACV,IAAI,EAAE,QAAQ,EACd,KAAK,EAAE,GAAG,SAAS,QAAQ,GACnB,EACV,cAAK,SAAS,EAAE,GAAG,SAAS,SAAS,YACnC,cAAK,SAAS,EAAE,GAAG,SAAS,YAAY,GAAQ,GAC5C,EACL,IAAI,CAAC,cAAc,IAAI,CACtB,cACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,GAAG,SAAS,cAAc,gBACzB,IAAI,CAAC,mBAAmB,YACnC,IAAI,CAAC,mBAAmB,GACrB,CACP,EACD,eACE,EAAE,EAAC,mBAAmB,EACtB,SAAS,EAAC,aAAa,YACtB,IAAI,CAAC,kBAAkB,GACnB,IACH,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type RatingBar from \"./RatingBar.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport favorite from \"@ui5/webcomponents-icons/dist/favorite.js\";\n\nexport default function RatingBarTemplate(this: RatingBar) {\n  const rootClass = \"udex-rating-bar\";\n\n  return (\n    <div className={`${rootClass}__container`}>\n      <div\n        aria-hidden=\"true\"\n        className={`${rootClass}__rating`}>\n        {this.validatedRating}\n      </div>\n      <UI5Icon\n        aria-labelledby=\"ratingDescription\"\n        role=\"img\"\n        name={favorite}\n        class={`${rootClass}__icon`}>\n      </UI5Icon>\n      <div className={`${rootClass}__track`}>\n        <div className={`${rootClass}__progress`}></div>\n      </div>\n      {this.showPercentage && (\n        <div\n          role=\"note\"\n          className={`${rootClass}__percentage`}\n          aria-label={this.validatedPercentage}>\n          {this.validatedPercentage}\n        </div>\n      )}\n      <span\n        id=\"ratingDescription\"\n        className=\"hidden-text\">\n        {this._ratingDescription}\n      </span>\n    </div>\n  );\n}\n"]}