@duetds/components 8.4.2 → 8.4.4

package/lib/collection/components/duet-link/duet-link.js

@@ -3,12 +3,13 @@
  */
 import chevronIcon from "@duetds/icons/lib/assets/action-arrow-right";
 import downloadIcon from "@duetds/icons/lib/assets/action-download-small";
+import newWindowIconLarge from "@duetds/icons/lib/assets/action-new-window";
 import newWindowIcon from "@duetds/icons/lib/assets/action-new-window-small";
 import { Build, Fragment, h, Host } from "@stencil/core";
 import { DuetStringsDownloadLinkDefaults, DuetStringsExternalDefaults } from "../../common-strings";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLanguage, getLocaleString, } from "../../utils/language-utils";
-import { breakpointToToken } from "../../utils/token-utils";
+import { breakpointToToken, getColorByName } from "../../utils/token-utils";
 /**
  * @part duet-link - piercing selector for styling the link
  * @part duet-link-content - piercing selector for styling the link content wrapper
@@ -31,9 +32,11 @@ export class DuetLink {
         this.tabToLink = false;
         this.icon = undefined;
         this.iconColor = "currentColor";
+        this.iconBackground = null;
         this.iconResponsive = false;
         this.padding = "auto";
         this.isSmallScreen = false;
+        this.isMediumScreen = false;
     }
     /**
      * Component lifecycle events.
@@ -42,6 +45,10 @@ export class DuetLink {
         inheritGlobalTheme(this);
         this.initMediaQuery();
         this.resolvedDownload = this.resolveDownload();
+        // button variation renders a button element when no url is provided
+        if (this.variation === "button" && this.url === "#") {
+            this.url = undefined;
+        }
     }
     connectedCallback() {
         connectLanguageChangeObserver(this, {
@@ -65,15 +72,18 @@ export class DuetLink {
             return;
         }
         this.screenTestBound = this.screenTest.bind(this);
-        this.mediaQuery = window.matchMedia(breakpointToToken["xx-small"]);
-        this.isSmallScreen = this.mediaQuery.matches;
-        this.mediaQuery.addEventListener("change", this.screenTestBound);
+        this.mediaQuerySmall = window.matchMedia(breakpointToToken["xx-small"]);
+        this.mediaQueryMedium = window.matchMedia(breakpointToToken["medium"]);
+        this.isSmallScreen = this.mediaQuerySmall.matches;
+        this.mediaQuerySmall.addEventListener("change", this.screenTestBound);
+        this.mediaQueryMedium.addEventListener("change", this.screenTestBound);
     }
     destroyMediaQuery() {
-        if (Build.isServer || !this.mediaQuery) {
+        if (Build.isServer) {
             return;
         }
-        this.mediaQuery.removeEventListener("change", this.screenTestBound);
+        this.mediaQuerySmall.removeEventListener("change", this.screenTestBound);
+        this.mediaQueryMedium.removeEventListener("change", this.screenTestBound);
     }
     screenTest(event) {
         this.isSmallScreen = event.matches;
@@ -96,32 +106,50 @@ export class DuetLink {
         }
         return this.download;
     }
-    renderContent() {
-        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
+    renderDefaultContent() {
+        // Notice that the external icon needs to be placed right after the last word of the link.
+        // This is why we use &nbps; to keep everything on the same line.
+        return (h(Fragment, null, h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), Build.isBrowser && (this.resolvedDownload || this.external) && this.variation === "default" && (h(Fragment, null, h("span", { class: "duet-link-icon-tail" }, "\u00A0", h("duet-icon", { icon: this.resolvedDownload ? downloadIcon.svg : newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" }))))));
     }
-    renderGrid() {
-        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    renderBlockContent() {
+        return (h(Fragment, null, this.icon && (h("span", { class: "block__icon" }, h("duet-icon", { size: this.iconResponsive ? (this.isSmallScreen ? "medium" : "large") : "x-small", name: this.icon, margin: "none", color: this.iconColor }))), h("span", { class: "block__content" }, this.renderDefaultContent()), h("span", { class: "block__chevron", part: "block-chevron" }, h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" }))));
+    }
+    renderButtonContent() {
+        const iconWrapStyle = {
+            "background-color": getColorByName(this.iconBackground, this.theme),
+        };
+        return (h(Fragment, null, h("span", { class: "icon-wrap", style: iconWrapStyle }, h("duet-icon", { size: this.isMediumScreen ? "small" : "medium", name: this.icon, margin: "none", color: this.iconColor })), h("span", { class: "duet-link-content", part: "duet-link-content" }, h("slot", null)), h("duet-icon", { class: "block__chevron-icon", icon: this.external ? newWindowIconLarge.svg : chevronIcon.svg, size: "x-small", margin: "none", color: "primary-dark" })));
+    }
+    renderContent() {
+        switch (this.variation) {
+            case "default":
+                return this.renderDefaultContent();
+            case "block":
+                return this.renderBlockContent();
+            case "button":
+                return this.renderButtonContent();
+        }
     }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        // Notice that the external icon needs to be places right after the last word of the link.
-        // This is why we use &nbps; to keep everything on the same line.
+        const Tag = this.variation === "button" && !this.url ? "button" : "a";
         return (h(Host, { class: {
-                "duet-link-block": this.variation === "block",
-            } }, h("a", { href: this.url, class: {
+                [`duet-link-${this.variation}`]: true,
+            } }, h(Tag, { href: this.url, class: {
                 "duet-link": true,
                 "duet-link-is-external": this.external,
                 "duet-link-is-download": !!this.download,
                 "duet-link-has-icon": !!this.icon,
+                "duet-link-has-icon-background": !!this.iconBackground,
                 "duet-tab-to-link": this.tabToLink,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-p-0": this.padding === "none",
                 [this.padding]: true,
                 [this.variation]: true,
-            }, target: this.download ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.variation === "block" ? this.renderGrid() : this.renderContent())));
+            }, target: this.download || !this.url ? null : this.external ? "_blank" : "_self", download: this.resolvedDownload, "aria-label": this.getAccessibleLabel(), id: this.identifier, ref: el => (this.nativeLink = el), part: "duet-link", rel: this.external ? "noopener" : undefined }, this.renderContent())));
     }
     static get is() { return "duet-link"; }
     static get encapsulation() { return "shadow"; }
@@ -143,7 +171,7 @@ export class DuetLink {
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLinkVariation",
-                    "resolved": "\"block\" | \"default\"",
+                    "resolved": "\"block\" | \"button\" | \"default\"",
                     "references": {
                         "DuetLinkVariation": {
                             "location": "import",
@@ -348,7 +376,7 @@ export class DuetLink {
             },
             "url": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -436,7 +464,7 @@ export class DuetLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon to display on the left side of the ink text (only with \"block\" variation)"
+                    "text": "Icon to display on the left side of the link text (only with \"block\" and \"button\" variations)"
                 },
                 "attribute": "icon",
                 "reflect": false
@@ -459,12 +487,36 @@ export class DuetLink {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color of the icon to display (only with \"block\" variation)"
+                    "text": "Color of the icon to display (only with \"block\" and \"button\" variations)"
                 },
                 "attribute": "icon-color",
                 "reflect": false,
                 "defaultValue": "\"currentColor\""
             },
+            "iconBackground": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetColor",
+                    "resolved": "string",
+                    "references": {
+                        "DuetColor": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetColor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color of the icon to display (only with \"button\" variation)"
+                },
+                "attribute": "icon-background",
+                "reflect": false,
+                "defaultValue": "null"
+            },
             "iconResponsive": {
                 "type": "boolean",
                 "mutable": false,
@@ -511,7 +563,8 @@ export class DuetLink {
     }
     static get states() {
         return {
-            "isSmallScreen": {}
+            "isSmallScreen": {},
+            "isMediumScreen": {}
         };
     }
     static get methods() {

package/lib/collection/components/duet-modal/duet-modal.js

@@ -210,7 +210,7 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("span", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
+            } }, h("div", { class: "duet-modal-header" }, h("span", { class: "duet-modal-inner-slot-top" }, h("slot", { name: "top" })), this.icon && h("duet-icon", { name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { "visual-level": (_a = this.headingVisualLevel) !== null && _a !== void 0 ? _a : this.headingLevel, level: this.headingLevel, theme: this.theme, id: this.modalId }, this.heading))), h("div", { class: "duet-modal-inner-slot-default", id: this.slotDefaultId }, h("slot", null))))), h(FocusGuard, { moveFocusTo: this.buttonEl })));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-popup-menu/duet-popup-menu.js

@@ -29,8 +29,12 @@ export class DuetPopupMenu {
             if (!this.openButton) {
                 return;
             }
+            const middleware = [
+                offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
+                flip({ mainAxis: !this.forcePlacement }),
+            ];
             const coordinates = await computePosition(this.openButton, this.menuElement, {
-                middleware: [offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }), flip()],
+                middleware,
                 placement: this.placement,
                 strategy: this.position,
             });
@@ -45,6 +49,7 @@ export class DuetPopupMenu {
         this.theme = "";
         this.controller = undefined;
         this.placement = "bottom-start";
+        this.forcePlacement = false;
         this.position = "absolute";
         this.mainAxisOffset = 0;
         this.crossAxisOffset = 0;
@@ -341,6 +346,24 @@ export class DuetPopupMenu {
                 "reflect": false,
                 "defaultValue": "\"bottom-start\""
             },
+            "forcePlacement": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Force placement."
+                },
+                "attribute": "force-placement",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "position": {
                 "type": "string",
                 "mutable": true,

package/lib/collection/components/duet-range-stepper/duet-range-stepper.js

@@ -166,7 +166,7 @@ export class DuetRangeStepper {
         return (h("div", { class: {
                 "duet-range-stepper": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small" })));
+            }, onKeyDown: e => this.onKeyboardDown(e), "aria-controls": this.ariaControls }, h("span", { class: "duet-range-step-counter", part: "range-numbers" }, this.generateStepSize()), h("duet-action-button", { class: "duet-range-step-button duet-range-step-minus", onClick: e => this.handleClick(e, -1), id: this.leftBn, "accessible-label": `${this.ariaLabels.previous_increment} ${this.generatePreviousIncrementLabel()}`, ref: el => (this.leftBnRef = el), part: "navigation-arrow", iconName: "action-arrow-left-small", title: "" }), h("duet-action-button", { class: "duet-range-step-button duet-range-step-plus", onClick: e => this.handleClick(e, 1), "accessible-label": `${this.ariaLabels.next_increment} ${this.generateNextIncrementLabel()}`, id: this.rightBn, ref: el => (this.rightBnRef = el), part: "navigation-arrow", iconName: "action-arrow-right-small", title: "" })));
     }
     static get is() { return "duet-range-stepper"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar/duet-submenu-bar.js

@@ -43,7 +43,8 @@ export class DuetSubmenuBar {
         this.checkIfHasItems = () => {
             const hasDropdownLinks = !!this.element.querySelector("duet-submenu-bar-dropdown-link");
             const hasLinks = !!this.element.querySelector("duet-submenu-bar-link");
-            return hasDropdownLinks || hasLinks;
+            const hasItems = !!this.element.querySelector("duet-submenu-bar-item");
+            return hasDropdownLinks || hasLinks || hasItems;
         };
         this.mobile = true;
         this.bodyScroll = true;
@@ -108,7 +109,7 @@ export class DuetSubmenuBar {
     render() {
         return (h(Host, null, h("nav", { class: { "duet-submenu-bar": true, "duet-theme-turva": this.theme === "turva" }, "aria-label": this.accessibleLabel }, this.hasItems && (h("button", { ref: element => (this.button = element), "aria-haspopup": "menu", "aria-controls": "menu", "aria-expanded": this.open ? "true" : "false", id: "button", type: "button", class: {
                 active: this.open,
-            }, onClick: this.onClick }, h("div", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { class: {
+            }, onClick: this.onClick }, h("span", { class: "label" }, h("slot", { name: "label" }), h("duet-icon", { theme: this.theme, class: "caret", name: "action-arrow-down-small", margin: "none", size: "xxx-small", color: "currentColor" })))), h("div", { class: {
                 "menu-container": true,
                 hidden: !this.open,
             }, role: "presentation" }, h("div", { role: this.mobile ? "menu" : null, id: "menu", "aria-labelledby": this.mobile ? "button" : null, "aria-expanded": this.mobile ? (this.open ? "true" : "false") : null, class: {

package/lib/collection/components/duet-upload/duet-upload.js

@@ -6,6 +6,7 @@ import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { debounce } from "../../utils/js-utils";
 import { getLocaleString, sanitizeString } from "../../utils/language-utils";
+import { parsePossibleJSON } from "../../utils/string-utils";
 import errorCodes from "./errorcodes.json";
 import { getI18nError } from "./errorcodes.utils";
 import { UploadItemHeader } from "./upload-item-header";
@@ -108,22 +109,22 @@ export class DuetUpload {
         };
         this.mapFilesToUploadItems = (data, group, showCategory, filteredActions) => {
             if (group === this.DefaultGroups.success) {
-                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "success", data: data, showLinks: this.showLinks, linkClickEvent: this.emitEvent ? this.linkClick : undefined, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, buttonTitles: this.processedButtonTitles, ref: item => {
                         this.itemRefs.set(data.uid, item);
                     } }));
             }
             else if (group === this.DefaultGroups.inprogress) {
-                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "inprogress", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, buttonTitles: this.processedButtonTitles, ref: item => {
                         this.itemRefs.set(data.uid, item);
                     } }));
             }
             else if (group === this.DefaultGroups.pending) {
-                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "pending", data: data, showLinks: this.showLinks, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, buttonTitles: this.processedButtonTitles, ref: item => {
                         this.itemRefs.set(data.uid, item);
                     } }));
             }
             else if (group === this.DefaultGroups.failure) {
-                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, ref: item => {
+                return (h("duet-upload-item", { theme: this.theme, actions: this.getActions(group, filteredActions), type: "failure", data: data, showLinks: this.showLinks, errorCodes: this.errorCodes, categoryLabel: this.categoryLabel, label: this.uploadedItemsHeaderLabel, showCategory: showCategory, buttonTitles: this.processedButtonTitles, ref: item => {
                         this.itemRefs.set(data.uid, item);
                     } }));
             }
@@ -609,6 +610,11 @@ export class DuetUpload {
         this.headerHeadingLevel = "h3";
         this.hideHeader = false;
         this.emitEvent = false;
+        this.actionButtonTitles = {
+            cancel: false,
+            delete: false,
+        };
+        this.renameDuplicates = false;
         this.groups = [
             {
                 id: this.DefaultGroups.success,
@@ -663,6 +669,7 @@ export class DuetUpload {
         this.listenForActionEvents();
         this.onReady();
         this.externalUploadButton = document.querySelector(`#${this.externalUploadButtonId}`);
+        this.processedButtonTitles = parsePossibleJSON(this.actionButtonTitles);
     }
     componentWillRender() {
         // listen to the events from the component
@@ -811,12 +818,50 @@ export class DuetUpload {
         // don't present server issues to user on deletes, just remove them from the visible list
         return makeXhrRequest(options);
     }
+    getRenamedFileName(newFileName, extension) {
+        const re = new RegExp(`${newFileName}_\\d+\\.${extension}`);
+        const lastFileName = Array.from(this.files.entries())
+            .map(entry => {
+            const [key, _] = entry;
+            return key;
+        })
+            .filter(existingFileName => {
+            return re.test(existingFileName) || existingFileName === `${newFileName}.${extension}`;
+        })
+            .sort()
+            .pop()
+            .split(".")
+            .slice(0, -1)
+            .join(".");
+        if (lastFileName === newFileName) {
+            return `${newFileName}_1.${extension}`;
+        }
+        const lastFileNumber = parseInt(lastFileName.split("_").pop());
+        return `${newFileName}_${lastFileNumber + 1}.${extension}`;
+    }
+    renameFiles(files) {
+        return files.map(file => {
+            if (this.files.get(file.name)) {
+                const splitName = file.name.split(".");
+                const extension = splitName.pop();
+                const nameWithoutExtension = splitName.join(".");
+                const newName = this.getRenamedFileName(nameWithoutExtension, extension);
+                return new File([file], newName, {
+                    type: file.type,
+                    lastModified: file.lastModified,
+                });
+            }
+            else {
+                return file;
+            }
+        });
+    }
     /**
      * Component event handling.
      */
     async onChange(ev) {
         var _a;
-        const selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
+        let selectedFiles = Array.from((_a = this.nativeInput) === null || _a === void 0 ? void 0 : _a.files);
         // FileList is a nice array like structure but
         // to ensure uniqueness of files we use a mapping structure and
         // key to the name (makes it easier to delete as well)
@@ -833,6 +878,9 @@ export class DuetUpload {
             return;
         }
         if (selectedFiles) {
+            if (this.renameDuplicates) {
+                selectedFiles = this.renameFiles(selectedFiles);
+            }
             for (const item of selectedFiles) {
                 const { valid, errorMessage, errorType, errorSystem } = validateFile(item, {
                     maxBytes: this.maxBytes,
@@ -1914,6 +1962,48 @@ export class DuetUpload {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "actionButtonTitles": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | UploadActionButtonTitles",
+                    "resolved": "string | { [actionName: string]: boolean | DuetLangObject; }",
+                    "references": {
+                        "UploadActionButtonTitles": {
+                            "location": "import",
+                            "path": "../duet-upload-item/duet-upload-item",
+                            "id": "src/components/duet-upload-item/duet-upload-item.tsx::UploadActionButtonTitles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Map action name to DuetLangObject or boolean. Sets upload item action buttons titles\n(show as DOM tooltip when hovering)."
+                },
+                "attribute": "action-button-titles",
+                "reflect": false,
+                "defaultValue": "{\n    cancel: false,\n    delete: false,\n  }"
+            },
+            "renameDuplicates": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Use rename-duplicates to auto rename files with the same name instead of replacing them."
+                },
+                "attribute": "rename-duplicates",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "groups": {
                 "type": "unknown",
                 "mutable": false,

package/lib/collection/components/duet-upload-item/duet-upload-item.js

@@ -28,6 +28,7 @@ export class DuetUploadItem {
         this.type = undefined;
         this.showLinks = undefined;
         this.actions = undefined;
+        this.buttonTitles = undefined;
         this.label = undefined;
         this.categoryLabel = undefined;
         this.errorCodes = undefined;
@@ -65,6 +66,12 @@ export class DuetUploadItem {
                 return uploaded && url && this.showLinks ? (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, h("duet-link", { class: "file-link", onClick: this.onLinkClick, url: url }, ContentName), h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText)) : (h("duet-paragraph", { color: "secondary", margin: "none", weight: "semi-bold" }, ContentName, h("duet-spacer", { size: "xx-small", direction: "horizontal" }), SizeText));
         }
     }
+    getActionButtonTitle(actionItem) {
+        if (this.buttonTitles[actionItem.name] === true || this.buttonTitles[actionItem.name] === false) {
+            return actionItem;
+        }
+        return getLocaleString(this.buttonTitles[actionItem.name]);
+    }
     render() {
         const { uid, meta, item } = this.data;
         const Badges = meta && meta.badges ? (h("span", null, meta.badges.map(badgeText => (h("duet-badge", { color: "primary" }, badgeText))))) : undefined;
@@ -72,7 +79,7 @@ export class DuetUploadItem {
         return (h("div", { class: {
                 "upload-item-row": true,
             } }, this.showCategory && (h("div", { class: "item-categories" }, h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.categoryLabel)), Badges)), h("div", { class: { "item-name": true, "no-category": !this.showCategory } }, !!this.label && (h("duet-heading", { class: "heading", color: "color-secondary", level: "h6", weight: "semibold" }, getLocaleString(this.label))), this.getFileNameLine()), h("div", { class: "item-actions" }, this.actions.map(actionItem => {
-            return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: false, ref: button => (this.actionButton = button) }));
+            return (h("duet-action-button", { actionMeta: Object.assign({}, meta || {}), actionId: uid || null, actionName: actionItem.name, theme: this.theme, iconName: actionItem.icon, iconColor: actionItem.color, iconSize: actionItem.size, background: actionItem.background, "accessible-label": `${actionDescription} ${getLocaleString(actionItem.label)} `, accessibleTitle: this.getActionButtonTitle(actionItem), ref: button => (this.actionButton = button) }));
         }))));
     }
     static get is() { return "duet-upload-item"; }
@@ -190,6 +197,27 @@ export class DuetUploadItem {
                 "attribute": "actions",
                 "reflect": false
             },
+            "buttonTitles": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UploadActionButtonTitles",
+                    "resolved": "{ [actionName: string]: boolean | DuetLangObject; }",
+                    "references": {
+                        "UploadActionButtonTitles": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-upload-item/duet-upload-item.tsx",
+                            "id": "src/components/duet-upload-item/duet-upload-item.tsx::UploadActionButtonTitles"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "buttonTitles."
+                }
+            },
             "label": {
                 "type": "unknown",
                 "mutable": false,
@@ -280,7 +308,7 @@ export class DuetUploadItem {
                         "EventEmitter": {
                             "location": "import",
                             "path": "@stencil/core",
-                            "id": ""
+                            "id": "../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::EventEmitter"
                         },
                         "DuetUploadEvent": {
                             "location": "import",

package/lib/collection/utils/string-utils.js

@@ -51,3 +51,9 @@ export const convertHtmlQuotes = string => {
     }
     return string;
 };
+/**
+ * Converts the first letter of the string to upper case. Note that with non-latin scrips this may not produce expected results
+ */
+export const upperCaseFirst = (string) => {
+    return string && `${string[0].toUpperCase()}${string.slice(1)}`;
+};

package/lib/dist-custom-elements/duet-action-button.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-61c2577e.js';
+import { D as DuetActionButton$1, d as defineCustomElement$1 } from './p-95edd984.js';
 
 const DuetActionButton = DuetActionButton$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-alert.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-45f0a5c5.js';
+import { D as DuetAlert$1, d as defineCustomElement$1 } from './p-70db33ff.js';
 
 const DuetAlert = DuetAlert$1;
 const defineCustomElement = defineCustomElement$1;

package/lib/dist-custom-elements/duet-badge.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-47e5367a.js';
+import { D as DuetBadge$1, d as defineCustomElement$1 } from './p-c9e9fcdd.js';
 
 const DuetBadge = DuetBadge$1;
 const defineCustomElement = defineCustomElement$1;