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

Lime Elements

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-174a078a.js');
const translations = require('./translations-d2be6dd7.js');
const fileMetadata = require('./file-metadata-8b0b9ea3.js');
require('./get-icon-props-65f39e40.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) {
    index.registerInstance(this, hostRef);
    this.change = index.createEvent(this, "change", 7);
    this.interact = index.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 [
      index.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 (index.h("div", { class: "drag-and-drop-tip" }, index.h("span", { class: "invisible-label-mock", role: "presentation" }, this.label), index.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: fileMetadata.getFileIcon(this.value),
          title: fileMetadata.getFileExtensionTitle(this.value),
          color: fileMetadata.getFileColor(this.value),
          backgroundColor: fileMetadata.getFileBackgroundColor(this.value),
        }, href: this.value.href, menuItems: this.value.menuItems }),
    ];
  }
  renderChipset() {
    const chipset = (index.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 (index.h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
  }
  preventAndStop(event) {
    event.stopPropagation();
    event.preventDefault();
  }
  getTranslation(key) {
    return translations.translate.get(key, this.language);
  }
};
File.style = fileCss;

exports.limel_file = File;

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