@sapudex/web-components 2.14.0 → 2.16.0

package/src/Search.ts

@@ -39,6 +39,7 @@ import {
 } from "./generated/i18n/i18n-defaults.js";
 import type SearchInputSuggestion from "./features/SearchSuggestionsPopover.js";
 import retryUntilSuccessful from "./utils/retryUntilSuccessful.js";
+import sanitizeString from "./utils/sanitizeString.js";
 import UDExButton from "./Button.js";
 
 import SearchTemplate from "./generated/templates/SearchTemplate.lit.js";
@@ -690,12 +691,12 @@ class UDExSearch extends UI5Element {
       const label = itemWithCustomIcon ? item.label : item;
       return {
         handleSelectItem: this.handleSelectItem(label, idName),
-        text: this.getTextWithSuggestion(label),
-        title: label,
+        text: sanitizeString(this.getTextWithSuggestion(label)),
+        title: sanitizeString(label),
         icon: itemWithCustomIcon ? item.icon : SearchIcon,
         hasCustomIcon: itemWithCustomIcon,
         id: `${idName}-${index}`,
-        suggestionDescription: `${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`,
+        suggestionDescription: sanitizeString(`${label}, ${idName} ${index + 1} ${UDExSearch.i18nBundle.getText(OF)} ${suggestedList.length}`),
       };
     });
   }
@@ -718,7 +719,7 @@ class UDExSearch extends UI5Element {
   };
 
   fireDropdownItemClick(value: string, categoryName: string) {
-    this.fireDecoratorEvent("dropdown-item-click", { value, categoryName });
+    this.fireDecoratorEvent("dropdown-item-click", { value: sanitizeString(value), categoryName });
   }
 
   handleDropdownClick() {

package/src/SearchableListBase.ts

@@ -250,18 +250,6 @@ class UDExSearchableListBase extends UI5Element {
     this.fireSelectionChange(dropdownItemId);
   }
 
-  onFilterSelectAllHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
-    this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
-        this.activateHeaderAndSetAllItems(item as UDExListGroupHeaderBase);
-      }
-    });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
-  }
-
   activateHeaderAndSetAllItems(item: UDExListGroupHeaderBase) {
     item.activateHeader();
     item.setAllItems(false);
@@ -298,28 +286,29 @@ class UDExSearchableListBase extends UI5Element {
 
   handleGroupHeaderState(groupHeader: UDExListGroupHeaderBase) {
     if (this.modeMultiSelect) {
-      if (groupHeader.isFilterMenuSelectAllHeader) {
-        groupHeader.deactivateHeader();
-
-        if (groupHeader.isAllDeselected()) {
-          groupHeader.activateHeader();
-        }
-      } else {
-        groupHeader.handleHeaderState();
-      }
+      groupHeader.handleHeaderState();
     }
   }
 
   onHeaderPress(e:CustomEvent) {
-    const dropdownHeaderItemId = this.getDataTokenId(e);
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireSelectionChange(this.getDataTokenId(e));
+  }
+
+  onSelectAllHeaderPress(e:CustomEvent) {
+    this.handleGroupHeaderSelection(e);
+    this.syncFilteredItems();
+    this.fireDecoratorEvent("select-all");
+  }
+
+  handleGroupHeaderSelection(e: CustomEvent): void {
+    const headerItemId = this.getDataTokenId(e);
     this.getProcessedItems().forEach(({ item }) => {
-      if (item._id === dropdownHeaderItemId) {
+      if (item._id === headerItemId) {
         (item as UDExListGroupHeaderBase).handleSelectionGroupState();
       }
     });
-
-    this.syncFilteredItems();
-    this.fireSelectionChange(dropdownHeaderItemId);
   }
 
   onSearch(e:CustomEvent) {

package/src/SelectBox.ts

@@ -326,8 +326,7 @@ class UDExSelectBox extends UDExSearchableListBase {
   }
 
   handleSelectAll(e:CustomEvent) {
-    this.onHeaderPress(e);
-    this.fireDecoratorEvent("select-all");
+    this.onSelectAllHeaderPress(e);
   }
 
   handleHeaderPress(e:CustomEvent) {

package/src/StatusBadge.ts

@@ -1,7 +1,7 @@
 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";
@@ -20,7 +20,7 @@ import {
   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";
@@ -60,11 +60,12 @@ export enum BadgeSize {
  */
 @customElement({
   tag: "udex-status-badge",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: StatusBadgeCss,
   template: StatusBadgeTemplate,
   dependencies: [Icon],
 })
+
 class UDExStatusBadge extends UI5Element {
   /**
    * Defines the value state of the component.
@@ -107,7 +108,7 @@ class UDExStatusBadge extends UI5Element {
     return `${this.accessibleName ? this.accessibleName : UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_TEXT)}`;
   }
 
-  get ariaTitle() {
+  get ariaTitle(): string {
     switch (IconMapping[this.valueState]) {
     case IconMapping.Edit:
       return UDExStatusBadge.i18nBundle.getText(STATUS_BADGE_EDIT_TITLE);

package/src/StatusBadgeTemplate.tsx

@@ -0,0 +1,18 @@
+import type StatusBadge from "./StatusBadge.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+
+export default function StatusBadgeTemplate(this: StatusBadge) {
+  const rootClass = "udex-status-badge";
+
+  return (
+    <div
+      className={rootClass}
+      title={this.ariaTitle}>
+      <UI5Icon
+        class={`${rootClass}__icon`}
+        name={this.iconFieldName}
+        accessibleName={this.badgeAccessibleName}>
+      </UI5Icon>
+    </div>
+  );
+}

package/src/StatusMessage.ts

@@ -1,14 +1,14 @@
 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";
@@ -38,7 +38,7 @@ export enum IconMapping {
  */
 @customElement({
   tag: "udex-status-message",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: StatusMessageCss,
   template: StatusMessageTemplate,
   dependencies: [Icon],

package/src/StatusMessageTemplate.tsx

@@ -0,0 +1,20 @@
+import type StatusMessage from "./StatusMessage.js";
+import UI5Icon from "@ui5/webcomponents/dist/Icon.js";
+import IconMode from "@ui5/webcomponents/dist/types/IconMode.js";
+
+export default function StatusMessageTemplate(this: StatusMessage) {
+  const rootClass = "udex-status-message";
+
+  return (
+    <div className={`${rootClass} ${rootClass}__supporting-text`}>
+      {this.iconFieldName && (
+        <UI5Icon
+          name={this.iconFieldName}
+          class={`${rootClass}__icon`}
+          mode={IconMode.Decorative}>
+        </UI5Icon>
+      )}
+      {this.supportingText}
+    </div>
+  );
+}

package/src/Switch.ts

@@ -1,18 +1,12 @@
 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";
@@ -43,7 +37,7 @@ export enum UDExSwitchColor {
  */
 @customElement({
   tag: "udex-switch",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: SwitchCss,
   template: SwitchTemplate,
   dependencies: [Icon],
@@ -134,8 +128,8 @@ class UDExSwitch extends UI5Element {
     }
   }
 
-  get switchTabIndex(): "0" | undefined {
-    return this.disabled ? undefined : "0";
+  get switchTabIndex(): 0 | undefined {
+    return this.disabled ? undefined : 0;
   }
 
   get isActiveTrackClass():

package/src/SwitchTemplate.tsx

@@ -0,0 +1,50 @@
+import type Switch from "./Switch.js";
+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(this: Switch) {
+  const rootClass = "udex-switch";
+  const switchId = `${this._id}-switch`;
+
+  return (
+    <div class={`${rootClass}`}>
+      {this.label && (
+        <label
+          id={`${switchId}__label`}
+          for={`${switchId}__input`}
+          class={`${rootClass}__label`}
+          part="label">
+          {this.label}
+        </label>
+      )}
+      <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}>
+        <div class={`${rootClass}__track ${this.isActiveTrackClass}`}>
+          <div class={`${rootClass}__handle`}>
+            <UI5Icon
+              class={`${rootClass}__icon`}
+              name={this.checked ? acceptIcon : this.isSemanticColor ? declineIcon : lessIcon}
+              mode={IconMode.Decorative}>
+            </UI5Icon>
+          </div>
+        </div>
+        <input
+          id={`${switchId}__input`}
+          class={`${rootClass}__input`}
+          type="checkbox"
+          checked={this.checked}/>
+      </div>
+    </div>
+  );
+}

package/src/TagGroup.ts

@@ -217,20 +217,30 @@ class UDExTagGroup extends UI5Element {
 
   handleTagKeyDown(e: KeyboardEvent): void {
     e.stopPropagation();
+
+    if (isEscape(e)) {
+      this.tooltip.open = false;
+      this._nMoreBtn?.focus();
+      return;
+    }
+
     this.fireDecoratorEvent("tag-keydown", { originalEvent: e });
   }
 
   showMoreItems(): void {
     if (this.fireDecoratorEvent("show-more-tags")) {
-      const tooltip = this.shadowRoot!.querySelector<UDExTooltip>(`#${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(): UDExTooltip {
+    return this.shadowRoot!.querySelector<UDExTooltip>(`#${this._id}-tag-group-tooltip`)!;
+  }
 }
 
 UDExTagGroup.define();

package/src/TruncatedText.ts

@@ -1,17 +1,15 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import jsxRenderer from "@ui5/webcomponents-base/renderer/JsxRenderer.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 i18n from "@ui5/webcomponents-base/dist/decorators/i18n.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import { READ_LESS, READ_MORE } from "./generated/i18n/i18n-defaults.js";
-
-// Template
-import TruncatedTextTemplate from "./generated/templates/TruncatedTextTemplate.lit.js";
+import UDExButton from "./Button.js";
+import TruncatedTextTemplate from "./TruncatedTextTemplate.js";
 
 // Styles
 import TruncatedTextCss from "./generated/themes/TruncatedText.css.js";
-import UDExButton from "./Button.js";
 
 export enum ErrorVariableName {
   charLimit = "char-limit"
@@ -34,7 +32,7 @@ const lineEndRegExp = new RegExp(/($)|([,.]+)$|([,.]+)?\s+(\S*)$/);
  */
 @customElement({
   tag: "udex-truncated-text",
-  renderer: litRender,
+  renderer: jsxRenderer,
   styles: TruncatedTextCss,
   template: TruncatedTextTemplate,
   dependencies: [UDExButton],
@@ -77,25 +75,21 @@ class UDExTruncatedText extends UI5Element {
   @i18n("@sapudex/web-components")
   static i18nBundle: I18nBundle;
 
-  constructor() {
-    super();
-  }
-
-  get visibleText() {
+  get visibleText(): string {
     return this.initiallyExpanded ? `${this.text} ` : this.truncatedText;
   }
 
-  get truncatedText() {
+  get truncatedText(): string {
     return this.text.substring(0, this.cropAfter()).replace(lineEndRegExp, ellipsisSymbols);
   }
 
-  get buttonLabel() {
+  get buttonLabel(): string {
     return this.initiallyExpanded
       ? UDExTruncatedText.i18nBundle.getText(READ_LESS)
       : UDExTruncatedText.i18nBundle.getText(READ_MORE);
   }
 
-  get validatedCharLimit() {
+  get validatedCharLimit(): number {
     return (Number(this.charLimit) < 0) ? 0 : this.charLimit;
   }
 

package/src/TruncatedTextTemplate.tsx

@@ -0,0 +1,21 @@
+import type TruncatedText from "./TruncatedText.js";
+import UDExButtonSize from "./types/ButtonSize.js";
+import UDExButtonDesign from "./types/ButtonDesign.js";
+import UDExButton from "./Button.js";
+
+export default function TruncatedTextTemplate(this: TruncatedText) {
+  const rootClass = "udex-truncated-text";
+  return (
+    <p className={rootClass}>
+      <span className={`${rootClass}__visible-text`}>{this.visibleText}</span>
+      <UDExButton
+        id="toggleButton"
+        class={`${rootClass}__toggle-button`}
+        design={UDExButtonDesign.Tertiary}
+        size={UDExButtonSize.Small}
+        onClick={this.onToggleClick}>
+        {this.buttonLabel}
+      </UDExButton>
+    </p>
+  );
+}

package/src/generated/themes/AccordionItem.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapShell_BorderColor, var(--udexColorGrey3));--udex-accordion-item-border-width: 1px;--udex-accordion-item-background-color: transparent;--udex-accordion-item-hover-background-color: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{display:flex;align-items:center;cursor:pointer;border:none;background:var(--udex-accordion-item-background-color);width:100%;font-family:inherit;color:var(--udex-accordion-item-headline-color);font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover{background-color:var(--udex-accordion-item-hover-background-color)}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}.udex-accordion-item__icon{height:var(--udex-button-icon-m-size, 16px);width:var(--udex-button-icon-m-size, 16px);color:var(--udex-accordion-item-icon-color)}.udex-accordion-item__icon-wrapper{min-width:var(--udex-accordion-item-icon-width);height:var(--udex-accordion-item-icon-height);display:inline-flex;align-items:center;justify-content:center}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;text-align:left;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
+export default `:host{--udex-accordion-item-icon-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-color: var(--sapTitleColor, var(--udexCoreHeadingDark));--udex-accordion-item-headline-hover-color: var(--udexColorBlue8, #0057D2);--udex-accordion-item-headline-font-size: var(--sapFontHeader5Size, var(--udexTypographyHeadingMediumXXXSFontSize, 18px));--udex-accordion-item-headline-large-font-size: var(--sapFontHeader4Size, var(--udexTypographyHeadingMediumXXSFontSize, 20px));--udex-accordion-item-title-font-weight: var(--udexTypographyFontWeightMedium, 500);--udex-accordion-item-border-color: var(--sapShell_BorderColor, var(--udexColorGrey3));--udex-accordion-item-border-width: 1px;--udex-accordion-item-background-color: transparent;--udex-accordion-item-hover-background-color: var(--udexColorNeutralWhite0, #FFFFFF00);--udex-accordion-item-header-padding: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-icon-width: 16px;--udex-accordion-item-icon-height: 16px;--udex-accordion-item-label-icon-width: 24px;--udex-accordion-item-label-icon-height: 24px;--udex-accordion-item-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px);--udex-accordion-item-with-icon-content-margin: var(--udexSpacer20, 20px) var(--udexSpacer16, 16px) var(--udexSpacer20, 20px) calc(var(--udexSpacer16, 16px) + var(--udex-accordion-item-label-icon-width, 24px) + var(--udexSpacer12, 12px));--udex-accordion-item-content-max-height: 1000px;font-family:var(--sapFontFamily, sans-serif);font-size:var(--sapProgress_FontSize, 16px)}:host{display:block}[udex-divider]{--udex-divider-padding: 0;--udex-divider-color: var(--udex-accordion-item-border-color)}.udex-accordion-item{list-style-type:none}.udex-accordion-item__header{display:flex;align-items:center;cursor:pointer;border:none;background:var(--udex-accordion-item-background-color);width:100%;font-family:inherit;color:var(--udex-accordion-item-headline-color);font-size:var(--udex-accordion-item-headline-font-size);gap:var(--udexSpacer12, 12px);padding:var(--udex-accordion-item-header-padding);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-accordion-item__header--large{font-size:var(--udex-accordion-item-headline-large-font-size)}.udex-accordion-item__header:hover{color:var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover~[udex-divider]{--udex-divider-color: var(--udex-accordion-item-headline-hover-color)}.udex-accordion-item__header:hover{background-color:var(--udex-accordion-item-hover-background-color)}:host([desktop]) .udex-accordion-item__header:focus,.udex-accordion-item__header:focus-visible{outline:2px solid var(--udexColorBlue10, #002A86);border-radius:var(--udexRadiusM, 8px)}.udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(90deg)}:host([expanded]) .udex-accordion-item__icon:not(.udex-accordion-item__label-icon){transform:rotate(-90deg)}.udex-accordion-item__icon{height:var(--udex-button-icon-m-size, 16px);width:var(--udex-button-icon-m-size, 16px);color:var(--udex-accordion-item-icon-color)}.udex-accordion-item__icon-wrapper{min-width:var(--udex-accordion-item-icon-width);height:var(--udex-accordion-item-icon-height);display:inline-flex;align-items:center;justify-content:center}.udex-accordion-item__label-icon-wrapper{min-width:var(--udex-accordion-item-label-icon-width);height:var(--udex-accordion-item-label-icon-height)}.udex-accordion-item__icon-wrapper:not(.udex-accordion-item__label-icon-wrapper){margin-inline-start:auto}.udex-accordion-item__title{font-weight:var(--udex-accordion-item-title-font-weight);align-items:center;display:flex;text-align:start;min-height:18px}.udex-accordion-item__content{max-height:0;overflow:hidden;transition:max-height .2s ease-in}.udex-accordion-item__content-inner{padding:var(--udex-accordion-item-content-margin)}.udex-accordion-item--with-title .udex-accordion-item__content-inner{padding:var(--udex-accordion-item-with-icon-content-margin)}:host([expanded]) .udex-accordion-item__content{max-height:var(--udex-accordion-item-content-max-height)}.udex-accordion-item__badge{display:inline-flex;margin-inline-start:var(--udexSpacer8)}
 `

package/src/generated/themes/CountrySelector.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-popover-min-width: 0px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-max-width: 100%;--udex-country-selector-text-offset-left: 50px;--udex-country-selector-text-offset-right: 36px}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}:host([displayonly])::part(textfield-input),:host([readonly])::part(textfield-input),:host([disabled])::part(textfield-input){cursor:default}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label){transform:translate(var(--udex-country-selector-text-offset-right))}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label):dir(rtl){transform:translate(calc(var(--udex-country-selector-text-offset-right)* -1))}:host([displayonly])::part(textfield-control-btn),.hidden-text{display:none}.udex-country-selector__text{width:100%}:host([hide-flag-images])::part(textfield-input),.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}:host([hide-flag-images]) [udex-text-field]::part(textfield-input){padding-inline-start:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);width:100%}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}[udex-text-field][aria-expanded=true]::part(label){line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 55%,var(--sapField_Background) 45%)}[udex-text-field]::part(label){background:linear-gradient(transparent 55%,var(--sapField_Background) 45%);padding:0 var(--udexSpacer4, 4px);max-width:calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)}[udex-text-field][active]::part(label){padding:6px var(--udexSpacer4, 4px) 0}.udex-country-selector-item__image,.udex-country-selector__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}[udex-list-item]::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}[udex-text-field][readonly]::part(label){background:var(--sapField_ReadOnly_Background)}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}[udex-text-field]{--udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left)}[udex-text-field]:dir(rtl){--udex-input-padding: 0 var(--udex-country-selector-text-offset-left) 0 var(--udex-country-selector-text-offset-right)}[udex-text-field]::part(textfield-input){cursor:pointer}[udex-dropdown]{--udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width)}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}@media (width < 640px){[udex-dropdown]{--udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width)}}
+export default `:host{--udex-country-selector-flag-width: 30px;--udex-country-selector-flag-height: 20px;--udex-country-selector-popover-min-width: 0px;--udex-country-selector-input-disabled-opacity: var(--sapContent_DisabledOpacity, .4);--udex-country-selector-max-width: 100%;--udex-country-selector-text-offset-left: 50px;--udex-country-selector-text-offset-right: 36px}:host(:not([disabled]):not([displayonly]):not([readonly])) .udex-country-selector__trigger{cursor:pointer}:host([displayonly])::part(textfield-input),:host([readonly])::part(textfield-input),:host([disabled])::part(textfield-input){cursor:default}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label){transform:translate(var(--udex-country-selector-text-offset-right))}:host(:not([hide-flag-images])) [udex-text-field][aria-expanded=false]:not([active])[value=""]::part(label):dir(rtl){transform:translate(calc(var(--udex-country-selector-text-offset-right)* -1))}:host([displayonly])::part(textfield-control-btn),.hidden-text{display:none}.udex-country-selector__text{width:100%}:host([hide-flag-images])::part(textfield-input),.udex-country-selector__dropdown--hide-flag [udex-list-item]::part(item){padding-left:var(--udexSpacer12);padding-right:var(--udexSpacer12)}:host([hide-flag-images]) [udex-text-field]::part(textfield-input){padding-inline-start:var(--udexSpacer12)}.udex-country-selector__dropdown--hide-flag .udex-country-selector__trigger:after{left:var(--udexSpacer12);right:var(--udexSpacer32)}.udex-country-selector__trigger{display:flex;align-items:center;position:relative;max-width:var(--udex-country-selector-max-width);width:100%}.udex-country-selector__trigger--disabled{opacity:var(--udex-country-selector-input-disabled-opacity)}.udex-list::part(content){padding:0}.udex-country-selector__trigger:after{content:attr(value);position:absolute;left:calc(24px + var(--udex-country-selector-flag-width));right:40px;font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;pointer-events:none}:dir(rtl) .udex-country-selector__trigger:after{right:calc(24px + var(--udex-country-selector-flag-width));left:40px}.udex-text-field__input{inset-inline-start:var(--udexSpacer12)}[udex-text-field][aria-expanded=true]::part(label){line-height:18px;transform:translateY(-110%);padding:0 4px;font-size:12px;background:linear-gradient(transparent 60%,var(--sapField_Background) 60%)}[udex-text-field]::part(label){max-width:calc(100% - var(--udex-country-selector-text-offset-left) - var(--udex-country-selector-text-offset-right) - 15px)}[udex-text-field][active]::part(label){padding:6px var(--udexSpacer4, 4px) 0}.udex-country-selector-item__image,.udex-country-selector__image{background-color:var(--udexColorGrey4, #A9B4BE);background-image:url(https://cdn.udex.services.sap.com/dds/design-tokens/assets/country_flag_iso3166.webp);background-repeat:no-repeat;background-position:1000px 0;position:absolute;top:0;transform:translateY(50%);z-index:1;width:var(--udex-country-selector-flag-width);height:var(--udex-country-selector-flag-height);inset-inline-start:var(--udexSpacer12);inset-inline-end:30px;pointer-events:none}[udex-list-item]::part(item){position:relative;padding-inline-start:calc(24px + var(--udex-country-selector-flag-width));padding-inline-end:var(--udexSpacer12, 12px)}[udex-dropdown]{--udex-dropdown-pane-max-width: 100%}[udex-text-field]{--udex-input-padding: 0 var(--udex-country-selector-text-offset-right) 0 var(--udex-country-selector-text-offset-left)}[udex-text-field]:dir(rtl){--udex-input-padding: 0 var(--udex-country-selector-text-offset-left) 0 var(--udex-country-selector-text-offset-right)}[udex-text-field]::part(textfield-input){cursor:pointer}[udex-dropdown]{--udex-dropdown-pane-min-width: var(--udex-country-selector-popover-min-width)}.hidden{position:absolute;width:0px;height:0px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}@media (width < 640px){[udex-dropdown]{--udex-dropdown-pane-min-width-xs: var(--udex-country-selector-popover-min-width)}}
 `

package/src/generated/themes/Link.css.ts

@@ -5,5 +5,5 @@ import defaultTheme from "./sap_horizon/parameters-bundle.css.js";
 
 registerThemePropertiesLoader("@" + "ui5" + "/" + "webcomponents-theming", "sap_horizon", async () => defaultThemeBase);
 registerThemePropertiesLoader("@" + "s" + "a" + "p" + "u" + "d" + "e" + "x" + "/" + "w" + "e" + "b" + "-" + "c" + "o" + "m" + "p" + "o" + "n" + "e" + "n" + "t" + "s", "sap_horizon", async () => defaultTheme);
-export default `:host{--udex-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 16px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: 16px;--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:20px}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{display:inline-flex;align-items:center;overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px)}.ui5-link-end-icon{margin-inline-start:-20px;padding-inline-start:var(--udexSpacer4, 4px)}
+export default `:host{--udex-link-text-decoration: underline;--udex-link-hover-text-decoration: underline;--udex-link-focused-hover-text-decoration: underline;--udex-link-focus-text-decoration: underline;--udex-link-focus-outline-offset: var(--udexLinkOutlineOffset, 0px);--udex-link-focus-border-radius: var(--udexLinkOutlineRadius, 2px);--udex-link-emphasized-text-decoration: none;--udex-link-icon-height: 16px;--udex-link-line-height: var(--udexTypographyBodyLineHeight, 1.5);--udex-link-color: var(--udexColorBlue8);--udex-link-hover-color: var(--udexColorBlue10);--udex-link-active-color: var(--udexColorBlue11);--udex-link-icon-width: 16px;--udex-link-white-space: break-spaces;--udex-link-subtle-color: var(--udexColorGrey8, #354A5F);--udex-link-subtle-hover-color: var(--udexColorGrey11, #12171C);--udex-link-subtle-active-color: var(--udexColorBlue9, #0040B0);--udex-link-subtle-visited-color: var(--udexColorGrey8, #354A5F);--udex-link-focus-background-color: transparent;--udex-link-focus-color: inherit;white-space:normal}:host([desktop]:hover:not(:active):focus-within),:host([design="Subtle"][desktop]:hover:not(:active):focus-within),:host([desktop]:focus-within),:host(:focus-visible),:host(:hover){color:var(--udex-link-hover-color)}:host(:hover){text-decoration:none}:host(:active){color:var(--udex-link-active-color)}:host,:host(:visited){color:var(--udex-link-color)}:host([end-icon]) .ui5-link-text{white-space:var(--udex-link-white-space);margin-inline-end:var(--udexSpacer20);vertical-align:middle}:host([design="Emphasized"]){font-weight:var(--udexTypographyFontWeightBold)}:host([design="Subtle"]){color:var(--udex-link-subtle-color)}:host([design="Subtle"][focused]),:host([design="Subtle"]:hover:not(:active)){color:var(--udex-link-subtle-hover-color)}:host([design="Subtle"]:active){color:var(--udex-link-subtle-active-color)}:host([design="Subtle"]:visited){color:var(--udex-link-subtle-visited-color)}:host([design="Subtle"]) .ui5-link-root:hover{text-decoration:var(--udex-link-hover-text-decoration)}.ui5-link-root{display:inline-block;overflow:visible;line-height:var(--udex-link-line-height)}[ui5-link][disabled] .linkIcon{opacity:inherit}.ui5-link-root slot{text-decoration:var(--udex-link-text-decoration);display:inline}.ui5-link-root:hover slot{text-decoration:var(--udex-link-hover-text-decoration)}:host(:not([desktop])) .ui5-link-root:focus-visible,:host([design="Emphasized"][desktop]:focus-within),:host([design="Emphasized"][desktop]:hover:not(:active):focus-within),:host([design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active),:host([desktop][design="Emphasized"]:active:hover),:host([design="Emphasized"]) slot,:host([design="Emphasized"]:hover) slot,:host([design="Emphasized"][desktop]:hover) slot,:host([end-icon]) slot,:host([icon]) slot{text-decoration:var(--udex-link-emphasized-text-decoration)}:host(:hover) slot{text-decoration:var(--udex-link-hover-text-decoration)}[ui5-icon]{width:var(--udex-link-icon-width);height:var(--udex-link-icon-height)}:host([desktop]:hover:active),:host([desktop]:active){text-decoration:var(--udex-link-focus-text-decoration)}:host .ui5-link-root{outline-offset:var(--udex-link-focus-outline-offset)}:host([design="Subtle"][desktop]) .ui5-link-root:focus-within,:host([desktop]) .ui5-link-root:focus-within,:host .ui5-link-root:focus-visible{outline:var(--sapContent_FocusColor, #002A86) var(--sapContent_FocusStyle, "solid") var(--sapContent_FocusWidth, .125rem);border-radius:var(--udex-link-focus-border-radius)}.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{background-color:var(--udex-link-focus-background-color)}[ui5-link],.ui5-link-icon,.ui5-link-root:active .ui5-link-icon,.ui5-link-root:focus-visible,:host([desktop]) .ui5-link-root:focus-within,:host([design="Subtle"]) .ui5-link-root:focus-visible,:host([design="Subtle"][desktop]) .ui5-link-root:focus-within{color:var(--udex-link-focus-color)}.ui5-link-icon{margin-inline-end:0;padding-inline-end:var(--udexSpacer4, 4px);vertical-align:middle;float:none}.ui5-link-end-icon{margin-inline-start:calc(var(--udexSpacer20)* -1);padding-inline-start:var(--udexSpacer4, 4px);vertical-align:middle}
 `