@limetech/lime-elements
Version:
311 lines (296 loc) • 12.6 kB
JavaScript
'use strict';
var index = require('./index-BjHIBY-I.js');
var files = require('./files-Cf615Ytp.js');
var _baseForOwn = require('./_baseForOwn-CMhQVS1J.js');
var isArrayLike = require('./isArrayLike-_dR1U5-Y.js');
var _baseIteratee = require('./_baseIteratee-DrEpOCx4.js');
var isArray = require('./isArray-BuFVIU_i.js');
var randomString = require('./random-string-BTzDB2ee.js');
require('./file-metadata-rQ0WzFlZ.js');
require('./get-icon-props-CwpDdQDI.js');
require('./_baseIsEqual-DmV6vCh4.js');
require('./eq-B1KBAwmK.js');
require('./isObject-B6Osvvqp.js');
require('./_getNative-B4n5HX2B.js');
require('./isObjectLike-Dlpn-j-1.js');
require('./isSymbol-DxAVNJfH.js');
require('./identity-Dz5mxHaJ.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.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.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.isArray(collection) ? arrayAggregator : baseAggregator,
accumulator = initializer ? initializer() : {};
return func(collection, setter, _baseIteratee.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) {
index.registerInstance(this, hostRef);
this.filesSelected = index.createEvent(this, "filesSelected");
this.filesRejected = index.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 (index.h("div", { class: "has-file-to-drop" }, index.h("limel-icon", { class: "icon", name: "upload_2" }), index.h("div", { class: "text-helpertext" }, this.renderText(), this.renderHelperText())));
};
this.renderText = () => {
if (!this.text) {
return;
}
return index.h("span", { class: "text" }, this.text);
};
this.renderHelperText = () => {
if (!this.helperText) {
return;
}
return index.h("span", { class: "helper-text" }, this.helperText);
};
this.handleDrop = (event) => {
event.stopPropagation();
event.preventDefault();
this.hasFileToDrop = false;
if (this.disabled) {
return;
}
const files$1 = [...event.dataTransfer.files];
const fileInfos = files$1.map(files.createFileInfo);
const [acceptedFileInfos, rejectedFileInfos] = partition(fileInfos, (file) => files.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 (index.h(index.Host, { key: 'a66ef9c3d9a005567749b61967a63caa4496135a', onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", { key: '7a770aa9f98365da4b83038662f04c0e9e5c20c6' }), this.renderOnDragLayout()));
}
};
FileDropzone.style = fileDropzoneCss();
const FileInput = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.filesSelected = index.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 = randomString.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$1 = [...this.fileInput.files];
if (files$1.length > 0) {
event.stopPropagation();
this.filesSelected.emit(files$1.map(files.createFileInfo));
this.fileInput.value = '';
}
};
}
componentDidLoad() {
// eslint-disable-next-line unicorn/prefer-query-selector
this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
}
render() {
return (index.h(index.Host, { key: '62d72f49b1a71bef9c5b91c36f34f763a04d78e2', onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { key: '72272f710f8ffb09eec2ace7409ab516ec4f80bd', hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.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 index.getElement(this); }
};
exports.limel_file_dropzone = FileDropzone;
exports.limel_file_input = FileInput;