@sapudex/web-components 2.9.0 → 2.10.0

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.9.0",
+  "version": "2.10.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -3899,17 +3899,17 @@
             {
               "name": "body-overflow",
               "description": "Defines overflow style for the body after clicking mobile menu opener button",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "show-search-by-default",
               "description": "Defines the visibility of the Search by default.",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "sticky-position",
               "description": "Defines sticky position for component",
-              "value": { "type": "boolean", "default": "\"\"" }
+              "value": { "type": "boolean", "default": "false" }
             },
             {
               "name": "co-brand-image",
@@ -3966,6 +3966,11 @@
               "description": "Defines an accessible name for close icon for the search bar",
               "value": { "type": "string | undefined", "default": "undefined" }
             },
+            {
+              "name": "mobile-close-button-accessible-name",
+              "description": "Defines an accessible name for the close mobile menu button",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
             {
               "name": "homepage-aria-label",
               "description": "Defines an aria label for the homepage link",
@@ -4132,6 +4137,11 @@
                 "description": "Defines an accessible name for close icon for the search bar",
                 "value": { "type": "string | undefined" }
               },
+              {
+                "name": "mobile-close-button-accessible-name",
+                "description": "Defines an accessible name for the close mobile menu button",
+                "value": { "type": "string | undefined" }
+              },
               {
                 "name": "homepage-aria-label",
                 "description": "Defines an aria label for the homepage link",
@@ -6644,6 +6654,81 @@
           "events": [],
           "js": { "properties": [], "events": [] }
         },
+        {
+          "name": "udex-social-media-button",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-social-media-button</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/SocialMediaButton.js\";</code>\n---\n\n\n### **Events:**\n - **click** - Triggered when the user clicks on an item.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "type",
+              "description": "Defines the type of Social Media Button.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>facebook</code> - the button with Facebook icon</li>\n<li><code>instagram</code> - the button with Instagram icon</li>\n<li><code>linkedin</code> - the button with LinkedIn icon</li>\n<li><code>youtube</code> - the button with YouTube icon</li>\n<li><code>x</code> - the button with X icon</li>\n<li><code>mail</code> - the button with Instagram mail icon (default)</li>\n</ul>",
+              "value": {
+                "type": "\"facebook\" | \"instagram\" | \"linkedin\" | \"email\" | \"youtube\" | \"x\""
+              }
+            },
+            {
+              "name": "url",
+              "description": "Defines the URL address for Social Media platform profile.",
+              "value": { "type": "string | undefined", "default": "\"\"" }
+            },
+            {
+              "name": "target",
+              "description": "Define the target of the Social Media Button link\n<b>Note:</b> Standard hyperlink behavior is supported.",
+              "value": {
+                "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                "default": "\"_blank\""
+              }
+            },
+            {
+              "name": "accessible-name",
+              "description": "Defines the accessible ARIA name of the component.",
+              "value": {
+                "type": "string | undefined",
+                "default": "\"Social Media Button\""
+              }
+            }
+          ],
+          "events": [
+            {
+              "name": "click",
+              "description": "Triggered when the user clicks on an item."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "type",
+                "description": "Defines the type of Social Media Button.\n<br><br>\nAvailable options are:\n<ul>\n<li><code>facebook</code> - the button with Facebook icon</li>\n<li><code>instagram</code> - the button with Instagram icon</li>\n<li><code>linkedin</code> - the button with LinkedIn icon</li>\n<li><code>youtube</code> - the button with YouTube icon</li>\n<li><code>x</code> - the button with X icon</li>\n<li><code>mail</code> - the button with Instagram mail icon (default)</li>\n</ul>",
+                "value": {
+                  "type": "\"facebook\" | \"instagram\" | \"linkedin\" | \"email\" | \"youtube\" | \"x\""
+                }
+              },
+              {
+                "name": "url",
+                "description": "Defines the URL address for Social Media platform profile.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "target",
+                "description": "Define the target of the Social Media Button link\n<b>Note:</b> Standard hyperlink behavior is supported.",
+                "value": {
+                  "type": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\""
+                }
+              },
+              {
+                "name": "accessible-name",
+                "description": "Defines the accessible ARIA name of the component.",
+                "value": { "type": "string | undefined" }
+              }
+            ],
+            "events": [
+              {
+                "name": "click",
+                "description": "Triggered when the user clicks on an item."
+              }
+            ]
+          }
+        },
         {
           "name": "udex-status-badge",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-status-badge</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@sapudex/web-components/dist/StatusBadge.js\";</code>\n---\n",
@@ -7506,6 +7591,11 @@
               "name": "interactive",
               "description": "Defines the interactive state of the row.",
               "value": { "type": "boolean | undefined", "default": "false" }
+            },
+            {
+              "name": "highlighted",
+              "description": "Defines highlighted the row.",
+              "value": { "type": "boolean | undefined", "default": "false" }
             }
           ],
           "slots": [
@@ -7521,6 +7611,11 @@
                 "name": "interactive",
                 "description": "Defines the interactive state of the row.",
                 "value": { "type": "boolean | undefined" }
+              },
+              {
+                "name": "highlighted",
+                "description": "Defines highlighted the row.",
+                "value": { "type": "boolean | undefined" }
               }
             ],
             "events": []
@@ -7778,7 +7873,7 @@
         },
         {
           "name": "udex-textarea",
-          "description": "\n---\n",
+          "description": "\n---\n\n\n### **Events:**\n - **change** - Fires when the value of the textarea changes and the textarea loses focus.",
           "doc-url": "",
           "attributes": [
             {
@@ -7852,7 +7947,12 @@
               "value": { "type": "string", "default": "\"\"" }
             }
           ],
-          "events": [],
+          "events": [
+            {
+              "name": "change",
+              "description": "Fires when the value of the textarea changes and the textarea loses focus."
+            }
+          ],
           "js": {
             "properties": [
               {
@@ -7926,7 +8026,12 @@
                 "value": { "type": "string" }
               }
             ],
-            "events": []
+            "events": [
+              {
+                "name": "change",
+                "description": "Fires when the value of the textarea changes and the textarea loses focus."
+              }
+            ]
           }
         },
         {

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@sapudex/web-components",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -41,6 +41,7 @@
     "@ui5/webcomponents-base": "2.14.0",
     "@ui5/webcomponents-fiori": "2.14.0",
     "@ui5/webcomponents-icons": "2.14.0",
+    "@ui5/webcomponents-localization": "2.14.0",
     "@ui5/webcomponents-theming": "2.14.0",
     "@vimeo/player": "^2.24.0",
     "video.js": "8.22.0"

package/src/Assets.ts

@@ -1,4 +1,5 @@
 import "@ui5/webcomponents-theming/dist/Assets.js"; // Theming
+import "@ui5/webcomponents-localization/dist/Assets.js";
 
 // own web-components package assets
 import "./generated/json-imports/Themes.js";

package/src/CountrySelector.hbs

@@ -17,13 +17,6 @@
         @keydown="{{handleKeyDownDropdown}}">
         {{searchableList}}
     </udex-dropdown>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
 </div>
 
 {{#*inline "trigger"}}
@@ -45,12 +38,12 @@
             class="udex-country-selector__text"
             value="{{selectedCountryName}}"
             value-state="{{valueState}}"
+            supporting-text="{{supportingText}}"
             direction="left"
             aria-label="{{effectiveAriaLabel}}"
             accessible-name="{{supportingText}}"
             accessible-name-ref="{{accessibleNameRef}}"
             aria-controls="{{ariaControls}}"
-            role="combobox"
             aria-haspopup="true"
             aria-expanded="{{_open}}"
             ?required="{{required}}"
@@ -61,7 +54,8 @@
             @mousedown="{{handleInputMouseDown}}"
             icon="{{triggerIcon}}"
             accessible-icon-name="{{effectiveAriaLabel}}"
-            maxlength="0">
+            maxlength="0"
+            _is-combobox-role>
         </udex-text-field>
     </div>
 {{/inline}}

package/src/CountrySelector.ts

@@ -348,7 +348,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
   }
 
   handleCloseSearch() {
-    this.getInput()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
+    this.getTextField()?.shadowRoot!.querySelector<Button>("[udex-control-button]")?.focus();
   }
 
   handleItemPress(e: CustomEvent) {
@@ -373,6 +373,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
 
   handleTriggerClick() {
     if (!this.isOpenerDisabled) {
+      this._dropdown.opener = this.getTextField()._inputHolder;
       this._dropdown.open = !this._dropdown.open;
     }
   }
@@ -456,8 +457,10 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.getCountryLabel(this.selectedCountry?.countryName, this.selectedCountry?.localName) || "None";
   }
 
-  get triggerIcon(): string {
-    return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+  get triggerIcon(): string | undefined {
+    if (!this.displayonly) {
+      return this._open ? "navigation-up-arrow" : "navigation-down-arrow";
+    }
   }
 
   get countrySelectorClasses(): string {
@@ -504,7 +507,7 @@ class UDExCountrySelector extends UDExSearchableListBase {
     return this.shadowRoot!.querySelector<UDExDropdown>("[udex-dropdown]")!;
   }
 
-  getInput(): UDExTextField {
+  getTextField(): UDExTextField {
     return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 

package/src/DatePicker.hbs

@@ -1,28 +1,19 @@
-<div
-    class="udex-date-picker__container">
-    <udex-text-field
-        class="udex-date-picker__input"
-        _aria-has-popup="grid"
-        icon="appointment-2"
-        value="{{value}}"
-        label="{{label}}"
-        accessible-name="{{dateAccessibleName}}"
-        accessible-name-ref="{{accessibleNameRef}}"
-        accessible-icon-name="{{accessibleIconName}}"
-        ?disabled="{{disabled}}"
-        ?required="{{required}}"
-        ?readonly="{{readonly}}"
-        @ui5-click-icon="{{handleInputClick}}"
-        @ui5-change="{{_onInputChange}}"
-        value-state="{{valueState}}">
-    </udex-text-field>
-    {{#if supportingText}}
-        <udex-status-message
-            ?disabled="{{disabled}}"
-            supporting-text="{{supportingText}}"
-            value-state="{{valueState}}">
-        </udex-status-message>
-    {{/if}}
-</div>
+<udex-text-field
+    class="udex-date-picker__input"
+    _aria-has-popup="grid"
+    icon="appointment-2"
+    value="{{value}}"
+    label="{{label}}"
+    accessible-name="{{dateAccessibleName}}"
+    accessible-name-ref="{{accessibleNameRef}}"
+    accessible-icon-name="{{accessibleIconName}}"
+    ?disabled="{{disabled}}"
+    ?required="{{required}}"
+    ?readonly="{{readonly}}"
+    @ui5-click-icon="{{handleInputClick}}"
+    @ui5-change="{{_onInputChange}}"
+    value-state="{{valueState}}"
+    supporting-text="{{supportingText}}">
+</udex-text-field>
 
 {{>include "./DatePickerPopover.hbs"}}

package/src/DatePicker.ts

@@ -225,7 +225,7 @@ class UDExDatePicker extends DateComponentBase {
    * @private
    */
   get _dropdownTrigger(): UDExTextField {
-    return this.shadowRoot!.querySelector<UDExTextField>(".udex-date-picker__input")!;
+    return this.shadowRoot!.querySelector<UDExTextField>("[udex-text-field]")!;
   }
 
   _afterDropdownClose(): void {
@@ -248,7 +248,7 @@ class UDExDatePicker extends DateComponentBase {
   _openRespPopover(): void {
     this._dropdownTrigger.active = true;
     this.responsivePopover = this._getResponsePopover();
-    this.responsivePopover.opener = this._dropdownTrigger;
+    this.responsivePopover.opener = this._dropdownTrigger._inputHolder;
     this.responsivePopover.open = true;
   }
 

package/src/FilterMenu.hbs

@@ -1,39 +1,39 @@
 <div>
     <button
-    id="filterMenuTrigger"
-    @click="{{handleTriggerClick}}"
-    @keydown="{{handleTriggerKeydown}}"
-    aria-label="{{triggerButtonAccessibleName}}"
-    aria-labelledby="{{accessibleNameRef}}"
-    aria-expanded="{{_open}}"
-    aria-haspopup="true"
-    role="{{triggerAccessibleRole}}"
-    aria-controls="{{this._id}}_udex-filter-menu-dropdown"
-    ?disabled="{{disabled}}"
-    class="udex-filter-menu__trigger"
-    tabindex="0">
-    {{#if hasFilterNamePrefix}}
-        <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
-    {{/if}}
-    <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
-        <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
-        {{#if badgeValue}}
-            <udex-badge
-                class="udex-filter-menu__badge"
-                type="Number"
-                design="Info"
-                size="Small">
-                {{badgeValue}}
-            </udex-badge>
+        id="filterMenuTrigger"
+        @click="{{handleTriggerClick}}"
+        @keydown="{{handleTriggerKeydown}}"
+        aria-label="{{triggerButtonAccessibleName}}"
+        aria-labelledby="{{accessibleNameRef}}"
+        aria-expanded="{{_open}}"
+        aria-haspopup="true"
+        role="{{triggerAccessibleRole}}"
+        aria-controls="{{this._id}}_udex-filter-menu-dropdown"
+        ?disabled="{{disabled}}"
+        class="udex-filter-menu__trigger"
+        tabindex="0">
+        {{#if hasFilterNamePrefix}}
+            <span class="udex-filter-menu__trigger-prefix">{{filterNamePrefix}}</span>
         {{/if}}
-        <ui5-icon
-            class="udex-filter-menu__trigger-icon"
-            name="navigation-down-arrow"
-            mode="Decorative"
-            accessible-name="{{_iconAccessibleNameText}}">
-        </ui5-icon>
-    </span>
-</button>
+        <span class="udex-filter-menu__trigger-wrap" ?disabled="{{disabled}}">
+            <span class="udex-filter-menu__trigger-name">{{filterName}}</span>
+            {{#if badgeValue}}
+                <udex-badge
+                    class="udex-filter-menu__badge"
+                    type="Number"
+                    design="Info"
+                    size="Small">
+                    {{badgeValue}}
+                </udex-badge>
+            {{/if}}
+            <ui5-icon
+                class="udex-filter-menu__trigger-icon"
+                name="navigation-down-arrow"
+                mode="Decorative"
+                accessible-name="{{_iconAccessibleNameText}}">
+            </ui5-icon>
+        </span>
+    </button>
     <ui5-popover
         id="{{this._id}}_udex-filter-menu-dropdown"
         hide-arrow
@@ -60,8 +60,6 @@
     </ui5-popover>
 </div>
 
-
-
 {{#*inline "buttons"}}
     {{#unless hideActionBar}}
         <div class="udex-filter-menu__footer" slot="footer" name="footer">
@@ -70,7 +68,6 @@
                     class="udex-filter-menu__result-btn"
                     size="Medium"
                     design="Primary"
-                    ?disabled="{{disabledButtons}}"
                     @keydown="{{handleKeyDownResultBtn}}"
                     @click="{{handleResult}}">
                     {{getResultLabelText}}
@@ -82,7 +79,6 @@
                     size="Medium"
                     design="Tertiary"
                     @keydown="{{handleKeyDownResetBtn}}"
-                    ?disabled="{{disabledButtons}}"
                     @click="{{handleReset}}">
                     {{getResetLabelText}}
                 </udex-button>

package/src/FilterMenu.ts

@@ -37,6 +37,7 @@ import SearchableListBaseTemplate from "./generated/templates/SearchableListBase
 import FilterMenuCss from "./generated/themes/FilterMenu.css.js";
 import SearchableListCss from "./generated/themes/SearchableList.css.js";
 import getEffectiveScrollbarStyle from "./utils/getEffectiveScrollbarStyle.js";
+import type UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 
 type UDExFilterMenuResultClickEventDetail = {
   selectedItems: Array<UDExListItemBase>,
@@ -46,6 +47,12 @@ type UDExFilterMenuResetClickEventDetail = {
   restoredItems: Array<UDExListItemBase>,
 }
 
+type initialItemState = {
+  id: string,
+  selected: boolean,
+  indeterminate?: boolean,
+}
+
 /**
  * @class
  *
@@ -296,10 +303,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   @property({ type: String })
     triggerAccessibleRole: string = "combobox";
 
+  @property({ type: Boolean })
+    _shouldApplyFilter: boolean = false;
+
+  @property({ type: Boolean, noAttribute: true })
+    _requestRender = false;
+
   _trigger!: UDExButton;
   _search!: UDExSearch;
   _popover!: Popover;
   _breakpointSizeXS = 640;
+  _initialState: Array<initialItemState> = [];
 
   onEnterDOM(): void {
     if (isDesktop()) {
@@ -348,6 +362,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleReset(): void {
+    this.onDropdownClose();
     this.fireDecoratorEvent("reset-click", {
       restoredItems: this.selectedItems,
     });
@@ -355,12 +370,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   handleResult(): void {
-    if (!this.disabledButtons) {
-      this._popover.open = false;
-      this.fireDecoratorEvent("result-click", {
-        selectedItems: this.selectedItems,
-      });
-    }
+    this._shouldApplyFilter = true;
+    this.onDropdownClose();
+    this.fireDecoratorEvent("result-click", {
+      selectedItems: this.selectedItems,
+    });
   }
 
   handleKeyDownList(e: KeyboardEvent): void {
@@ -438,6 +452,7 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._setContentHeight();
     }
 
+    this._initialState = this._getInitialState(this.items);
     this.fireDecoratorEvent("before-open");
   }
 
@@ -449,6 +464,44 @@ class UDExFilterMenu extends UDExSearchableListBase {
     this.fireDecoratorEvent("after-open");
   }
 
+  _getInitialState(items: Array<UDExListItemBase | UDExListGroupHeaderBase>): Array<initialItemState> {
+    return items.flatMap(item => {
+      if (item.isGroup) {
+        const groupState: initialItemState = {
+          id: item._id,
+          selected: item.selected,
+          indeterminate: item.indeterminate,
+        };
+        const subItemsState = (item as UDExListGroupHeaderBase).getItems().map(subItem => ({
+          id: subItem._id,
+          selected: subItem.selected,
+        }));
+        return [groupState, ...subItemsState];
+      }
+      return {
+        id: item._id,
+        selected: item.selected,
+      };
+    });
+  }
+
+  _setInitialListState(): void {
+    this.getSlottedItems(this.items).forEach((item, index) => {
+      const initialState = this._initialState[index];
+      if (item._id === initialState?.id) {
+        item.selected = initialState.selected;
+        if (item.isGroup) {
+          item.indeterminate = initialState.indeterminate;
+        }
+      }
+    });
+  }
+
+  _setInitialState(): void {
+    this._setInitialListState();
+    this._requestRender = true;
+  }
+
   _dropdownBeforeClose(): void {
     this.fireDecoratorEvent("before-close");
   }
@@ -459,6 +512,11 @@ class UDExFilterMenu extends UDExSearchableListBase {
       this._managePopupListeners(UDExPopoverPart.Footer, "removeEventListener");
     }
 
+    if (!this._shouldApplyFilter && this.modeMultiSelect && !this.modeSelectAll) {
+      this._setInitialState();
+    }
+
+    this._shouldApplyFilter = false;
     this._open = false;
     this._trigger.classList.remove("udex-filter-menu__trigger-active");
     this.fireDecoratorEvent("after-close");
@@ -480,10 +538,6 @@ class UDExFilterMenu extends UDExSearchableListBase {
     return this.resetBtnLabel !== undefined && this.resetBtnLabel.length > 0 ? this.resetBtnLabel : UDExFilterMenu.i18nBundle.getText(RESET);
   }
 
-  get disabledButtons(): boolean {
-    return !this.selectedItems.length && !this.selectAll;
-  }
-
   get _iconAccessibleNameText(): string {
     return UDExFilterMenu.i18nBundle.getText(SELECT_OPTIONS);
   }
@@ -501,17 +555,17 @@ class UDExFilterMenu extends UDExSearchableListBase {
   }
 
   get hasFooterButtons(): boolean {
-    return (this.hasResultBtn || this.hasResetBtn) && !this.disabledButtons;
-  }
-
-  get hasResultBtn(): boolean {
-    return !this.hideResultBtn && !this.disabledButtons;
+    return !!this.shadowRoot!.querySelector("[udex-button]");
   }
 
   get hasResetBtn(): boolean {
     return !this.hideResetBtn;
   }
 
+  get modeSelectAll(): boolean {
+    return !!this.querySelector<UDExFilterMenuSelectAll>("[udex-filter-menu-select-all]");
+  }
+
   getTriggerButton(): UDExButton {
     return this.shadowRoot!.querySelector<UDExButton>("#filterMenuTrigger")!;
   }

package/src/Footer.hbs

@@ -103,22 +103,15 @@
     {{#if socialLinksArray.length}}
         <div class="udex-footer__social-container">
           {{#each socialLinksArray}}
-              <a
-                target="{{target}}"
-                href="{{this.url}}"
-                class="udex-footer__social-icon"
+              <udex-social-media-button
+                type="{{this.name}}"
+                url="{{this.url}}"
+                target="{{this.target}}"
+                accessible-name="{{this.accessibleName}}"
                 data-name="{{this.name}}"
                 data-id="{{this.id}}"
-                @click="{{../_onSocialMediaLinkClick}}"
-              >
-                <img
-                  data-name="{{this.name}}"
-                  data-id="{{this.id}}"
-                  alt="{{this.name}} {{../socialIconAccessibleName}}"
-                  src="{{this.iconUrl}}"
-                  loading="lazy"
-                />
-              </a>
+                @ui5-click="{{../_onSocialMediaLinkClick}}"
+                ></udex-social-media-button>
           {{/each}}
         </div>
     {{/if}}