@sapudex/web-components 0.192.4 → 0.199.3

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": "0.192.4",
+  "version": "0.199.3",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -421,7 +421,10 @@
             {
               "name": "size",
               "description": "Defines the size of the component.\n<br><br>\n<b>Note:</b> There are three different sizes to choose from.",
-              "value": { "type": "string", "default": "\"Medium\"" }
+              "value": {
+                "type": "\"Small\" | \"Large\" | \"Medium\"",
+                "default": "\"Medium\""
+              }
             },
             {
               "name": "toggled",
@@ -443,7 +446,7 @@
               {
                 "name": "size",
                 "description": "Defines the size of the component.\n<br><br>\n<b>Note:</b> There are three different sizes to choose from.",
-                "value": { "type": "string" }
+                "value": { "type": "\"Small\" | \"Large\" | \"Medium\"" }
               },
               {
                 "name": "toggled",
@@ -2341,7 +2344,7 @@
             {
               "name": "accessible-role",
               "description": "Defines the accessible role of the component.",
-              "value": { "type": "string", "default": "\"list\"" }
+              "value": { "type": "string", "default": "\"listbox\"" }
             },
             {
               "name": "accessible-name",
@@ -7557,6 +7560,190 @@
             "events": []
           }
         },
+        {
+          "name": "udex-upload",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@udex/web-components/dist/Upload.js\";</code>\n---\n\n\n### **Events:**\n - **file-size-exceed** - Triggered when the uploaded file exceeds the maximum allowed size.\n- **file-delete** - Triggered when the user deletes the uploaded item.\n- **file-change** - Triggered when the user uploads the item.\n\n### **Slots:**\n - **default** - Defines the uploaded files.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "upload-title",
+              "description": "Defines the title of the upload.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "error-text",
+              "description": "Defines the error message shown when more than one file is uploaded with multiple set to false.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "required",
+              "description": "Defines if uploader is required.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "multiple",
+              "description": "Defines if uploading multiple files is allowed.",
+              "value": { "type": "boolean" }
+            },
+            {
+              "name": "accept",
+              "description": "Defines the acceptable file formats for uploading.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "max-file-size",
+              "description": "Defines the maximum allowed size of the file for uploading.",
+              "value": { "type": "number", "default": "undefined" }
+            },
+            {
+              "name": "additional-text",
+              "description": "Defines the additional text below the title of the upload.",
+              "value": { "type": "string" }
+            },
+            {
+              "name": "upload-button-text",
+              "description": "Defines the text in the upload button.",
+              "value": { "type": "string" }
+            }
+          ],
+          "slots": [
+            { "name": "default", "description": "Defines the uploaded files." }
+          ],
+          "events": [
+            {
+              "name": "file-size-exceed",
+              "description": "Triggered when the uploaded file exceeds the maximum allowed size."
+            },
+            {
+              "name": "file-delete",
+              "description": "Triggered when the user deletes the uploaded item."
+            },
+            {
+              "name": "file-change",
+              "description": "Triggered when the user uploads the item."
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "upload-title",
+                "description": "Defines the title of the upload.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "error-text",
+                "description": "Defines the error message shown when more than one file is uploaded with multiple set to false.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "required",
+                "description": "Defines if uploader is required.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "multiple",
+                "description": "Defines if uploading multiple files is allowed.",
+                "value": { "type": "boolean" }
+              },
+              {
+                "name": "accept",
+                "description": "Defines the acceptable file formats for uploading.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "max-file-size",
+                "description": "Defines the maximum allowed size of the file for uploading.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "additional-text",
+                "description": "Defines the additional text below the title of the upload.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "upload-button-text",
+                "description": "Defines the text in the upload button.",
+                "value": { "type": "string" }
+              }
+            ],
+            "events": [
+              {
+                "name": "file-size-exceed",
+                "description": "Triggered when the uploaded file exceeds the maximum allowed size."
+              },
+              {
+                "name": "file-delete",
+                "description": "Triggered when the user deletes the uploaded item."
+              },
+              {
+                "name": "file-change",
+                "description": "Triggered when the user uploads the item."
+              }
+            ]
+          }
+        },
+        {
+          "name": "udex-upload-item",
+          "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-upload-item</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@udex/web-components/dist/UploadItem.js\";</code>\n---\n\n\n### **Slots:**\n - **default** - Slot for information about the uploaded file.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "file-name",
+              "description": "Defines the name of the uploaded file.",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "file-link",
+              "description": "Defines the link of the uploaded file.",
+              "value": { "type": "string | undefined", "default": "undefined" }
+            },
+            {
+              "name": "upload-percentage",
+              "description": "Defines the percentage of the upload.",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "upload-state",
+              "description": "Defines the percentage of the upload.",
+              "value": {
+                "type": "\"Error\" | \"Uploading\" | \"Uploaded\"",
+                "default": "0"
+              }
+            }
+          ],
+          "slots": [
+            {
+              "name": "default",
+              "description": "Slot for information about the uploaded file."
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "file-name",
+                "description": "Defines the name of the uploaded file.",
+                "value": { "type": "string" }
+              },
+              {
+                "name": "file-link",
+                "description": "Defines the link of the uploaded file.",
+                "value": { "type": "string | undefined" }
+              },
+              {
+                "name": "upload-percentage",
+                "description": "Defines the percentage of the upload.",
+                "value": { "type": "number" }
+              },
+              {
+                "name": "upload-state",
+                "description": "Defines the percentage of the upload.",
+                "value": { "type": "\"Error\" | \"Uploading\" | \"Uploaded\"" }
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "udex-wizard",
           "description": "<h3 class=\"comment-api-title\">Overview</h3>\n\n\n<h3>Usage</h3>\n\nFor the <code>udex-wizard</code>\n<h3>ES6 Module Import</h3>\n\n<code>import \"@udex/web-components/dist/Wizard.js\";</code>\n---\n",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sapudex/web-components",
-  "version": "0.192.4",
+  "version": "0.199.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
@@ -40,7 +40,7 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "1.24.20",
-    "chromedriver": "134.0.4",
+    "chromedriver": "136.0.0",
     "cross-env": "^7.0.3",
     "typescript": "^4.9.4",
     "wdio-chromedriver-service": "^8.1.1",

package/src/Button.ts

@@ -10,6 +10,7 @@ import {
 
 // Styles
 import ButtonCss from "./generated/themes/Button.css";
+import UDExButtonSize from "./types/ButtonSize.js";
 
 export enum UDExButtonDesign {
   Primary = "Primary",
@@ -47,8 +48,9 @@ class UDExButton extends Button {
    * @default "Medium"
    * @public
    */
-  @property({ type: String, defaultValue: "Medium" })
-    size!: string;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
+
   /**
    * Defines if button is in toggled state
    *
@@ -57,6 +59,7 @@ class UDExButton extends Button {
    */
   @property({ type: Boolean })
     toggled!: boolean;
+
   /**
    * Defines the component design.
    * @default "Primary"

package/src/ControlButton.ts

@@ -5,12 +5,7 @@ import Button from "@ui5/webcomponents/dist/Button.js";
 // Styles
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import ControlButtonCss from "./generated/themes/ControlButton.css.js";
-
-export enum ControlButtonSize {
-  Small = "Small",
-  Medium = "Medium",
-  Large = "Large",
-}
+import UDExButtonSize from "./types/ButtonSize.js";
 
 /**
  * @class
@@ -34,6 +29,7 @@ export enum ControlButtonSize {
   renderer: litRender,
   styles: [Button.styles, ControlButtonCss],
 })
+
 class UDExControlButton extends Button {
   /**
    * Defines the size of the button.
@@ -41,8 +37,8 @@ class UDExControlButton extends Button {
    * @default "Medium"
    * @public
    */
-  @property({ type: ControlButtonSize, defaultValue: ControlButtonSize.Medium })
-    size!: `${ControlButtonSize}`;
+  @property({ type: UDExButtonSize, defaultValue: UDExButtonSize.Medium })
+    size!: `${UDExButtonSize}`;
 
   /**
    * Determines whether the component is displayed as read-only.
@@ -51,6 +47,31 @@ class UDExControlButton extends Button {
    */
   @property({ type: Boolean })
     readonly!: boolean;
+
+  /**
+   * Determines Combobox role for the button.
+   * @default false
+   * @private
+   */
+  @property({ type: Boolean })
+    _isComboboxRole?: boolean;
+
+  async onBeforeRendering() {
+    await super.onBeforeRendering();
+    if (this.readonly) {
+      this.nonInteractive = true;
+    }
+  }
+
+  onAfterRendering() {
+    if (this._isComboboxRole) {
+      this.setComboboxRole();
+    }
+  }
+
+  setComboboxRole(): void {
+    this.shadowRoot?.querySelector(".ui5-button-root")?.setAttribute("role", "combobox");
+  }
 }
 
 UDExControlButton.define();

package/src/CountrySelector.ts

@@ -432,7 +432,7 @@ class CountrySelector extends UDExSearchableListBase {
   }
 
   handleKeyDown(e: KeyboardEvent) {
-    if (this.disabled || this.readonly || this.displayonly) {
+    if (this.isOpenerDisabled) {
       return;
     }
 

package/src/Footer.ts

@@ -19,6 +19,8 @@ import UDExAccordionItem from "./AccordionItem.js";
 import UDExButton from "./Button.js";
 import UDExAccordion from "./Accordion.js";
 import UDExDivider from "./Divider.js";
+import { Target } from "./types/common.js";
+import { BreakpointUtils } from "./utils/Breakpoints.js";
 
 // Template
 import FooterTemplate from "./generated/templates/FooterTemplate.lit.js";
@@ -42,16 +44,8 @@ import {
   ICP_NUMBER,
 } from "./generated/i18n/i18n-defaults.js";
 
-const BreakpointSizeS: number = 979;
 export const chineseICPDefaultLink = "https://beian.miit.gov.cn/";
 
-export enum Target {
-  _blank = "_blank",
-  _parent = "_parent",
-  _self = "_self",
-  _top = "_top",
-}
-
 export type FooterLink = {
   title: string;
   url: string;
@@ -494,7 +488,7 @@ class UDExFooter extends UI5Element {
   }
 
   get isMobile(): boolean {
-    return window.innerWidth <= BreakpointSizeS;
+    return BreakpointUtils.isAtMost("S");
   }
 
   get isChineseLang(): boolean {

package/src/Link.ts

@@ -11,6 +11,11 @@ import LinkTemplate from "./generated/templates/LinkTemplate.lit.js";
 import LinkCss from "./generated/themes/Link.css.js";
 import IconPlacement from "./types/IconPlacement.js";
 
+export type AttributeValuePair = {
+  attribute: string,
+  value: string
+};
+
 /**
  * @class
  *
@@ -56,6 +61,13 @@ class UDExLink extends Link {
     @property({ type: IconPlacement, defaultValue: IconPlacement.End })
       iconPlacement?: `${IconPlacement}`;
 
+    _setCustomAttributes(attributes: AttributeValuePair[]) {
+      if (attributes) {
+        const link = this.shadowRoot!.querySelector("a")!;
+        attributes.forEach(pair => link.setAttribute(pair.attribute, pair.value));
+      }
+    }
+
     get startIcon() {
       return this.icon && this.iconPlacement === IconPlacement.Start;
     }

package/src/List.hbs

@@ -13,7 +13,8 @@
                 class="udex-list"
                 role="{{accessibleRole}}"
                 aria-labelledby="{{ariaLabelledBy}}"
-                aria-label="{{accessibleName}}">
+                aria-label="{{accessibleName}}"
+                aria-busy="{{ariaBusy}}">
                 <slot></slot>
             </ul>
         </div>
@@ -26,7 +27,8 @@
         class="udex-list"
         role="{{accessibleRole}}"
         aria-labelledby="{{ariaLabelledBy}}"
-        aria-label="{{accessibleName}}">
+        aria-label="{{accessibleName}}"
+        aria-busy="{{ariaBusy}}">
         <slot></slot>
     </ul>
 {{/if}}

package/src/List.ts

@@ -18,6 +18,7 @@ import getEffectiveScrollbarStyle from "@ui5/webcomponents-base/dist/util/getEff
 import UDExListItem from "./ListItem.js";
 import { ListStyleType, ListMode, LetterPressedHandlerObj } from "./types/List.js";
 import UDExListGroupHeader from "./ListGroupHeader.js";
+import UDExUploadItem from "./UploadItem.js";
 import UDExListGroupHeaderBase from "./ListGroupHeaderBase.js";
 import {
   ARIA_LABEL_LIST_MULTISELECTABLE,
@@ -30,7 +31,7 @@ import ListCss from "./generated/themes/List.css.js";
 import isLetterKey from "./utils/isLetterKeyPressed.js";
 import listItemLabelStartsWithKeyFocus from "./utils/listItemLabelStartsWithKeyFocus.js";
 
-export type UDExListItemBase = UDExListItem & UDExListGroupHeader;
+export type UDExListItemBase = UDExListItem & UDExListGroupHeader & UDExUploadItem;
 /**
  * @class
  *
@@ -70,10 +71,10 @@ class UDExList extends UI5Element {
   /**
    * Defines the accessible role of the component.
    *
-   * @default "list"
+   * @default "listbox"
    * @public
    */
-  @property({ defaultValue: "list" })
+  @property({ defaultValue: "listbox" })
     accessibleRole!: string;
 
   /**
@@ -460,11 +461,16 @@ class UDExList extends UI5Element {
   }
 
   getTabIndex(index: number, item: UDExListItemBase): string {
-    if ((item.modeSingleSelect || this.modeRadioGroup) && this.isGroupList && index === 1) {
-      return "0";
-    }
-
-    if (this.modeSelected && index === 0) {
+    const isFirstItem = this.modeSelected && index === 0;
+    const isFirstItemInGroupList = this.isGroupList && index === 1;
+    const listGroupHeader = item.closest("[udex-list-group-header]") as UDExListGroupHeader;
+    const modeSingleOrRadio = this.modeSingleSelect || this.modeRadioGroup;
+    const isFirstHeader = item.isGroup && isFirstItem;
+    const isFirstHeaderMultiMode = isFirstHeader && this.modeMultiSelect && !item.nonInteractive;
+    const isFirstItemGroupSingleOrRadioMode = isFirstItemInGroupList && modeSingleOrRadio;
+    const isFirstItemGroupMultiMode = isFirstItemInGroupList && this.modeMultiSelect && listGroupHeader?.nonInteractive;
+
+    if (isFirstHeaderMultiMode || isFirstItemGroupSingleOrRadioMode || isFirstItemGroupMultiMode || isFirstItem) {
       return "0";
     }
 

package/src/ListGroupHeader.ts

@@ -9,6 +9,8 @@ import { ListItemSize } from "./types/List.js";
 
 // Styles
 import ListGroupHeaderCss from "./generated/themes/ListGroupHeader.css.js";
+
+const listGroupLargeClass: string = "udex-list__group_large";
 /**
  * @class
  *
@@ -70,8 +72,8 @@ class UDExListGroupHeader extends UDExListGroupHeaderBase {
     return hasHandle ? this.handleHeaderState() : undefined;
   }
 
-  get sizeClass() {
-    return this.size === ListItemSize.Large ? "udex-list__group_large" : "";
+  get sizeClass(): string {
+    return this.size === ListItemSize.Large ? listGroupLargeClass : "";
   }
 }
 

package/src/ListGroupHeaderBase.ts

@@ -4,6 +4,8 @@ import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import UDExListItemBase from "./ListItemBase.js";
 
+const listGroupHeaderClass: string = "udex-list__group-header";
+
 /**
  * @class
  *
@@ -136,31 +138,31 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     });
   }
 
-  isAllSelected() {
+  isAllSelected(): boolean {
     return this.getItems().every(({ selected }) => selected);
   }
 
-  isAllDeselected() {
+  isAllDeselected(): boolean {
     return this.getItems().every(({ selected }) => !selected);
   }
 
-  isEachEnabledOptionSelected() {
+  isEachEnabledOptionSelected(): boolean {
     return this.getItems().every(item => item.disabled || item.selected);
   }
 
-  isAnyNotSelectedOptionDisabled() {
+  isAnyNotSelectedOptionDisabled(): boolean {
     return this.getItems().some(item => !item.selected && item.disabled);
   }
 
-  isAnySelected() {
+  isAnySelected(): boolean {
     return this.getItems().some(item => item.selected);
   }
 
-  isAnySelectedOptionDisabled() {
+  isAnySelectedOptionDisabled(): boolean {
     return this.getItems().some(({ disabled, selected }) => disabled && selected);
   }
 
-  isAnyEnabledOption() {
+  isAnyEnabledOption(): boolean {
     return this.getItems().some(({ disabled }) => !disabled);
   }
 
@@ -180,14 +182,13 @@ class UDExListGroupHeaderBase extends UDExListItemBase {
     return false;
   }
 
-  get isNonActiveHeader() {
+  get isNonActiveHeader(): boolean {
     return this.nonInteractive || this.modeRadioGroup;
   }
 
   get className(): string {
-    const className = "udex-list__group-header";
-    const controlledClassName = this.controlled ? `${className}_controlled` : "";
-    return `${className} ${this._additionalClassName} ${controlledClassName}`;
+    const controlledClassName = this.controlled ? `${listGroupHeaderClass}_controlled` : "";
+    return `${listGroupHeaderClass} ${this._additionalClassName} ${controlledClassName}`;
   }
 }
 

package/src/ListItem.hbs

@@ -102,6 +102,7 @@
                         icon="{{editIcon}}"
                         accessible-name="{{editButtonAccessibleName}}"
                         toolTip="{{editButtonAccessibleName}}"
+                        ?disabled="{{disabled}}"
                         size="Small">
                     </udex-button>
                 {{/if}}
@@ -115,7 +116,8 @@
                         size="Small"
                         accessible-name="{{deleteButtonAccessibleName}}"
                         toolTip="{{deleteButtonAccessibleName}}"
-                        icon="{{deleteIcon}}">
+                        icon="{{deleteIcon}}"
+                        ?disabled="{{disabled}}">
                     </udex-button>
                 {{/if}}
             {{/if}}

package/src/ListItem.ts

@@ -25,6 +25,9 @@ import ListItemTemplate from "./generated/templates/ListItemTemplate.lit.js";
 // Styles
 import ListItemCss from "./generated/themes/ListItem.css.js";
 
+const listItemClass: string = "udex-list__item";
+const listItemRole: string = "option";
+
 /**
  * @class
  *
@@ -262,7 +265,7 @@ class UDExListItem extends UDExListItemBase {
   }
 
   onAfterRendering() {
-    if (!this.accessibleRole || this.accessibleRole === "listitem") {
+    if (!this.accessibleRole || this.accessibleRole === listItemRole) {
       this.shadowRoot?.querySelector("li")?.removeAttribute("aria-selected");
     }
   }
@@ -360,36 +363,35 @@ class UDExListItem extends UDExListItemBase {
     }
   }
 
-  get className() {
+  get className(): string {
     const isGroupChild = this?.parentElement as UDExListGroupHeaderBase;
-    const className = "udex-list__item";
-    const controlledClassName = this.controlled ? `${className}_controlled` : "";
-    const groupClassName = isGroupChild?.isGroup ? `${className}_group` : "";
-    const largeSizeClassName = this.isLargeSize ? `${className}_large` : "";
-    return `${className} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`;
+    const controlledClassName = this.controlled ? `${listItemClass}_controlled` : "";
+    const groupClassName = isGroupChild?.isGroup ? `${listItemClass}_group` : "";
+    const largeSizeClassName = this.isLargeSize ? `${listItemClass}_large` : "";
+    return `${listItemClass} ${groupClassName} ${this._additionalClassName} ${controlledClassName} ${largeSizeClassName}`.trim();
   }
 
-  get roleItem() {
-    return this.accessibleRole.length > 0 ? this.accessibleRole : "listitem";
+  get roleItem(): string {
+    return this.accessibleRole.length > 0 ? this.accessibleRole : listItemRole;
   }
 
-  get _ariaDisabled() {
+  get _ariaDisabled(): boolean | undefined {
     return this.disabled ? true : undefined;
   }
 
-  get modeSingleContent() {
+  get modeSingleContent(): boolean {
     return this.mode === ListMode.SingleContent;
   }
 
-  get modeRadioGroup() {
+  get modeRadioGroup(): boolean {
     return this.mode === ListMode.RadioGroup;
   }
 
-  get modeSelected() {
+  get modeSelected(): boolean {
     return [ListMode.SingleSelect, ListMode.MultiSelect, ListMode.RadioGroup].includes(this.mode as ListMode);
   }
 
-  get isLargeSize() {
+  get isLargeSize(): boolean {
     return this.size === ListItemSize.Large;
   }
 
@@ -398,7 +400,9 @@ class UDExListItem extends UDExListItemBase {
   }
 
   get stateAccessibleName(): string {
-    if (this.indeterminate) { return UDExListItem.i18nBundle.getText(INDETERMINATE); }
+    if (this.indeterminate) {
+      return UDExListItem.i18nBundle.getText(INDETERMINATE);
+    }
     return `${this.selected ? UDExListItem.i18nBundle.getText(SELECTED) : UDExListItem.i18nBundle.getText(UNSELECTED)} `;
   }