@genexus/genexus-ide-ui 3.0.2 → 3.1.1

package/dist/collection/collection-manifest.json

@@ -41,6 +41,7 @@
     "components/_helpers/progress-bar/progress-bar.js",
     "components/references/references.js",
     "components/restore-version/restore-version.js",
+    "components/search/search.js",
     "components/select-kb-items/select-kb-items.js",
     "components/select-user-team/select-user-team.js",
     "components/team-dev/share-kb/share-kb.js",
@@ -63,6 +64,7 @@
     "components/ww-images/ww-images.js",
     "components/_helpers/empty-state/gx-ide-empty-state.js",
     "components/_helpers/entity-selector/entity-selector.js",
+    "components/_helpers/multi-select/gx-ide-multi-select.js",
     "components/_helpers/status-buttons/gx-ide-status-buttons.js",
     "components/_test/test.js",
     "components/breadcrumb/breadcrumb.js",

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

@@ -0,0 +1,193 @@
+/* - - - - - - - - - - - - - - - - -
+New classes for Chameleon + Mercury
+- - - - - - - - - - - - - - - - - */
+:host {
+  display: grid;
+  block-size: 100%;
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.gxi-hidden {
+  display: none !important;
+}
+
+.align-center {
+  display: flex;
+  align-items: center;
+}
+
+.align-end {
+  display: flex;
+  align-items: end;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
+:host(.gx-ide-component) {
+  height: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
+.gx-ide-main-wrapper {
+  color: var(--gx-ide-component-text-color);
+  font-weight: var(--font-style-regular);
+  font-size: var(--font-size-body-m);
+  font-family: var(--font-family-body);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  box-sizing: border-box;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+New : For Mercury
+- - - - - - - - - - - - - - - - - - */
+.buttons-container {
+  display: flex;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Pill
+- - - - - - - - - - - - - - - - - - */
+.giu-static-pill-icon-and-text, .giu-static-pill {
+  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));
+  padding-inline: var(--spacing-padding-m);
+  color: var(--color-text-neutral-default);
+  font-size: var(--font-size-body-s);
+  line-height: var(--line-height-relaxed);
+  font-weight: var(--font-style-regular);
+  border-radius: 4px;
+  min-block-size: 25px;
+  display: inline-grid;
+  align-items: center;
+  pointer-events: none;
+  inline-size: max-content;
+}
+
+.giu-static-pill-icon-and-text {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+  gap: var(--spacing-gap-m);
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tab
+- - - - - - - - - - - - - - - - - - */
+.tab-full-width-buttons::part(tab-list block-start),
+.tab-full-width-buttons::part(tab-list block-end) {
+  grid-auto-columns: 1fr;
+}
+
+.tab-full-width-buttons::part(tab block-start) {
+  justify-content: center;
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tree
+- - - - - - - - - - - - - - - - - - */
+/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as "enabled", even if it is disabled. */
+.tree-view::part(item__header) {
+  --icon__system_warning_warning--disabled: var(
+    --icon__system_warning_warning--enabled
+  );
+}
+
+/* - - - - - - - - - - - - - - - - - -
+Tabular Grid
+- - - - - - - - - - - - - - - - - - */
+.tabular-grid {
+  --focus-outline-width: 1px;
+}
+
+ch-popover {
+  background-color: var(--color-accent-surface-elevation-1);
+  border: 1px solid var(--color-border-surface-on-surface);
+  border-radius: var(--border-radius-s);
+  box-shadow: var(--shadow-elevation-2);
+}
+ch-popover > div {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: var(--spacing-padding-m);
+  max-block-size: 300px;
+  overflow-y: auto;
+}
+
+.checkbox-item {
+  display: flex;
+  inline-size: 100%;
+  padding-block: var(--spacing-padding-xs);
+  padding-inline: var(--spacing-padding-m);
+  cursor: pointer;
+  border-radius: var(--border-radius-s);
+}
+.checkbox-item:hover {
+  background-color: var(--color-accent-item-selected);
+}
+.checkbox-item::part(checkbox) {
+  inline-size: 100%;
+}
+.checkbox-item::part(label) {
+  inline-size: 100%;
+  cursor: pointer;
+  flex: 1;
+}
+
+.multi-select__button {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-gap-s);
+  overflow: hidden;
+}
+.multi-select__chevron {
+  flex-shrink: 0;
+  margin-inline-start: auto;
+}
+.multi-select__placeholder {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.multi-select__items {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-gap-xs);
+  flex: 1;
+  align-items: center;
+}
+.multi-select__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-xs);
+  padding: 2px var(--spacing-padding-xs);
+  background-color: var(--color-accent-item-pressed);
+  border-radius: var(--border-radius-s);
+}
+.multi-select__item button {
+  padding: 0;
+}
+.multi-select__caption {
+  color: var(--color-text-neutral-on-disabled);
+}
+.multi-select__close {
+  padding: 0;
+  margin: 0;
+}
+
+ch-checkbox.checkbox::part(label) {
+  font-weight: var(--font-style-regular);
+  color: var(--color-text-neutral-default);
+}

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,