@limetech/lime-elements 37.11.3 → 37.11.4

package/dist/esm/{limel-file-dropzone.entry.js → limel-file-dropzone_2.entry.js}

@@ -1,12 +1,12 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-232e9616.js';
-import { c as createFileInfo, i as isTypeAccepted } from './files-79d9caeb.js';
-import { b as baseForOwn } from './_baseForOwn-3dd6837f.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-232e9616.js';
+import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-9a4780e2.js';
+import { b as baseForOwn } from './_baseForOwn-c95521ce.js';
 import { b as isArrayLike } from './isArrayLike-385e0f31.js';
-import { b as baseIteratee } from './_baseIteratee-2b2723f9.js';
+import { b as baseIteratee } from './_baseIteratee-11a1b266.js';
 import { i as isArray } from './isArray-80298bc7.js';
-import './file-metadata-9a4780e2.js';
+import { c as createRandomString } from './random-string-812b1c35.js';
 import './get-icon-props-0b65f85e.js';
-import './_baseIsEqual-633b7929.js';
+import './_baseIsEqual-69d97809.js';
 import './eq-c1c7f528.js';
 import './isObject-c74e273c.js';
 import './_getNative-93d6bfe9.js';
@@ -149,6 +149,42 @@ var partition = createAggregator(function(result, value, key) {
   result[key ? 0 : 1].push(value);
 }, function() { return [[], []]; });
 
+function createFileInfo(file) {
+  const limeFile = {
+    id: crypto.randomUUID(),
+    filename: file.name,
+    contentType: file.type,
+    size: file.size,
+    fileContent: file,
+  };
+  limeFile.icon = {
+    name: getFileIcon(limeFile),
+    title: getFileExtensionTitle(limeFile),
+    color: getFileColor(limeFile),
+    backgroundColor: getFileBackgroundColor(limeFile),
+  };
+  return limeFile;
+}
+function isTypeAccepted(file, accept) {
+  if (accept === undefined || accept === '*') {
+    return true;
+  }
+  const acceptList = accept.split(',').map((raw) => raw.trim());
+  return acceptList.some((acceptedType) => {
+    if (acceptedType === file.contentType) {
+      return true;
+    }
+    if (acceptedType.endsWith('/*')) {
+      const baseType = acceptedType.split('/')[0];
+      return file.contentType.startsWith(`${baseType}/`);
+    }
+    if (acceptedType.startsWith('.')) {
+      const fileType = acceptedType.split('.')[1];
+      return file.contentType.endsWith(`/${fileType}`);
+    }
+  });
+}
+
 const fileDropzoneCss = ":host(limel-file-dropzone){display:grid;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 {
@@ -211,6 +247,60 @@ const FileDropzone = class {
 };
 FileDropzone.style = fileDropzoneCss;
 
-export { FileDropzone as limel_file_dropzone };
+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 = Array.from(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() {
+    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.entry.js.map
+//# sourceMappingURL=limel-file-dropzone_2.entry.js.map

package/dist/esm/limel-file-dropzone_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-file-dropzone.limel-file-input.entry.js","mappings":"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","names":[],"sources":["./node_modules/lodash-es/_arrayAggregator.js","./node_modules/lodash-es/_createBaseEach.js","./node_modules/lodash-es/_baseEach.js","./node_modules/lodash-es/_baseAggregator.js","./node_modules/lodash-es/_createAggregator.js","./node_modules/lodash-es/partition.js","./src/util/files.ts","./src/components/file-dropzone/file-dropzone.scss?tag=limel-file-dropzone&encapsulation=shadow","./src/components/file-dropzone/file-dropzone.tsx","./src/components/file-input/file-input.tsx"],"sourcesContent":["/**\n * A specialized version of `baseAggregator` for arrays.\n *\n * @private\n * @param {Array} [array] The array to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction arrayAggregator(array, setter, iteratee, accumulator) {\n  var index = -1,\n      length = array == null ? 0 : array.length;\n\n  while (++index < length) {\n    var value = array[index];\n    setter(accumulator, value, iteratee(value), array);\n  }\n  return accumulator;\n}\n\nexport default arrayAggregator;\n","import isArrayLike from './isArrayLike.js';\n\n/**\n * Creates a `baseEach` or `baseEachRight` function.\n *\n * @private\n * @param {Function} eachFunc The function to iterate over a collection.\n * @param {boolean} [fromRight] Specify iterating from right to left.\n * @returns {Function} Returns the new base function.\n */\nfunction createBaseEach(eachFunc, fromRight) {\n  return function(collection, iteratee) {\n    if (collection == null) {\n      return collection;\n    }\n    if (!isArrayLike(collection)) {\n      return eachFunc(collection, iteratee);\n    }\n    var length = collection.length,\n        index = fromRight ? length : -1,\n        iterable = Object(collection);\n\n    while ((fromRight ? index-- : ++index < length)) {\n      if (iteratee(iterable[index], index, iterable) === false) {\n        break;\n      }\n    }\n    return collection;\n  };\n}\n\nexport default createBaseEach;\n","import baseForOwn from './_baseForOwn.js';\nimport createBaseEach from './_createBaseEach.js';\n\n/**\n * The base implementation of `_.forEach` without support for iteratee shorthands.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} iteratee The function invoked per iteration.\n * @returns {Array|Object} Returns `collection`.\n */\nvar baseEach = createBaseEach(baseForOwn);\n\nexport default baseEach;\n","import baseEach from './_baseEach.js';\n\n/**\n * Aggregates elements of `collection` on `accumulator` with keys transformed\n * by `iteratee` and values set by `setter`.\n *\n * @private\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} setter The function to set `accumulator` values.\n * @param {Function} iteratee The iteratee to transform keys.\n * @param {Object} accumulator The initial aggregated object.\n * @returns {Function} Returns `accumulator`.\n */\nfunction baseAggregator(collection, setter, iteratee, accumulator) {\n  baseEach(collection, function(value, key, collection) {\n    setter(accumulator, value, iteratee(value), collection);\n  });\n  return accumulator;\n}\n\nexport default baseAggregator;\n","import arrayAggregator from './_arrayAggregator.js';\nimport baseAggregator from './_baseAggregator.js';\nimport baseIteratee from './_baseIteratee.js';\nimport isArray from './isArray.js';\n\n/**\n * Creates a function like `_.groupBy`.\n *\n * @private\n * @param {Function} setter The function to set accumulator values.\n * @param {Function} [initializer] The accumulator object initializer.\n * @returns {Function} Returns the new aggregator function.\n */\nfunction createAggregator(setter, initializer) {\n  return function(collection, iteratee) {\n    var func = isArray(collection) ? arrayAggregator : baseAggregator,\n        accumulator = initializer ? initializer() : {};\n\n    return func(collection, setter, baseIteratee(iteratee, 2), accumulator);\n  };\n}\n\nexport default createAggregator;\n","import createAggregator from './_createAggregator.js';\n\n/**\n * Creates an array of elements split into two groups, the first of which\n * contains elements `predicate` returns truthy for, the second of which\n * contains elements `predicate` returns falsey for. The predicate is\n * invoked with one argument: (value).\n *\n * @static\n * @memberOf _\n * @since 3.0.0\n * @category Collection\n * @param {Array|Object} collection The collection to iterate over.\n * @param {Function} [predicate=_.identity] The function invoked per iteration.\n * @returns {Array} Returns the array of grouped elements.\n * @example\n *\n * var users = [\n *   { 'user': 'barney',  'age': 36, 'active': false },\n *   { 'user': 'fred',    'age': 40, 'active': true },\n *   { 'user': 'pebbles', 'age': 1,  'active': false }\n * ];\n *\n * _.partition(users, function(o) { return o.active; });\n * // => objects for [['fred'], ['barney', 'pebbles']]\n *\n * // The `_.matches` iteratee shorthand.\n * _.partition(users, { 'age': 1, 'active': false });\n * // => objects for [['pebbles'], ['barney', 'fred']]\n *\n * // The `_.matchesProperty` iteratee shorthand.\n * _.partition(users, ['active', false]);\n * // => objects for [['barney', 'pebbles'], ['fred']]\n *\n * // The `_.property` iteratee shorthand.\n * _.partition(users, 'active');\n * // => objects for [['fred'], ['barney', 'pebbles']]\n */\nvar partition = createAggregator(function(result, value, key) {\n  result[key ? 0 : 1].push(value);\n}, function() { return [[], []]; });\n\nexport default partition;\n","import { FileInfo } from '../global/shared-types/file.types';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from './file-metadata';\n\nexport function createFileInfo(file: File): FileInfo {\n    const limeFile: FileInfo = {\n        id: crypto.randomUUID(),\n        filename: file.name,\n        contentType: file.type,\n        size: file.size,\n        fileContent: file,\n    };\n    limeFile.icon = {\n        name: getFileIcon(limeFile),\n        title: getFileExtensionTitle(limeFile),\n        color: getFileColor(limeFile),\n        backgroundColor: getFileBackgroundColor(limeFile),\n    };\n\n    return limeFile;\n}\n\nexport function isTypeAccepted(file: FileInfo, accept?: string): boolean {\n    if (accept === undefined || accept === '*') {\n        return true;\n    }\n\n    const acceptList = accept.split(',').map((raw) => raw.trim());\n\n    return acceptList.some((acceptedType: string) => {\n        if (acceptedType === file.contentType) {\n            return true;\n        }\n\n        if (acceptedType.endsWith('/*')) {\n            const baseType = acceptedType.split('/')[0];\n\n            return file.contentType.startsWith(`${baseType}/`);\n        }\n\n        if (acceptedType.startsWith('.')) {\n            const fileType = acceptedType.split('.')[1];\n\n            return file.contentType.endsWith(`/${fileType}`);\n        }\n    });\n}\n",":host(limel-file-dropzone) {\n    display: grid;\n    position: relative;\n}\n\n.has-file-to-drop {\n    animation: display-drop-zone 0.6s ease forwards;\n\n    box-sizing: border-box;\n    isolation: isolate;\n    z-index: 1;\n    position: absolute;\n    inset: 0.25rem;\n\n    overflow: hidden;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 0.5rem;\n\n    color: rgb(var(--contrast-700));\n\n    border: 0.125rem dashed rgb(var(--color-cyan-light));\n    border-radius: 0.75rem;\n}\n\n.text-helpertext {\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: flex-start;\n}\n\n.icon {\n    width: clamp(2rem, 5vh, 7rem);\n}\n\n.text {\n    font-size: clamp(1rem, 2vh, 1.75rem);\n}\n\n.helper-text {\n    font-size: clamp(0.75rem, 1.5vh, 1rem);\n}\n\n@keyframes display-drop-zone {\n    0% {\n        background-color: rgb(var(--contrast-1100), 0);\n        backdrop-filter: blur(0);\n        -webkit-backdrop-filter: blur(0);\n        scale: 0.9;\n        opacity: 0;\n    }\n\n    50% {\n        scale: 1;\n        opacity: 1;\n    }\n\n    100% {\n        background-color: rgb(var(--contrast-1100), 0.8);\n        backdrop-filter: blur(0.25rem);\n        -webkit-backdrop-filter: blur(0.25rem);\n    }\n}\n","import {\n    Component,\n    h,\n    Event,\n    EventEmitter,\n    Host,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo, isTypeAccepted } from '../../util/files';\nimport { partition } from 'lodash-es';\n\n/**\n * This component enables you to seamlessly convert any region of the user interface into\n * a file dropzone area, just by wrapping it inside the `limel-file-dropzone`.\n *\n * The file dropzone can then be used to allow end-users to upload files\n * by dragging and dropping them into the specified area, for example to trigger an upload process.\n *\n * After receiving the files, the component emits a `filesSelected` event. For unsupported\n * files (specified with the `accept` prop) a `filesRejected` event will be emitted.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-dropzone\n * @exampleComponent limel-example-file-dropzone-type-filtering\n * @private\n */\n@Component({\n    tag: 'limel-file-dropzone',\n    shadow: true,\n    styleUrl: 'file-dropzone.scss',\n})\nexport class FileDropzone {\n    /**\n     * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n     *\n     * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n     * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n     * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n     * `.png, .jpg, .jpeg`.\n     *\n     * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n     * details.\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Set to `true` to disable the file dropzone.\n     */\n    @Prop()\n    public disabled: boolean = false;\n\n    /**\n     * Is displayed when the user is dragging a file over the dropzone.\n     * A suitable text could for instance be \"Drop your files here\".\n     */\n    @Prop()\n    public text: string;\n\n    /**\n     * Is displayed to provide supplementary information to the end users,\n     * for instance, which filetypes or file sizes are accepted.\n     */\n    @Prop()\n    public helperText?: string = '';\n\n    /**\n     * Sets to true when there is a file to drop\n     */\n    @State()\n    private hasFileToDrop: boolean = false;\n\n    /**\n     * Emitted when files are selected\n     */\n    @Event()\n    filesSelected: EventEmitter<FileInfo[]>;\n\n    /**\n     * Emitted when files are selected but do not conform with the `accept` property specifications.\n     * This can happen when the file types or formats of the selected files are not among the ones allowed by the dropzone,\n     * as defined by the `accept` property.\n     *\n     * @see `accept` for details on how to specify acceptable file types.\n     */\n    @Event()\n    filesRejected: EventEmitter<FileInfo[]>;\n\n    public render() {\n        return (\n            <Host\n                onDrop={this.handleDrop}\n                onDragOver={this.handleDragOver}\n                onDragLeave={this.handleDragLeave}\n            >\n                <slot />\n                {this.renderOnDragLayout()}\n            </Host>\n        );\n    }\n\n    private renderOnDragLayout = () => {\n        if (this.disabled || !this.hasFileToDrop) {\n            return;\n        }\n\n        return (\n            <div class=\"has-file-to-drop\">\n                <limel-icon class=\"icon\" name=\"upload_2\" />\n                <div class=\"text-helpertext\">\n                    {this.renderText()}\n                    {this.renderHelperText()}\n                </div>\n            </div>\n        );\n    };\n\n    private renderText = () => {\n        if (!this.text) {\n            return;\n        }\n\n        return <span class=\"text\">{this.text}</span>;\n    };\n\n    private renderHelperText = () => {\n        if (!this.helperText) {\n            return;\n        }\n\n        return <span class=\"helper-text\">{this.helperText}</span>;\n    };\n\n    private handleDrop = (event: DragEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        this.hasFileToDrop = false;\n\n        if (this.disabled) {\n            return;\n        }\n\n        const files: File[] = Array.from(event.dataTransfer.files);\n        const fileInfos: FileInfo[] = files.map(createFileInfo);\n\n        const [acceptedFileInfos, rejectedFileInfos] = partition(\n            fileInfos,\n            (file) => isTypeAccepted(file, this.accept),\n        );\n\n        if (acceptedFileInfos.length > 0) {\n            this.filesSelected.emit(acceptedFileInfos);\n        }\n\n        if (rejectedFileInfos.length > 0) {\n            this.filesRejected.emit(rejectedFileInfos);\n        }\n    };\n\n    private handleDragOver = (event: DragEvent) => {\n        this.hasFileToDrop = true;\n        event.preventDefault();\n    };\n\n    private handleDragLeave = (event: DragEvent) => {\n        this.hasFileToDrop = false;\n        event.preventDefault();\n    };\n}\n","import {\n    h,\n    Event,\n    EventEmitter,\n    Host,\n    Component,\n    Element,\n    Prop,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport { FileInfo } from '../../global/shared-types/file.types';\nimport { createFileInfo } from '../../util/files';\n\n/**\n * This component enables you to seamlessly transform any other clickable component that\n * generates a `click` event into a file input selector.\n *\n * To use it, just wrap any clickable component inside the `limel-file-input` component.\n * Upon reception of the `click` event this component will open the native file selection\n * dialog.\n *\n * After receiving the files, the component emits a `filesSelected` event.\n *\n * The event detail would be an array of `FileInfo` objects,\n * each representing a file dropped into the dropzone.\n *\n * @exampleComponent limel-example-file-input\n * @exampleComponent limel-example-file-input-type-filtering\n * @private\n */\n@Component({\n    tag: 'limel-file-input',\n    shadow: true,\n})\nexport class FileInput {\n    /**\n     * Specifies the types of files that the dropzone will accept. By default, all file types are accepted.\n     *\n     * For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`.\n     * Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`.\n     * A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or\n     * `.png, .jpg, .jpeg`.\n     *\n     * @see [HTML attribute: accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept) for more\n     * details.\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Set to `true` to disable file input selection.\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to enable selection of multiple files\n     */\n    @Prop({ reflect: true })\n    public multiple: boolean = false;\n\n    /**\n     * Emitted when files are selected\n     */\n    @Event()\n    filesSelected: EventEmitter<FileInfo[]>;\n\n    @Element()\n    private element: HTMLLimelFileElement;\n\n    private fileInput: HTMLInputElement;\n    private fileInputId = createRandomString();\n\n    public componentDidLoad() {\n        this.fileInput = this.element.shadowRoot.getElementById(\n            this.fileInputId,\n        ) as HTMLInputElement;\n    }\n\n    public render() {\n        return (\n            <Host\n                onClick={this.handleClick}\n                onKeyUp={this.handleKeyUp}\n                onKeyDown={this.handleKeyDown}\n            >\n                <input\n                    hidden={true}\n                    id={this.fileInputId}\n                    onChange={this.handleFileChange}\n                    type=\"file\"\n                    accept={this.accept}\n                    disabled={this.disabled}\n                    multiple={this.multiple}\n                />\n                <slot />\n            </Host>\n        );\n    }\n\n    private handleClick = (event: Event) => {\n        if (this.disabled) {\n            event.stopPropagation();\n            event.preventDefault();\n\n            return;\n        }\n\n        this.triggerFileDialog();\n\n        event.stopPropagation();\n    };\n\n    private handleKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n\n        if (event.code === 'Enter') {\n            this.triggerFileDialog();\n        }\n    };\n\n    private handleKeyDown(event: KeyboardEvent) {\n        if (\n            event.code === 'Tab' ||\n            event.code === 'Backspace' ||\n            event.code === 'Enter'\n        ) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    private triggerFileDialog() {\n        this.fileInput.click();\n    }\n\n    private handleFileChange = (event: Event) => {\n        const files = Array.from(this.fileInput.files);\n        if (files.length > 0) {\n            event.stopPropagation();\n            this.filesSelected.emit(files.map(createFileInfo));\n            this.fileInput.value = '';\n        }\n    };\n}\n"],"version":3}

package/dist/esm/limel-file.entry.js

@@ -1,17 +1,10 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-232e9616.js';
+import { r as registerInstance, c as createEvent, h } from './index-232e9616.js';
 import { t as translate } from './translations-dea847ae.js';
-import { c as createRandomString } from './random-string-812b1c35.js';
 import { g as getFileIcon, a as getFileExtensionTitle, b as getFileColor, c as getFileBackgroundColor } from './file-metadata-9a4780e2.js';
-import { M as MDCTextField } from './component-58f68f3e.js';
 import './get-icon-props-0b65f85e.js';
-import './component-8b6ce3e9.js';
-import './component-f972b8db.js';
-import './ponyfill-30263d5e.js';
-import './component-fc0a08f6.js';
 
-const fileCss = ":host{--icon-background-color:rgb(var(--contrast-400));--icon-color:rgb(var(--contrast-1100))}";
+const fileCss = "";
 
-const CHIP_SET_TAG_NAME = 'limel-chip-set';
 const DEFAULT_FILE_CHIP = {
   id: null,
   text: null,
@@ -22,26 +15,20 @@ const File = class {
     registerInstance(this, hostRef);
     this.change = createEvent(this, "change", 7);
     this.interact = createEvent(this, "interact", 7);
-    this.fileInputId = createRandomString();
-    this.handleDragEnter = (event) => {
-      this.isDraggingOverDropZone = true;
+    this.handleNewFiles = (event) => {
       this.preventAndStop(event);
+      this.change.emit(event.detail[0]);
     };
-    this.handleDragLeave = () => {
-      this.isDraggingOverDropZone = false;
+    this.handleChipSetChange = (event) => {
+      event.stopPropagation();
+      const file = !event.detail.length ? event.detail[0] : null;
+      if (!file) {
+        this.change.emit(file);
+      }
     };
-    this.handleFileDrop = (event) => {
+    this.handleChipInteract = (event) => {
       this.preventAndStop(event);
-      this.isDraggingOverDropZone = false;
-      const dataTransfer = event.dataTransfer;
-      this.handleFile(dataTransfer.files[0]);
-    };
-    this.handleClick = (event) => {
-      if (event && 'Lime' in event && event.Lime.chip) {
-        // This is a click on a chip, so we don't need to do anything here.
-        return;
-      }
-      this.handleFileSelection(event);
+      this.interact.emit(event.detail.id);
     };
     this.value = undefined;
     this.label = undefined;
@@ -51,45 +38,11 @@ const File = class {
     this.invalid = false;
     this.accept = '*';
     this.language = 'en';
-    this.isDraggingOverDropZone = false;
-    this.handleFileSelection = this.handleFileSelection.bind(this);
-    this.handleFileChange = this.handleFileChange.bind(this);
-    this.handleChipSetChange = this.handleChipSetChange.bind(this);
-    this.handleFileDrop = this.handleFileDrop.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
-    this.handleKeyUp = this.handleKeyUp.bind(this);
-    this.handleChipInteract = this.handleChipInteract.bind(this);
-  }
-  connectedCallback() {
-    this.initialize();
-  }
-  componentDidLoad() {
-    this.fileInput = this.element.shadowRoot.getElementById(this.fileInputId);
-    this.chipSet = this.element.shadowRoot.querySelector(CHIP_SET_TAG_NAME);
-    this.initialize();
-  }
-  initialize() {
-    if (!this.chipSet) {
-      return;
-    }
-    this.mdcTextField = new MDCTextField(this.chipSet.shadowRoot.querySelector('.mdc-text-field'));
-  }
-  disconnectedCallback() {
-    if (this.mdcTextField) {
-      this.mdcTextField.destroy();
-    }
   }
   render() {
-    return [
-      h("input", { hidden: true, id: this.fileInputId, onChange: this.handleFileChange, type: "file", accept: this.accept, disabled: this.disabled || this.readonly }),
-      h("limel-chip-set", { class: {
-          'is-file-picker': true,
-          'shows-dropzone': true,
-          'highlight-dropzone': this.isDraggingOverDropZone,
-        }, disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, leadingIcon: "upload_to_cloud", language: this.language, onChange: this.handleChipSetChange, onClick: this.handleClick, onInteract: this.handleChipInteract, onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, required: this.required, type: "input", value: this.chipArray, title: this.getTranslation('drag-and-drop-tips'), onDragEnter: this.handleDragEnter, onDragOver: this.preventAndStop, onDragLeave: this.handleDragLeave, onDrop: this.handleFileDrop }),
-    ];
+    return (h("limel-file-dropzone", { disabled: this.disabled || this.readonly || !!this.value, accept: this.accept, onFilesSelected: this.handleNewFiles }, this.renderChipset()));
   }
-  get chipArray() {
+  getChipArray() {
     if (!this.value) {
       return [];
     }
@@ -102,61 +55,12 @@ const File = class {
         }, href: this.value.href }),
     ];
   }
-  handleKeyDown(event) {
-    if (event.code === 'Tab' ||
-      event.code === 'Backspace' ||
-      event.code === 'Enter') {
-      return;
-    }
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  handleKeyUp(event) {
-    if (event.code === 'Enter' && !this.value) {
-      this.fileInput.click();
+  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(), title: this.getTranslation('drag-and-drop-tips') }));
+    if (this.value) {
+      return chipset;
     }
-  }
-  handleFileSelection(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    if (!this.value) {
-      this.fileInput.click();
-    }
-  }
-  handleFileChange(event) {
-    if (this.fileInput.files.length > 0) {
-      event.stopPropagation();
-      this.handleFile(this.fileInput.files[0]);
-    }
-  }
-  handleFile(file) {
-    const limeFile = {
-      id: createRandomString(),
-      filename: file.name,
-      contentType: file.type,
-      size: file.size,
-      fileContent: file,
-    };
-    this.change.emit(limeFile);
-    this.chipSet.blur();
-    this.mdcTextField.valid = true;
-  }
-  handleChipSetChange(event) {
-    event.stopPropagation();
-    const file = !event.detail.length ? event.detail[0] : null;
-    this.chipSet.blur();
-    if (!file) {
-      this.fileInput.value = '';
-      this.change.emit(file);
-      if (this.required) {
-        this.mdcTextField.valid = false;
-      }
-    }
-  }
-  handleChipInteract(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    this.interact.emit(event.detail.id);
+    return (h("limel-file-input", { accept: this.accept, disabled: this.disabled || this.readonly }, chipset));
   }
   preventAndStop(event) {
     event.stopPropagation();
@@ -165,7 +69,6 @@ const File = class {
   getTranslation(key) {
     return translate.get(`file.${key}`, this.language);
   }
-  get element() { return getElement(this); }
 };
 File.style = fileCss;
 

package/dist/esm/limel-file.entry.js.map

@@ -1 +1 @@
-{"file":"limel-file.entry.js","mappings":"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","names":[],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["/**\n * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n */\n\n:host {\n    --icon-background-color: rgb(var(--contrast-400));\n    --icon-color: rgb(var(--contrast-1100));\n}\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { MDCTextField } from '@material/textfield';\nimport {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n    State,\n} from '@stencil/core';\nimport { createRandomString } from '../../util/random-string';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst CHIP_SET_TAG_NAME = 'limel-chip-set';\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    @Element()\n    private element: HTMLLimelFileElement;\n\n    @State()\n    private isDraggingOverDropZone = false;\n\n    private fileInput: HTMLInputElement;\n    private fileInputId = createRandomString();\n    private chipSet;\n    private mdcTextField;\n\n    constructor() {\n        this.handleFileSelection = this.handleFileSelection.bind(this);\n        this.handleFileChange = this.handleFileChange.bind(this);\n        this.handleChipSetChange = this.handleChipSetChange.bind(this);\n        this.handleFileDrop = this.handleFileDrop.bind(this);\n        this.handleKeyDown = this.handleKeyDown.bind(this);\n        this.handleKeyUp = this.handleKeyUp.bind(this);\n        this.handleChipInteract = this.handleChipInteract.bind(this);\n    }\n\n    public connectedCallback() {\n        this.initialize();\n    }\n\n    public componentDidLoad() {\n        this.fileInput = this.element.shadowRoot.getElementById(\n            this.fileInputId,\n        ) as HTMLInputElement;\n        this.chipSet = this.element.shadowRoot.querySelector(CHIP_SET_TAG_NAME);\n        this.initialize();\n    }\n\n    private initialize() {\n        if (!this.chipSet) {\n            return;\n        }\n\n        this.mdcTextField = new MDCTextField(\n            this.chipSet.shadowRoot.querySelector('.mdc-text-field'),\n        );\n    }\n\n    public disconnectedCallback() {\n        if (this.mdcTextField) {\n            this.mdcTextField.destroy();\n        }\n    }\n\n    public render() {\n        return [\n            <input\n                hidden={true}\n                id={this.fileInputId}\n                onChange={this.handleFileChange}\n                type=\"file\"\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            />,\n            <limel-chip-set\n                class={{\n                    'is-file-picker': true,\n                    'shows-dropzone': true,\n                    'highlight-dropzone': this.isDraggingOverDropZone,\n                }}\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onClick={this.handleClick}\n                onInteract={this.handleChipInteract}\n                onKeyDown={this.handleKeyDown}\n                onKeyUp={this.handleKeyUp}\n                required={this.required}\n                type=\"input\"\n                value={this.chipArray}\n                title={this.getTranslation('drag-and-drop-tips')}\n                onDragEnter={this.handleDragEnter}\n                onDragOver={this.preventAndStop}\n                onDragLeave={this.handleDragLeave}\n                onDrop={this.handleFileDrop}\n            />,\n        ];\n    }\n\n    private handleDragEnter = (event: DragEvent) => {\n        this.isDraggingOverDropZone = true;\n        this.preventAndStop(event);\n    };\n\n    private handleDragLeave = () => {\n        this.isDraggingOverDropZone = false;\n    };\n\n    private handleFileDrop = (event: DragEvent) => {\n        this.preventAndStop(event);\n        this.isDraggingOverDropZone = false;\n        const dataTransfer = event.dataTransfer;\n        this.handleFile(dataTransfer.files[0]);\n    };\n\n    private get chipArray() {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private handleKeyDown(event: KeyboardEvent) {\n        if (\n            event.code === 'Tab' ||\n            event.code === 'Backspace' ||\n            event.code === 'Enter'\n        ) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n    }\n\n    private handleKeyUp(event: KeyboardEvent) {\n        if (event.code === 'Enter' && !this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleClick = (event: Event) => {\n        if (event && 'Lime' in event && (event.Lime as any).chip) {\n            // This is a click on a chip, so we don't need to do anything here.\n            return;\n        }\n\n        this.handleFileSelection(event);\n    };\n\n    private handleFileSelection(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (!this.value) {\n            this.fileInput.click();\n        }\n    }\n\n    private handleFileChange(event: Event) {\n        if (this.fileInput.files.length > 0) {\n            event.stopPropagation();\n            this.handleFile(this.fileInput.files[0]);\n        }\n    }\n\n    private handleFile(file) {\n        const limeFile: FileInfo = {\n            id: createRandomString(),\n            filename: file.name,\n            contentType: file.type,\n            size: file.size,\n            fileContent: file,\n        };\n        this.change.emit(limeFile);\n        this.chipSet.blur();\n        this.mdcTextField.valid = true;\n    }\n\n    private handleChipSetChange(event: CustomEvent) {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        this.chipSet.blur();\n        if (!file) {\n            this.fileInput.value = '';\n            this.change.emit(file);\n            if (this.required) {\n                this.mdcTextField.valid = false;\n            }\n        }\n    }\n\n    private handleChipInteract(event: CustomEvent<Chip>) {\n        event.stopPropagation();\n        event.preventDefault();\n        this.interact.emit(event.detail.id);\n    }\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(`file.${key}`, this.language);\n    }\n}\n"],"version":3}
+{"file":"limel-file.entry.js","mappings":"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","names":[],"sources":["./src/components/file/file.scss?tag=limel-file&encapsulation=shadow","./src/components/file/file.tsx"],"sourcesContent":["/**\n * @prop --icon-background-color: Background color of the icon. Defaults to `--contrast-400`.\n * @prop --icon-color: Color of the icon. Defaults to `--contrast-1100`.\n */\n","import translate from '../../global/translations';\nimport { Chip } from '../chip-set/chip.types';\nimport { Languages } from '../date-picker/date.types';\nimport { Component, Event, EventEmitter, h, Prop } from '@stencil/core';\nimport {\n    getFileBackgroundColor,\n    getFileColor,\n    getFileExtensionTitle,\n    getFileIcon,\n} from '../../util/file-metadata';\nimport { FileInfo } from '../../global/shared-types/file.types';\n\nconst DEFAULT_FILE_CHIP: Chip = {\n    id: null,\n    text: null,\n    removable: true,\n};\n\n/**\n * This component lets end-users select a *single* file from their device\n * storage. Regardless of the user's device or operating system, this component\n * opens up a file picker dialog that allows the user to choose a file.\n *\n * ## Using correct labels\n *\n * This file picker can be used in different contexts. The component's distinct\n * visual design including the upload icon hints end-users that this is not a\n * normal input field like other fields in the form for example.\n *\n * :::important\n * you need to use a descriptive `label` that clarifies the\n * functionality of the file picker, and/or provides users with clear\n * instructions.\n *\n * Depending on the context, you may need to avoid labels such as:\n * - File\n * - Document\n *\n * and instead consider using labels like:\n * - Attach a file\n * - Upload a file\n * - Choose a document\n * - Choose a file\n *\n * and similar phrases...\n * :::\n *\n * @exampleComponent limel-example-file\n * @exampleComponent limel-example-file-custom-icon\n * @exampleComponent limel-example-file-accepted-types\n * @exampleComponent limel-example-file-composite\n */\n@Component({\n    tag: 'limel-file',\n    shadow: true,\n    styleUrl: 'file.scss',\n})\nexport class File {\n    /**\n     * The selected file.\n     */\n    @Prop()\n    public value: FileInfo;\n\n    /**\n     * The input label.\n     */\n    @Prop({ reflect: true })\n    public label: string;\n\n    /**\n     * Set to `true` to indicate that the field is required.\n     */\n    @Prop({ reflect: true })\n    public required: boolean = false;\n\n    /**\n     * True if the input should be disabled\n     */\n    @Prop({ reflect: true })\n    public disabled: boolean = false;\n\n    /**\n     * Set to `true` to disable adding and removing files, but allow interaction\n     * with any already existing file.\n     */\n    @Prop({ reflect: true })\n    public readonly: boolean = false;\n\n    /**\n     * Set to `true` to indicate that the current value of the chosen file is\n     * invalid.\n     */\n    @Prop({ reflect: true })\n    public invalid = false;\n\n    /**\n     * The [accepted file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers)\n     */\n    @Prop({ reflect: true })\n    public accept: string = '*';\n\n    /**\n     * Defines the localisation for translations.\n     */\n    @Prop()\n    public language: Languages = 'en';\n\n    /**\n     * Dispatched when a file is selected/deselected\n     */\n    @Event()\n    private change: EventEmitter<FileInfo>;\n\n    /**\n     * Dispatched when clicking on a chip\n     */\n    @Event()\n    private interact: EventEmitter<number | string>;\n\n    public render() {\n        return (\n            <limel-file-dropzone\n                disabled={this.disabled || this.readonly || !!this.value}\n                accept={this.accept}\n                onFilesSelected={this.handleNewFiles}\n            >\n                {this.renderChipset()}\n            </limel-file-dropzone>\n        );\n    }\n\n    private handleNewFiles = (event: CustomEvent<FileInfo[]>) => {\n        this.preventAndStop(event);\n        this.change.emit(event.detail[0]);\n    };\n\n    private getChipArray(): Chip[] {\n        if (!this.value) {\n            return [];\n        }\n\n        return [\n            {\n                ...DEFAULT_FILE_CHIP,\n                text: this.value.filename,\n                id: this.value.id,\n                icon: {\n                    name: getFileIcon(this.value),\n                    title: getFileExtensionTitle(this.value),\n                    color: getFileColor(this.value),\n                    backgroundColor: getFileBackgroundColor(this.value),\n                },\n                href: this.value.href,\n            },\n        ];\n    }\n\n    private renderChipset() {\n        const chipset = (\n            <limel-chip-set\n                disabled={this.disabled}\n                readonly={this.readonly}\n                invalid={this.invalid}\n                label={this.label}\n                leadingIcon=\"upload_to_cloud\"\n                language={this.language}\n                onChange={this.handleChipSetChange}\n                onInteract={this.handleChipInteract}\n                required={this.required}\n                type=\"input\"\n                value={this.getChipArray()}\n                title={this.getTranslation('drag-and-drop-tips')}\n            />\n        );\n\n        if (this.value) {\n            return chipset;\n        }\n\n        return (\n            <limel-file-input\n                accept={this.accept}\n                disabled={this.disabled || this.readonly}\n            >\n                {chipset}\n            </limel-file-input>\n        );\n    }\n\n    private handleChipSetChange = (event: CustomEvent) => {\n        event.stopPropagation();\n        const file = !event.detail.length ? event.detail[0] : null;\n        if (!file) {\n            this.change.emit(file);\n        }\n    };\n\n    private handleChipInteract = (event: CustomEvent<Chip>) => {\n        this.preventAndStop(event);\n        this.interact.emit(event.detail.id);\n    };\n\n    private preventAndStop(event: Event) {\n        event.stopPropagation();\n        event.preventDefault();\n    }\n\n    private getTranslation(key: string) {\n        return translate.get(`file.${key}`, this.language);\n    }\n}\n"],"version":3}

package/dist/esm/limel-form.entry.js

@@ -1,17 +1,17 @@
 import { r as registerInstance, c as createEvent, h as h$1, g as getElement } from './index-232e9616.js';
 import { c as createCommonjsModule, a as commonjsGlobal } from './_commonjsHelpers-5ec8f9b7.js';
-import { g as getTag$1, m as mapToArray$1, k as keys$5, a as isBuffer, c as isTypedArray$1, i as isArguments$3, d as isPrototype$1, e as baseKeys$1, f as Set$2, s as setToArray$1, h as SetCache$1, j as cacheHas$1 } from './_baseIsEqual-633b7929.js';
+import { g as getTag$1, m as mapToArray$1, k as keys$5, i as isBuffer, a as isTypedArray$1, c as isArguments$3, d as isPrototype$1, e as baseKeys$1, S as Set$2, s as setToArray$1, f as SetCache$1, h as cacheHas$1 } from './_baseIsEqual-69d97809.js';
 import { i as isArray$4 } from './isArray-80298bc7.js';
 import { b as isArrayLike$1 } from './isArrayLike-385e0f31.js';
-import { t as toString$3, b as baseIteratee$1, g as get$3 } from './_baseIteratee-2b2723f9.js';
-import { g as getPrototype$1, p as pickBy, h as has$1, n as negate } from './pickBy-240917e2.js';
-import { i as isEqual$1 } from './isEqual-d8fb9edc.js';
+import { t as toString$3, b as baseIteratee$1, g as get$3 } from './_baseIteratee-11a1b266.js';
+import { g as getPrototype$1, p as pickBy, h as has$1, n as negate } from './pickBy-7e02d413.js';
+import { i as isEqual$1 } from './isEqual-8daa0ea4.js';
 import { a as arrayMap$1 } from './identity-87aa3962.js';
 import { b as baseAssignValue$1 } from './_assignValue-fb2bf80a.js';
-import { b as baseForOwn$1 } from './_baseForOwn-3dd6837f.js';
+import { b as baseForOwn$1 } from './_baseForOwn-c95521ce.js';
 import { b as baseGetTag$1 } from './isObject-c74e273c.js';
 import { i as isObjectLike$1 } from './isObjectLike-38996507.js';
-import { a as arrayIncludes$1, b as arrayIncludesWith$1, c as baseRest$1, d as baseFlatten$1, i as isArrayLikeObject$1 } from './_arrayIncludesWith-8b8a8b46.js';
+import { a as arrayIncludes$1, b as arrayIncludesWith$1, c as baseRest$1, d as baseFlatten$1, i as isArrayLikeObject$1 } from './_arrayIncludesWith-b9a433b0.js';
 import { m as moment } from './moment-be8ab0fa.js';
 import { i as isMultiple } from './multiple-4beb2761.js';
 import { c as createRandomString } from './random-string-812b1c35.js';