@limetech/lime-elements
Version:
275 lines (261 loc) • 10.2 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-2714248e.js';
import { c as createFileInfo, i as isTypeAccepted } from './files-b1cef4e4.js';
import { b as baseForOwn } from './_baseForOwn-a620be1b.js';
import { i as isArrayLike } from './isArrayLike-9bd93a57.js';
import { b as baseIteratee } from './_baseIteratee-b486eb44.js';
import { i as isArray } from './isArray-80298bc7.js';
import { c as createRandomString } from './random-string-355331d3.js';
import './file-metadata-ce643c6e.js';
import './get-icon-props-37514418.js';
import './_baseIsEqual-bbfd3091.js';
import './eq-8014c26f.js';
import './_getTag-c1badd82.js';
import './isObject-c74e273c.js';
import './isObjectLike-38996507.js';
import './_getNative-4a92ccb2.js';
import './isFunction-2461489d.js';
import './_isIndex-6de44c7b.js';
import './isSymbol-5bf20921.js';
import './identity-87aa3962.js';
/**
* A specialized version of `baseAggregator` for arrays.
*
* @private
* @param {Array} [array] The array to iterate over.
* @param {Function} setter The function to set `accumulator` values.
* @param {Function} iteratee The iteratee to transform keys.
* @param {Object} accumulator The initial aggregated object.
* @returns {Function} Returns `accumulator`.
*/
function arrayAggregator(array, setter, iteratee, accumulator) {
var index = -1,
length = array == null ? 0 : array.length;
while (++index < length) {
var value = array[index];
setter(accumulator, value, iteratee(value), array);
}
return accumulator;
}
/**
* Creates a `baseEach` or `baseEachRight` function.
*
* @private
* @param {Function} eachFunc The function to iterate over a collection.
* @param {boolean} [fromRight] Specify iterating from right to left.
* @returns {Function} Returns the new base function.
*/
function createBaseEach(eachFunc, fromRight) {
return function(collection, iteratee) {
if (collection == null) {
return collection;
}
if (!isArrayLike(collection)) {
return eachFunc(collection, iteratee);
}
var length = collection.length,
index = fromRight ? length : -1,
iterable = Object(collection);
while ((fromRight ? index-- : ++index < length)) {
if (iteratee(iterable[index], index, iterable) === false) {
break;
}
}
return collection;
};
}
/**
* The base implementation of `_.forEach` without support for iteratee shorthands.
*
* @private
* @param {Array|Object} collection The collection to iterate over.
* @param {Function} iteratee The function invoked per iteration.
* @returns {Array|Object} Returns `collection`.
*/
var baseEach = createBaseEach(baseForOwn);
/**
* Aggregates elements of `collection` on `accumulator` with keys transformed
* by `iteratee` and values set by `setter`.
*
* @private
* @param {Array|Object} collection The collection to iterate over.
* @param {Function} setter The function to set `accumulator` values.
* @param {Function} iteratee The iteratee to transform keys.
* @param {Object} accumulator The initial aggregated object.
* @returns {Function} Returns `accumulator`.
*/
function baseAggregator(collection, setter, iteratee, accumulator) {
baseEach(collection, function(value, key, collection) {
setter(accumulator, value, iteratee(value), collection);
});
return accumulator;
}
/**
* Creates a function like `_.groupBy`.
*
* @private
* @param {Function} setter The function to set accumulator values.
* @param {Function} [initializer] The accumulator object initializer.
* @returns {Function} Returns the new aggregator function.
*/
function createAggregator(setter, initializer) {
return function(collection, iteratee) {
var func = isArray(collection) ? arrayAggregator : baseAggregator,
accumulator = initializer ? initializer() : {};
return func(collection, setter, baseIteratee(iteratee), accumulator);
};
}
/**
* Creates an array of elements split into two groups, the first of which
* contains elements `predicate` returns truthy for, the second of which
* contains elements `predicate` returns falsey for. The predicate is
* invoked with one argument: (value).
*
* @static
* @memberOf _
* @since 3.0.0
* @category Collection
* @param {Array|Object} collection The collection to iterate over.
* @param {Function} [predicate=_.identity] The function invoked per iteration.
* @returns {Array} Returns the array of grouped elements.
* @example
*
* var users = [
* { 'user': 'barney', 'age': 36, 'active': false },
* { 'user': 'fred', 'age': 40, 'active': true },
* { 'user': 'pebbles', 'age': 1, 'active': false }
* ];
*
* _.partition(users, function(o) { return o.active; });
* // => objects for [['fred'], ['barney', 'pebbles']]
*
* // The `_.matches` iteratee shorthand.
* _.partition(users, { 'age': 1, 'active': false });
* // => objects for [['pebbles'], ['barney', 'fred']]
*
* // The `_.matchesProperty` iteratee shorthand.
* _.partition(users, ['active', false]);
* // => objects for [['barney', 'pebbles'], ['fred']]
*
* // The `_.property` iteratee shorthand.
* _.partition(users, 'active');
* // => objects for [['fred'], ['barney', 'pebbles']]
*/
var partition = createAggregator(function(result, value, key) {
result[key ? 0 : 1].push(value);
}, function() { return [[], []]; });
const fileDropzoneCss = ":host(limel-file-dropzone){display:block;position:relative}.has-file-to-drop{animation:display-drop-zone 0.6s ease forwards;box-sizing:border-box;isolation:isolate;z-index:1;position:absolute;inset:0.25rem;overflow:hidden;display:flex;justify-content:center;align-items:center;gap:0.5rem;color:rgb(var(--contrast-700));border:0.125rem dashed rgb(var(--color-cyan-light));border-radius:0.75rem}.text-helpertext{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.icon{width:clamp(2rem, 5vh, 7rem)}.text{font-size:clamp(1rem, 2vh, 1.75rem)}.helper-text{font-size:clamp(0.75rem, 1.5vh, 1rem)}@keyframes display-drop-zone{0%{background-color:rgb(var(--contrast-1100), 0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);scale:0.9;opacity:0}50%{scale:1;opacity:1}100%{background-color:rgb(var(--contrast-1100), 0.8);backdrop-filter:blur(0.25rem);-webkit-backdrop-filter:blur(0.25rem)}}";
const FileDropzone = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.filesSelected = createEvent(this, "filesSelected", 7);
this.filesRejected = createEvent(this, "filesRejected", 7);
this.renderOnDragLayout = () => {
if (this.disabled || !this.hasFileToDrop) {
return;
}
return (h("div", { class: "has-file-to-drop" }, h("limel-icon", { class: "icon", name: "upload_2" }), h("div", { class: "text-helpertext" }, this.renderText(), this.renderHelperText())));
};
this.renderText = () => {
if (!this.text) {
return;
}
return h("span", { class: "text" }, this.text);
};
this.renderHelperText = () => {
if (!this.helperText) {
return;
}
return h("span", { class: "helper-text" }, this.helperText);
};
this.handleDrop = (event) => {
event.stopPropagation();
event.preventDefault();
this.hasFileToDrop = false;
if (this.disabled) {
return;
}
const files = [...event.dataTransfer.files];
const fileInfos = files.map(createFileInfo);
const [acceptedFileInfos, rejectedFileInfos] = partition(fileInfos, (file) => isTypeAccepted(file, this.accept));
if (acceptedFileInfos.length > 0) {
this.filesSelected.emit(acceptedFileInfos);
}
if (rejectedFileInfos.length > 0) {
this.filesRejected.emit(rejectedFileInfos);
}
};
this.handleDragOver = (event) => {
this.hasFileToDrop = true;
event.preventDefault();
};
this.handleDragLeave = (event) => {
this.hasFileToDrop = false;
event.preventDefault();
};
this.accept = '*';
this.disabled = false;
this.text = undefined;
this.helperText = '';
this.hasFileToDrop = false;
}
render() {
return (h(Host, { onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", null), this.renderOnDragLayout()));
}
};
FileDropzone.style = fileDropzoneCss;
const FileInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.filesSelected = createEvent(this, "filesSelected", 7);
this.fileInputId = createRandomString();
this.handleClick = (event) => {
if (this.disabled) {
event.stopPropagation();
event.preventDefault();
return;
}
this.triggerFileDialog();
event.stopPropagation();
};
this.handleKeyUp = (event) => {
event.stopPropagation();
event.preventDefault();
if (event.code === 'Enter') {
this.triggerFileDialog();
}
};
this.handleFileChange = (event) => {
const files = [...this.fileInput.files];
if (files.length > 0) {
event.stopPropagation();
this.filesSelected.emit(files.map(createFileInfo));
this.fileInput.value = '';
}
};
this.accept = '*';
this.disabled = false;
this.multiple = false;
}
componentDidLoad() {
// eslint-disable-next-line unicorn/prefer-query-selector
this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
}
render() {
return (h(Host, { onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", null)));
}
handleKeyDown(event) {
if (event.code === 'Tab' ||
event.code === 'Backspace' ||
event.code === 'Enter') {
return;
}
event.preventDefault();
event.stopPropagation();
}
triggerFileDialog() {
this.fileInput.click();
}
get element() { return getElement(this); }
};
export { FileDropzone as limel_file_dropzone, FileInput as limel_file_input };
//# sourceMappingURL=limel-file-dropzone_2.entry.js.map