@limetech/lime-elements
Version:
308 lines (294 loc) • 12.5 kB
JavaScript
import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DBTJNfo7.js';
import { c as createFileInfo, i as isTypeAccepted } from './files-P324wLau.js';
import { b as baseForOwn } from './_baseForOwn-ByPjzJ4R.js';
import { b as isArrayLike } from './isArrayLike-bWHU4ebg.js';
import { b as baseIteratee } from './_baseIteratee-1mEitKxK.js';
import { i as isArray } from './isArray-B8VKuhvH.js';
import { c as createRandomString } from './random-string-JbKhhoXs.js';
import './file-metadata-BwF9vTXN.js';
import './get-icon-props-CgNJbSP4.js';
import './_baseIsEqual-DEKrwcEh.js';
import './eq-D7VMHFyO.js';
import './isObject-BJQylLSL.js';
import './_getNative-aN4R8EiP.js';
import './isObjectLike-oiMYqRQ0.js';
import './isSymbol-ClAke5ga.js';
import './identity-CK4jS9_E.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 = -1,
iterable = Object(collection);
while ((++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)} 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");
this.filesRejected = createEvent(this, "filesRejected");
/**
* Specifies the types of files that the dropzone will accept. By default, all file types are accepted.
*
* For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.
* Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.
* A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or
* `.png, .jpg, .jpeg`.
*
* @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more
* details.
*/
this.accept = '*';
/**
* Set to `true` to disable the file dropzone.
*/
this.disabled = false;
/**
* Is displayed to provide supplementary information to the end users,
* for instance, which filetypes or file sizes are accepted.
*/
this.helperText = '';
/**
* Sets to true when there is a file to drop
*/
this.hasFileToDrop = false;
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();
};
}
render() {
return (h(Host, { key: 'a66ef9c3d9a005567749b61967a63caa4496135a', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, h("slot", { key: '7a770aa9f98365da4b83038662f04c0e9e5c20c6' }), this.renderOnDragLayout()));
}
};
FileDropzone.style = fileDropzoneCss();
const FileInput = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.filesSelected = createEvent(this, "filesSelected");
/**
* Specifies the types of files that the dropzone will accept. By default, all file types are accepted.
*
* For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.
* Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.
* A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or
* `.png, .jpg, .jpeg`.
*
* @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more
* details.
*/
this.accept = '*';
/**
* Set to `true` to disable file input selection.
*/
this.disabled = false;
/**
* Set to `true` to enable selection of multiple files
*/
this.multiple = false;
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 = '';
}
};
}
componentDidLoad() {
// eslint-disable-next-line unicorn/prefer-query-selector
this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
}
render() {
return (h(Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), h("slot", { key: '7ecff23ba41d76a23a2b8a542f56044615cb8b24' })));
}
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 };