@sapudex/web-components 2.28.0 → 2.29.0

package/dist/generated/themes/Slider.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-28-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}\n`"]}
+{"version":3,"file":"Slider.css.js","sourceRoot":"","sources":["../../../src/generated/themes/Slider.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,yDAAyD,CAAC;AAExG,OAAO,gBAAgB,MAAM,uFAAuF,CAAC;AACrH,OAAO,YAAY,MAAM,wCAAwC,CAAC;AAElE,6BAA6B,CAAC,GAAG,GAAG,KAAK,GAAG,GAAG,GAAG,uBAAuB,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,gBAAgB,CAAC,CAAC;AACxH,6BAA6B,CAAC,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,EAAE,aAAa,EAAE,KAAK,IAAI,EAAE,CAAC,YAAY,CAAC,CAAC;AAChN,eAAe;CACd,CAAA","sourcesContent":["import { registerThemePropertiesLoader } from \"@ui5/webcomponents-base/dist/asset-registries/Themes.js\";\n\nimport defaultThemeBase from \"@ui5/webcomponents-theming/dist/generated/themes/sap_horizon/parameters-bundle.css.js\";\nimport defaultTheme from \"./sap_horizon/parameters-bundle.css.js\";\n\nregisterThemePropertiesLoader(\"@\" + \"ui5\" + \"/\" + \"webcomponents-theming\", \"sap_horizon\", async () => defaultThemeBase);\nregisterThemePropertiesLoader(\"@\" + \"s\" + \"a\" + \"p\" + \"u\" + \"d\" + \"e\" + \"x\" + \"/\" + \"w\" + \"e\" + \"b\" + \"-\" + \"c\" + \"o\" + \"m\" + \"p\" + \"o\" + \"n\" + \"e\" + \"n\" + \"t\" + \"s\", \"sap_horizon\", async () => defaultTheme);\nexport default `:host{--udex-slider-color-track-start-point: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-track-active: var(--sapSlider_Selected_Background, #0070f2);--udex-slider-color-handle-focus-range: var(--sapSlider_Selected_BorderColor, #0070f2);--udex-slider-color-handle-active-background: var(--sapSlider_Active_HandleBackground, #ffffff);--udex-slider-color-handle-default-icon: var(--sapContent_Selected_ForegroundColor, #0040b0);--udex-slider-radius-range-size: var(--udexRadiusM, 8px);--udex-slider-handle-width: 2.75rem;--udex-slider-handle-top: -.875rem;--udex-slider-handle-height: var(--udexSpacer32, 2rem);--udex-slider-start-end-point-left: -.875rem;--udex-slider-start-end-point-right: -.875rem;--udex-slider-progress-after-background: var(--sapContent_MeasureIndicatorColor,#5b738b);--udex-slider-handle-icon-size: var(--udexSpacer20, 1.25rem);--udex-slider-tooltip-bottom: 2.5rem;--udex-slider-tooltip-border: 1px solid var(--sapField_BorderColor, #5B738B);--udex-slider-tooltip-border-radius: var(--udexSpacer4, .25rem);--udex-slider-tooltip-font-size: var(--udexTypographyNavigationRegularMFontSize,14px);--udex-slider-tooltip-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-tooltip-height: var(--udexSpacer32, 2rem);--udex-slider-tooltip-min-width: 2.75rem;--udex-slider-tickmark-in-range-bg: var(--sapSlider_Selected_BorderColor,#0070f2);--udex-slider-tickmark-bg: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-label-color: var(--sapContent_MeasureIndicatorColor, #5b738b);--udex-slider-handle-focus-border: 2px solid var(--sapSlider_Active_HandleBorderColor);--udex-slider-progress-focus-top: -1.18rem;--udex-slider-progress-focus-left:calc(-1.375rem - 5px);--udex-slider-progress-focus-height: 42px;--udex-slider-progress-focus-width:calc(100% + 2.75rem + 10px)}:host{font-family:var(--sapFontFamily);font-weight:var(--udexTypographyFontWeightRegular, 400);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px);line-height:var(--udexTypographyHeadingLineHeight, 1.1);color:var(--sapContent_MeasureIndicatorColor, #5b738b);height:74px}.ui5-slider-progress-container:before{background-color:var(--udex-slider-color-track-start-point)}.ui5-slider-progress{background-color:var(--udex-slider-color-track-active)}.ui5-slider-progress:focus:after{border:2px solid var(--udex-slider-color-handle-focus-range);border-radius:var(--udex-slider-radius-range-size);top:var(--udex-slider-progress-focus-top);height:var(--udex-slider-progress-focus-height);width:var(--udex-slider-progress-focus-width);left:var(--udex-slider-progress-focus-left)}:host([desktop]) .ui5-slider-handle:focus,.ui5-slider-handle:focus-visible{background-color:var(--_ui5-v2-29-0_range_slider_handle_background_focus)}:host .ui5-slider-inner .ui5-slider-labels{top:34px}:host .ui5-slider-inner .ui5-slider-labels li{height:1.375rem;font-family:var(--sapFontFamily);font-size:var(--udexTypographyNavigationRegularMFontSize, 14px)}[slider-icon]{color:var(--udex-slider-color-handle-default-icon)}.ui5-slider-root:focus .ui5-slider-inner .ui5-slider-handle,.ui5-slider-handle:focus{border:var(--udex-slider-handle-focus-border)}.ui5-slider-labels li{color:var(--udex-slider-label-color)}.ui5-slider-tickmarks li{border-inline-start:1px solid var(--udex-slider-tickmark-bg)}.ui5-slider-tickmarks li.ui5-slider-tickmark-in-range{border-inline-start:1px solid var(--udex-slider-tickmark-in-range-bg)}:host(:not([hidden])) .ui5-slider-handle-container .ui5-slider-tooltip{bottom:var(--udex-slider-tooltip-bottom);border:var(--udex-slider-tooltip-border);border-radius:var(--udex-slider-tooltip-border-radius);font-size:var(--udex-slider-tooltip-font-size);color:var(--udex-slider-tooltip-color);height:var(--udex-slider-tooltip-height);min-width:var(--udex-slider-tooltip-min-width)}[slider-icon]{width:var(--udex-slider-handle-icon-size);height:var(--udex-slider-handle-icon-size)}.ui5-slider-progress-container:after{background-color:var(--udex-slider-progress-after-background)}.ui5-slider-progress-container:before{inset-inline-start:var(--udex-slider-start-end-point-left)}.ui5-slider-progress-container:after{inset-inline-end:var(--udex-slider-start-end-point-right)}.ui5-slider-handle-container{margin-inline-start:calc(-1 * var(--udex-slider-handle-width) / 2);top:var(--udex-slider-handle-top)}.ui5-slider-handle{height:var(--udex-slider-handle-height);width:var(--udex-slider-handle-width)}\n`"]}

package/dist/vscode.html-custom-data.json

@@ -2026,6 +2026,16 @@
       "name": "udex-masthead-country-selector",
       "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>masthead-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadCountrySelector.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **region-item-click** - Fires when region item is clicked\n- **country-item-click** - Fires when region item is clicked\n- **country-selector-search** - Fired event when the user typed to search field.",
       "attributes": [
+        {
+          "name": "active-country-code",
+          "description": "Defines active country code of the regions menu",
+          "values": []
+        },
+        {
+          "name": "active-country-url",
+          "description": "Defines active country url of the regions menu",
+          "values": []
+        },
         {
           "name": "region-title",
           "description": "Defines title of the regions menu",
@@ -2465,6 +2475,16 @@
           "name": "hide-close-button",
           "description": "Defines whether the MessageStrip renders close button.",
           "values": []
+        },
+        {
+          "name": "close-icon-accessible-name",
+          "description": "Defines accessible name for close icon",
+          "values": []
+        },
+        {
+          "name": "close-icon-tooltip",
+          "description": "Defines tooltip for close icon",
+          "values": []
         }
       ],
       "references": []
@@ -2676,7 +2696,7 @@
     },
     {
       "name": "udex-promo-tile",
-      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.",
+      "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n\n\n---\n\n\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.\n- **pictogram** - Defines the custom pictogram of the Promo Tile.",
       "attributes": [
         {
           "name": "orientation",
@@ -4107,6 +4127,16 @@
           "name": "selected",
           "description": "Defines if tag is selected",
           "values": []
+        },
+        {
+          "name": "non-selectable",
+          "description": "Toggle on/off nonSelectable property on tag",
+          "values": []
+        },
+        {
+          "name": "non-interactive",
+          "description": "Defined if tag should be nonSelectable and icon should be non-interactive",
+          "values": []
         }
       ],
       "references": []

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@sapudex/web-components",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -4236,6 +4236,16 @@
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>masthead-country-selector</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/MastheadCountrySelector.js\";</code>\n---\n\n\n### **Events:**\n - **region-item-click** - Fires when region item is clicked\n- **country-item-click** - Fires when region item is clicked\n- **country-selector-search** - Fired event when the user typed to search field.",
           "doc-url": "",
           "attributes": [
+            {
+              "name": "active-country-code",
+              "description": "Defines active country code of the regions menu",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "active-country-url",
+              "description": "Defines active country url of the regions menu",
+              "value": { "type": "string", "default": "\"\"" }
+            },
             {
               "name": "region-title",
               "description": "Defines title of the regions menu",
@@ -4283,6 +4293,16 @@
           ],
           "js": {
             "properties": [
+              {
+                "name": "active-country-code",
+                "description": "Defines active country code of the regions menu",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "active-country-url",
+                "description": "Defines active country url of the regions menu",
+                "value": { "type": "string" }
+              },
               {
                 "name": "region-title",
                 "description": "Defines title of the regions menu",
@@ -5435,6 +5455,16 @@
               "name": "hide-close-button",
               "description": "Defines whether the MessageStrip renders close button.",
               "value": { "type": "boolean" }
+            },
+            {
+              "name": "close-icon-accessible-name",
+              "description": "Defines accessible name for close icon",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "close-icon-tooltip",
+              "description": "Defines tooltip for close icon",
+              "value": { "type": "string", "default": "\"\"" }
             }
           ],
           "slots": [
@@ -5462,6 +5492,16 @@
                 "name": "hide-close-button",
                 "description": "Defines whether the MessageStrip renders close button.",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "close-icon-accessible-name",
+                "description": "Defines accessible name for close icon",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "close-icon-tooltip",
+                "description": "Defines tooltip for close icon",
+                "value": { "type": "string" }
               }
             ],
             "events": []
@@ -5896,7 +5936,7 @@
         },
         {
           "name": "udex-promo-tile",
-          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-promo-tile</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/PromoTile.js\";</code>\n---\n\n\n### **Events:**\n - **button-click** - Triggered when the user clicks on the CTA button\n\n### **Slots:**\n - **default** - Defines the text content of the Promo Tile.\n- **pictogram** - Defines the custom pictogram of the Promo Tile.",
           "doc-url": "",
           "attributes": [
             {
@@ -5963,6 +6003,10 @@
             {
               "name": "default",
               "description": "Defines the text content of the Promo Tile."
+            },
+            {
+              "name": "pictogram",
+              "description": "Defines the custom pictogram of the Promo Tile."
             }
           ],
           "events": [
@@ -8714,6 +8758,16 @@
               "name": "selected",
               "description": "Defines if tag is selected",
               "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "non-selectable",
+              "description": "Toggle on/off nonSelectable property on tag",
+              "value": { "type": "boolean", "default": "true" }
+            },
+            {
+              "name": "non-interactive",
+              "description": "Defined if tag should be nonSelectable and icon should be non-interactive",
+              "value": { "type": "boolean", "default": "true" }
             }
           ],
           "events": [
@@ -8783,6 +8837,16 @@
                 "name": "selected",
                 "description": "Defines if tag is selected",
                 "value": { "type": "boolean" }
+              },
+              {
+                "name": "non-selectable",
+                "description": "Toggle on/off nonSelectable property on tag",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "non-interactive",
+                "description": "Defined if tag should be nonSelectable and icon should be non-interactive",
+                "value": { "type": "boolean" }
               }
             ],
             "events": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.28.0",
+  "version": "2.29.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },

package/src/MastheadCountrySelector.hbs

@@ -34,6 +34,7 @@
                               class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries"
                               @click="{{../handleCountryClick}}"
                               _country-code="{{this.countryCode}}"
+                              ?_is-active-country="{{this.active}}"
                               url="{{this.url}}"
                               label="{{this.displayTitle}}"
                               index="{{@index}}"

package/src/MastheadCountrySelector.ts

@@ -32,6 +32,7 @@ export type Country = {
   displayTitle: string,
   countryCode: string,
   url: string,
+  active: boolean,
 };
 
 type UDExMastheadCountrySelectorRegionClickEventDetail = {
@@ -127,6 +128,25 @@ class UDExMastheadCountrySelector extends UI5Element {
     "country-selector-search": UDExMastheadCountrySelectorSearchEventDetail,
     "region-item-click": UDExMastheadCountrySelectorRegionClickEventDetail
   };
+
+  /**
+   * Defines active country code of the regions menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    activeCountryCode !: string;
+
+  /**
+   * Defines active country url of the regions menu
+   *
+   * @default ""
+   * @public
+   */
+  @property({ type: String })
+    activeCountryUrl!: string;
+
   /**
    * Defines title of the regions menu
    *
@@ -279,11 +299,8 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   handleBackKeyboard(e: KeyboardEvent): void {
-    if (isLeft(e) && !this.isRtlDirection) {
-      return this.backToRegions();
-    }
-    if (isRight(e) && this.isRtlDirection) {
-      return this.backToRegions();
+    if ((isLeft(e) && !this.isRtlDirection) || (isRight(e) && this.isRtlDirection)) {
+      this.backToRegions();
     }
   }
 
@@ -562,6 +579,12 @@ class UDExMastheadCountrySelector extends UI5Element {
     this.countryListHolder.classList.remove(`${this._countriesListHolderClassName}_scrollable`);
   }
 
+  isActiveCountry(countryCode: string, url: string): boolean {
+    const matchedURL = this.activeCountryUrl?.toUpperCase() === url.toUpperCase();
+    const matchedCode = this.activeCountryCode?.toUpperCase() === countryCode.toUpperCase();
+    return matchedURL && matchedCode;
+  }
+
   get scrollBottomCountriesList(): number {
     const countriesList = this.countryListHolder;
     return countriesList.scrollHeight - countriesList.scrollTop - countriesList.clientHeight;
@@ -590,7 +613,14 @@ class UDExMastheadCountrySelector extends UI5Element {
   }
 
   get regionsData(): Array<Region> {
-    return this.regions ? JSON.parse(this.regions) as Array<Region> : [];
+    const regions: Array<Region> = this.regions ? JSON.parse(this.regions) as Array<Region> : [];
+    return regions.map(region => ({
+      ...region,
+      countries: region.countries.map(country => ({
+        ...country,
+        active: this.isActiveCountry(country.countryCode, country.url),
+      })),
+    }));
   }
 
   get isRtlDirection(): boolean {

package/src/MastheadItem.hbs

@@ -74,6 +74,7 @@
                 class="udex-masthead-item__image"
                 id="{{this._id}}_image-alt"
                 src="{{image}}"
+                aria-hidden="{{isCountrySelectorBtn}}"
                 alt="{{imageAlt}}"/>
         </div>
         {{#if imageAlt}}

package/src/MessageStrip.ts

@@ -64,6 +64,24 @@ class UDExMessageStrip extends MessageStrip {
   @property({ type: Boolean })
     hideCloseButton!: boolean;
 
+  /**
+   * Defines accessible name for close icon
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    closeIconAccessibleName!: string;
+
+  /**
+   * Defines tooltip for close icon
+   *
+   * @default ""
+   * @public
+   */
+  @property()
+    closeIconTooltip!: string;
+
   /**
    * Defines the content of the component.
    *
@@ -126,7 +144,7 @@ class UDExMessageStrip extends MessageStrip {
   }
 
   get _closeButtonText(): string {
-    return `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
+    return this.closeIconTooltip || `${this.textStatus ?? ""} ${this.getTranslation(MESSAGE_STRIP_CLOSE_BUTTON)}`;
   }
 
   get isNotIconStatusType(): boolean {

package/src/MessageStripTemplate.tsx

@@ -54,6 +54,7 @@ export default function MessageStripTemplate(this: UDExMessageStrip) {
           design={UDExButtonDesign.Tertiary}
           onClick={this._closeClick}
           tooltip={this._closeButtonText}
+          accessibleName={this.closeIconAccessibleName}
           part="close-button"
         />
       )}

package/src/PromoTile.ts

@@ -16,10 +16,10 @@ import type UDExButton from "./Button.js";
 import UDExButtonSize from "./types/ButtonSize.js";
 import UDExButtonDesign from "./types/ButtonDesign.js";
 import { UDExPromoTileColorScheme, UDExPromoTileMode } from "./types/PromoTile.js";
+import translate from "./utils/translate.js";
 
 // Styles
 import PromoTileCss from "./generated/themes/PromoTile.css.js";
-import translate from "./utils/translate.js";
 
 export enum UDExOrientation {
   Vertical = "Vertical",
@@ -72,6 +72,15 @@ class UDExPromoTile extends UI5Element {
   @slot({ type: HTMLElement, "default": true })
     content!: Array<HTMLElement>;
 
+  /**
+   * Defines the custom pictogram of the Promo Tile.
+   *
+   * @slot pictogram
+   * @public
+   */
+  @slot({ type: HTMLElement })
+    pictogram?: Array<HTMLElement>;
+
   /**
    * Defines the orientation of the Promo Tile component.
    *
@@ -199,9 +208,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   getButton(): UDExButton | undefined {
-    return this.shadowRoot!.querySelector<UDExButton>(
-      "[udex-button]",
-    )!;
+    return this.shadowRoot!.querySelector<UDExButton>("[udex-button]")!;
   }
 
   applyColorScheme(): void {
@@ -250,6 +257,11 @@ class UDExPromoTile extends UI5Element {
     return color;
   }
 
+  handleCTAButtonClick(e: Event) {
+    e.preventDefault();
+    this.fireDecoratorEvent("button-click");
+  }
+
   get isMobile(): boolean {
     return BreakpointUtils.isAtMost("S");
   }
@@ -259,7 +271,7 @@ class UDExPromoTile extends UI5Element {
   }
 
   get _showPictogram(): boolean {
-    return !!this.icon || !!this.logoUrl;
+    return !!this.icon || !!this.logoUrl || !!this.pictogram?.length;
   }
 
   get _showLogo(): boolean {
@@ -269,11 +281,6 @@ class UDExPromoTile extends UI5Element {
   get _imageLabel(): string {
     return this.imageLabel || translate(UDExPromoTile, PROMO_TILE_ICON);
   }
-
-  handleCTAButtonClick(e: Event) {
-    e.preventDefault();
-    this.fireDecoratorEvent("button-click");
-  }
 }
 
 UDExPromoTile.define();

package/src/PromoTileTemplate.tsx

@@ -18,22 +18,26 @@ export default function PromoTileTemplate(this: UDExPromoTile) {
           part="image"
           class={{
             "udex-promo-tile__pictogram": true,
-            "udex-promo-tile__pictogram--logo": this.logoUrl
+            "udex-promo-tile__pictogram--logo": this.logoUrl && !this.pictogram?.length
           }}
           title={this._imageLabel}>
-          {this.icon &&
-            <UI5Icon
-              class={`${rootClass}__icon`}
-              name={this.icon?.toLowerCase()}
-              mode={IconMode.Decorative}
-              accessibleName={this._imageLabel}>
-            </UI5Icon>}
-          {this._showLogo &&
-            <img
-              src={this.logoUrl}
-              class={`${rootClass}__icon`}
-              aria-label={this._imageLabel}
-              alt={this._imageLabel} />}
+          <slot slot="pictogram" name="pictogram">
+            {this.icon &&
+              <UI5Icon
+                class={`${rootClass}__icon`}
+                name={this.icon?.toLowerCase()}
+                mode={IconMode.Decorative}
+                accessibleName={this._imageLabel}>
+              </UI5Icon>
+            }
+            {this._showLogo &&
+              <img
+                src={this.logoUrl}
+                class={`${rootClass}__icon`}
+                aria-label={this._imageLabel}
+                alt={this._imageLabel} />
+            }
+          </slot>
         </div>
       }
       <div part="content" class={`${rootClass}__content`}>

package/src/SearchableListBase.ts

@@ -589,7 +589,7 @@ class UDExSearchableListBase extends UI5Element {
 
   get isControlled(): boolean {
     const isGrouping = this.items.some(({ isGroup }) => isGroup);
-    return this.mode === UDExListMode.MultiSelect && isGrouping;
+    return this.modeMultiSelect && isGrouping;
   }
 
   get additionalClassName(): string {

package/src/SelectBase.ts

@@ -194,7 +194,7 @@ class UDExSelectBase extends UDExSearchableListBase {
   }
 
   onInvalidation({ name }: ChangeInfo): void {
-    if (name === "default") {
+    if (name === "default" && this.modeSingleSelect) {
       this.setSelectOption();
     }
   }

package/src/TabNavigation.ts

@@ -336,16 +336,9 @@ class UDExTabNavigation extends UI5Element {
     this.emitClickEvent(selectedTabIndex + 1);
   }
 
-  getTab(el: HTMLElement | null) {
-    while (el) {
-      if (el.getAttribute("role") === "tab") {
-        return el as Tab;
-      }
-
-      el = el.parentElement;
-    }
-
-    return false;
+  getTab(el: HTMLElement | null): Tab | false {
+    const tab = el?.closest<Tab>("button[role=\"tab\"]");
+    return tab || false;
   }
 
   updateSelectedTab(selectedTabIndex: number) {

package/src/Tag.ts

@@ -205,11 +205,19 @@ class UDExTag extends UI5Element {
   /**
   * Toggle on/off nonSelectable property on tag
   * @default true
-  * @private
+  * @public
   */
   @property({ type: Boolean })
     nonSelectable!: boolean;
 
+  /**
+  * Defined if tag should be nonSelectable and icon should be non-interactive
+  * @default true
+  * @public
+  */
+  @property({ type: Boolean })
+    nonInteractive!: boolean;
+
   _handleResizeBound: ResizeObserverCallback;
 
   constructor() {
@@ -276,7 +284,7 @@ class UDExTag extends UI5Element {
   get tagClasses(): string {
     const hasIconClass = this.hasIcon ? "udex-tag--has-icon" : "";
     const readOnlyClass = this.readOnly ? "udex-tag--readonly" : "";
-    const nonSelectableClass = this.nonSelectable && !this.href ? "udex-tag--nonselectable" : "";
+    const nonSelectableClass = this.nonSelectable && !this.href && !this.nonInteractive ? "udex-tag--nonselectable" : "";
     const linkTagClass = this.href ? "udex-tag--link" : "";
     const selectableClass = this.selected ? "udex-tag--selected" : "";
     const designClass = `udex-tag-${this.design?.toLowerCase()}`;

package/src/TagTemplate.tsx

@@ -19,6 +19,10 @@ export default function TagTemplate(this: UDExTag) {
         onClick={this.tagLinkClickHandler}>
         {tagContent.call(this, rootClass)}
       </a>
+    ) : this.nonInteractive ? (
+      <div class={this.tagClasses}>
+        {tagContent.call(this, rootClass, false, false)}
+      </div>
     ) : this.nonSelectable ? (
       <div class={this.tagClasses}>
         {tagContent.call(this, rootClass, false, true)}

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

@@ -8,7 +8,7 @@ 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) : block4.call(this, context, tags, suffix) }</div>`;}
 function block1 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<${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><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) => block3.call(this, context, tags, suffix, item, index)) }</ul></div></div>` : html`<span class="udex-masthead-country-selector__title">${ifDefined(this.countryTitle)}</span>${ !this.isSingleMode ? block2.call(this, context, tags, suffix) : undefined }<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><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) => block3.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" @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" @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, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="none"><udex-masthead-menu-item class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></udex-masthead-menu-item></li>`;}
+function block3 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" ?_is-active-country="${ifDefined(item.active)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="none"><udex-masthead-menu-item class="udex-masthead-country-selector__item udex-masthead-country-selector__item_countries" @click="${this.handleCountryClick}" _country-code="${ifDefined(item.countryCode)}" ?_is-active-country="${ifDefined(item.active)}" url="${ifDefined(item.url)}" label="${ifDefined(item.displayTitle)}" index="${index}" part="menu-item" is-nav-item></udex-masthead-menu-item></li>`;}
 function block4 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-country-selector__title">${ifDefined(this.regionTitle)}</span><ul class="udex-masthead-country-selector__list" role="menu">${ repeat(this.regionsData, (item, index) => (item as typeof item & {_id?: any})._id || index, (item, index: number) => block5.call(this, context, tags, suffix, item, index)) }</ul>`;}
 function block5 (this: MastheadCountrySelector, context: UI5Element, tags: string[], suffix: string | undefined, item: any, index: number) { return suffix ? html`<li role="none"><${scopeTag("udex-masthead-menu-item", tags, suffix)} id="${ifDefined(item._id)}" @click="${this.handleRegionClick}" index="${index}" class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region" aria-has-popup="true" type="Button" part="menu-item" is-nav-item has-border icon-end label="${ifDefined(item.title)}"></${scopeTag("udex-masthead-menu-item", tags, suffix)}></li>` : html`<li role="none"><udex-masthead-menu-item id="${ifDefined(item._id)}" @click="${this.handleRegionClick}" index="${index}" class="udex-masthead-country-selector__item udex-masthead-country-selector__item_region" aria-has-popup="true" type="Button" part="menu-item" is-nav-item has-border icon-end label="${ifDefined(item.title)}"></udex-masthead-menu-item></li>`;}
 

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

@@ -9,7 +9,7 @@ function block0 (this: MastheadItem, context: UI5Element, tags: string[], suffix
 function block1 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<a id="${ifDefined(this._id)}" class="${ifDefined(this.additionalClass)}" tabindex="0" role="${ifDefined(this.accessibleRoleName)}" target="${ifDefined(this.target)}" href="${ifDefined(this.href)}" aria-label="${ifDefined(this.accessibleLabel)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block2.call(this, context, tags, suffix) : block3.call(this, context, tags, suffix) }</a>${ this.isTargetBlank ? block8.call(this, context, tags, suffix) : undefined }`;}
 function block2 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></ui5-icon>`;}
 function block3 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block4.call(this, context, tags, suffix) : block6.call(this, context, tags, suffix) }`;}
-function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block5.call(this, context, tags, suffix) : undefined }`;}
+function block4 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" aria-hidden="${ifDefined(this.isCountrySelectorBtn)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block5.call(this, context, tags, suffix) : undefined }`;}
 function block5 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block6 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block7.call(this, context, tags, suffix) : undefined }</span>`;}
 function block7 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
@@ -18,7 +18,7 @@ function block9 (this: MastheadItem, context: UI5Element, tags: string[], suffix
 function block10 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.selected)}" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @click="${this.handleItemClick}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}">${ this.icon ? block11.call(this, context, tags, suffix) : block12.call(this, context, tags, suffix) }</span>${ this.isDropdownOpened ? block17.call(this, context, tags, suffix) : undefined }`;}
 function block11 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></ui5-icon>`;}
 function block12 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block13.call(this, context, tags, suffix) : block15.call(this, context, tags, suffix) }`;}
-function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block14.call(this, context, tags, suffix) : undefined }`;}
+function block13 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" aria-hidden="${ifDefined(this.isCountrySelectorBtn)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block14.call(this, context, tags, suffix) : undefined }`;}
 function block14 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block15 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block16.call(this, context, tags, suffix) : undefined }</span>`;}
 function block16 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}
@@ -26,7 +26,7 @@ function block17 (this: MastheadItem, context: UI5Element, tags: string[], suffi
 function block18 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<button role="${ifDefined(this.accessibleRoleName)}" id="${ifDefined(this._id)}" class="udex-masthead-item__btn ${ifDefined(this.additionalClass)}" aria-expanded="${ifDefined(this.buttonAriaExpanded)}" aria-controls="${ifDefined(this._id)}_dropdown" aria-describedby="${ifDefined(this.ariaDescribedBy)}" aria-haspopup="${ifDefined(this.hasDropdownSlot)}" aria-label="${ifDefined(this.accessibleLabel)}" @keydown="${this.handleKeyDown}" @mousedown="${this.handleMouseDown}" @mouseup="${this.handleMouseUp}" @click="${this.handleItemClick}">${ this.icon ? block19.call(this, context, tags, suffix) : block20.call(this, context, tags, suffix) }</button>${ this.isDropdownOpened ? block25.call(this, context, tags, suffix) : undefined }`;}
 function block19 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__icon" name="${ifDefined(this.icon)}" show-tooltip="${ifDefined(this.iconAltText)}" accessible-name="${ifDefined(this.iconAltText)}" mode="Decorative"></ui5-icon>`;}
 function block20 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`${ this.image ? block21.call(this, context, tags, suffix) : block23.call(this, context, tags, suffix) }`;}
-function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block22.call(this, context, tags, suffix) : undefined }`;}
+function block21 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<div class="udex-masthead-item__image-wrap"><img class="udex-masthead-item__image" id="${ifDefined(this._id)}_image-alt" src="${ifDefined(this.image)}" aria-hidden="${ifDefined(this.isCountrySelectorBtn)}" alt="${ifDefined(this.imageAlt)}"/></div>${ this.imageAlt ? block22.call(this, context, tags, suffix) : undefined }`;}
 function block22 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span id="image-desc" class="udex-masthead-hidden-text">${ifDefined(this.imageAlt)}</span>`;}
 function block23 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return html`<span class="udex-masthead-item__text"><slot></slot>${ this.hasArrowDown ? block24.call(this, context, tags, suffix) : undefined }</span>`;}
 function block24 (this: MastheadItem, context: UI5Element, tags: string[], suffix: string | undefined) { return suffix ? html`<${scopeTag("ui5-icon", tags, suffix)} class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></${scopeTag("ui5-icon", tags, suffix)}>` : html`<ui5-icon class="udex-masthead-item__dropdown-icon" name="slim-arrow-down" mode="Decorative"></ui5-icon>`;}