@genexus/genexus-ide-ui 3.0.1 → 3.1.0

package/dist/genexus-ide-ui/p-f3c3e830.entry.js

@@ -1,163 +0,0 @@
-import { r as e, c as i, h as t } from "./p-9b9ccd0c.js";
-
-import { g as s } from "./p-d42e842b.js";
-
-import "./p-6534555e.js";
-
-import "lit";
-
-import "lit/directives/when.js";
-
-import "lit/directives/if-defined.js";
-
-const r = ":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);align-items:center;border:1px solid var(--mer-border__default);border-radius:4px}.file-item__icon{display:flex;align-items:center}.file-item__name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;inline-size:100%;font-weight:var(--font-style-regular)}.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{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__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)}.file-item__progress-header{display:flex;justify-content:space-between;align-items:center;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;border:none;border-radius:4px;overflow:hidden}.file-item__progress-bar progress::-webkit-progress-bar{background-color:transparent}.file-item__progress-bar progress::-webkit-progress-value{background-color:var(--color-accent-primary-default)}.file-item__progress-bar progress::-moz-progress-bar{background-color:var(--color-accent-primary-default)}";
-
-var o = undefined && undefined.__classPrivateFieldGet || function(e, i, t, s) {
-  if (t === "a" && !s) throw new TypeError("Private accessor was defined without a getter");
-  if (typeof i === "function" ? e !== i || !s : !i.has(e)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-  return t === "m" ? s : t === "a" ? s.call(e) : s ? s.value : i.get(e);
-};
-
-var a, n, l, c, p;
-
-const d = s({
-  category: "gemini-tools",
-  name: "file",
-  colorType: "primary"
-});
-
-const f = s({
-  category: "gemini-tools",
-  name: "edit",
-  colorType: "primary"
-});
-
-const m = s({
-  category: "gemini-tools",
-  name: "delete",
-  colorType: "primary"
-});
-
-const h = s({
-  category: "gemini-tools",
-  name: "close",
-  colorType: "primary"
-});
-
-const g = [ "resets/box-sizing", "components/button", "components/icon", "components/edit", "utils/typography", "utils/spacing", "utils/form", "utils/layout", "utils/elevation" ];
-
-const u = class {
-  constructor(t) {
-    e(this, t);
-    this.fileNameChange = i(this, "fileNameChange", 7);
-    this.fileDelete = i(this, "fileDelete", 7);
-    this.fileCancel = i(this, "fileCancel", 7);
-    a.set(this, (e => {
-      const i = e.detail;
-      if (i && i !== this.currentName) {
-        this.currentName = i;
-        this.fileNameChange.emit({
-          id: this.file.id,
-          name: i
-        });
-      }
-    }));
-    n.set(this, (() => {
-      this.isEditing = false;
-    }));
-    /** Handles file deletion */    l.set(this, (() => {
-      this.fileDelete.emit(this.file.id);
-    }));
-    /** Handles upload cancellation */    c.set(this, (e => {
-      e.preventDefault();
-      this.fileCancel.emit(this.file.id);
-    }));
-    /** Starts file name editing */    p.set(this, (() => {
-      if (this.editable) {
-        this.isEditing = true;
-      }
-    }));
-    this.file = undefined;
-    this.editable = false;
-    this.fileDeletedCallback = undefined;
-    this.fileDeletionErrorCallback = undefined;
-    this.isEditing = false;
-    this.currentName = undefined;
-  }
-  /** Updates current name when file prop changes */  handleFileChange(e) {
-    this.currentName = e.name;
-  }
-  componentWillLoad() {
-    this.currentName = this.file.name;
-  }
-  render() {
-    return t("div", {
-      class: "file-item"
-    }, t("ch-theme", {
-      model: g
-    }), t("div", {
-      class: "file-item__icon"
-    }, t("ch-image", {
-      src: d,
-      class: "icon-m"
-    })), t("div", {
-      class: "file-item__name"
-    }, this.isEditing ? t("ch-edit", {
-      value: this.currentName,
-      autoFocus: true,
-      onInput: o(this, a, "f"),
-      onBlur: o(this, n, "f"),
-      class: "input"
-    }) : t("label", {
-      class: "label"
-    }, this.currentName)), t("div", {
-      class: "file-item__actions"
-    }, !this.file.pending && this.editable && t("button", {
-      class: "button-tertiary button-icon-only",
-      type: "button",
-      onClick: o(this, p, "f")
-    }, t("ch-image", {
-      src: f,
-      class: "icon-m"
-    })), !this.file.pending && t("button", {
-      class: "button-tertiary button-icon-only",
-      type: "button",
-      onClick: o(this, l, "f"),
-      "aria-label": "Delete file"
-    }, t("ch-image", {
-      src: m,
-      class: "icon-m"
-    }))), this.file.pending && t("div", {
-      class: "file-item__progress-container"
-    }, t("div", {
-      class: "file-item__progress-header"
-    }, t("span", {
-      class: "file-item__uploading-text"
-    }, "Uploading ", this.currentName, "..."), t("button", {
-      class: "button-tertiary button-icon-only",
-      type: "button",
-      onClick: o(this, c, "f")
-    }, t("ch-image", {
-      src: h,
-      class: "icon-m"
-    }))), t("div", {
-      class: "file-item__progress-bar"
-    }, t("progress", {
-      class: "elevation-1",
-      value: this.file.progress,
-      max: "100"
-    }))));
-  }
-  static get watchers() {
-    return {
-      file: [ "handleFileChange" ]
-    };
-  }
-};
-
-a = new WeakMap, n = new WeakMap, l = new WeakMap, c = new WeakMap, p = new WeakMap;
-
-u.style = r;
-
-export { u as gx_ide_file_item };
-//# sourceMappingURL=p-f3c3e830.entry.js.map

package/dist/genexus-ide-ui/p-f3c3e830.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["fileItemCss","FILE_ICON","getIconPath","category","name","colorType","EDIT_ICON","DELETE_ICON","CANCEL_ICON","CSS_BUNDLES","FileItem","_FileItem_handleNameChange","set","this","event","newName","detail","currentName","fileNameChange","emit","id","file","_FileItem_handleBlur","isEditing","_FileItem_handleDelete","fileDelete","_FileItem_handleCancelClick","e","preventDefault","fileCancel","_FileItem_startEditing","editable","handleFileChange","newFile","componentWillLoad","render","h","class","model","src","value","autoFocus","onInput","__classPrivateFieldGet","onBlur","pending","type","onClick","progress","max"],"sources":["src/components/file-uploader/file-item/file-item.scss?tag=gx-ide-file-item&encapsulation=shadow","src/components/file-uploader/file-item/file-item.tsx"],"sourcesContent":["@import \"../../../global/gx-ide-mixins.scss\";\n\n:host {\n  display: block;\n  inline-size: 100%;\n}\n\n.file-item {\n  display: grid;\n  grid-template-columns: auto 1fr auto;\n  grid-template-rows: auto;\n  gap: var(--spacing-gap-l);\n  align-items: center;\n  border: 1px solid var(--mer-border__default);\n  border-radius: 4px;\n\n  &__icon {\n    display: flex;\n    align-items: center;\n  }\n\n  &__name {\n    @include ellipsis;\n    inline-size: 100%;\n    font-weight: var(--font-style-regular);\n\n    ch-edit {\n      @include ellipsis;\n      inline-size: 100%;\n      font-weight: var(--font-style-regular);\n    }\n\n    .label {\n      @include ellipsis;\n      inline-size: 100%;\n      font-weight: var(--font-style-regular);\n    }\n  }\n\n  &__actions {\n    display: flex;\n    gap: var(--spacing-gap-m);\n\n    button {\n      &:active,\n      &:focus,\n      &:hover {\n        background-color: var(--mer-surface__hover);\n      }\n\n      &:active {\n        background-color: var(--mer-surface__pressed);\n      }\n    }\n  }\n\n  &__progress-container {\n    grid-column: 1 / -1;\n    display: flex;\n    flex-direction: column;\n    gap: var(--spacing-gap-xs);\n    inline-size: 100%;\n    border: 2px dashed var(--color-border-neutral-default);\n    border-radius: 8px;\n    padding: var(--spacing-padding-l);\n  }\n\n  &__progress-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: var(--spacing-gap-l);\n  }\n\n  &__uploading-text {\n    font-style: italic;\n    color: var(--color-text-neutral-disabled);\n    @include ellipsis;\n    max-inline-size: calc(100% - 40px);\n  }\n\n  &__progress-bar {\n    inline-size: 100%;\n\n    progress {\n      inline-size: 100%;\n      height: 8px;\n      border: none;\n      border-radius: 4px;\n      overflow: hidden;\n\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }\n\n      &::-webkit-progress-value {\n        background-color: var(--color-accent-primary-default);\n      }\n\n      &::-moz-progress-bar {\n        background-color: var(--color-accent-primary-default);\n      }\n    }\n  }\n}\n","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"],"mappings":";;;;;;;;;;;;AAAA,MAAMA,IAAc;;;;;;;;;;ACapB,MAAMC,IAAYC,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMC,IAAYJ,EAAY;EAC5BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAME,IAAcL,EAAY;EAC9BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMG,IAAcN,EAAY;EAC9BC,UAAU;EACVC,MAAM;EACNC,WAAW;;;AAGb,MAAMI,IAA8B,EAClC,qBACA,qBACA,mBACA,mBACA,oBACA,iBACA,cACA,gBACA;;MAQWC,IAAQ;;;;;;IAsCnBC,EAAAC,IAAAC,OAAqBC;MACnB,MAAMC,IAAWD,EAA8BE;MAE/C,IAAID,KAAWA,MAAYF,KAAKI,aAAa;QAC3CJ,KAAKI,cAAcF;QACnBF,KAAKK,eAAeC,KAAK;UACvBC,IAAIP,KAAKQ,KAAKD;UACdhB,MAAMW;;;;IAKZO,EAAAV,IAAAC,OAAc;MACZA,KAAKU,YAAY;AAAK;oCAIxBC,EAAAZ,IAAAC,OAAgB;MACdA,KAAKY,WAAWN,KAAKN,KAAKQ,KAAKD;AAAG;0CAIpCM,EAAAd,IAAAC,OAAsBc;MACpBA,EAAEC;MACFf,KAAKgB,WAAWV,KAAKN,KAAKQ,KAAKD;AAAG;uCAIpCU,EAAAlB,IAAAC,OAAgB;MACd,IAAIA,KAAKkB,UAAU;QACjBlB,KAAKU,YAAY;;;;oBA/DgB;;;qBAiBP;;;sDAJ9B,gBAAAS,CAAiBC;IACfpB,KAAKI,cAAcgB,EAAQ7B;;EAe7B,iBAAA8B;IACErB,KAAKI,cAAcJ,KAAKQ,KAAKjB;;EAqC/B,MAAA+B;IACE,OACEC,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAUE,OAAO7B;QACjB2B,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAUG,KAAKtC;MAAWoC,OAAM;SAGlCD,EAAA;MAAKC,OAAM;OACRxB,KAAKU,YACJa,EAAA;MACEI,OAAO3B,KAAKI;MACZwB,WAAW;MACXC,SAASC,EAAA9B,MAAIF,GAAA;MACbiC,QAAQD,EAAA9B,MAAIS,GAAA;MACZe,OAAM;SAGRD,EAAA;MAAOC,OAAM;OAASxB,KAAKI,eAI/BmB,EAAA;MAAKC,OAAM;QACPxB,KAAKQ,KAAKwB,WAAWhC,KAAKkB,YAC1BK,EAAA;MACEC,OAAM;MACNS,MAAK;MACLC,SAASJ,EAAA9B,MAAIiB,GAAA;OAEbM,EAAA;MAAUG,KAAKjC;MAAW+B,OAAM;UAGlCxB,KAAKQ,KAAKwB,WACVT,EAAA;MACEC,OAAM;MACNS,MAAK;MACLC,SAASJ,EAAA9B,MAAIW,GAAA;MAAc,cAChB;OAEXY,EAAA;MAAUG,KAAKhC;MAAa8B,OAAM;UAKvCxB,KAAKQ,KAAKwB,WACTT,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAKC,OAAM;OACTD,EAAA;MAAMC,OAAM;OAA2B,cAC1BxB,KAAKI,aAAW,QAE7BmB,EAAA;MACEC,OAAM;MACNS,MAAK;MACLC,SAASJ,EAAA9B,MAAIa,GAAA;OAEbU,EAAA;MAAUG,KAAK/B;MAAa6B,OAAM;UAGtCD,EAAA;MAAKC,OAAM;OACTD,EAAA;MACEC,OAAM;MACNG,OAAO3B,KAAKQ,KAAK2B;MACjBC,KAAI"}