@sapudex/web-components 2.42.0 → 2.43.0

package/src/SelectBox.ts

@@ -34,6 +34,7 @@ import SelectBoxTemplate from "./SelectBoxTemplate.js";
 import SearchableListBaseTemplate from "./SearchableListBaseTemplate.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
 import type { UDExSelectBaseEvents } from "./SelectBase.js";
+import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 
 // Styles
 import TextFieldCss from "./generated/themes/TextField.css.js";
@@ -248,12 +249,15 @@ class UDExSelectBox extends UDExSelectBase {
     this.fireEventDropdownClose();
   }
 
-  handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
+  async handleRemoveTag(e: CustomEvent | null, tag?: UI5Element) {
     tag = tag ?? (e?.detail.tag as UI5Element);
     const tagId: string = tag.getAttribute("data-id")!;
-    this.tokenizer.deleteToken(tag as Token, true);
+    this.tokenizer.deleteToken(tag as Token);
     this.handleDropdownItemPress(tagId);
     this.fireDecoratorEventRemove(tagId);
+    await renderFinished();
+    this._focused = true;
+    this._search.focus();
   }
 
   handleRemoveTruncatableTag() {
@@ -265,7 +269,15 @@ class UDExSelectBox extends UDExSelectBase {
 
   handleTagClick(e: CustomEvent) {
     const tag = e.detail.tag as UDExTag;
-    this.toggleTruncatedPopover(tag);
+
+    if (!tag.isTruncatable) {
+      this._showTagsDropdownContent = false;
+      tag.selected = false;
+    }
+
+    if (tag.isTruncatable && !this._open) {
+      this.toggleTruncatedPopover(tag);
+    }
   }
 
   handleUnselectTruncatableTag() {
@@ -384,17 +396,10 @@ class UDExSelectBox extends UDExSelectBase {
   }
 
   toggleTruncatedPopover(tag: UDExTag) {
-    if (!tag.isTruncatable) {
-      this._showTagsDropdownContent = false;
-      tag.selected = false;
-    }
-
-    if (tag.isTruncatable && !this._open) {
-      this._truncatableTag = tag;
-      this._truncatableTag.selected = true;
-      this._showTagsDropdownContent = true;
-      this.openDropdown();
-    }
+    this._truncatableTag = tag;
+    this._truncatableTag.selected = true;
+    this._showTagsDropdownContent = true;
+    this.openDropdown();
   }
 
   configureTokenizer() {

package/src/SelectBoxItem.ts

@@ -6,6 +6,8 @@ import property from "@ui5/webcomponents-base/decorators/property.js";
 import { UDExAdditionalTextState } from "./types/List.js";
 import UDExButton from "./Button.js";
 import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
+import type UDExStatusBadgeValueState from "./types/StatusBadgeValueState.js";
+import UDExAvatar, { UDExAvatarShape, UDExAvatarSize } from "./Avatar.js";
 
 /**
  * @class
@@ -29,10 +31,18 @@ import type { DefaultSlot } from "@ui5/webcomponents-base/dist/UI5Element.js";
 @customElement({
   tag: "udex-select-box-item",
   renderer: litRender,
-  dependencies: [UDExButton],
+  dependencies: [UDExButton, UDExAvatar],
 })
 
 class UDExSelectBoxItem extends UDExListItemBase {
+  /**
+   * Defines the name of the UI5 Icon displayed for each item when type is Icon.
+   *
+   * @public
+   */
+  @property({ type: String })
+    itemIcon?: string;
+
   /**
    * Defines the additionalText, displayed at the end of the list item.
    *
@@ -50,6 +60,65 @@ class UDExSelectBoxItem extends UDExListItemBase {
   @property()
     additionalTextState: `${UDExAdditionalTextState}` = UDExAdditionalTextState.None;
 
+  /**
+   * Defines the image, displayed at the start of the item.
+   *
+   * @public
+   */
+  @property({ type: Boolean })
+    flag?: boolean;
+
+  /**
+   * Defines the position for flag image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    flagPosition?: string;
+
+  /**
+   * Allows control over the image source.
+   *
+   * @public
+   */
+  @property({ type: String })
+    image?: string;
+
+  /**
+   * Allows control over the alternative text of the image.
+   *
+   * @public
+   */
+  @property({ type: String })
+    imageAlt?: string;
+
+  /**
+   * Defines the image badge state of the component.
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    imageBadgeState?: `${UDExStatusBadgeValueState}`;
+
+  /**
+   * Defines the shape of the image.
+   *
+   * @default "Circle"
+   * @public
+   */
+  @property()
+    imageShape: `${UDExAvatarShape}` = UDExAvatarShape.Circle;
+
+  /**
+   * Allows control over the size of the image.
+   *
+   * @default "S"
+   * @public
+   */
+  @property()
+    imageSize: `${UDExAvatarSize}` = UDExAvatarSize.S;
+
   /**
    * Slot for first icon.
    *

package/src/Tag.ts

@@ -265,6 +265,14 @@ class UDExTag extends UI5Element {
     }
   }
 
+  _onIconMouseDown(e: MouseEvent): void {
+    const target = e.currentTarget as HTMLElement;
+
+    if (target === this.shadowRoot?.querySelector("[ui5-icon]")) {
+      this.toBeDeleted = true;
+    }
+  }
+
   _handleResize() {
     if (this.isTruncatable) {
       this.title = this.text;

package/src/TagTemplate.tsx

@@ -76,6 +76,7 @@ function tagIcon(this: UDExTag, rootClass: string, iconType: string, isIconClick
       <UI5Icon
         class={`${rootClass}__icon ${rootClass}__icon--${iconType}`}
         name={this.icon}
+        onMouseDown={this._onIconMouseDown}
         {...(isIconClickable ? { onClick: this.iconClickHandler } : {})}>
       </UI5Icon>
     </>

package/src/generated/templates/ListGroupHeaderTemplate.lit.ts

@@ -8,20 +8,20 @@ import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 function block0 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div part="item" class="udex-list__group" role="group" aria-labelledby="group-heading">${ this.collapsible ? block1.call(this, context, tags, suffix) : block11.call(this, context, tags, suffix) }</div> `;}
 function block1 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-list" name="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block2.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }<div id="${ifDefined(this.ariaControlsId)}" role="region" class="udex-list__group-list__content"><div role="listbox" aria-label="group"><slot></slot></div></div></div>`;}
 function block2 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block3.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }`;}
-function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></header>` : html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></header>`;}
+function block3 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></header>` : html`<header role="button" id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap " tabindex="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block4.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></header>`;}
 function block4 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ">${ifDefined(this.supportingText)}</span>`;}
 function block5 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="group-heading" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}" accessible-role="button" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" collapsible=${ifDefined(this.collapsible)} ?collapsed=${this.collapsed} ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" @accordion-icon-click="${this.handleCollapseIconClick}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="group-heading" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}" accessible-role="button" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" collapsible=${ifDefined(this.collapsible)} ?collapsed=${this.collapsed} ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" @accordion-icon-click="${this.handleCollapseIconClick}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></udex-list-item>`;}
-function block6 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></div>` : html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></div>`;}
+function block6 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><${scopeTag("udex-button", tags, suffix)} size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></${scopeTag("udex-button", tags, suffix)}></div></div>` : html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item" id="${ifDefined(this._id)}_group-content__focusable" role="button" tabindex="0" @keydown="${this.handleKeyDown}" _tab-index="${ifDefined(this._effectiveTabIndex)}" aria-expanded="${ifDefined(this.expanded)}" aria-controls="${ifDefined(this.ariaControlsId)}">${ this.typeNumber ? block7.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block8.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block9.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block10.call(this, context, tags, suffix) : undefined }</div><div class="udex-list__group-heading__icon-wrapper"><udex-button size="Small" design="Tertiary" class="udex-list__group-heading__icon" @click="${this.handleCollapseIconClick}" tabindex="-1" accessible-name="${ifDefined(this.expandButtonAccessibleName)}" mode="Interactive" icon="slim-arrow-right"></udex-button></div></div>`;}
 function block7 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block8 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
 function block9 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}
 function block10 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text ${ifDefined(this.sizeClass)}">${ifDefined(this.supportingText)}</span>`;}
 function block11 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div role="listbox" class="udex-list__group-list" name="group" aria-label="group" @ui5-item-press="${ifDefined(this.getHandleGroupItemsClick)}">${ this.modeMultiSelectOrRadioGroup ? block12.call(this, context, tags, suffix) : block16.call(this, context, tags, suffix) }<slot></slot></div>`;}
 function block12 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.isNonActiveHeader ? block13.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }`;}
-function block13 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div></header>`;}
+function block13 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<header id="group-heading" class="udex-list__inactive-header udex-list__group-header-wrap"><div class="udex-list__inactive-header-content"><span class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block14.call(this, context, tags, suffix) : undefined }</div></header>`;}
 function block14 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__supporting-text">${ifDefined(this.supportingText)}</span>`;}
 function block15 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-list-item", tags, suffix)} id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></${scopeTag("udex-list-item", tags, suffix)}>` : html`<udex-list-item id="group-heading" _additional-class-name="${ifDefined(this._additionalClassName)}" ?selected="${this.selected}" _tab-index="${ifDefined(this._effectiveTabIndex)}" ?indeterminate="${this.indeterminate}" ?_filtered="${ifDefined(this._filtered)}" part="group-item" role="none" class="${ifDefined(this.className)}" mode="${ifDefined(this.mode)}" ?controlled="${this.controlled}" supporting-text="${ifDefined(this.supportingText)}" @click="${this.handleHeaderPress}" @keydown="${this.handleKeyDownPress}" type="${ifDefined(this.type)}" label="${ifDefined(this.label)}" _icon="${ifDefined(this._icon)}" size="${ifDefined(this.size)}"></udex-list-item>`;}
-function block16 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item">${ this.typeNumber ? block17.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block18.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block19.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${ifDefined(this.label)}</span>${ this.supportingText ? block20.call(this, context, tags, suffix) : undefined }</div></div>`;}
+function block16 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-list__group-content udex-list__group-header-wrap ${ifDefined(this.sizeClass)}" part="group-item">${ this.typeNumber ? block17.call(this, context, tags, suffix) : undefined }${ this.typeCircle ? block18.call(this, context, tags, suffix) : undefined }${ this.typeIcon ? block19.call(this, context, tags, suffix) : undefined }<div class="udex-list__header"><span id="group-heading" class="udex-list__header-title">${unsafeHTML(this.label)}</span>${ this.supportingText ? block20.call(this, context, tags, suffix) : undefined }</div></div>`;}
 function block17 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__number">${ifDefined(this.numberOfItem)}.</span>`;}
 function block18 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-list__circle">&#x2022;</span>`;}
 function block19 (this: ListGroupHeader, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-list__icon" name="${ifDefined(this._icon)}" accessible-role="presentation" aria-hidden="true" part="icon"></ui5-icon>`;}

package/src/generated/templates/MastheadCountrySelectorTemplate.lit.ts

@@ -5,7 +5,7 @@ import type UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import type MastheadCountrySelector from "../../MastheadCountrySelector.js";
 import type { ClassMapValue } from "@ui5/webcomponents-base/dist/types.js";
 	
-function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector" @keydown="${this.handleKeyDown}">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div>`;}
+function block0 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-country-selector">${ this._isActiveRegionOpen ? block1.call(this, context, tags, suffix) : block5.call(this, context, tags, suffix) }</div>`;}
 function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }${ !this.hideSearch ? block3.call(this, context, tags, suffix) : undefined }<div class="udex-masthead-country-selector__list-container"><div class="udex-masthead-country-selector__list-wrap" @scroll=${this.handleCountryListShadowVisible}><ul class="udex-masthead-country-selector__list udex-masthead-country-selector__list_countries" role="menu">${ repeat(this._activeCountries, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block4.call(this, context, tags, suffix, item, index)) }</ul></div></div>`;}
 function block2 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__region-back-item" accessible-role="button" _accessible-Name="${ifDefined(this.backToRegionListAccessibleName)}" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></${scopeTag("udex-masthead-menu-item", tags, suffix)}>` : html`<udex-masthead-menu-item class="udex-masthead-country-selector__region-back-item" accessible-role="button" _accessible-Name="${ifDefined(this.backToRegionListAccessibleName)}" @click="${this.backToRegions}" label="${ifDefined(this._activeRegion?.title)}" type="Button" part="menu-item" is-back icon-start></udex-masthead-menu-item>`;}
 function block3 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("udex-search", tags, suffix)} class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></${scopeTag("udex-search", tags, suffix)}><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>` : html`<udex-search class="udex-masthead-country-selector__search" @ui5-handle-value-search="${ifDefined(this.handleSearch)}" @ui5-handle-value-reset="${ifDefined(this.handleSearchReset)}" @ui5-submit-search-value="${ifDefined(this.handleSearch)}" language-voice="${ifDefined(this.languageVoice)}" label="${ifDefined(this.searchLabel)}" mode="${ifDefined(this.homeSearchMode)}" ?show-voice-button="${this.showSearchVoiceButton}" non-interactive-submit-button show-submit-button></udex-search><span aria-live="polite" aria-atomic="true" class="hidden">${ifDefined(this._accSearchResultInfo)}</span>`;}

package/src/generated/themes/List.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, "host");
-export default `.udex-list{font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);list-style-type:none;padding:0;margin:0}.udex-list__hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}.udex-list__scroll-container{overflow:auto;height:100%}.udex-list__header-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE)}::slotted(udex-list-group-header:not(:last-child)){margin-bottom:var(--udexSpacer16, 16px);display:block}:host([mode="SingleContent"])::part(header){padding:var(--udexSpacer8, 8px) 0}:host([mode="RadioGroup"])::part(header),:host([mode="MultiSelect"])::part(header){padding:var(--udexSpacer8, 8px) var(--udexSpacer20, 20px)}
+export default `.udex-list{font-family:var(--sapFontFamily, sans-serif);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);list-style-type:none;padding:0;margin:0}.udex-list__hidden-text{position:absolute;clip:rect(1px,1px,1px,1px);user-select:none;left:-1000px;top:-1000px;pointer-events:none;font-size:0}.udex-list__scroll-container{overflow:auto;height:100%}.udex-list__header-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400);padding:var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE)}::slotted(udex-list-group-header:not(:last-child)){display:block}:host([mode="SingleContent"])::part(header){padding:var(--udexSpacer8, 8px) 0}:host([mode="RadioGroup"])::part(header),:host([mode="MultiSelect"])::part(header){padding:var(--udexSpacer8, 8px) var(--udexSpacer20, 20px)}
 `

package/src/generated/themes/ListGroupHeader.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, "host");
-export default `:host{--udex-list-item-group-header-padding-vertical: var(--udexSpacer12, 12px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer16, 16px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-group-header-outline-border-color: var(--udexColorBlue10, #002A86)}.udex-list__header{font-weight:var(--udexTypographyFontWeightMedium, 500);display:flex;flex-direction:column}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--udexSpacer2, 2px)}.udex-list__group-list{list-style-type:none;padding:0;margin:0}.udex-list__group ::slotted([udex-list-item]){padding-inline-start:calc(var(--udexSpacer24) + var(--udexSpacer16));--udex-list-item-padding-inline-start: 0}.udex-list__header,.udex-list__group-header{font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group-list.udex-list__sticky{padding-top:59px}.udex-list__group-content{display:flex;border-top:1px solid var(--udex-list-item-group-header-border-color);padding:var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal);align-items:center;position:relative}.udex-list__group-content.udex-list_group-content__focusable:focus,.udex-list__group-content.udex-list_group-content__focusable:focus-visible{outline:none}.udex-list__group-content.udex-list_group-content__focusable:focus:before,.udex-list__group-content.udex-list_group-content__focusable:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-group-header-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}:host([mode="MultiSelect"]) .udex-list__group-header{border-bottom:1px solid var(--udex-list-item-group-header-border-color)}.udex-list__group_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group_large.udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__inactive-header{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE);display:flex;justify-content:space-between;align-items:center}.udex-list__inactive-header-content{display:flex;flex-direction:column}.udex-list__group-heading__icon{transform:rotate(-90deg);height:18px;width:18px;color:inherit;cursor:pointer;--udex-button-icon-s-size: 18px}.udex-list__group-heading__icon-wrapper{height:24px;width:24px;display:flex;justify-content:center;align-items:center;margin-inline-start:auto}:host(:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(-90deg)}:host([collapsible]) .udex-list__group-list__content,:host([collapsible])+.udex-list__group-list__content{max-height:var(--udex-list-content-max-height);overflow:hidden;transition:max-height .2s ease-in}:host([collapsible]) [udex-list-item][collapsed]+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__inactive-header+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__group-content+.udex-list__group-list__content,:host([collapsible][collapsed])+.udex-list__group-list__content,.udex-list__group-header[collapsible][collapsed]+.udex-list__group-list__content{max-height:0}:host([collapsible][mode="MultiSelect"]) header,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap{position:relative}:host([collapsible][mode="MultiSelect"]) header:focus,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus{outline:none}:host([collapsible][mode="MultiSelect"]) header:focus:before,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px)}
+export default `:host{--udex-list-item-group-header-padding-vertical: var(--udexSpacer12, 12px);--udex-list-item-group-header-padding-horizontal: var(--udexSpacer16, 16px);--udex-list-item-group-header-supporting-text-color: var(--sapContent_LabelColor, #223548);--udex-list-item-group-header-border-color: var(--sapList_BorderColor, #A9B4BE);--udex-list-item-group-header-outline-border-color: var(--udexColorBlue10, #002A86)}.udex-list__header{display:flex;flex-direction:column;width:100%}.udex-list__supporting-text{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 21px);font-weight:var(--udexTypographyFontWeightRegular, 400);color:var(--udex-list-item-group-header-supporting-text-color);padding-top:var(--udexSpacer2, 2px)}.udex-list__group-list{list-style-type:none;padding:0;margin:0}.udex-list__group ::slotted([udex-list-item]){padding-inline-start:calc(var(--udexSpacer24) + var(--udexSpacer16));--udex-list-item-padding-inline-start: 0}.udex-list__header,.udex-list__group-header{font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyHeadingRegularXXXSFontSize, 18px);line-height:var(--udexTypographyHeadingLineHeight, 1.1)}.udex-list__group-list.udex-list__sticky{padding-top:59px}.udex-list__group-content{display:flex;border-top:1px solid var(--udex-list-item-group-header-border-color);padding:var(--udex-list-item-group-header-padding-vertical) var(--udex-list-item-group-header-padding-horizontal);align-items:center;position:relative}:host([mode="MultiSelect"][_no-border]) .udex-list__group-header,:host([_no-border]) .udex-list__group-content{border-top:none}.udex-list__group-content.udex-list_group-content__focusable:focus,.udex-list__group-content.udex-list_group-content__focusable:focus-visible{outline:none}.udex-list__group-content.udex-list_group-content__focusable:focus:before,.udex-list__group-content.udex-list_group-content__focusable:focus-visible:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udex-list-item-group-header-outline-border-color);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px);pointer-events:none}.udex-list__number{margin-inline-end:var(--udexSpacer8, 8px)}.udex-list__circle{display:block;min-width:20px;height:22px;position:relative}:host([mode="MultiSelect"]) .udex-list__group-header{border-top:1px solid var(--udex-list-item-group-header-border-color)}.udex-list__group_large{font-size:var(--udexTypographyBodyLFontSize, 20px);line-height:var(--udexTypographyHeadingLineHeight, 22px);font-weight:var(--udexTypographyFontWeightMedium, 500)}.udex-list__group_large.udex-list__supporting-text{font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightRegular, 400)}.udex-list__icon{margin-inline-end:var(--udexSpacer8, 8px);padding-top:2px;min-width:18px;height:18px}.udex-list__inactive-header{font-family:var(--sapFontFamily, sans-serif);font-size:var(--udexTypographyBodySFontSize, 16px);line-height:var(--udexTypographyBodyLineHeight, 24px);font-weight:var(--udexTypographyFontWeightMedium, 500);padding:var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);border-bottom:1px solid var(--sapList_BorderColor, #A9B4BE);display:flex;justify-content:space-between;align-items:center}.udex-list__inactive-header-content{display:flex;flex-direction:column}.udex-list__group-heading__icon{transform:rotate(-90deg);height:18px;width:18px;color:inherit;cursor:pointer;--udex-button-icon-s-size: 18px}:host(:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]) .udex-list__group-heading__icon{transform:rotate(90deg)}:host([collapsed]:dir(rtl)) .udex-list__group-heading__icon{transform:rotate(-90deg)}:host([collapsible]) .udex-list__group-list__content,:host([collapsible])+.udex-list__group-list__content{max-height:var(--udex-list-content-max-height);overflow:hidden;transition:max-height .2s ease-in}:host([collapsible]) [udex-list-item][collapsed]+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__inactive-header+.udex-list__group-list__content,:host([collapsible][collapsed]) .udex-list__group-content+.udex-list__group-list__content,:host([collapsible][collapsed])+.udex-list__group-list__content,.udex-list__group-header[collapsible][collapsed]+.udex-list__group-list__content{max-height:0}:host([collapsible][mode="MultiSelect"]) header,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap{position:relative}:host([collapsible][mode="MultiSelect"]) header:focus,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus{outline:none}:host([collapsible][mode="MultiSelect"]) header:focus:before,:host([collapsible][mode="RadioGroup"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleContent"]) .udex-list__group-header-wrap:focus:before,:host([collapsible][mode="SingleSelect"]) .udex-list__group-header-wrap:focus:before{content:"";position:absolute;inset:0;outline:var(--udexRadiusXXS) solid var(--udexColorBlue10, #002A86);outline-offset:-4px;border-radius:var(--udexRadiusM, 8px)}
 `

package/src/generated/themes/SearchableList.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, "host");
-export default `:host([prevent-page-scroll]) [ui5-popover]::part(content){overscroll-behavior:contain}[udex-list-item]::part(checkbox){pointer-events:none}.udex-searchable-list__header{display:block;margin-top:var(--udexSpacer16, 16px)}.udex-searchable-list__header:only-child,.udex-searchable-list__header.udex-searchable-list__header_no-margin{margin-top:0}.udex-busy-indicator{padding-block:var(--udexSpacer32, 32px);margin:0 auto;display:block}.udex-filter-menu__search+.udex-busy-indicator{padding-top:0}.hidden{position:absolute;width:0;height:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}.udex-no-result{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--sapContent_TitleColor, #000000);padding:var(--udexSpacer16, 16px) var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);text-align:center}[ui5-illustrated-message]{padding:0 0 var(--udexSpacer4, 4px);min-height:0}
+export default `:host([prevent-page-scroll]) [ui5-popover]::part(content){overscroll-behavior:contain}[udex-list-item]::part(checkbox){pointer-events:none}.udex-searchable-list__header{display:block}.udex-searchable-list__header:only-child,.udex-searchable-list__header.udex-searchable-list__header_no-margin{margin-top:0}.udex-busy-indicator{padding-block:var(--udexSpacer32, 32px);margin:0 auto;display:block}.udex-filter-menu__search+.udex-busy-indicator{padding-top:0}.hidden{position:absolute;width:0;height:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;padding:0}.udex-no-result{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyBodyXSFontSize, 14px);line-height:var(--udexTypographyBodyLineHeight, 1.5);color:var(--sapContent_TitleColor, #000000);padding:var(--udexSpacer16, 16px) var(--udexSpacer12, 12px) var(--udexSpacer16, 16px);text-align:center}[ui5-illustrated-message]{padding:0 0 var(--udexSpacer4, 4px);min-height:0}
 `

package/src/i18n/messagebundle_sr.properties

@@ -3,3 +3,131 @@ OVERVIEW=Pregled
 LOGOUT=Izloguj se
 MAIN_LINKS=Glavne veze
 BACK_TO_TOP=Nazad na vrh
+COUNT=Broj
+OF=od
+PAGINATION_PAGE=Stranica
+SELECTED=Odabrano
+UNSELECTED=Odabir poništen
+INDETERMINATE=Neodređeno
+EDIT_BUTTON=Uredi
+DELETE_BUTTON=Izbriši
+BACK_TO_REGION_LIST=Nazad na listu regija
+BUTTON_ARIA_TYPE_PRIMARY=Primarno
+BUTTON_ARIA_TYPE_SECONDARY=Sekundarno
+BUTTON_ARIA_TYPE_TERTIARY=Tercijarno
+BUTTON_ARIA_TYPE_WARNING=Upozorenje
+BUTTON_ARIA_TYPE_POSITIVE=Pozitivno
+BUTTON_ARIA_TYPE_NEGATIVE=Negativno
+BUTTON_ARIA_EMPHASIZED=Naglašeno
+BUTTON_ARIA_DEFAULT=Standardno
+BUTTON_ARIA_TRANSPARENT=Transparentno
+BUTTON_ARIA_ATTENTION=Pažnja
+DATEPICKER_DATE_DESCRIPTION=Unos datuma
+TOGGLED=Uključeno/isključeno
+FIRST_PAGE=Prva stranica
+LAST_PAGE=Poslednja stranica
+PREVIOUS_PAGE=Prethodna stranica
+NEXT_PAGE=Sledeća stranica
+CURRENT_PAGE=Trenutna stranica
+ACTIVATE_PAGE=Aktiviraj broj stranice
+SUGGESTED_TEXT=preporučena traženja
+ACCESSIBLE_NAME_SEARCH_ICON=Traži
+TOOLTIP_VOICE_BUTTON=Glas
+TOOLTIP_SUBMIT_BUTTON=Pošalji
+LISTENING=Slušanje
+AVAILABLE_VALUES=Dostupne vrednosti
+RECOMMENDED_TEXT=Preporučene stranice
+EXPAND_ALL=Proširi sve
+COLLAPSE_ALL=Sažmi sve
+MORE=Više
+ATTENTION_BADGE=Bedž za pažnju
+READ_MORE=Pročitajte više
+READ_LESS=Pročitajte manje
+SHOW_MORE=Prikaži više
+SHOW_LESS=Pokaži manje
+RATING_INDICATOR_TEXT=Pokazatelj ocene
+RATING_INDICATOR_TOOLTIP_TEXT=Ocena
+RATING_INDICATOR_ARIA_DESCRIPTION=Obavezno
+TOTAL=Ukupno
+RATING_COUNT_TITLE=Ocena
+ARIA_LABEL_LIST_MULTISELECTABLE=Sadrži stavke koje se mogu odabrati više puta
+ARIA_LABEL_LIST_SELECTABLE=Sadrži stavke koje se mogu odabrati
+SHOW_RESULTS=Pokaži rezultate
+RESET=Ponovi
+MESSAGE_STRIP_CLOSE_BUTTON=Dugme za zatvaranje trake sa porukama
+MESSAGE_STRIP_INFORMATION=Traka sa informacijama
+MESSAGE_STRIP_SUCCESS=Pozitivna traka
+MESSAGE_STRIP_WARNING=Traka sa upozorenjima
+MESSAGE_STRIP_ERROR=Negativna traka
+MESSAGE_STRIP_ACTION=Traka s radnjama
+REVIEWS=recenzije
+STARS=zvezdice
+SELECT_OPTIONS=Odaberi opcije
+SELECT_ALL=Odaberi sve
+TEXTAREA_CHARACTERS_LEFT=Preostalo {0} znakova
+VALUE_STATE_TYPE_ERROR=Greška statusa polja
+VALUE_STATE_TYPE_WARNING=Upozorenje o statusu polja
+VALUE_STATE_TYPE_SUCCESS=Uspešan status polja
+VALUE_STATE_TYPE_STANDARD=Standardni status polja
+CAROUSEL_PREVIOUS_ARROW_TEXT=Prethodna stranica
+CAROUSEL_NEXT_ARROW_TEXT=Sledeća stranica
+NO_MATCHES_FOUND=Podudaranja nisu nađena.
+BREADCRUMBS_ARIA_LABEL=Put usmeravanja
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Više
+STEPINPUT_INC_ICON_TITLE=Povećaj količinu za
+STEPINPUT_DEC_ICON_TITLE=Smanji količinu za
+TABLE_NO_DATA_FOUND=Podaci nisu nađeni
+VALUE_STATE_ERROR=Nevažeći unos
+VALUE_STATE_WARNING=Dato upozorenje
+VALUE_STATE_INFORMATION=Informativni unos
+VALUE_STATE_SUCCESS=Unos uspešno validiran
+READ_ONLY=Samo za čitanje
+SWITCH_ACCOUNT=Zameni nalog
+BACK=Nazad
+OTHER_IDENTITIES=Drugi identiteti
+ADD_OR_REMOVE_ACCOUNT=Dodajte ili uklonite nalog
+COUNTRY_SELECT=Odaberi zemlju
+CART=Korpa
+COUNTRY_SELECTOR=Selektor zemlje
+PHONE_NUMBER=Broj telefona
+CONTACT_US=Kontaktirajte s nama
+EMAIL=E-pošta
+CHAT_WITH_US=Ćaskajte s nama
+QUICK_LINKS=Brze veze
+TRENDING=Popularno
+ABOUT_SAP=Informacije o kompaniji SAP
+SITE_INFORMATION=Informacije o lokaciji
+SEE_COMPLETE_LIST=Pogledajte našu
+LOCAL_COUNTRY_NAMES=kompletnu lokalnu listu
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Otvori ikonu kalendara
+LIST_ITEM_EDIT_ICON=Uredi unos stavke liste
+LIST_ITEM_DELETE_ICON=Izbriši unos stavke liste
+BACK_BUTTON_LABEL=Dugme Nazad
+STATUS_BADGE_TEXT=Bedž statusa
+STATUS_BADGE_EDIT_TITLE=Kliknite da uredite profil
+STATUS_BADGE_INFORMATION_TITLE=Kliknite da otvorite informacije o profilu
+STATUS_BADGE_WARNING_TITLE=Upozorenje, potencijalni rizik vezan za profil
+STATUS_BADGE_ERROR_TITLE=Postoji greška u profilu
+STATUS_BADGE_SUCCESS_TITLE=Uspešno potvrđen profil
+PROFILE=Profil
+OPENS_IN_A_NEW_WINDOW=otvara se u novom prozoru
+TEXT_FIELD=Polje teksta
+UPLOADING_FILE_STATUS_TEXT=Prenos na server
+TERMINATED_FILE_STATUS_TEXT=Prekinuto
+REMOVE_FILE_TEXT=Ukloni fajl
+UPLOAD_BUTTON_LABEL=Prenesi fajl na server
+COMPLETE_LIST_OF=Potpuna lista za
+CALL_US_TODAY=Pozovite nas danas!
+SEARCH=Pretraga
+RESULT_RETURNED=prikazani rezultati.
+SOCIAL_MEDIA_BUTTON=Dugme za društvene medije
+PROMO_TILE=Podekran promocije
+PROMO_TILE_ICON=Ikona podekrana promocije
+PLAY_BUTTON_ACCESSIBLE_NAME=Dugme Pokreni za pokretanje rotacije logotipa korisnika
+PAUSE_BUTTON_ACCESSIBLE_NAME=Dugme Pauziraj za zaustavljanje rotacije logotipa korisnika
+LOCATION=Lokacija
+TOAST_CLOSE_ACCESSIBLE_NAME=Zatvori
+DISABLED=Deaktivirano
+EXPAND=Proširi
+COLLAPSE=Sažmi

package/src/i18n/messagebundle_sv.properties

@@ -3,3 +3,129 @@ OVERVIEW=Översikt
 LOGOUT=Logga ut
 MAIN_LINKS=Huvudlänkar
 BACK_TO_TOP=Tillbaka till början
+COUNT=Antal
+OF=av
+PAGINATION_PAGE=Sida
+SELECTED=Vald
+UNSELECTED=Ej vald
+INDETERMINATE=Obestämd
+EDIT_BUTTON=Redigera
+DELETE_BUTTON=Radera
+BACK_TO_REGION_LIST=Tillbaka till regionlistan
+BUTTON_ARIA_TYPE_PRIMARY=Primär
+BUTTON_ARIA_TYPE_SECONDARY=Sekundär
+BUTTON_ARIA_TYPE_TERTIARY=Tertiär
+BUTTON_ARIA_TYPE_WARNING=Varning
+BUTTON_ARIA_TYPE_POSITIVE=Positiv
+BUTTON_ARIA_TYPE_NEGATIVE=Negativ
+BUTTON_ARIA_EMPHASIZED=Markerad
+BUTTON_ARIA_DEFAULT=Standard
+BUTTON_ARIA_TRANSPARENT=Transparent
+BUTTON_ARIA_ATTENTION=Observera
+DATEPICKER_DATE_DESCRIPTION=Datuminmatning
+TOGGLED=Växlad
+FIRST_PAGE=Första sidan
+LAST_PAGE=Sista sidan
+PREVIOUS_PAGE=Föregående sida
+NEXT_PAGE=Nästa sida
+CURRENT_PAGE=Aktuell sida
+ACTIVATE_PAGE=Aktivera sidnummer
+SUGGESTED_TEXT=föreslagna sökningar
+ACCESSIBLE_NAME_SEARCH_ICON=Sök
+TOOLTIP_VOICE_BUTTON=Röst
+TOOLTIP_SUBMIT_BUTTON=Skicka
+LISTENING=Lyssnar
+AVAILABLE_VALUES=Tillgängliga värden
+RECOMMENDED_TEXT=Rekommenderade sidor
+EXPAND_ALL=Expandera alla
+COLLAPSE_ALL=Komprimera alla
+MORE=Mer
+ATTENTION_BADGE=Observera-märke
+READ_MORE=Läs mer
+READ_LESS=Läs mindre
+SHOW_MORE=Visa mer
+SHOW_LESS=Visa mindre
+RATING_INDICATOR_TEXT=Bedömningsindikator
+RATING_INDICATOR_TOOLTIP_TEXT=Bedömning
+RATING_INDICATOR_ARIA_DESCRIPTION=Krävs
+TOTAL=Totalt
+RATING_COUNT_TITLE=Bedömning
+ARIA_LABEL_LIST_MULTISELECTABLE=Innehåller flervalselement
+ARIA_LABEL_LIST_SELECTABLE=Innehåller valbara element
+SHOW_RESULTS=Visa resultat
+RESET=Återställ
+MESSAGE_STRIP_CLOSE_BUTTON=Knappen Stäng meddelanderad
+MESSAGE_STRIP_INFORMATION=Informationsfält
+MESSAGE_STRIP_SUCCESS=Positivt fält
+MESSAGE_STRIP_WARNING=Varningsfält
+MESSAGE_STRIP_ERROR=Negativt fält
+MESSAGE_STRIP_ACTION=Åtgärdsfält
+REVIEWS=omdömen
+STARS=stjärnor
+SELECT_OPTIONS=Välj alternativ
+SELECT_ALL=Välj alla
+TEXTAREA_CHARACTERS_LEFT={0} tecken kvar
+VALUE_STATE_TYPE_ERROR=Fältstatus Fel
+VALUE_STATE_TYPE_WARNING=Fältstatus Varning
+VALUE_STATE_TYPE_SUCCESS=Fältstatus OK
+VALUE_STATE_TYPE_STANDARD=Fältstatus Standard
+CAROUSEL_PREVIOUS_ARROW_TEXT=Föregående sida
+CAROUSEL_NEXT_ARROW_TEXT=Nästa sida
+NO_MATCHES_FOUND=Inga matchningar hittades.
+BREADCRUMBS_ARIA_LABEL=Navigeringssökväg
+BREADCRUMBS_OVERFLOW_ARIA_LABEL=Mer
+STEPINPUT_INC_ICON_TITLE=Öka kvantitet med
+STEPINPUT_DEC_ICON_TITLE=Minska kvantitet med
+TABLE_NO_DATA_FOUND=Inga data hittades
+VALUE_STATE_ERROR=Ogiltig uppgift
+VALUE_STATE_WARNING=Varning utfärdad
+VALUE_STATE_INFORMATION=Informativ uppgift
+VALUE_STATE_SUCCESS=Uppgift har validerats
+READ_ONLY=Skrivskyddad
+SWITCH_ACCOUNT=Byt konto
+BACK=Tillbaka
+OTHER_IDENTITIES=Andra identiteter
+ADD_OR_REMOVE_ACCOUNT=Lägg till eller ta bort konto
+COUNTRY_SELECT=Välj land
+CART=Kundvagn
+COUNTRY_SELECTOR=Väljare för land
+PHONE_NUMBER=Telefonnummer
+CONTACT_US=Kontakta oss
+EMAIL=E-post
+CHAT_WITH_US=Chatta med oss
+QUICK_LINKS=Snabblänkar
+TRENDING=Trendar
+ABOUT_SAP=Om SAP
+SITE_INFORMATION=Webbplatsinformation
+AVATAR_TEXT=Avatar
+CALENDAR_ICON=Öppna kalenderikon
+LIST_ITEM_EDIT_ICON=Redigera listposition
+LIST_ITEM_DELETE_ICON=Radera listposition
+BACK_BUTTON_LABEL=Bakåt-knapp
+STATUS_BADGE_TEXT=Statusmärke
+STATUS_BADGE_EDIT_TITLE=Klicka för att redigera profil
+STATUS_BADGE_INFORMATION_TITLE=Klicka för att öppna profilinformation
+STATUS_BADGE_WARNING_TITLE=Varning, det finns en potentiell risk med profilen
+STATUS_BADGE_ERROR_TITLE=Det finns ett fel i profilen
+STATUS_BADGE_SUCCESS_TITLE=Profilen har verifierats
+PROFILE=Profil
+OPENS_IN_A_NEW_WINDOW=öppnas i ett nytt fönster
+TEXT_FIELD=Textfält
+UPLOADING_FILE_STATUS_TEXT=Läser in
+TERMINATED_FILE_STATUS_TEXT=Avbruten
+REMOVE_FILE_TEXT=Ta bort fil
+UPLOAD_BUTTON_LABEL=Läs in fil
+COMPLETE_LIST_OF=Fullständig lista med
+CALL_US_TODAY=Ring oss idag!
+SEARCH=Sök
+RESULT_RETURNED=resultat hittades.
+SOCIAL_MEDIA_BUTTON=Knapp för sociala medier
+PROMO_TILE=Kampanjpanel
+PROMO_TILE_ICON=Ikon för kampanjpanel
+PLAY_BUTTON_ACCESSIBLE_NAME=Startknapp för att starta rotation av kundlogotyper
+PAUSE_BUTTON_ACCESSIBLE_NAME=Pausknapp för att stoppa rotation av kundlogotyper
+LOCATION=Plats
+TOAST_CLOSE_ACCESSIBLE_NAME=Stäng
+DISABLED=Inaktiverad
+EXPAND=Expandera
+COLLAPSE=Komprimera

package/src/themes/List.css

@@ -28,13 +28,12 @@
   font-family:  var(--sapFontFamily, sans-serif);
   font-size: var(--udexTypographyBodySFontSize, 16px);
   line-height: var(--udexTypographyBodyLineHeight, 24px);
-  font-weight: var(--udexTypographyFontWeightMedium, 500);
+  font-weight: var(--udexTypographyFontWeightRegular, 400);
   padding: var(--udexSpacer8, 8px) var(--udexSpacer12, 12px);
   border-bottom: 1px solid var(--sapList_BorderColor, #A9B4BE);
 }
 
 ::slotted(udex-list-group-header:not(:last-child)){
-  margin-bottom: var(--udexSpacer16, 16px);
   display: block;
 }
 

package/src/themes/ListGroupHeader.css

@@ -7,9 +7,9 @@
 }
 
 .udex-list__header {
-  font-weight: var(--udexTypographyFontWeightMedium, 500);
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .udex-list__supporting-text {
@@ -34,7 +34,9 @@
 
 .udex-list__header,
 .udex-list__group-header {
-  font-weight:  var(--udexTypographyFontWeightMedium, 500);
+  font-weight:  var(--udexTypographyFontWeightRegular, 400);
+  font-size: var(--udexTypographyHeadingRegularXXXSFontSize, 18px);
+  line-height: var(--udexTypographyHeadingLineHeight, 1.1);
 }
 
 .udex-list__group-list.udex-list__sticky {
@@ -49,6 +51,11 @@
   position: relative;
 }
 
+:host([mode="MultiSelect"][_no-border]) .udex-list__group-header,
+:host([_no-border]) .udex-list__group-content {
+  border-top: none;
+}
+
 .udex-list__group-content.udex-list_group-content__focusable:focus,
 .udex-list__group-content.udex-list_group-content__focusable:focus-visible {
   outline: none;
@@ -77,7 +84,7 @@
 }
 
 :host([mode="MultiSelect"]) .udex-list__group-header {
-  border-bottom: 1px solid var(--udex-list-item-group-header-border-color);
+  border-top: 1px solid var(--udex-list-item-group-header-border-color);
 }
 
 .udex-list__group_large {
@@ -125,15 +132,6 @@
   --udex-button-icon-s-size: 18px;
 }
 
-.udex-list__group-heading__icon-wrapper {
-  height: 24px;
-  width: 24px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-inline-start: auto;
-}
-
 :host(:dir(rtl)) .udex-list__group-heading__icon {
   transform: rotate(90deg);
 }