import { r as registerInstance, c as createEvent, h, g as getElement } from './index-baa5e267.js';
import { StringUtils, ElementIDUtils } from '@sankhyalabs/core';
import { i as initI18n } from './index-41363fa6.js';

const ezFileItemCss = ":host{display:flex;width:100%;--ez-file-item--height:42px;--ez-file-item--padding:9px;--ez-file-item--border-radius:var(--border--radius-medium, 12px);--ez-file-item--border-color:var(--color--strokes, #DCE0E8);--ez-file-item--border-style:var(--border--small, 1px solid);--ez-file-item--font-family:var(--font-pattern, Arial);--ez-file-item--font-size:var(--text--medium, 14px);--ez-file-item--font-weight:var(--text-weight--medium, 400);--ez-file-item--color:var(--title--primary, #2B3A54);--ez-file-item__file-size--font-weight:var(--text-weight--large, 600);--ez-file-item__file-size--color:var(--color--primary, #008561);--ez-file-item__background-progress--color:var(--color--primary-300, E2F4EF);--ez-file-item--icon-color:var(--title--primary, #2B3A54)}.box{display:flex;box-sizing:border-box;position:relative;align-items:center;justify-content:space-between;width:100%;padding:var(--ez-file-item--padding);border:var(--ez-file-item--border-color) var(--ez-file-item--border-style);border-radius:var(--ez-file-item--border-radius);height:var(--ez-file-item--height)}.box::before{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;clip-path:inset(2px calc(var(--ez-file-item--upload-progress, 0%) + 2px) 2px 2px round calc(var(--ez-file-item--border-radius) - 4px));background-color:var(--ez-file-item__background-progress--color)}.content{display:flex;align-items:center;z-index:0;overflow:hidden}.file-name{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item--font-weight);color:var(--ez-file-item--color)}.file-type-icon{flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color);padding-right:var(--ez-file-item--padding)}.file-size{padding-left:2px;overflow:hidden;flex-shrink:0;white-space:nowrap;font-family:var(--ez-file-item--font-family);font-size:var(--ez-file-item--font-size);font-weight:var(--ez-file-item__file-size--font-weight);color:var(--ez-file-item__file-size--color)}.btn-remove{cursor:pointer;flex-shrink:0;--ez-icon--color:var(--ez-file-item--icon-color)}";

const EzFileItem = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.ezClick = createEvent(this, "ezClick", 7);
    this.ezRemove = createEvent(this, "ezRemove", 7);
    this.canRemove = true;
    this.fileName = undefined;
    this.iconName = undefined;
    this.fileSize = undefined;
    this.progress = 100;
  }
  observeProgress(newProgress) {
    if (newProgress < 0 || newProgress > 100) {
      throw new Error(this.i18n("ez-file-item.invalidProgress"));
    }
    this._element.style.setProperty("--ez-file-item--upload-progress", `${100 - newProgress}%`);
  }
  getFileSize() {
    if (!this.fileSize || this.fileSize === 0) {
      return "";
    }
    return `(${StringUtils.formatBytes(this.fileSize)})`;
  }
  getIconName() {
    let extension;
    if (this.iconName) {
      return this.iconName;
    }
    if (this.fileName.indexOf(".") > -1) {
      const index = this.fileName.lastIndexOf(".");
      extension = this.fileName.substring(index);
    }
    return FILE_TYPE_ICONS[extension] || DEFAULT_FILE_TYPE_ICON;
  }
  async componentWillLoad() {
    this.i18n = await initI18n();
  }
  render() {
    this._element.title = `${this.fileName} ${this.getFileSize()}`;
    ElementIDUtils.addIDInfoIfNotExists(this._element, 'ezFileIcon');
    return (h("div", { class: "box", onClick: () => this.ezClick.emit(this.fileName) }, h("div", { class: "content" }, h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("fileIcon"), class: "file-type-icon", size: "medium", "icon-name": this.getIconName() }), h("label", { class: "file-name" }, this.fileName), h("label", { class: "file-size" }, this.getFileSize())), this.canRemove ? (h("ez-icon", { "data-element-id": ElementIDUtils.getInternalIDInfo("remove"), class: "btn-remove", size: "medium", "icon-name": "close", title: this.i18n("app.remove"), onClick: evt => {
        this.ezRemove.emit(this.fileName);
        evt.stopPropagation();
      } })) : undefined));
  }
  get _element() { return getElement(this); }
  static get watchers() { return {
    "progress": ["observeProgress"]
  }; }
};
const FILE_TYPE_ICONS = {
  ".exe": "exe",
  ".gif": "gif",
  ".mp3": "mp3",
  ".mp4": "mp4",
  ".pdf": "pdf",
  ".png": "png",
  ".txt": "txt",
  ".zip": "zip",
  ".docx": "docx",
  ".xlsx": "xlsx",
  ".pptx": "pptx"
};
const DEFAULT_FILE_TYPE_ICON = "generic";
EzFileItem.style = ezFileItemCss;

export { EzFileItem as ez_file_item };
