@limetech/lime-elements/dist/esm/limel-file.entry.js

Lime Elements

import { r as registerInstance, c as createEvent, h } from './index-2714248e.js';
import { t as translate } from './translations-91c611da.js';
import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-ce643c6e.js';
import './get-icon-props-37514418.js';

const fileCss = "@charset \"UTF-8\";:host(limel-file){position:relative}.drag-and-drop-tip{pointer-events:none;position:absolute;box-sizing:border-box;margin:0.25rem;inset:0;display:flex;align-items:center;justify-content:flex-end;flex-wrap:nowrap;border-radius:0.25rem;border:1px dashed rgb(var(--contrast-700));padding:0 0.5rem}.drag-and-drop-tip .invisible-label-mock{flex-shrink:0;opacity:0;padding-right:1rem;padding-left:1.5rem}.drag-and-drop-tip .tip{font-size:smaller;color:var(--limel-theme-text-secondary-on-background-color);height:auto;max-height:3rem;line-height:1;display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}";

const DEFAULT_FILE_CHIP = {
  id: null,
  text: null,
  removable: true,
};
const File = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.change = createEvent(this, "change", 7);
    this.interact = createEvent(this, "interact", 7);
    this.dropZoneTip = () => {
      return this.getTranslation('file.drag-and-drop-tips');
    };
    this.handleNewFiles = (event) => {
      this.preventAndStop(event);
      this.change.emit(event.detail[0]);
    };
    this.handleChipSetChange = (event) => {
      event.stopPropagation();
      const file = event.detail.length === 0 ? event.detail[0] : null;
      if (!file) {
        this.change.emit(file);
      }
    };
    this.handleChipInteract = (event) => {
      this.preventAndStop(event);
      this.interact.emit(event.detail.id);
    };
    this.value = undefined;
    this.label = undefined;
    this.required = false;
    this.disabled = false;
    this.readonly = false;
    this.invalid = false;
    this.accept = '*';
    this.language = 'en';
  }
  render() {
    return [
      h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()),
      this.renderDragAndDropTip(),
    ];
  }
  renderDragAndDropTip() {
    if (this.value || this.disabled || this.readonly) {
      return;
    }
    return (h("div", { class: "drag-and-drop-tip" }, h("span", { class: "invisible-label-mock", role: "presentation" }, this.label), h("span", { class: "tip" }, this.dropZoneTip())));
  }
  getChipArray() {
    if (!this.value) {
      return [];
    }
    return [
      Object.assign(Object.assign({}, DEFAULT_FILE_CHIP), { text: this.value.filename, id: this.value.id, icon: {
          name: getFileIcon(this.value),
          title: getFileExtensionTitle(this.value),
          color: getFileColor(this.value),
          backgroundColor: getFileBackgroundColor(this.value),
        }, href: this.value.href, menuItems: this.value.menuItems }),
    ];
  }
  renderChipset() {
    const chipset = (h("limel-chip-set", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onInteract: this.handleChipInteract, required: this.required, type: "input", value: this.getChipArray() }));
    if (this.value) {
      return chipset;
    }
    return (h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
  }
  preventAndStop(event) {
    event.stopPropagation();
    event.preventDefault();
  }
  getTranslation(key) {
    return translate.get(key, this.language);
  }
};
File.style = fileCss;

export { File as limel_file };

//# sourceMappingURL=limel-file.entry.js.map