@limetech/lime-elements
Version:
280 lines (264 loc) • 10.4 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-174a078a.js');
const files = require('./files-d660a1fa.js');
const _baseForOwn = require('./_baseForOwn-b093d250.js');
const isArrayLike = require('./isArrayLike-6c2b123b.js');
const _baseIteratee = require('./_baseIteratee-c2e22b8d.js');
const isArray = require('./isArray-d188a04f.js');
const randomString = require('./random-string-27fb6c74.js');
require('./file-metadata-8b0b9ea3.js');
require('./get-icon-props-65f39e40.js');
require('./_baseIsEqual-2203758e.js');
require('./eq-282c9b48.js');
require('./_getTag-8d76f8e1.js');
require('./isObject-e28b7997.js');
require('./isObjectLike-3e3f0cba.js');
require('./_getNative-ed148d56.js');
require('./isFunction-fa67a08e.js');
require('./_isIndex-b40f4fc5.js');
require('./isSymbol-d22b2798.js');
require('./identity-6dc34885.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 = 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.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)}@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) {
index.registerInstance(this, hostRef);
this.filesSelected = index.createEvent(this, "filesSelected", 7);
this.filesRejected = index.createEvent(this, "filesRejected", 7);
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();
};
this.accept = '*';
this.disabled = false;
this.text = undefined;
this.helperText = '';
this.hasFileToDrop = false;
}
render() {
return (index.h(index.Host, { onDrop: this.handleDrop, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave }, index.h("slot", null), this.renderOnDragLayout()));
}
};
FileDropzone.style = fileDropzoneCss;
const FileInput = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.filesSelected = index.createEvent(this, "filesSelected", 7);
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 = '';
}
};
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 (index.h(index.Host, { onClick: this.handleClick, onKeyUp: this.handleKeyUp, onKeyDown: this.handleKeyDown }, index.h("input", { hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled, multiple: this.multiple }), index.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 index.getElement(this); }
};
exports.limel_file_dropzone = FileDropzone;
exports.limel_file_input = FileInput;
//# sourceMappingURL=limel-file-dropzone_2.cjs.entry.js.map