@limetech/lime-elements
Version:
103 lines (99 loc) • 4.82 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host } from './index-DBTJNfo7.js';
import { t as translate } from './translations-DVRaJQvC.js';
import { g as getFileBackgroundColor, a as getFileColor, b as getFileExtensionTitle, c as getFileIcon } from './file-metadata-BwF9vTXN.js';
import './get-icon-props-CgNJbSP4.js';
const fileCss = () => ` "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");
this.interact = createEvent(this, "interact");
/**
* Set to `true` to indicate that the field is required.
*/
this.required = false;
/**
* True if the input should be disabled
*/
this.disabled = false;
/**
* Set to `true` to disable adding and removing files, but allow interaction
* with any already existing file.
*/
this.readonly = false;
/**
* Set to `true` to indicate that the current value of the chosen file is
* invalid.
*/
this.invalid = false;
/**
* The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)
*/
this.accept = '*';
/**
* Defines the localisation for translations.
*/
this.language = 'en';
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);
};
}
render() {
return (h(Host, { key: '4b91f02cff596bca5da1a635ce24d2bb8a5154e1' }, h("limel-file-dropzone", { key: 'c3636964ee41bd5396fe667cc983a74256845af5', 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 };