@sapudex/web-components 2.15.0 → 2.16.0

package/dist/FooterTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterTemplate.js","sourceRoot":"","sources":["../src/FooterTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UI5LinkDesign from \"@ui5/webcomponents/dist/types/LinkDesign.js\";\n\nimport headset from \"@ui5/webcomponents-icons/dist/headset.js\";\nimport email from \"@ui5/webcomponents-icons/dist/email.js\";\nimport backToTop from \"@ui5/webcomponents-icons/dist/back-to-top.js\";\nimport discussion from \"@ui5/webcomponents-icons/dist/discussion-2.js\";\n\nimport type Footer from \"./Footer.js\";\nimport UDExLink from \"./Link.js\";\nimport UDExDivider from \"./Divider.js\";\nimport UDExSocialMediaButton from \"./SocialMediaButton.js\";\nimport UDExAccordion from \"./Accordion.js\";\nimport UDExAccordionItem from \"./AccordionItem.js\";\nimport UDExButton from \"./Button.js\";\nimport UDExButtonDesign from \"./types/ButtonDesign.js\";\nimport UDExButtonSize from \"./types/ButtonSize.js\";\n\nexport default function FooterTemplate(this: Footer) {\n  const rootClass = \"udex-footer\";\n\n  return (\n    <footer className={rootClass}>\n      <div className={`${rootClass}__content`}>\n        <div className={`${rootClass}__contact-social`}>\n          {this.hasLogo && (\n            <div className={`${rootClass}__logo`}>\n              {this.hasLogoLink ? (\n                <a\n                  href={this.logoHref}\n                  onClick={this._onLogoClick}\n                  title={this.logoTitle}\n                  aria-label={this.logoAriaLabel}>\n                  <img\n                    id={`${rootClass}__logo-image`}\n                    src={this.currentLogoUrl}\n                    className={this.logoClass}\n                    alt={this.logoAlt}\n                  />\n                </a>\n              ) : (\n                <img\n                  id={`${rootClass}__logo-image`}\n                  src={this.currentLogoUrl}\n                  className={this.logoClass}\n                  alt={this.logoAlt}\n                />\n              )}\n              {this.hasTagline && (\n                <img\n                  id={`${rootClass}__tagline-image`}\n                  src={this.currentTaglineUrl}\n                  className={this.taglineClass}\n                  alt={this.taglineAlt}\n                />\n              )}\n            </div>\n          )}\n          {this.isContactContainerVisible && (\n            <div className={`${rootClass}__contact`}>\n              {this.contactNumbersArray.length > 0 && (\n                <div className={`${rootClass}__numbers`}>\n                  <div className={`${rootClass}__icon-container`}>\n                    <UI5Icon\n                      class={`${rootClass}__icon`}\n                      name={headset}\n                      mode={IconMode.Decorative}\n                    ></UI5Icon>\n                  </div>\n                  <div>\n                    <div className={`${rootClass}__numbers-wrapper`}>\n                      {this.contactNumbersArray.map((contact, index) => (\n                        <div key={index}>\n                          <span\n                            className=\"hidden\"\n                            aria-hidden\n                            id={`${rootClass}__${index}_phone-label`}>\n                            {`${this.phoneNumberAccessibleName} ${contact.country} : ${contact.number}`}\n                          </span>\n                          <p className={`${rootClass}__country`}>{contact.country}</p>\n                          <a\n                            href={`tel:${contact.number}`}\n                            className={`${rootClass}__number`}\n                            onClick={this._onContactPhoneClick}\n                            aria-labelledby={`${rootClass}__${index}_phone-label`}>\n                            {contact.number}\n                          </a>\n                        </div>\n                      ))}\n                    </div>\n                    {this.localCountryNumbersLink && (\n                      <p className={`${rootClass}__remark`}>\n                        {this.completeListTitle}\n                        <UDExLink\n                          class={`${rootClass}__remark-link`}\n                          onClick={this._onContactPhoneLocalNumbersClick}\n                          href={this.localCountryNumbersLink}\n                          design={UI5LinkDesign.Subtle}>\n                          {this.localCountryTitle}.\n                        </UDExLink>\n                      </p>\n                    )}\n                  </div>\n                </div>\n              )}\n              {this.contactUsLink && (\n                <div className={`${rootClass}__contact-us`}>\n                  <div className={`${rootClass}__icon-container`}>\n                    <UI5Icon\n                      class={`${rootClass}__icon`}\n                      name={email}\n                      mode={IconMode.Decorative}>\n                    </UI5Icon>\n                  </div>\n                  <span\n                    className=\"hidden\"\n                    aria-hidden\n                    id={`${rootClass}__contact-us-label`}>\n                    {this.contactUsAccessibleLabel}\n                  </span>\n                  <a\n                    href={this.contactUsLink}\n                    className={`${rootClass}__contact-us-link`}\n                    aria-labelledby={`${rootClass}__contact-us-label`}\n                    onClick={this._onContactEmailClick}>\n                    {this.contactUsAccessibleName}\n                  </a>\n                </div>\n              )}\n              {this.chatWithUsLink && (\n                <div className={`${rootClass}__chat-with-us`}>\n                  <div className={`${rootClass}__icon-container`}>\n                    <UI5Icon\n                      class={`${rootClass}__icon`}\n                      name={discussion}\n                      mode={IconMode.Decorative}>\n                    </UI5Icon>\n                  </div>\n                  <a\n                    href={this.chatWithUsLink}\n                    className={`${rootClass}__chat-with-us-link`}\n                    onClick={this._onContactChatClick}>\n                    {this.chatWithUsAccessibleName}\n                  </a>\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n\n        {this.isContactContainerVisible && (\n          <UDExDivider class={`${rootClass}__divider`}></UDExDivider>\n        )}\n\n        {this._shouldRenderMobileMenu ? (\n          mobileNavigation.call(this, rootClass)\n        ) : (\n          desktopNavigation.call(this, rootClass)\n        )}\n\n        <UDExDivider class={`${rootClass}__divider`}></UDExDivider>\n      </div>\n\n      <div className={`${rootClass}__copyright`}>\n        {this.isChineseLang && (\n          <span className={`${rootClass}__copyright-chinese-text`}>\n            <a\n              href={this.chineseIcpNumberLink}\n              title={this.chineseICPNumber}\n              className={`${rootClass}__copyright-chinese-link`}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\">\n              {this.chineseICPNumber}\n            </a>\n            {this.chineseSecurityNetworkNumber}\n          </span>\n        )}\n        <span className={`${rootClass}__copyright-text`}>{this.copyrightText}</span>\n      </div>\n\n      {this.socialLinksArray.length > 0 && (\n        <div className={`${rootClass}__social-container`}>\n          {this.socialLinksArray.map((social, index) => (\n            <UDExSocialMediaButton\n              key={index}\n              type={social.name}\n              url={social.url}\n              target={social.target}\n              accessible-name={social.accessibleName}\n              data-name={social.name}\n              data-id={social.id}\n              onui5-click={this._onSocialMediaLinkClick}>\n            </UDExSocialMediaButton>\n          ))}\n        </div>\n      )}\n\n      <UDExButton\n        class={`${rootClass}__back-to-top-button`}\n        icon={backToTop}\n        onClick={this.onBackToTopClick}\n        design={UDExButtonDesign.Tertiary}\n        size={UDExButtonSize.Large}\n        accessibleName=\"back to top\">\n      </UDExButton>\n    </footer>\n  );\n}\n\nfunction mobileNavigation(this: Footer, rootClass: string) {\n  return (\n    <UDExAccordion class={`${rootClass}__accordion`}>\n      {this.quickLinksArray.length > 0 && (\n        <>\n          <UDExAccordionItem label={this._quickLinksTitle} class={`${rootClass}__action-item`}>\n            <ul className={`${rootClass}__links-list udex-footer__links-list--mobile`}>\n              {this.quickLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__quick-links`}\n                    href={link.url}\n                    data-id={link.id}\n                    onClick={this._onQuickLinksClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n            <h3 className={`${rootClass}__links-item hidden`} aria-hidden=\"true\" id={`${rootClass}__quick-links`}>\n              {this._quickLinksTitle}\n            </h3>\n          </UDExAccordionItem>\n        </>\n      )}\n\n      {this.trendingLinksArray.length > 0 && (\n        <>\n          <UDExAccordionItem label={this._trendingTitle} class={`${rootClass}__action-item`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>\n              {this.trendingLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__footer__trending`}\n                    href={link.url}\n                    data-id={link.id}\n                    onClick={this._onTrendingClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n            <h3 className={`${rootClass}__links-item hidden`} aria-hidden=\"true\" id={`${rootClass}__trending`}>\n              {this._trendingTitle}\n            </h3>\n          </UDExAccordionItem>\n        </>\n      )}\n\n      {this.aboutLinksArray.length > 0 && (\n        <>\n          <UDExAccordionItem label={this._aboutSapTitle} class={`${rootClass}__action-item`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--mobile`}>\n              {this.aboutLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__about`}\n                    href={link.url}\n                    data-id={link.id}\n                    onClick={this._onAboutSapClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n            <h3 className={`${rootClass}__links-item hidden`} aria-hidden=\"true\" id={`${rootClass}__about`}>\n              {this._aboutSapTitle}\n            </h3>\n          </UDExAccordionItem>\n        </>\n      )}\n\n      {this.siteInformationLinksArray.length > 0 && (\n        <>\n          <UDExAccordionItem label={this._siteInformationTitle} class={`${rootClass}__action-item`}>\n            <ul className={`${rootClass}__links-list rootClass__links-list--mobile`}>\n              {this.siteInformationLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__site-information`}\n                    href={link.url}\n                    data-id={link.id}\n                    onClick={this._onSiteInformationClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n            <h3 className={`${rootClass}__links-item hidden`} aria-hidden=\"true\" id={`${rootClass}__site-information`}>\n              {this._siteInformationTitle}\n            </h3>\n          </UDExAccordionItem>\n        </>\n      )}\n    </UDExAccordion>\n  );\n}\n\nfunction desktopNavigation(this: Footer, rootClass: string) {\n  return (\n    <div className={`${rootClass}__links`}>\n      {this.quickLinksArray.length > 0 && (\n        <div className={`${rootClass}__links-group ${rootClass}__quick-links`}>\n          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__quick-links`}>\n            {this._quickLinksTitle}\n          </h3>\n          <nav aria-labelledby={`${rootClass}__quick-links`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>\n              {this.quickLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__quick-links`}\n                    data-id={link.id}\n                    href={link.url}\n                    onClick={this._onQuickLinksClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        </div>\n      )}\n      {this.trendingLinksArray.length > 0 && (\n        <div className={`${rootClass}__links-group ${rootClass}__trending-links`}>\n          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__trending`}>\n            {this._trendingTitle}\n          </h3>\n          <nav aria-labelledby={`${rootClass}__trending`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>\n              {this.trendingLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__footer__trending`}\n                    data-id={link.id}\n                    href={link.url}\n                    onClick={this._onTrendingClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        </div>\n      )}\n      {this.aboutLinksArray.length > 0 && (\n        <div className={`${rootClass}__links-group ${rootClass}__about-links`}>\n          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__about`}>\n            {this._aboutSapTitle}\n          </h3>\n          <nav aria-labelledby={`${rootClass}__about`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>\n              {this.aboutLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__about`}\n                    data-id={link.id}\n                    href={link.url}\n                    onClick={this._onAboutSapClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        </div>\n      )}\n      {this.siteInformationLinksArray.length > 0 && (\n        <div className={`${rootClass}__links-group ${rootClass}__site-information-links`}>\n          <h3 className={`${rootClass}__links-item`} id={`${rootClass}__site-information`}>\n            {this._siteInformationTitle}\n          </h3>\n          <nav aria-labelledby={`${rootClass}__site-information`}>\n            <ul className={`${rootClass}__links-list ${rootClass}__links-list--desktop`}>\n              {this.siteInformationLinksArray.map((link, index) => (\n                <li key={index}>\n                  <a\n                    target={link.target}\n                    aria-describedby={`${rootClass}__site-information`}\n                    data-id={link.id}\n                    href={link.url}\n                    onClick={this._onSiteInformationClick}>\n                    {link.title}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n        </div>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/HeroBanner.js

@@ -8,12 +8,12 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import { isSpace } from "@ui5/webcomponents-base/dist/Keys.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/media-play.js";
 import "@ui5/webcomponents-icons/dist/media-pause.js";
-import HeroBannerTemplate from "./generated/templates/HeroBannerTemplate.lit.js";
+import HeroBannerTemplate from "./HeroBannerTemplate.js";
 // Styles
 import HeroBannerCss from "./generated/themes/HeroBanner.css.js";
 export var UDExImageLoadingStrategies;
@@ -52,7 +52,7 @@ let UDExHeroBanner = class UDExHeroBanner extends UI5Element {
         return this.backgroundColor ? this.backgroundColor : "transparent";
     }
     get wrapperBackgroundImage() {
-        return this.backgroundGradient ? `background-image:${this.backgroundGradient}` : "";
+        return this.backgroundGradient ? this.backgroundGradient : "";
     }
     /**
      * Determines if the video should autoplay based on the user's global preference.
@@ -152,7 +152,7 @@ __decorate([
 UDExHeroBanner = __decorate([
     customElement({
         tag: "udex-hero-banner",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: HeroBannerCss,
         template: HeroBannerTemplate,
         dependencies: [Icon],

package/dist/HeroBanner.js.map

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

package/dist/HeroBannerTemplate.d.ts

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

package/dist/HeroBannerTemplate.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+export default function HeroBannerTemplate() {
+    const rootClass = "udex-hero-banner";
+    return (_jsxs("div", { className: this.heroBannerClasses, part: "wrapper", style: {
+            backgroundColor: this.wrapperBackgroundColor,
+            ...(this.wrapperBackgroundImage ? { backgroundImage: this.wrapperBackgroundImage } : {})
+        }, children: [this.hasBackgroundVideo ? (_jsxs("div", { className: `${rootClass}__background-video-wrapper`, tabIndex: 0, onKeyDown: this._handleKeydown, children: [_jsx("video", { autoPlay: this.shouldVideoAutoplay, muted: true, loop: true, playsInline: true, part: "background-video", className: `${rootClass}__background-video`, "aria-label": this.backgroundVideoLabel, children: _jsx("source", { src: this.backgroundVideo, type: "video/mp4" }) }), _jsx("div", { className: `${rootClass}__background-video-overlay` }), this.hasBackgroundImage && (_jsx("picture", { children: _jsx("img", { loading: this.backgroundImageLoadingStrategy, src: this.backgroundImage, part: "background-image", className: `${rootClass}__background-image`, alt: this.backgroundImageLabel }) })), _jsxs("div", { className: `${rootClass}__content-container`, children: [_jsx("slot", { id: `${rootClass}__content`, name: "content", part: "content" }), _jsx("slot", { id: `${rootClass}__additionalContent`, name: "additionalContent", part: "additionalContent" })] }), _jsx("button", { className: `${rootClass}__media-button`, "aria-label": "Play / Pause button", role: "button", onClick: this._toggleMediaButton, children: _jsx(UI5Icon, { name: this.mediaButtonIconName }) })] })) : (_jsxs("div", { className: `${rootClass}__container`, children: [this.hasCustomBackgroundPicture ? (_jsx("slot", { name: "backgroundPicture" })) : this.hasBackgroundImage ? (_jsx("picture", { children: _jsx("img", { loading: this.backgroundImageLoadingStrategy, src: this.backgroundImage, part: "background-image", className: `${rootClass}__background-image`, alt: this.backgroundImageLabel }) })) : null, _jsxs("div", { className: `${rootClass}__content-container`, children: [_jsx("slot", { id: `${rootClass}__content`, name: "content", part: "content" }), this.hasAdditionalContent && (_jsx("slot", { id: `${rootClass}__additionalContent`, name: "additionalContent", part: "additionalContent" }))] })] })), this.hasMediaContent && (_jsx("slot", { id: `${rootClass}__mediaContent`, name: "mediaContent", part: "mediaContent" }))] }));
+}
+//# sourceMappingURL=HeroBannerTemplate.js.map

package/dist/HeroBannerTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeroBannerTemplate.js","sourceRoot":"","sources":["../src/HeroBannerTemplate.tsx"],"names":[],"mappings":"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","sourcesContent":["import type HeroBanner from \"./HeroBanner.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function HeroBannerTemplate(this: HeroBanner) {\n  const rootClass = \"udex-hero-banner\";\n\n  return (\n    <div\n      className={this.heroBannerClasses}\n      part=\"wrapper\"\n      style={{\n        backgroundColor: this.wrapperBackgroundColor,\n        ...(this.wrapperBackgroundImage ? { backgroundImage: this.wrapperBackgroundImage } : {})\n      }}>\n      {this.hasBackgroundVideo ? (\n        <div\n          className={`${rootClass}__background-video-wrapper`}\n          tabIndex={0}\n          onKeyDown={this._handleKeydown}>\n          <video\n            autoPlay={this.shouldVideoAutoplay}\n            muted\n            loop\n            playsInline\n            part=\"background-video\"\n            className={`${rootClass}__background-video`}\n            aria-label={this.backgroundVideoLabel}>\n            <source src={this.backgroundVideo} type=\"video/mp4\" />\n          </video>\n          <div className={`${rootClass}__background-video-overlay`}></div>\n          {this.hasBackgroundImage && (\n            <picture>\n              <img\n                loading={this.backgroundImageLoadingStrategy}\n                src={this.backgroundImage}\n                part=\"background-image\"\n                className={`${rootClass}__background-image`}\n                alt={this.backgroundImageLabel}/>\n            </picture>\n          )}\n          <div className={`${rootClass}__content-container`}>\n            <slot\n              id={`${rootClass}__content`}\n              name=\"content\"\n              part=\"content\">\n            </slot>\n            <slot\n              id={`${rootClass}__additionalContent`}\n              name=\"additionalContent\"\n              part=\"additionalContent\">\n            </slot>\n          </div>\n          <button\n            className={`${rootClass}__media-button`}\n            aria-label=\"Play / Pause button\"\n            role=\"button\"\n            onClick={this._toggleMediaButton}>\n            <UI5Icon name={this.mediaButtonIconName}></UI5Icon>\n          </button>\n        </div>\n      ) : (\n        <div className={`${rootClass}__container`}>\n          {this.hasCustomBackgroundPicture ? (\n            <slot name=\"backgroundPicture\"></slot>\n          ) : this.hasBackgroundImage ? (\n            <picture>\n              <img\n                loading={this.backgroundImageLoadingStrategy}\n                src={this.backgroundImage}\n                part=\"background-image\"\n                className={`${rootClass}__background-image`}\n                alt={this.backgroundImageLabel}\n              />\n            </picture>\n          ) : null}\n          <div className={`${rootClass}__content-container`}>\n            <slot\n              id={`${rootClass}__content`}\n              name=\"content\"\n              part=\"content\">\n            </slot>\n            {this.hasAdditionalContent && (\n              <slot\n                id={`${rootClass}__additionalContent`}\n                name=\"additionalContent\"\n                part=\"additionalContent\">\n              </slot>\n            )}\n          </div>\n        </div>\n      )}\n      {this.hasMediaContent && (\n        <slot\n          id={`${rootClass}__mediaContent`}\n          name=\"mediaContent\"\n          part=\"mediaContent\">\n        </slot>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/RatingBar.js

@@ -8,12 +8,12 @@ var UDExRatingBar_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import { STARS } from "./generated/i18n/i18n-defaults.js";
 import "@ui5/webcomponents-icons/dist/favorite.js";
-import RatingBarTemplate from "./generated/templates/RatingBarTemplate.lit.js";
+import RatingBarTemplate from "./RatingBarTemplate.js";
 // Styles
 import RatingBarCss from "./generated/themes/RatingBar.css.js";
 /**
@@ -99,7 +99,7 @@ __decorate([
 UDExRatingBar = UDExRatingBar_1 = __decorate([
     customElement({
         tag: "udex-rating-bar",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: RatingBarCss,
         template: RatingBarTemplate,
         dependencies: [Icon],

package/dist/RatingBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingBar.js","sourceRoot":"","sources":["../src/RatingBar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,2CAA2C,CAAC;AACnD,OAAO,iBAAiB,MAAM,gDAAgD,CAAC;AAE/E,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACE;;;;;YAKI;QAEF,WAAM,GAAW,CAAC,CAAC;QAErB;;;;;YAKI;QAEF,eAAU,GAAW,CAAC,CAAC;QAczB,eAAU,GAAW,CAAC,CAAC;QACvB,eAAU,GAAW,CAAC,CAAC;QACvB,mBAAc,GAAW,CAAC,CAAC;QAC3B,mBAAc,GAAW,GAAG,CAAC;IAiC/B,CAAC;IA/BC,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;YACrE,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;YACrE,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,mBAAmB;QACrB,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;YAC3E,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;YACzE,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC;QACnC,CAAC;QACD,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC;IAC/B,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9E,CAAC;CACF,CAAA;AA3DG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACD;AAGpB;IADN,IAAI,CAAC,yBAAyB,CAAC;uCACF;AA7B1B,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,YAAY;QACpB,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GAEI,aAAa,CAmElB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { STARS } from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/favorite.js\";\nimport RatingBarTemplate from \"./generated/templates/RatingBarTemplate.lit.js\";\n\n// Styles\nimport RatingBarCss from \"./generated/themes/RatingBar.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-rating-bar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/RatingBar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-rating-bar\",\n  renderer: litRender,\n  styles: RatingBarCss,\n  template: RatingBarTemplate,\n  dependencies: [Icon],\n})\n\nclass UDExRatingBar extends UI5Element {\n  /**\n    * Defines the associated rating.\n    *\n    * @default 0\n    * @public\n    */\n  @property({ type: Number })\n    rating: number = 0;\n\n  /**\n    * Defines the percentage.\n    *\n    * @default 0\n    * @public\n    */\n  @property({ type: Number })\n    percentage: number = 0;\n\n  /**\n    * Defines wether the percentage is shown or not.\n    *\n    * @default false\n    * @public\n    */\n  @property({ type: Boolean })\n    showPercentage!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _minRating: number = 0;\n  _maxRating: number = 5;\n  _minPercentage: number = 0;\n  _maxPercentage: number = 100;\n\n  onBeforeRendering(): void {\n    this.style.setProperty(\"--udex-rating-bar-progress\", `${this.percentage}%`);\n  }\n\n  get validatedRating(): number {\n    if (this.rating > this._maxRating) {\n      console.warn(\"UDEx RatingBar: The rating shouldn't be more than 5.\");\n      return this._maxRating;\n    }\n    if (this.rating < this._minRating) {\n      console.warn(\"UDEx RatingBar: The rating shouldn't be less than 0.\");\n      return this._minRating;\n    }\n    return this.rating;\n  }\n\n  get validatedPercentage(): string {\n    if (this.percentage > this._maxPercentage) {\n      console.warn(\"UDEx RatingBar: The percentage shouldn't be more than 100.\");\n      return `${this._maxPercentage}%`;\n    }\n    if (this.percentage < this._minPercentage) {\n      console.warn(\"UDEx RatingBar: The percentage shouldn't be less than 0.\");\n      return `${this._minPercentage}%`;\n    }\n    return `${this.percentage}%`;\n  }\n\n  get _ratingDescription(): string {\n    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;\n  }\n}\n\nUDExRatingBar.define();\n\nexport default UDExRatingBar;\n"]}
+{"version":3,"file":"RatingBar.js","sourceRoot":"","sources":["../src/RatingBar.ts"],"names":[],"mappings":";;;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iDAAiD,CAAC;AAEnE,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,mCAAmC,CAAC;AAC1D,OAAO,2CAA2C,CAAC;AACnD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AAEvD,SAAS;AACT,OAAO,YAAY,MAAM,qCAAqC,CAAC;AAE/D;;;;;;;;;;;;;;;;GAgBG;AASH,IAAM,aAAa,qBAAnB,MAAM,aAAc,SAAQ,UAAU;IAAtC;;QACE;;;;;YAKI;QAEF,WAAM,GAAW,CAAC,CAAC;QAErB;;;;;YAKI;QAEF,eAAU,GAAW,CAAC,CAAC;QAczB,eAAU,GAAW,CAAC,CAAC;QACvB,eAAU,GAAW,CAAC,CAAC;QACvB,mBAAc,GAAW,CAAC,CAAC;QAC3B,mBAAc,GAAW,GAAG,CAAC;IAiC/B,CAAC;IA/BC,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;IAC9E,CAAC;IAED,IAAI,eAAe;QACjB,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;YACrE,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;YAClC,OAAO,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;YACrE,OAAO,IAAI,CAAC,UAAU,CAAC;QACzB,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,IAAI,mBAAmB;QACrB,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CAAC,4DAA4D,CAAC,CAAC;YAC3E,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CAAC,0DAA0D,CAAC,CAAC;YACzE,OAAO,GAAG,IAAI,CAAC,cAAc,GAAG,CAAC;QACnC,CAAC;QACD,OAAO,GAAG,IAAI,CAAC,UAAU,GAAG,CAAC;IAC/B,CAAC;IAED,IAAI,kBAAkB;QACpB,OAAO,GAAG,IAAI,CAAC,eAAe,IAAI,eAAa,CAAC,UAAU,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;IAC9E,CAAC;CACF,CAAA;AA3DG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CACN;AASnB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDACF;AASvB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;qDACD;AAGpB;IADN,IAAI,CAAC,yBAAyB,CAAC;uCACF;AA7B1B,aAAa;IARlB,aAAa,CAAC;QACb,GAAG,EAAE,iBAAiB;QACtB,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,YAAY;QACpB,QAAQ,EAAE,iBAAiB;QAC3B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GAEI,aAAa,CAmElB;AAED,aAAa,CAAC,MAAM,EAAE,CAAC;AAEvB,eAAe,aAAa,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport 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 Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport { STARS } from \"./generated/i18n/i18n-defaults.js\";\nimport \"@ui5/webcomponents-icons/dist/favorite.js\";\nimport RatingBarTemplate from \"./RatingBarTemplate.js\";\n\n// Styles\nimport RatingBarCss from \"./generated/themes/RatingBar.css.js\";\n\n/**\n * @class\n *\n * <h3 class=\"comment-api-title\">Overview</h3>\n *\n *\n * <h3>Usage</h3>\n *\n * For the <code>udex-rating-bar</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/RatingBar.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-rating-bar\",\n  renderer: jsxRenderer,\n  styles: RatingBarCss,\n  template: RatingBarTemplate,\n  dependencies: [Icon],\n})\n\nclass UDExRatingBar extends UI5Element {\n  /**\n    * Defines the associated rating.\n    *\n    * @default 0\n    * @public\n    */\n  @property({ type: Number })\n    rating: number = 0;\n\n  /**\n    * Defines the percentage.\n    *\n    * @default 0\n    * @public\n    */\n  @property({ type: Number })\n    percentage: number = 0;\n\n  /**\n    * Defines wether the percentage is shown or not.\n    *\n    * @default false\n    * @public\n    */\n  @property({ type: Boolean })\n    showPercentage!: boolean;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  _minRating: number = 0;\n  _maxRating: number = 5;\n  _minPercentage: number = 0;\n  _maxPercentage: number = 100;\n\n  onBeforeRendering(): void {\n    this.style.setProperty(\"--udex-rating-bar-progress\", `${this.percentage}%`);\n  }\n\n  get validatedRating(): number {\n    if (this.rating > this._maxRating) {\n      console.warn(\"UDEx RatingBar: The rating shouldn't be more than 5.\");\n      return this._maxRating;\n    }\n    if (this.rating < this._minRating) {\n      console.warn(\"UDEx RatingBar: The rating shouldn't be less than 0.\");\n      return this._minRating;\n    }\n    return this.rating;\n  }\n\n  get validatedPercentage(): string {\n    if (this.percentage > this._maxPercentage) {\n      console.warn(\"UDEx RatingBar: The percentage shouldn't be more than 100.\");\n      return `${this._maxPercentage}%`;\n    }\n    if (this.percentage < this._minPercentage) {\n      console.warn(\"UDEx RatingBar: The percentage shouldn't be less than 0.\");\n      return `${this._minPercentage}%`;\n    }\n    return `${this.percentage}%`;\n  }\n\n  get _ratingDescription(): string {\n    return `${this.validatedRating} ${UDExRatingBar.i18nBundle.getText(STARS)}`;\n  }\n}\n\nUDExRatingBar.define();\n\nexport default UDExRatingBar;\n"]}

package/dist/RatingBarTemplate.d.ts

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

package/dist/RatingBarTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+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 })] }));
+}
+//# sourceMappingURL=RatingBarTemplate.js.map

package/dist/RatingBarTemplate.js.map

@@ -0,0 +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"]}

package/dist/StatusBadge.js

@@ -8,7 +8,7 @@ var UDExStatusBadge_1;
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
@@ -18,7 +18,7 @@ import "@ui5/webcomponents-icons/dist/information.js";
 import i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
 import { STATUS_BADGE_TEXT, STATUS_BADGE_EDIT_TITLE, STATUS_BADGE_INFORMATION_TITLE, STATUS_BADGE_ERROR_TITLE, STATUS_BADGE_SUCCESS_TITLE, STATUS_BADGE_WARNING_TITLE, } from "./generated/i18n/i18n-defaults.js";
-import StatusBadgeTemplate from "./generated/templates/StatusBadgeTemplate.lit.js";
+import StatusBadgeTemplate from "./StatusBadgeTemplate.js";
 // Styles
 import StatusBadgeCss from "./generated/themes/StatusBadge.css.js";
 export var IconMapping;
@@ -111,7 +111,7 @@ __decorate([
 UDExStatusBadge = UDExStatusBadge_1 = __decorate([
     customElement({
         tag: "udex-status-badge",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: StatusBadgeCss,
         template: StatusBadgeTemplate,
         dependencies: [Icon],

package/dist/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../src/StatusBadge.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExStatusBadgeValueState from \"./types/StatusBadgeValueState.js\";\nimport {\n  STATUS_BADGE_TEXT,\n  STATUS_BADGE_EDIT_TITLE,\n  STATUS_BADGE_INFORMATION_TITLE,\n  STATUS_BADGE_ERROR_TITLE,\n  STATUS_BADGE_SUCCESS_TITLE,\n  STATUS_BADGE_WARNING_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport StatusBadgeTemplate from \"./generated/templates/StatusBadgeTemplate.lit.js\";\n\n// Styles\nimport StatusBadgeCss from \"./generated/themes/StatusBadge.css.js\";\n\nexport enum IconMapping {\n  Success = \"sys-enter-2\",\n  Error = \"error\",\n  Warning = \"alert\",\n  Edit = \"edit\",\n  Information = \"information\",\n}\n\nexport enum BadgeSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\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-status-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-badge\",\n  renderer: litRender,\n  styles: StatusBadgeCss,\n  template: StatusBadgeTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusBadge extends UI5Element {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExStatusBadgeValueState}` = UDExStatusBadgeValueState.Information;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${BadgeSize}` = BadgeSize.S;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get iconFieldName(): string {\n    if (!IconMapping[this.valueState]) {\n      return IconMapping.Information;\n    }\n    return IconMapping[this.valueState];\n  }\n\n  get badgeAccessibleName(): string {\n    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;\n  }\n\n  get ariaTitle() {\n    switch (IconMapping[this.valueState]) {\n    case IconMapping.Edit:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);\n    case IconMapping.Information:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);\n    case IconMapping.Success:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);\n    case IconMapping.Error:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);\n    case IconMapping.Warning:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);\n    }\n  }\n}\n\nUDExStatusBadge.define();\n\nexport default UDExStatusBadge;\n"]}
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../src/StatusBadge.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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\nimport \"@ui5/webcomponents-icons/dist/sys-enter-2.js\";\nimport \"@ui5/webcomponents-icons/dist/edit.js\";\nimport \"@ui5/webcomponents-icons/dist/information.js\";\nimport i18n from \"@ui5/webcomponents-base/dist/decorators/i18n.js\";\nimport type I18nBundle from \"@ui5/webcomponents-base/dist/i18nBundle.js\";\nimport UDExStatusBadgeValueState from \"./types/StatusBadgeValueState.js\";\nimport {\n  STATUS_BADGE_TEXT,\n  STATUS_BADGE_EDIT_TITLE,\n  STATUS_BADGE_INFORMATION_TITLE,\n  STATUS_BADGE_ERROR_TITLE,\n  STATUS_BADGE_SUCCESS_TITLE,\n  STATUS_BADGE_WARNING_TITLE,\n} from \"./generated/i18n/i18n-defaults.js\";\n\nimport StatusBadgeTemplate from \"./StatusBadgeTemplate.js\";\n\n// Styles\nimport StatusBadgeCss from \"./generated/themes/StatusBadge.css.js\";\n\nexport enum IconMapping {\n  Success = \"sys-enter-2\",\n  Error = \"error\",\n  Warning = \"alert\",\n  Edit = \"edit\",\n  Information = \"information\",\n}\n\nexport enum BadgeSize {\n  XS = \"XS\",\n  S = \"S\",\n  M = \"M\",\n  L = \"L\",\n  XL = \"XL\",\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-status-badge</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-badge\",\n  renderer: jsxRenderer,\n  styles: StatusBadgeCss,\n  template: StatusBadgeTemplate,\n  dependencies: [Icon],\n})\n\nclass UDExStatusBadge extends UI5Element {\n  /**\n   * Defines the value state of the component.\n   *\n   * @default \"Information\"\n   * @public\n   */\n  @property()\n    valueState: `${UDExStatusBadgeValueState}` = UDExStatusBadgeValueState.Information;\n\n  /**\n   * Defines predefined size of the component.\n   *\n   * @default \"S\"\n   * @public\n   */\n  @property()\n    size: `${BadgeSize}` = BadgeSize.S;\n\n  /**\n   * Defines the text alternative of the component.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    accessibleName?: string;\n\n  @i18n(\"@sapudex/web-components\")\n  static i18nBundle: I18nBundle;\n\n  get iconFieldName(): string {\n    if (!IconMapping[this.valueState]) {\n      return IconMapping.Information;\n    }\n    return IconMapping[this.valueState];\n  }\n\n  get badgeAccessibleName(): string {\n    return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;\n  }\n\n  get ariaTitle(): string {\n    switch (IconMapping[this.valueState]) {\n    case IconMapping.Edit:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);\n    case IconMapping.Information:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_INFORMATION_TITLE);\n    case IconMapping.Success:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_SUCCESS_TITLE);\n    case IconMapping.Error:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_ERROR_TITLE);\n    case IconMapping.Warning:\n      return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_WARNING_TITLE);\n    }\n  }\n}\n\nUDExStatusBadge.define();\n\nexport default UDExStatusBadge;\n"]}

package/dist/StatusBadgeTemplate.d.ts

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

package/dist/StatusBadgeTemplate.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+export default function StatusBadgeTemplate() {
+    const rootClass = "udex-status-badge";
+    return (_jsx("div", { className: rootClass, title: this.ariaTitle, children: _jsx(UI5Icon, { class: `${rootClass}__icon`, name: this.iconFieldName, accessibleName: this.badgeAccessibleName }) }));
+}
+//# sourceMappingURL=StatusBadgeTemplate.js.map

package/dist/StatusBadgeTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadgeTemplate.js","sourceRoot":"","sources":["../src/StatusBadgeTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AAEtD,MAAM,CAAC,OAAO,UAAU,mBAAmB;IACzC,MAAM,SAAS,GAAG,mBAAmB,CAAC;IAEtC,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,IAAI,CAAC,SAAS,YACrB,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,cAAc,EAAE,IAAI,CAAC,mBAAmB,GAChC,GACN,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type StatusBadge from \"./StatusBadge.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\nexport default function StatusBadgeTemplate(this: StatusBadge) {\n  const rootClass = \"udex-status-badge\";\n\n  return (\n    <div\n      className={rootClass}\n      title={this.ariaTitle}>\n      <UI5Icon\n        class={`${rootClass}__icon`}\n        name={this.iconFieldName}\n        accessibleName={this.badgeAccessibleName}>\n      </UI5Icon>\n    </div>\n  );\n}\n"]}

package/dist/StatusMessage.js

@@ -7,13 +7,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
 import UDExValueState from "./types/common.js";
 import "@ui5/webcomponents-icons/dist/accept.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
-import StatusMessageTemplate from "./generated/templates/StatusMessageTemplate.lit.js";
+import StatusMessageTemplate from "./StatusMessageTemplate.js";
 // Styles
 import StatusMessageCss from "./generated/themes/StatusMessage.css.js";
 export var IconMapping;
@@ -79,7 +79,7 @@ __decorate([
 UDExStatusMessage = __decorate([
     customElement({
         tag: "udex-status-message",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: StatusMessageCss,
         template: StatusMessageTemplate,
         dependencies: [Icon],

package/dist/StatusMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../src/StatusMessage.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,SAAS,MAAM,sDAAsD,CAAC;AAC7E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAEhD,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AAEvF,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,iCAAkB,CAAA;IAClB,8BAAe,CAAA;IACf,gCAAiB,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAUE;;;;;WAKG;QAED,4BAAuB,GAAqB,MAAM,CAAC;QAUrD;;;;;WAKG;QAED,eAAU,GAAwB,cAAc,CAAC,QAAQ,CAAC;IAQ9D,CAAC;IANC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,cAAc,CAAC,QAAQ,EAAE,CAAC;YAChD,OAAO,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAA;AAlCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACD;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAC0B;AASnD;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACP;AAQlB;IADD,QAAQ,EAAE;qDACiD;AAlCxD,iBAAiB;IAPtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,SAAS;QACnB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,iBAAiB,CA0CtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExValueState from \"./types/common.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport StatusMessageTemplate from \"./generated/templates/StatusMessageTemplate.lit.js\";\n\n// Styles\nimport StatusMessageCss from \"./generated/themes/StatusMessage.css.js\";\n\nexport enum IconMapping {\n  Success = \"accept\",\n  Error = \"error\",\n  Warning = \"alert\",\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-status-message</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusMessage.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-message\",\n  renderer: litRender,\n  styles: StatusMessageCss,\n  template: StatusMessageTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusMessage extends UI5Element {\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 supporting text alignment. It aligns only Standard state text.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingTextAlignment: \"Left\" | \"Right\" = \"Left\";\n\n  /**\n   * Defines if component should have disabled styles.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    disabled!: string;\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  get iconFieldName(): string {\n    if (this.valueState !== UDExValueState.Standard) {\n      return IconMapping[this.valueState];\n    }\n    return \"\";\n  }\n}\n\nUDExStatusMessage.define();\n\nexport default UDExStatusMessage;\n"]}
+{"version":3,"file":"StatusMessage.js","sourceRoot":"","sources":["../src/StatusMessage.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,UAAU,MAAM,4CAA4C,CAAC;AACpE,OAAO,aAAa,MAAM,0DAA0D,CAAC;AACrF,OAAO,QAAQ,MAAM,qDAAqD,CAAC;AAC3E,OAAO,WAAW,MAAM,iDAAiD,CAAC;AAC1E,OAAO,IAAI,MAAM,iCAAiC,CAAC;AACnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,yCAAyC,CAAC;AACjD,OAAO,wCAAwC,CAAC;AAChD,OAAO,wCAAwC,CAAC;AAEhD,OAAO,qBAAqB,MAAM,4BAA4B,CAAC;AAE/D,SAAS;AACT,OAAO,gBAAgB,MAAM,yCAAyC,CAAC;AAEvE,MAAM,CAAN,IAAY,WAIX;AAJD,WAAY,WAAW;IACrB,iCAAkB,CAAA;IAClB,8BAAe,CAAA;IACf,gCAAiB,CAAA;AACnB,CAAC,EAJW,WAAW,KAAX,WAAW,QAItB;AAED;;;;;;;;;;;;;;;;GAgBG;AAQH,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,UAAU;IAA1C;;QAUE;;;;;WAKG;QAED,4BAAuB,GAAqB,MAAM,CAAC;QAUrD;;;;;WAKG;QAED,eAAU,GAAwB,cAAc,CAAC,QAAQ,CAAC;IAQ9D,CAAC;IANC,IAAI,aAAa;QACf,IAAI,IAAI,CAAC,UAAU,KAAK,cAAc,CAAC,QAAQ,EAAE,CAAC;YAChD,OAAO,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QACtC,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;CACF,CAAA;AAlCG;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACD;AASxB;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kEAC0B;AASnD;IADD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDACP;AAQlB;IADD,QAAQ,EAAE;qDACiD;AAlCxD,iBAAiB;IAPtB,aAAa,CAAC;QACb,GAAG,EAAE,qBAAqB;QAC1B,QAAQ,EAAE,WAAW;QACrB,MAAM,EAAE,gBAAgB;QACxB,QAAQ,EAAE,qBAAqB;QAC/B,YAAY,EAAE,CAAC,IAAI,CAAC;KACrB,CAAC;GACI,iBAAiB,CA0CtB;AAED,iBAAiB,CAAC,MAAM,EAAE,CAAC;AAE3B,eAAe,iBAAiB,CAAC","sourcesContent":["import UI5Element from \"@ui5/webcomponents-base/dist/UI5Element.js\";\nimport customElement from \"@ui5/webcomponents-base/dist/decorators/customElement.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport UDExValueState from \"./types/common.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/error.js\";\nimport \"@ui5/webcomponents-icons/dist/alert.js\";\n\nimport StatusMessageTemplate from \"./StatusMessageTemplate.js\";\n\n// Styles\nimport StatusMessageCss from \"./generated/themes/StatusMessage.css.js\";\n\nexport enum IconMapping {\n  Success = \"accept\",\n  Error = \"error\",\n  Warning = \"alert\",\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-status-message</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/StatusMessage.js\";</code>\n *\n * @constructor\n * @extends UI5Element\n * @public\n */\n@customElement({\n  tag: \"udex-status-message\",\n  renderer: jsxRenderer,\n  styles: StatusMessageCss,\n  template: StatusMessageTemplate,\n  dependencies: [Icon],\n})\nclass UDExStatusMessage extends UI5Element {\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 supporting text alignment. It aligns only Standard state text.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    supportingTextAlignment: \"Left\" | \"Right\" = \"Left\";\n\n  /**\n   * Defines if component should have disabled styles.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    disabled!: string;\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  get iconFieldName(): string {\n    if (this.valueState !== UDExValueState.Standard) {\n      return IconMapping[this.valueState];\n    }\n    return \"\";\n  }\n}\n\nUDExStatusMessage.define();\n\nexport default UDExStatusMessage;\n"]}

package/dist/StatusMessageTemplate.d.ts

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

package/dist/StatusMessageTemplate.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+export default function StatusMessageTemplate() {
+    const rootClass = "udex-status-message";
+    return (_jsxs("div", { className: `${rootClass} ${rootClass}__supporting-text`, children: [this.iconFieldName && (_jsx(UI5Icon, { name: this.iconFieldName, class: `${rootClass}__icon`, mode: IconMode.Decorative })), this.supportingText] }));
+}
+//# sourceMappingURL=StatusMessageTemplate.js.map

package/dist/StatusMessageTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusMessageTemplate.js","sourceRoot":"","sources":["../src/StatusMessageTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AAEjE,MAAM,CAAC,OAAO,UAAU,qBAAqB;IAC3C,MAAM,SAAS,GAAG,qBAAqB,CAAC;IAExC,OAAO,CACL,eAAK,SAAS,EAAE,GAAG,SAAS,IAAI,SAAS,mBAAmB,aACzD,IAAI,CAAC,aAAa,IAAI,CACrB,KAAC,OAAO,IACN,IAAI,EAAE,IAAI,CAAC,aAAa,EACxB,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,QAAQ,CAAC,UAAU,GACjB,CACX,EACA,IAAI,CAAC,cAAc,IAChB,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type StatusMessage from \"./StatusMessage.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\n\nexport default function StatusMessageTemplate(this: StatusMessage) {\n  const rootClass = \"udex-status-message\";\n\n  return (\n    <div className={`${rootClass} ${rootClass}__supporting-text`}>\n      {this.iconFieldName && (\n        <UI5Icon\n          name={this.iconFieldName}\n          class={`${rootClass}__icon`}\n          mode={IconMode.Decorative}>\n        </UI5Icon>\n      )}\n      {this.supportingText}\n    </div>\n  );\n}\n"]}

package/dist/Switch.d.ts

@@ -1,8 +1,5 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import "@ui5/webcomponents/dist/Switch.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/less.js";
 export declare enum UDExSwitchColor {
     NonSemantic = "Non-Semantic",
     Semantic = "Semantic"
@@ -79,7 +76,7 @@ declare class UDExSwitch extends UI5Element {
     tooltip: string;
     onEnterDOM(): void;
     handleSwitchClick(): void;
-    get switchTabIndex(): "0" | undefined;
+    get switchTabIndex(): 0 | undefined;
     get isActiveTrackClass(): "udex-switch__track--active" | "udex-switch__track--inactive";
     get isSemanticColor(): boolean;
     get ariaLabeledBy(): string;

package/dist/Switch.js

@@ -6,17 +6,13 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
-import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.js";
 import "@ui5/webcomponents/dist/Switch.js";
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import event from "@ui5/webcomponents-base/dist/decorators/event-strict.js";
 import { isDesktop } from "@ui5/webcomponents-base/dist/Device.js";
+import SwitchTemplate from "./SwitchTemplate.js";
 import Icon from "@ui5/webcomponents/dist/Icon.js";
-import "@ui5/webcomponents-icons/dist/accept.js";
-import "@ui5/webcomponents-icons/dist/decline.js";
-import "@ui5/webcomponents-icons/dist/less.js";
-// Template
-import SwitchTemplate from "./generated/templates/SwitchTemplate.lit.js";
 // Styles
 import SwitchCss from "./generated/themes/Switch.css.js";
 export var UDExSwitchColor;
@@ -86,7 +82,7 @@ let UDExSwitch = class UDExSwitch extends UI5Element {
         }
     }
     get switchTabIndex() {
-        return this.disabled ? undefined : "0";
+        return this.disabled ? undefined : 0;
     }
     get isActiveTrackClass() {
         return this.checked ? "udex-switch__track--active" : "udex-switch__track--inactive";
@@ -122,7 +118,7 @@ __decorate([
 UDExSwitch = __decorate([
     customElement({
         tag: "udex-switch",
-        renderer: litRender,
+        renderer: jsxRenderer,
         styles: SwitchCss,
         template: SwitchTemplate,
         dependencies: [Icon],

package/dist/Switch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.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 litRender from \"@ui5/webcomponents-base/dist/renderer/LitRenderer.js\";\nimport \"@ui5/webcomponents/dist/Switch.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\n\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport \"@ui5/webcomponents-icons/dist/accept.js\";\nimport \"@ui5/webcomponents-icons/dist/decline.js\";\nimport \"@ui5/webcomponents-icons/dist/less.js\";\n\n// Template\nimport SwitchTemplate from \"./generated/templates/SwitchTemplate.lit.js\";\n\n// Styles\nimport SwitchCss from \"./generated/themes/Switch.css.js\";\n\nexport enum UDExSwitchColor {\n  NonSemantic = \"Non-Semantic\",\n  Semantic = \"Semantic\",\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-switch</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Switch.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-switch\n * @public\n */\n@customElement({\n  tag: \"udex-switch\",\n  renderer: litRender,\n  styles: SwitchCss,\n  template: SwitchTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Fired when the component checked state changes.\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"change\", { cancelable: true, bubbles: true })\nclass UDExSwitch extends UI5Element {\n  eventDetails!: {\n    \"change\": void\n  };\n  /**\n   * Defines the label near switch.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines the color of the component.\n   *\n   * @default \"Non-Semantic\"\n   * @public\n   */\n  @property()\n    color: `${UDExSwitchColor}` = UDExSwitchColor.NonSemantic;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default \"\"\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 undefined\n   * @public\n   */\n  @property()\n    accessibleNameRef?: string;\n\n  /**\n   * Defines if the component is checked.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    checked: boolean = false;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the tooltip of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    tooltip: string = \"\";\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  handleSwitchClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.fireDecoratorEvent(\"change\");\n    }\n  }\n\n  get switchTabIndex(): \"0\" | undefined {\n    return this.disabled ? undefined : \"0\";\n  }\n\n  get isActiveTrackClass():\n    | \"udex-switch__track--active\"\n    | \"udex-switch__track--inactive\" {\n    return this.checked ? \"udex-switch__track--active\" : \"udex-switch__track--inactive\";\n  }\n\n  get isSemanticColor(): boolean {\n    return this.color === UDExSwitchColor.Semantic;\n  }\n\n  get ariaLabeledBy(): string {\n    return this.accessibleNameRef || this.label ? `${this._id}-switch__label` : \"\";\n  }\n}\n\nUDExSwitch.define();\n\nexport default UDExSwitch;\n"]}
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../src/Switch.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 jsxRenderer from \"@ui5/webcomponents-base/renderer/JsxRenderer.js\";\nimport \"@ui5/webcomponents/dist/Switch.js\";\nimport property from \"@ui5/webcomponents-base/dist/decorators/property.js\";\nimport event from \"@ui5/webcomponents-base/dist/decorators/event-strict.js\";\nimport { isDesktop } from \"@ui5/webcomponents-base/dist/Device.js\";\nimport SwitchTemplate from \"./SwitchTemplate.js\";\nimport Icon from \"@ui5/webcomponents/dist/Icon.js\";\n\n// Styles\nimport SwitchCss from \"./generated/themes/Switch.css.js\";\n\nexport enum UDExSwitchColor {\n  NonSemantic = \"Non-Semantic\",\n  Semantic = \"Semantic\",\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-switch</code>\n * <h3>ES6 Module Import</h3>\n *\n * <code>import \"@sapudex/web-components/dist/Switch.js\";</code>\n *\n * @constructor\n * @author SAP SE\n * @extends UI5Element\n * @tagname udex-switch\n * @public\n */\n@customElement({\n  tag: \"udex-switch\",\n  renderer: jsxRenderer,\n  styles: SwitchCss,\n  template: SwitchTemplate,\n  dependencies: [Icon],\n})\n\n/**\n * Fired when the component checked state changes.\n *\n * @allowPreventDefault\n * @public\n */\n@event(\"change\", { cancelable: true, bubbles: true })\nclass UDExSwitch extends UI5Element {\n  eventDetails!: {\n    \"change\": void\n  };\n  /**\n   * Defines the label near switch.\n   *\n   * @default undefined\n   * @public\n   */\n  @property({ type: String })\n    label?: string;\n\n  /**\n   * Defines the color of the component.\n   *\n   * @default \"Non-Semantic\"\n   * @public\n   */\n  @property()\n    color: `${UDExSwitchColor}` = UDExSwitchColor.NonSemantic;\n\n  /**\n   * Sets the accessible ARIA name of the component.\n   *\n   * @default \"\"\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 undefined\n   * @public\n   */\n  @property()\n    accessibleNameRef?: string;\n\n  /**\n   * Defines if the component is checked.\n   *\n   * @public\n   */\n  @property({ type: Boolean })\n    checked: boolean = false;\n\n  /**\n   * Defines whether the component is disabled.\n   *\n   * @default false\n   * @public\n   */\n  @property({ type: Boolean })\n    disabled!: boolean;\n\n  /**\n   * Defines the tooltip of the component.\n   *\n   * @default \"\"\n   * @public\n   */\n  @property({ type: String })\n    tooltip: string = \"\";\n\n  onEnterDOM(): void {\n    if (isDesktop()) {\n      this.setAttribute(\"desktop\", \"\");\n    }\n  }\n\n  handleSwitchClick(): void {\n    if (!this.disabled) {\n      this.checked = !this.checked;\n      this.fireDecoratorEvent(\"change\");\n    }\n  }\n\n  get switchTabIndex(): 0 | undefined {\n    return this.disabled ? undefined : 0;\n  }\n\n  get isActiveTrackClass():\n    | \"udex-switch__track--active\"\n    | \"udex-switch__track--inactive\" {\n    return this.checked ? \"udex-switch__track--active\" : \"udex-switch__track--inactive\";\n  }\n\n  get isSemanticColor(): boolean {\n    return this.color === UDExSwitchColor.Semantic;\n  }\n\n  get ariaLabeledBy(): string {\n    return this.accessibleNameRef || this.label ? `${this._id}-switch__label` : \"\";\n  }\n}\n\nUDExSwitch.define();\n\nexport default UDExSwitch;\n"]}

package/dist/SwitchTemplate.d.ts

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

package/dist/SwitchTemplate.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@ui5/webcomponents-base/jsx-runtime";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+import acceptIcon from "@ui5/webcomponents-icons/dist/accept.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
+import lessIcon from "@ui5/webcomponents-icons/dist/less.js";
+export default function SwitchTemplate() {
+    const rootClass = "udex-switch";
+    const switchId = `${this._id}-switch`;
+    return (_jsxs("div", { class: `${rootClass}`, children: [this.label && (_jsx("label", { id: `${switchId}__label`, for: `${switchId}__input`, class: `${rootClass}__label`, part: "label", children: this.label })), _jsxs("div", { class: `${rootClass}__container`, role: "switch", "aria-label": this.accessibleName, "aria-labelledby": this.ariaLabeledBy, "aria-checked": this.checked, "aria-disabled": this.disabled, tabindex: this.switchTabIndex, title: this.tooltip, onClick: this.handleSwitchClick, children: [_jsx("div", { class: `${rootClass}__track ${this.isActiveTrackClass}`, children: _jsx("div", { class: `${rootClass}__handle`, children: _jsx(UI5Icon, { class: `${rootClass}__icon`, name: this.checked ? acceptIcon : this.isSemanticColor ? declineIcon : lessIcon, mode: IconMode.Decorative }) }) }), _jsx("input", { id: `${switchId}__input`, class: `${rootClass}__input`, type: "checkbox", checked: this.checked })] })] }));
+}
+//# sourceMappingURL=SwitchTemplate.js.map

package/dist/SwitchTemplate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchTemplate.js","sourceRoot":"","sources":["../src/SwitchTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,OAAO,MAAM,iCAAiC,CAAC;AACtD,OAAO,QAAQ,MAAM,2CAA2C,CAAC;AACjE,OAAO,UAAU,MAAM,yCAAyC,CAAC;AACjE,OAAO,WAAW,MAAM,0CAA0C,CAAC;AACnE,OAAO,QAAQ,MAAM,uCAAuC,CAAC;AAE7D,MAAM,CAAC,OAAO,UAAU,cAAc;IACpC,MAAM,SAAS,GAAG,aAAa,CAAC;IAChC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,GAAG,SAAS,CAAC;IAEtC,OAAO,CACL,eAAK,KAAK,EAAE,GAAG,SAAS,EAAE,aACvB,IAAI,CAAC,KAAK,IAAI,CACb,gBACE,EAAE,EAAE,GAAG,QAAQ,SAAS,EACxB,GAAG,EAAE,GAAG,QAAQ,SAAS,EACzB,KAAK,EAAE,GAAG,SAAS,SAAS,EAC5B,IAAI,EAAC,OAAO,YACX,IAAI,CAAC,KAAK,GACL,CACT,EACD,eACE,KAAK,EAAE,GAAG,SAAS,aAAa,EAChC,IAAI,EAAC,QAAQ,gBACD,IAAI,CAAC,cAAc,qBACd,IAAI,CAAC,aAAa,kBACrB,IAAI,CAAC,OAAO,mBACX,IAAI,CAAC,QAAQ,EAC5B,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,KAAK,EAAE,IAAI,CAAC,OAAO,EACnB,OAAO,EAAE,IAAI,CAAC,iBAAiB,aAC/B,cAAK,KAAK,EAAE,GAAG,SAAS,WAAW,IAAI,CAAC,kBAAkB,EAAE,YAC1D,cAAK,KAAK,EAAE,GAAG,SAAS,UAAU,YAChC,KAAC,OAAO,IACN,KAAK,EAAE,GAAG,SAAS,QAAQ,EAC3B,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,QAAQ,EAC/E,IAAI,EAAE,QAAQ,CAAC,UAAU,GACjB,GACN,GACF,EACN,gBACE,EAAE,EAAE,GAAG,QAAQ,SAAS,EACxB,KAAK,EAAE,GAAG,SAAS,SAAS,EAC5B,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,IAAI,CAAC,OAAO,GAAG,IACtB,IACF,CACP,CAAC;AACJ,CAAC","sourcesContent":["import type Switch from \"./Switch.js\";\nimport UI5Icon from \"@ui5/webcomponents/dist/Icon.js\";\nimport IconMode from \"@ui5/webcomponents/dist/types/IconMode.js\";\nimport acceptIcon from \"@ui5/webcomponents-icons/dist/accept.js\";\nimport declineIcon from \"@ui5/webcomponents-icons/dist/decline.js\";\nimport lessIcon from \"@ui5/webcomponents-icons/dist/less.js\";\n\nexport default function SwitchTemplate(this: Switch) {\n  const rootClass = \"udex-switch\";\n  const switchId = `${this._id}-switch`;\n\n  return (\n    <div class={`${rootClass}`}>\n      {this.label && (\n        <label\n          id={`${switchId}__label`}\n          for={`${switchId}__input`}\n          class={`${rootClass}__label`}\n          part=\"label\">\n          {this.label}\n        </label>\n      )}\n      <div\n        class={`${rootClass}__container`}\n        role=\"switch\"\n        aria-label={this.accessibleName}\n        aria-labelledby={this.ariaLabeledBy}\n        aria-checked={this.checked}\n        aria-disabled={this.disabled}\n        tabindex={this.switchTabIndex}\n        title={this.tooltip}\n        onClick={this.handleSwitchClick}>\n        <div class={`${rootClass}__track ${this.isActiveTrackClass}`}>\n          <div class={`${rootClass}__handle`}>\n            <UI5Icon\n              class={`${rootClass}__icon`}\n              name={this.checked ? acceptIcon : this.isSemanticColor ? declineIcon : lessIcon}\n              mode={IconMode.Decorative}>\n            </UI5Icon>\n          </div>\n        </div>\n        <input\n          id={`${switchId}__input`}\n          class={`${rootClass}__input`}\n          type=\"checkbox\"\n          checked={this.checked}/>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/TagGroup.d.ts

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import Tokenizer from "@ui5/webcomponents/dist/Tokenizer.js";
 import Token from "@ui5/webcomponents/dist/Token.js";
 import UDExTag from "./Tag.js";
+import UDExTooltip from "./Tooltip.js";
 import { Placement } from "./types/Dropdown.js";
 type UDExTagClickEventDetail = {
     tag: UDExTag;
@@ -100,6 +101,7 @@ declare class UDExTagGroup extends UI5Element {
     handleTagClick(e: CustomEvent): void;
     handleTagKeyDown(e: KeyboardEvent): void;
     showMoreItems(): void;
+    get tooltip(): UDExTooltip;
 }
 export default UDExTagGroup;
 export type { UDExTagClickEventDetail, UDExTagKeydownEventDetail, UDExTagIconClickEventDetail };

package/dist/TagGroup.js

@@ -108,19 +108,26 @@ let UDExTagGroup = class UDExTagGroup extends UI5Element {
     }
     handleTagKeyDown(e) {
         e.stopPropagation();
+        if (isEscape(e)) {
+            this.tooltip.open = false;
+            this._nMoreBtn?.focus();
+            return;
+        }
         this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
     }
     showMoreItems() {
         if (this.fireDecoratorEvent("show-more-tags")) {
-            const tooltip = this.shadowRoot.querySelector(`#${this._id}-tag-group-tooltip`);
             const moreBtn = this._tokenizer.moreLink;
             if (moreBtn) {
                 this._tokenizer.expanded = false;
-                tooltip.opener = moreBtn;
-                tooltip.open = true;
+                this.tooltip.opener = moreBtn;
+                this.tooltip.open = true;
             }
         }
     }
+    get tooltip() {
+        return this.shadowRoot.querySelector(`#${this._id}-tag-group-tooltip`);
+    }
 };
 __decorate([
     property({ type: Boolean })