@genexus/genexus-ide-ui 3.0.1 → 3.1.0

package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js

@@ -0,0 +1,209 @@
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m")
+        throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f)
+        throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
+        throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var _GxIdeMultiSelect_multiButtonEl, _GxIdeMultiSelect_popoverEl, _GxIdeMultiSelect_togglePopover, _GxIdeMultiSelect_checkboxChangeHandler, _GxIdeMultiSelect_removeSelectedItemHandler, _GxIdeMultiSelect_isItemSelected, _GxIdeMultiSelect_renderSelectedItems;
+import { Host, h } from "@stencil/core";
+import { getIconPath } from "@genexus/mercury";
+const CSS_BUNDLES = [
+    "resets/box-sizing",
+    "components/button",
+    "components/icon",
+    "components/checkbox",
+    "utils/typography",
+    "utils/spacing",
+    "chameleon/scrollbar",
+    "components/combo-box"
+];
+const CHEVRON_DOWN_ICON = getIconPath({
+    category: "navigation",
+    name: "chevron-down",
+    colorType: "on-interactive"
+});
+const CLOSE_ICON = getIconPath({
+    category: "system",
+    name: "close",
+    colorType: "on-interactive"
+});
+export class GxIdeMultiSelect {
+    constructor() {
+        _GxIdeMultiSelect_multiButtonEl.set(this, void 0);
+        _GxIdeMultiSelect_popoverEl.set(this, void 0);
+        _GxIdeMultiSelect_togglePopover.set(this, () => {
+            if (!this.disabled) {
+                this.showPopover = !this.showPopover;
+            }
+        });
+        _GxIdeMultiSelect_checkboxChangeHandler.set(this, (optionValue, event) => {
+            const target = event.target;
+            const isChecked = target.value === target.checkedValue;
+            let newValue;
+            if (isChecked) {
+                newValue = [...this.value, optionValue];
+            }
+            else {
+                newValue = this.value.filter(val => val !== optionValue);
+            }
+            this.gxSelectionChange.emit(newValue);
+        });
+        _GxIdeMultiSelect_removeSelectedItemHandler.set(this, (itemValue) => {
+            const newValue = this.value.filter(val => val !== itemValue);
+            this.gxSelectionChange.emit(newValue);
+        });
+        _GxIdeMultiSelect_isItemSelected.set(this, (itemValue) => {
+            return this.value.includes(itemValue);
+        });
+        _GxIdeMultiSelect_renderSelectedItems.set(this, () => {
+            if (this.value.length === 0) {
+                return (h("span", { class: "multi-select__placeholder body-italic-m" }, this.placeholder));
+            }
+            const selectedOptions = this.model.filter(opt => this.value.includes(opt.value));
+            return (h("div", { class: "multi-select__items" }, selectedOptions.map(item => (h("div", { class: "multi-select__item", key: item.value }, h("span", { class: "multi-select__caption body-regular-s" }, item.caption), h("button", { type: "button", class: "button-tertiary button-icon-only multi-select__close", onClick: e => {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    __classPrivateFieldGet(this, _GxIdeMultiSelect_removeSelectedItemHandler, "f").call(this, item.value);
+                }, "aria-label": `Remove ${item.caption}` }, h("ch-image", { class: "icon-xs", src: CLOSE_ICON, type: "mask" })))))));
+        });
+        this.showPopover = false;
+        this.model = [];
+        this.value = [];
+        this.placeholder = "Select options";
+        this.disabled = false;
+    }
+    componentDidLoad() {
+        if (__classPrivateFieldGet(this, _GxIdeMultiSelect_popoverEl, "f") && __classPrivateFieldGet(this, _GxIdeMultiSelect_multiButtonEl, "f")) {
+            __classPrivateFieldGet(this, _GxIdeMultiSelect_popoverEl, "f").actionElement = __classPrivateFieldGet(this, _GxIdeMultiSelect_multiButtonEl, "f");
+        }
+    }
+    render() {
+        return (h(Host, null, h("ch-theme", { model: CSS_BUNDLES }), h("button", { class: "combo-box multi-select__button", type: "button", ref: (el) => (__classPrivateFieldSet(this, _GxIdeMultiSelect_multiButtonEl, el, "f")), onClick: __classPrivateFieldGet(this, _GxIdeMultiSelect_togglePopover, "f"), disabled: this.disabled }, __classPrivateFieldGet(this, _GxIdeMultiSelect_renderSelectedItems, "f").call(this), h("ch-image", { class: "icon-m multi-select__chevron", src: CHEVRON_DOWN_ICON, type: "mask" })), h("ch-popover", { ref: (el) => (__classPrivateFieldSet(this, _GxIdeMultiSelect_popoverEl, el, "f")), closeOnClickOutside: true, show: this.showPopover, blockAlign: "outside-end", inlineAlign: "inside-end", inlineSizeMatch: "action-element", class: "scrollable" }, h("div", null, this.model.map(option => (h("ch-checkbox", { class: "checkbox checkbox-item", caption: option.caption, checkedValue: "true", value: __classPrivateFieldGet(this, _GxIdeMultiSelect_isItemSelected, "f").call(this, option.value) ? "true" : "false", startImgSrc: option.startImgSrc, onInput: e => __classPrivateFieldGet(this, _GxIdeMultiSelect_checkboxChangeHandler, "f").call(this, option.value, e) })))))));
+    }
+    static get is() { return "gx-ide-multi-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gx-ide-multi-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gx-ide-multi-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "model": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ComboBoxModel",
+                    "resolved": "ComboBoxItemModel[]",
+                    "references": {
+                        "ComboBoxModel": {
+                            "location": "import",
+                            "path": "@genexus/chameleon-controls-library",
+                            "id": ""
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Model with available options to select from"
+                },
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Currently selected item values"
+                },
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder text when no items are selected"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "\"Select options\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "showPopover": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "gxSelectionChange",
+                "name": "gxSelectionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the selection changes"
+                },
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+_GxIdeMultiSelect_multiButtonEl = new WeakMap(), _GxIdeMultiSelect_popoverEl = new WeakMap(), _GxIdeMultiSelect_togglePopover = new WeakMap(), _GxIdeMultiSelect_checkboxChangeHandler = new WeakMap(), _GxIdeMultiSelect_removeSelectedItemHandler = new WeakMap(), _GxIdeMultiSelect_isItemSelected = new WeakMap(), _GxIdeMultiSelect_renderSelectedItems = new WeakMap();
+//# sourceMappingURL=gx-ide-multi-select.js.map

package/dist/collection/components/_helpers/multi-select/gx-ide-multi-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gx-ide-multi-select.js","sourceRoot":"","sources":["../../../../src/components/_helpers/multi-select/gx-ide-multi-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Event,\n  EventEmitter\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ComboBoxModel } from \"@genexus/chameleon-controls-library\";\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/checkbox\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"chameleon/scrollbar\",\n  \"components/combo-box\"\n];\n\nconst CHEVRON_DOWN_ICON = getIconPath({\n  category: \"navigation\",\n  name: \"chevron-down\",\n  colorType: \"on-interactive\"\n});\n\nconst CLOSE_ICON = getIconPath({\n  category: \"system\",\n  name: \"close\",\n  colorType: \"on-interactive\"\n});\n\n@Component({\n  tag: \"gx-ide-multi-select\",\n  styleUrl: \"gx-ide-multi-select.scss\",\n  shadow: true\n})\nexport class GxIdeMultiSelect {\n  #multiButtonEl: HTMLButtonElement;\n  #popoverEl: HTMLChPopoverElement;\n\n  @Element() el: HTMLGxIdeMultiSelectElement;\n\n  @State() showPopover = false;\n\n  /**\n   * Model with available options to select from\n   */\n  @Prop() readonly model: ComboBoxModel = [];\n\n  /**\n   * Currently selected item values\n   */\n  @Prop() readonly value: string[] = [];\n\n  /**\n   * Placeholder text when no items are selected\n   */\n  @Prop() readonly placeholder: string = \"Select options\";\n\n  /**\n   * Disabled state\n   */\n  @Prop() readonly disabled: boolean = false;\n\n  /**\n   * Emitted when the selection changes\n   */\n  @Event() gxSelectionChange: EventEmitter<string[]>;\n\n  componentDidLoad() {\n    if (this.#popoverEl && this.#multiButtonEl) {\n      this.#popoverEl.actionElement = this.#multiButtonEl;\n    }\n  }\n\n  #togglePopover = () => {\n    if (!this.disabled) {\n      this.showPopover = !this.showPopover;\n    }\n  };\n\n  #checkboxChangeHandler = (\n    optionValue: string,\n    event: CustomEvent | InputEvent\n  ) => {\n    const target = event.target as HTMLChCheckboxElement;\n    const isChecked = target.value === target.checkedValue;\n\n    let newValue: string[];\n    if (isChecked) {\n      newValue = [...this.value, optionValue];\n    } else {\n      newValue = this.value.filter(val => val !== optionValue);\n    }\n\n    this.gxSelectionChange.emit(newValue);\n  };\n\n  #removeSelectedItemHandler = (itemValue: string) => {\n    const newValue = this.value.filter(val => val !== itemValue);\n    this.gxSelectionChange.emit(newValue);\n  };\n\n  #isItemSelected = (itemValue: string): boolean => {\n    return this.value.includes(itemValue);\n  };\n\n  #renderSelectedItems = () => {\n    if (this.value.length === 0) {\n      return (\n        <span class=\"multi-select__placeholder body-italic-m\">\n          {this.placeholder}\n        </span>\n      );\n    }\n\n    const selectedOptions = this.model.filter(opt =>\n      this.value.includes(opt.value)\n    );\n\n    return (\n      <div class=\"multi-select__items\">\n        {selectedOptions.map(item => (\n          <div class=\"multi-select__item\" key={item.value}>\n            <span class=\"multi-select__caption body-regular-s\">\n              {item.caption}\n            </span>\n            <button\n              type=\"button\"\n              class=\"button-tertiary button-icon-only multi-select__close\"\n              onClick={e => {\n                e.stopPropagation();\n                e.preventDefault();\n                this.#removeSelectedItemHandler(item.value);\n              }}\n              aria-label={`Remove ${item.caption}`}\n            >\n              <ch-image class=\"icon-xs\" src={CLOSE_ICON} type=\"mask\"></ch-image>\n            </button>\n          </div>\n        ))}\n      </div>\n    );\n  };\n\n  render() {\n    return (\n      <Host>\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n        <button\n          class=\"combo-box multi-select__button\"\n          type=\"button\"\n          ref={(el: HTMLButtonElement) => (this.#multiButtonEl = el)}\n          onClick={this.#togglePopover}\n          disabled={this.disabled}\n        >\n          {this.#renderSelectedItems()}\n          <ch-image\n            class=\"icon-m multi-select__chevron\"\n            src={CHEVRON_DOWN_ICON}\n            type=\"mask\"\n          />\n        </button>\n\n        <ch-popover\n          ref={(el: HTMLChPopoverElement) => (this.#popoverEl = el)}\n          closeOnClickOutside\n          show={this.showPopover}\n          blockAlign=\"outside-end\"\n          inlineAlign=\"inside-end\"\n          inlineSizeMatch=\"action-element\"\n          class={\"scrollable\"}\n        >\n          <div>\n            {this.model.map(option => (\n              <ch-checkbox\n                class=\"checkbox checkbox-item\"\n                caption={option.caption}\n                checkedValue=\"true\"\n                value={this.#isItemSelected(option.value) ? \"true\" : \"false\"}\n                startImgSrc={option.startImgSrc}\n                onInput={e => this.#checkboxChangeHandler(option.value, e)}\n              />\n            ))}\n          </div>\n        </ch-popover>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-uploader/file-item/file-item.css

@@ -4,62 +4,61 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
 */
 :host {
   display: block;
-  inline-size: 100%;
 }
 
 .file-item {
   display: grid;
-  grid-template-columns: auto 1fr auto;
-  grid-template-rows: auto;
-  gap: var(--spacing-gap-l);
+  column-gap: var(--spacing-gap-l);
+  row-gap: var(--spacing-gap-s);
   align-items: center;
-  border: 1px solid var(--mer-border__default);
-  border-radius: 4px;
+  border-radius: var(--border-radius-s);
+}
+.file-item--without-actions {
+  grid-template-columns: max-content 1fr;
+  grid-template-areas: "icon name";
+}
+.file-item--with-actions {
+  grid-template-columns: max-content 1fr max-content;
+  grid-template-areas: "icon name actions";
 }
 .file-item__icon {
   display: flex;
   align-items: center;
+  grid-area: icon;
+  padding-block: calc(32px - var(--ch-image-size));
 }
 .file-item__name {
+  grid-area: name;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  inline-size: 100%;
-  font-weight: var(--font-style-regular);
+  min-inline-size: 0;
 }
 .file-item__name ch-edit {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  inline-size: 100%;
-  font-weight: var(--font-style-regular);
 }
 .file-item__name .label {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  inline-size: 100%;
-  font-weight: var(--font-style-regular);
 }
 .file-item__actions {
+  grid-area: actions;
   display: flex;
-  gap: var(--spacing-gap-m);
 }
-.file-item__actions button:active, .file-item__actions button:focus, .file-item__actions button:hover {
-  background-color: var(--mer-surface__hover);
-}
-.file-item__actions button:active {
-  background-color: var(--mer-surface__pressed);
+.file-item__cancel-upload {
+  transform: translateX(7px);
 }
 .file-item__progress-container {
   grid-column: 1/-1;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-gap-xs);
-  inline-size: 100%;
   border: 2px dashed var(--color-border-neutral-default);
-  border-radius: 8px;
-  padding: var(--spacing-padding-l);
+  border-radius: var(--border-radius-m);
+  padding: var(--spacing-padding-xxs) var(--spacing-padding-l) var(--spacing-padding-m) var(--spacing-padding-l);
 }
 .file-item__progress-header {
   display: flex;
@@ -68,21 +67,17 @@ Found on /common/helpers.tsx hiChar function is used to add a span/class to ever
   gap: var(--spacing-gap-l);
 }
 .file-item__uploading-text {
-  font-style: italic;
   color: var(--color-text-neutral-disabled);
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   max-inline-size: calc(100% - 40px);
 }
-.file-item__progress-bar {
-  inline-size: 100%;
-}
 .file-item__progress-bar progress {
-  inline-size: 100%;
-  height: 8px;
+  block-size: 8px;
+  line-height: 0;
   border: none;
-  border-radius: 4px;
+  border-radius: var(--border-radius-s);
   overflow: hidden;
 }
 .file-item__progress-bar progress::-webkit-progress-bar {

package/dist/collection/components/file-uploader/file-item/file-item.js

@@ -71,6 +71,7 @@ export class FileItem {
         });
         this.file = undefined;
         this.editable = false;
+        this.componentLocale = undefined;
         this.fileDeletedCallback = undefined;
         this.fileDeletionErrorCallback = undefined;
         this.isEditing = false;
@@ -84,7 +85,25 @@ export class FileItem {
         this.currentName = this.file.name;
     }
     render() {
-        return (h("div", { class: "file-item" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "file-item__icon" }, h("ch-image", { src: FILE_ICON, class: "icon-m" })), h("div", { class: "file-item__name" }, this.isEditing ? (h("ch-edit", { value: this.currentName, autoFocus: true, onInput: __classPrivateFieldGet(this, _FileItem_handleNameChange, "f"), onBlur: __classPrivateFieldGet(this, _FileItem_handleBlur, "f"), class: "input" })) : (h("label", { class: "label" }, this.currentName))), h("div", { class: "file-item__actions" }, !this.file.pending && this.editable && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_startEditing, "f") }, h("ch-image", { src: EDIT_ICON, class: "icon-m" }))), !this.file.pending && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleDelete, "f"), "aria-label": "Delete file" }, h("ch-image", { src: DELETE_ICON, class: "icon-m" })))), this.file.pending && (h("div", { class: "file-item__progress-container" }, h("div", { class: "file-item__progress-header" }, h("span", { class: "file-item__uploading-text" }, "Uploading ", this.currentName, "..."), h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleCancelClick, "f") }, h("ch-image", { src: CANCEL_ICON, class: "icon-m" }))), h("div", { class: "file-item__progress-bar" }, h("progress", { class: "elevation-1", value: this.file.progress, max: "100" }))))));
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const displayItemActions = !this.file.pending;
+        const displayProgressContainer = this.file.pending;
+        const labelId = "progress-label-" + this.file.id;
+        let liAriaLabel;
+        if (this.file.pending) {
+            liAriaLabel = ((_d = (_c = (_b = (_a = this.componentLocale) === null || _a === void 0 ? void 0 : _a.fileItem) === null || _b === void 0 ? void 0 : _b.uploadingAriaLabel) === null || _c === void 0 ? void 0 : _c.replace("{fileName}", this.currentName)) === null || _d === void 0 ? void 0 : _d.replace("{fileProgress}", this.file.progress.toString())) || this.currentName;
+        }
+        else if (this.file.remoteId) {
+            liAriaLabel = ((_g = (_f = (_e = this.componentLocale) === null || _e === void 0 ? void 0 : _e.fileItem) === null || _f === void 0 ? void 0 : _f.uploadedSuccessfullyAriaLabel) === null || _g === void 0 ? void 0 : _g.replace("{fileName}", this.currentName)) || this.currentName;
+        }
+        else {
+            liAriaLabel = this.currentName;
+        }
+        return (h("li", { class: {
+                "file-item": true,
+                "file-item--without-actions": !displayItemActions,
+                "file-item--with-actions": displayItemActions
+            }, "aria-label": liAriaLabel }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "file-item__icon" }, h("ch-image", { disabled: !this.file.pending, src: FILE_ICON, class: "icon-m" })), h("div", { class: "file-item__name" }, this.isEditing ? (h("ch-edit", { accessibleName: (_k = (_j = (_h = this.componentLocale) === null || _h === void 0 ? void 0 : _h.fileItem) === null || _j === void 0 ? void 0 : _j.editNamePlaceholderAriaLabel) === null || _k === void 0 ? void 0 : _k.replace("{fileName}", this.currentName), value: this.currentName, autoFocus: true, onInput: __classPrivateFieldGet(this, _FileItem_handleNameChange, "f"), onBlur: __classPrivateFieldGet(this, _FileItem_handleBlur, "f"), class: "input", id: labelId })) : (h("span", { class: "label", id: labelId }, this.currentName))), displayItemActions ? (h("div", { class: "file-item__actions" }, !this.file.pending && this.editable && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_startEditing, "f") }, h("ch-image", { src: EDIT_ICON, class: "icon-m" }))), !this.file.pending && (h("button", { class: "button-tertiary button-icon-only", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleDelete, "f"), "aria-label": "Delete file" }, h("ch-image", { src: DELETE_ICON, class: "icon-m" }))))) : (null), displayProgressContainer && (h("div", { class: "file-item__progress-container" }, h("div", { class: "file-item__progress-header" }, h("span", { class: "file-item__uploading-text typography-body-italic-s" }, "Uploading ", this.currentName, "..."), h("button", { "aria-label": ((_o = (_m = (_l = this.componentLocale) === null || _l === void 0 ? void 0 : _l.fileItem) === null || _m === void 0 ? void 0 : _m.cancelUploadButtonAriaLabel) === null || _o === void 0 ? void 0 : _o.replace("{fileName}", this.currentName)) || "Cancel upload", class: "button-tertiary button-icon-only file-item__cancel-upload", type: "button", onClick: __classPrivateFieldGet(this, _FileItem_handleCancelClick, "f") }, h("ch-image", { src: CANCEL_ICON, class: "icon-m" }))), h("div", { class: "file-item__progress-bar" }, h("progress", { class: "elevation-1", value: this.file.progress, max: "100", "aria-labelledby": labelId }))))));
     }
     static get is() { return "gx-ide-file-item"; }
     static get encapsulation() { return "shadow"; }
@@ -139,6 +158,23 @@ export class FileItem {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "componentLocale": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Component locale strings"
+                },
+                "attribute": "component-locale",
+                "reflect": false
+            },
             "fileDeletedCallback": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/file-uploader/file-item/file-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-item.js","sourceRoot":"","sources":["../../../../src/components/file-uploader/file-item/file-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"file\",\n  colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"edit\",\n  colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"delete\",\n  colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"close\",\n  colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/edit\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/elevation\"\n];\n\n@Component({\n  tag: \"gx-ide-file-item\",\n  styleUrl: \"file-item.scss\",\n  shadow: true\n})\nexport class FileItem {\n  /** File state containing upload information */\n  @Prop() readonly file!: FileUploadState;\n\n  /** Whether the file name can be edited */\n  @Prop() readonly editable: boolean = false;\n\n  /** Callback when a file is deleted */\n  @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n  /** Callback when a file deletion error occurs */\n  @Prop() readonly fileDeletionErrorCallback?: (data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>;\n\n  /** Updates current name when file prop changes */\n  @Watch(\"file\")\n  handleFileChange(newFile: FileUploadState) {\n    this.currentName = newFile.name;\n  }\n\n  @State() isEditing: boolean = false;\n  @State() currentName: string;\n\n  /** Emitted when the file name is changed */\n  @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n  /** Emitted when the file is deleted */\n  @Event() fileDelete: EventEmitter<string>;\n\n  /** Emitted when the file upload is cancelled */\n  @Event() fileCancel: EventEmitter<string>;\n\n  componentWillLoad() {\n    this.currentName = this.file.name;\n  }\n\n  #handleNameChange = (event: ChEditCustomEvent<string> | InputEvent) => {\n    const newName = (event as CustomEvent<string>).detail;\n\n    if (newName && newName !== this.currentName) {\n      this.currentName = newName;\n      this.fileNameChange.emit({\n        id: this.file.id,\n        name: newName\n      });\n    }\n  };\n\n  #handleBlur = () => {\n    this.isEditing = false;\n  };\n\n  /** Handles file deletion */\n  #handleDelete = () => {\n    this.fileDelete.emit(this.file.id);\n  };\n\n  /** Handles upload cancellation */\n  #handleCancelClick = (e: MouseEvent) => {\n    e.preventDefault();\n    this.fileCancel.emit(this.file.id);\n  };\n\n  /** Starts file name editing */\n  #startEditing = () => {\n    if (this.editable) {\n      this.isEditing = true;\n    }\n  };\n\n  render() {\n    return (\n      <div class=\"file-item\">\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n        <div class=\"file-item__icon\">\n          <ch-image src={FILE_ICON} class=\"icon-m\" />\n        </div>\n\n        <div class=\"file-item__name\">\n          {this.isEditing ? (\n            <ch-edit\n              value={this.currentName}\n              autoFocus={true}\n              onInput={this.#handleNameChange}\n              onBlur={this.#handleBlur}\n              class=\"input\"\n            />\n          ) : (\n            <label class=\"label\">{this.currentName}</label>\n          )}\n        </div>\n\n        <div class=\"file-item__actions\">\n          {!this.file.pending && this.editable && (\n            <button\n              class=\"button-tertiary button-icon-only\"\n              type=\"button\"\n              onClick={this.#startEditing}\n            >\n              <ch-image src={EDIT_ICON} class=\"icon-m\" />\n            </button>\n          )}\n          {!this.file.pending && (\n            <button\n              class=\"button-tertiary button-icon-only\"\n              type=\"button\"\n              onClick={this.#handleDelete}\n              aria-label=\"Delete file\"\n            >\n              <ch-image src={DELETE_ICON} class=\"icon-m\" />\n            </button>\n          )}\n        </div>\n\n        {this.file.pending && (\n          <div class=\"file-item__progress-container\">\n            <div class=\"file-item__progress-header\">\n              <span class=\"file-item__uploading-text\">\n                Uploading {this.currentName}...\n              </span>\n              <button\n                class=\"button-tertiary button-icon-only\"\n                type=\"button\"\n                onClick={this.#handleCancelClick}\n              >\n                <ch-image src={CANCEL_ICON} class=\"icon-m\" />\n              </button>\n            </div>\n            <div class=\"file-item__progress-bar\">\n              <progress\n                class=\"elevation-1\"\n                value={this.file.progress}\n                max=\"100\"\n              />\n            </div>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"file-item.js","sourceRoot":"","sources":["../../../../src/components/file-uploader/file-item/file-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  h,\n  Prop,\n  State,\n  Event,\n  EventEmitter,\n  Watch\n} from \"@stencil/core\";\nimport { getIconPath, MercuryBundles } from \"@genexus/mercury\";\nimport { ChEditCustomEvent } from \"@genexus/chameleon-controls-library\";\nimport { FileUploadState } from \"../types\";\n\nconst FILE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"file\",\n  colorType: \"primary\"\n});\n\nconst EDIT_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"edit\",\n  colorType: \"primary\"\n});\n\nconst DELETE_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"delete\",\n  colorType: \"primary\"\n});\n\nconst CANCEL_ICON = getIconPath({\n  category: \"gemini-tools\",\n  name: \"close\",\n  colorType: \"primary\"\n});\n\nconst CSS_BUNDLES: MercuryBundles = [\n  \"resets/box-sizing\",\n  \"components/button\",\n  \"components/icon\",\n  \"components/edit\",\n  \"utils/typography\",\n  \"utils/spacing\",\n  \"utils/form\",\n  \"utils/layout\",\n  \"utils/elevation\"\n];\n\n@Component({\n  tag: \"gx-ide-file-item\",\n  styleUrl: \"file-item.scss\",\n  shadow: true\n})\nexport class FileItem {\n  /** File state containing upload information */\n  @Prop() readonly file!: FileUploadState;\n\n  /** Whether the file name can be edited */\n  @Prop() readonly editable: boolean = false;\n\n  /** Component locale strings */\n  @Prop() readonly componentLocale?: any;\n\n  /** Callback when a file is deleted */\n  @Prop() readonly fileDeletedCallback?: (fileId: string) => Promise<void>;\n\n  /** Callback when a file deletion error occurs */\n  @Prop() readonly fileDeletionErrorCallback?: (data: {\n    fileName: string;\n    error: string;\n  }) => Promise<void>;\n\n  /** Updates current name when file prop changes */\n  @Watch(\"file\")\n  handleFileChange(newFile: FileUploadState) {\n    this.currentName = newFile.name;\n  }\n\n  @State() isEditing: boolean = false;\n  @State() currentName: string;\n\n  /** Emitted when the file name is changed */\n  @Event() fileNameChange: EventEmitter<{ id: string; name: string }>;\n\n  /** Emitted when the file is deleted */\n  @Event() fileDelete: EventEmitter<string>;\n\n  /** Emitted when the file upload is cancelled */\n  @Event() fileCancel: EventEmitter<string>;\n\n  componentWillLoad() {\n    this.currentName = this.file.name;\n  }\n\n  #handleNameChange = (event: ChEditCustomEvent<string> | InputEvent) => {\n    const newName = (event as CustomEvent<string>).detail;\n\n    if (newName && newName !== this.currentName) {\n      this.currentName = newName;\n      this.fileNameChange.emit({\n        id: this.file.id,\n        name: newName\n      });\n    }\n  };\n\n  #handleBlur = () => {\n    this.isEditing = false;\n  };\n\n  /** Handles file deletion */\n  #handleDelete = () => {\n    this.fileDelete.emit(this.file.id);\n  };\n\n  /** Handles upload cancellation */\n  #handleCancelClick = (e: MouseEvent) => {\n    e.preventDefault();\n    this.fileCancel.emit(this.file.id);\n  };\n\n  /** Starts file name editing */\n  #startEditing = () => {\n    if (this.editable) {\n      this.isEditing = true;\n    }\n  };\n\n  render() {\n\n    const displayItemActions = !this.file.pending;\n    const displayProgressContainer = this.file.pending;\n    const labelId = \"progress-label-\" + this.file.id;\n\n    let liAriaLabel: string;\n    if (this.file.pending) {\n      liAriaLabel = this.componentLocale?.fileItem?.uploadingAriaLabel\n        ?.replace(\"{fileName}\", this.currentName)\n        ?.replace(\"{fileProgress}\", this.file.progress.toString()) || this.currentName;\n    } else if (this.file.remoteId) {\n      liAriaLabel = this.componentLocale?.fileItem?.uploadedSuccessfullyAriaLabel\n        ?.replace(\"{fileName}\", this.currentName) || this.currentName;\n    } else {\n      liAriaLabel = this.currentName;\n    }\n\n    return (\n      <li class={{\n        \"file-item\": true,\n        \"file-item--without-actions\": !displayItemActions,\n        \"file-item--with-actions\": displayItemActions\n      }}\n        aria-label={liAriaLabel}\n      >\n\n        <ch-theme model={CSS_BUNDLES}></ch-theme>\n\n        <div class=\"file-item__icon\">\n          <ch-image disabled={!this.file.pending} src={FILE_ICON} class=\"icon-m\" />\n        </div>\n\n        <div class=\"file-item__name\">\n          {this.isEditing ? (\n            <ch-edit\n              accessibleName={this.componentLocale?.fileItem?.editNamePlaceholderAriaLabel\n                ?.replace(\"{fileName}\", this.currentName)}\n              value={this.currentName}\n              autoFocus={true}\n              onInput={this.#handleNameChange}\n              onBlur={this.#handleBlur}\n              class=\"input\"\n              id={labelId}\n            />\n          ) : (\n            <span class=\"label\" id={labelId}>{this.currentName}</span>\n          )}\n        </div>\n\n        {displayItemActions ? (\n          <div class=\"file-item__actions\">\n            {!this.file.pending && this.editable && (\n              <button\n                class=\"button-tertiary button-icon-only\"\n                type=\"button\"\n                onClick={this.#startEditing}\n              >\n                <ch-image src={EDIT_ICON} class=\"icon-m\" />\n              </button>\n            )}\n            {!this.file.pending && (\n              <button\n                class=\"button-tertiary button-icon-only\"\n                type=\"button\"\n                onClick={this.#handleDelete}\n                aria-label=\"Delete file\"\n              >\n                <ch-image src={DELETE_ICON} class=\"icon-m\" />\n              </button>\n            )}\n          </div>\n        ) : (\n          null\n        )}\n\n        {displayProgressContainer && (\n          <div class=\"file-item__progress-container\">\n            <div class=\"file-item__progress-header\">\n              <span class=\"file-item__uploading-text typography-body-italic-s\">\n                Uploading {this.currentName}...\n              </span>\n              <button\n                aria-label={this.componentLocale?.fileItem?.cancelUploadButtonAriaLabel\n                  ?.replace(\"{fileName}\", this.currentName) || \"Cancel upload\"}\n                class=\"button-tertiary button-icon-only file-item__cancel-upload\"\n                type=\"button\"\n                onClick={this.#handleCancelClick}\n              >\n                <ch-image src={CANCEL_ICON} class=\"icon-m\" />\n              </button>\n            </div>\n            <div class=\"file-item__progress-bar\">\n              <progress\n                class=\"elevation-1\"\n                value={this.file.progress}\n                max=\"100\"\n                aria-labelledby={labelId}\n              />\n            </div>\n          </div>\n        )}\n      </li>\n    );\n  }\n}\n"]}

package/dist/collection/components/file-uploader/file-uploader.css

@@ -119,26 +119,22 @@ button.button-secondary {
 }
 
 :host {
-  display: block;
+  display: grid;
   inline-size: 100%;
   block-size: 100%;
-  padding-inline-end: 0 !important;
 }
 
 .file-uploader-dialog {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: 1fr max-content;
   block-size: 100%;
+  min-block-size: 0;
   position: relative;
 }
 .file-uploader-dialog .dialog-content {
-  flex: 1;
   min-block-size: 0;
   overflow: auto;
 }
-.file-uploader-dialog .dialog-footer {
-  padding-inline-end: var(--spacing-body-inline-end);
-}
 
 .file-uploader {
   display: flex;
@@ -156,20 +152,20 @@ button.button-secondary {
   position: sticky;
   top: 0;
   z-index: 1;
-  background-color: var(--color-accent-surface-elevation-1);
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-inline-end: var(--spacing-body-inline-end);
 }
 .file-uploader__list-content {
   flex: 1;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-gap-m);
-  padding-inline-end: var(--spacing-body-inline-end);
-  padding-block-end: 16px;
+  gap: var(--spacing-gap-l);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  padding-block-end: var(--spacing-padding-l);
 }
 .file-uploader__list-title-container {
   display: flex;
@@ -182,11 +178,8 @@ button.button-secondary {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  inline-size: calc(100% - var(--spacing-body-inline-end));
-  block-size: calc(100% - 12px);
-  min-block-size: 200px;
-  margin-block-end: 12px;
-  background: var(--color-accent-surface-elevation-1);
+  inline-size: 100%;
+  block-size: 100%;
   border: 2px dashed var(--color-border-neutral-default);
   border-radius: 8px;
   transition: border-color 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
@@ -204,10 +197,6 @@ button.button-secondary {
   margin-block-start: 8px;
 }
 
-.hidden-input {
-  display: none;
-}
-
 .label-primary-row {
   display: flex;
   align-items: center;

package/dist/collection/components/file-uploader/file-uploader.js

@@ -22,7 +22,7 @@ import { Host, h } from "@stencil/core";
 import { getIconPath } from "@genexus/mercury";
 import { Locale } from "../../common/locale";
 const PLUS_ICON = getIconPath({
-    category: "gemini-tools",
+    category: "system",
     name: "add",
     colorType: "primary"
 });
@@ -310,19 +310,22 @@ export class FileUploader {
         this.fileStates.clear();
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("input", { type: "file", class: "hidden-input", multiple: this.multiple, accept: (_a = this.types) === null || _a === void 0 ? void 0 : _a.map(type => (type.startsWith(".") ? type : `.${type}`)).join(","), onChange: __classPrivateFieldGet(this, _FileUploader_handleFileInput, "f"), ref: el => (__classPrivateFieldSet(this, _FileUploader_fileInputEl, el, "f")), "aria-hidden": "true", tabIndex: -1, style: { display: "none" } }), h("div", { class: "file-uploader-dialog" }, h("div", { class: "dialog-content" }, this.isDragging || this.fileStates.size === 0 ? (h("div", { class: {
-                "file-uploader__drop-zone": true,
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("input", { type: "file", hidden: true, multiple: this.multiple, accept: (_a = this.types) === null || _a === void 0 ? void 0 : _a.map(type => (type.startsWith(".") ? type : `.${type}`)).join(","), onChange: __classPrivateFieldGet(this, _FileUploader_handleFileInput, "f"), ref: el => (__classPrivateFieldSet(this, _FileUploader_fileInputEl, el, "f")), "aria-hidden": "true", tabIndex: -1 }), h("div", { class: "file-uploader-dialog" }, h("div", { class: "dialog-content" }, this.isDragging || this.fileStates.size === 0 ? (h("div", { class: {
+                "file-uploader__drop-zone elevation-1": true,
                 "file-uploader__drop-zone--dragging": this.isDragging
             }, onDragEnter: __classPrivateFieldGet(this, _FileUploader_handleDragEnter, "f"), onDragLeave: __classPrivateFieldGet(this, _FileUploader_handleDragLeave, "f"), onDragOver: __classPrivateFieldGet(this, _FileUploader_handleDragOver, "f"), onDrop: __classPrivateFieldGet(this, _FileUploader_handleDrop, "f") }, h("button", { class: "button-tertiary button-icon-and-text", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleFileSelect, "f") }, h("ch-image", { class: "icon-m", src: PLUS_ICON }), h("label", { class: "label" }, this.multiple
             ? (_b = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _b === void 0 ? void 0 : _b.header.uploadButtonMultiple
             : (_c = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _c === void 0 ? void 0 : _c.header.uploadButtonSingle)), h("div", { class: "text-container" }, h("div", { class: "label-primary-row" }, h("label", { class: "label" }, this.label || ((_d = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _d === void 0 ? void 0 : _d.header.orText)), h("label", { class: "label" }, (_e = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _e === void 0 ? void 0 : _e.header.dragAndDrop)), h("span", { class: "caption" }, this.types && this.types.length > 0
             ? (_f = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _f === void 0 ? void 0 : _f.header.acceptedFiles.replace("{0}", this.types.join(", "))
-            : (_g = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _g === void 0 ? void 0 : _g.header.allFilesAccepted)))) : (h("div", { class: "file-uploader__list" }, h("div", { class: "file-uploader__list-header spacing-body-block-end" }, h("div", { class: "file-uploader__list-title-container" }, h("label", { class: "label" }, this.label ||
+            : (_g = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _g === void 0 ? void 0 : _g.header.allFilesAccepted)))) : (h("div", { class: "file-uploader__list" }, h("div", { class: "file-uploader__list-header elevation-1 spacing-body-block-end spacing-inline-end" }, h("div", { class: "file-uploader__list-title-container" }, h("label", { class: "label" }, this.label ||
             ((_h = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _h === void 0 ? void 0 : _h.fileList.attachedFiles)), h("span", { class: "caption" }, (_j = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _j === void 0 ? void 0 : _j.fileList.filesCount.replace("{0}", this.fileStates.size.toString()))), this.multiple && (h("button", { class: "button-tertiary button-icon-and-text", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleFileSelect, "f") }, h("ch-image", { class: "icon-m", src: PLUS_ICON }), h("label", { class: "label" }, this.multiple
             ? (_k = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _k === void 0 ? void 0 : _k.header.uploadButtonMultiple
-            : (_l = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _l === void 0 ? void 0 : _l.header.uploadButtonSingle)))), h("div", { class: "file-uploader__list-content scrollable" }, Array.from(this.fileStates.values()).map(file => (h("gx-ide-file-item", { key: file.id, file: file, editable: this.canEditName, onFileNameChange: __classPrivateFieldGet(this, _FileUploader_handleNameChange, "f"), onFileDelete: __classPrivateFieldGet(this, _FileUploader_handleFileCancel, "f"), onFileCancel: __classPrivateFieldGet(this, _FileUploader_handleFileCancel, "f") }))))))), h("div", { class: "dialog-footer dialog-footer dialog-footer-with-border" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleCancel, "f") }, (_m = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _m === void 0 ? void 0 : _m.buttons.cancel), h("button", { class: "button-primary", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleConfirm, "f"), disabled: this.fileStates.size === 0 ||
-                Array.from(this.fileStates.values()).some(file => file.pending) }, (_o = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _o === void 0 ? void 0 : _o.buttons.confirm))))));
+            : (_l = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _l === void 0 ? void 0 : _l.header.uploadButtonSingle)))), h("ul", { class: "file-uploader__list-content scrollable spacing-inline-end spacing-block-end", "aria-live": "polite", "aria-label": (_m = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _m === void 0 ? void 0 : _m.fileList.selectedFilesAriaLabel }, Array.from(this.fileStates.values()).map(file => (h("gx-ide-file-item", { key: file.id, file: file, editable: this.canEditName, componentLocale: __classPrivateFieldGet(this, _FileUploader__componentLocale, "f"), onFileNameChange: __classPrivateFieldGet(this, _FileUploader_handleNameChange, "f"), onFileDelete: __classPrivateFieldGet(this, _FileUploader_handleFileCancel, "f"), onFileCancel: __classPrivateFieldGet(this, _FileUploader_handleFileCancel, "f") }))))))), h("div", { class: {
+                "dialog-footer": true,
+                "dialog-footer-with-border": this.fileStates.size > 0
+            } }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-secondary", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleCancel, "f") }, (_o = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _o === void 0 ? void 0 : _o.buttons.cancel), h("button", { class: "button-primary", type: "button", onClick: __classPrivateFieldGet(this, _FileUploader_handleConfirm, "f"), disabled: this.fileStates.size === 0 ||
+                Array.from(this.fileStates.values()).some(file => file.pending) }, (_p = __classPrivateFieldGet(this, _FileUploader__componentLocale, "f")) === null || _p === void 0 ? void 0 : _p.buttons.confirm))))));
     }
     static get is() { return "gx-ide-file-uploader"; }
     static get encapsulation() { return "shadow"; }