@nectary/components 4.12.1 → 5.0.0

package/emoji-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TEmoji = {
     emoji: string;
     code: string;
@@ -40,3 +40,23 @@ export type TSinchEmojiPicker = {
 };
 export type TSinchEmojiPickerElement = NectaryComponentVanillaByType<TSinchEmojiPicker>;
 export type TSinchEmojiPickerReact = NectaryComponentReactByType<TSinchEmojiPicker>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-emoji-picker': TSinchEmojiPicker;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-emoji-picker': NectaryComponentVanilla<'sinch-emoji-picker'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-emoji-picker': NectaryComponentReact<'sinch-emoji-picker'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-emoji-picker': NectaryComponentReact<'sinch-emoji-picker'>;
+        }
+    }
+}

package/emoji-picker/types.js

@@ -1 +1 @@
-export {};
+

package/field/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/field/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-field");

package/field/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchField } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class Field extends NectaryElement {
     #private;
     topSection: HTMLDivElement;
@@ -21,23 +20,3 @@ export declare class Field extends NectaryElement {
     set disabled(isDisabled: boolean);
     get disabled(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-field': TSinchField;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-field': NectaryComponentVanilla<'sinch-field'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-field': NectaryComponentReact<'sinch-field'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-field': NectaryComponentReact<'sinch-field'>;
-        }
-    }
-}

package/field/index.js

@@ -1,8 +1,11 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
-const template = document.createElement('template');
+import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getFirstSlotElement } from "../utils/slot.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n#top,\n#bottom {\n  display: flex;\n  align-items: baseline;\n}\n\n#top {\n  height: 24px;\n  margin-bottom: 2px;\n}\n\n#top.empty {\n  display: none;\n}\n\n#label,\n#optional,\n#additional,\n#invalid {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#label {\n  font: var(--sinch-comp-field-font-label);\n  color: var(--sinch-comp-field-color-default-label-initial);\n}\n\n#optional {\n  flex: 1;\n  font: var(--sinch-comp-field-font-optional);\n  color: var(--sinch-comp-field-color-default-optional-initial);\n  text-align: right;\n}\n\n#additional {\n  flex: 1;\n  text-align: right;\n  font: var(--sinch-comp-field-font-additional);\n  color: var(--sinch-comp-field-color-default-additional-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#additional:empty {\n  display: none;\n}\n\n#invalid {\n  font: var(--sinch-comp-field-font-invalid);\n  color: var(--sinch-comp-field-color-invalid-text-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#invalid:empty {\n  display: none;\n}\n\n#tooltip {\n  align-self: center;\n  margin: 0 8px;\n  display: flex;\n}\n\n#tooltip.empty {\n  display: none;\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-field-color-disabled-label-initial);\n}\n\n:host([disabled]) #additional {\n  color: var(--sinch-comp-field-color-disabled-additional-initial);\n}\n\n:host([disabled]) #optional {\n  color: var(--sinch-comp-field-color-disabled-optional-initial);\n}\n\n</style>\n\n<div id="wrapper">\n  <div id="top">\n    <label id="label" for="input"></label>\n    <div id="tooltip">\n      <slot name="tooltip"></slot>\n    </div>\n    <span id="optional"></span>\n  </div>\n  <slot name="input"></slot>\n  <div id="bottom">\n    <div id="invalid"></div>\n    <div id="additional"></div>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Field extends NectaryElement {
+class Field extends NectaryElement {
+  topSection;
   #$label;
   #$optionalText;
   #$additionalText;
@@ -15,107 +18,107 @@ export class Field extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.topSection = shadowRoot.querySelector('#top');
-    this.#$label = shadowRoot.querySelector('#label');
-    this.#$optionalText = shadowRoot.querySelector('#optional');
-    this.#$additionalText = shadowRoot.querySelector('#additional');
-    this.#$invalidText = shadowRoot.querySelector('#invalid');
+    this.topSection = shadowRoot.querySelector("#top");
+    this.#$label = shadowRoot.querySelector("#label");
+    this.#$optionalText = shadowRoot.querySelector("#optional");
+    this.#$additionalText = shadowRoot.querySelector("#additional");
+    this.#$invalidText = shadowRoot.querySelector("#invalid");
     this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
     this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
-    this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
+    this.#$tooltipWrapper = shadowRoot.querySelector("#tooltip");
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
+    const { signal } = this.#controller;
+    const options = { signal };
     this.shouldShowTopSection();
-    this.#$label.addEventListener('click', this.#onLabelClick, options);
-    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, options);
+    this.#$label.addEventListener("click", this.#onLabelClick, options);
+    this.#$tooltipSlot.addEventListener("slotchange", this.#onTooltipSlotChange, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled'];
+    return [
+      "label",
+      "optionaltext",
+      "additionaltext",
+      "invalidtext",
+      "disabled"
+    ];
   }
   shouldShowTopSection() {
-    const label = getAttribute(this, 'label');
-    const optionaltext = getAttribute(this, 'optionaltext');
-    setClass(this.topSection, 'empty', label === null && optionaltext === null);
+    const label = getAttribute(this, "label");
+    const optionaltext = getAttribute(this, "optionaltext");
+    setClass(this.topSection, "empty", label === null && optionaltext === null);
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'label':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'optionaltext':
-        {
-          this.#$optionalText.textContent = newVal;
-          break;
-        }
-      case 'additionaltext':
-        {
-          this.#$additionalText.textContent = newVal;
-          break;
-        }
-      case 'invalidtext':
-        {
-          this.#$invalidText.textContent = newVal;
-          break;
-        }
-      case 'disabled':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            break;
-          }
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+      case "label": {
+        this.#$label.textContent = newVal;
+        break;
+      }
+      case "optionaltext": {
+        this.#$optionalText.textContent = newVal;
+        break;
+      }
+      case "additionaltext": {
+        this.#$additionalText.textContent = newVal;
+        break;
+      }
+      case "invalidtext": {
+        this.#$invalidText.textContent = newVal;
+        break;
+      }
+      case "disabled": {
+        if (isAttrEqual(oldVal, newVal)) {
           break;
         }
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
     }
     this.shouldShowTopSection();
   }
   set label(value) {
-    updateAttribute(this, 'label', value);
+    updateAttribute(this, "label", value);
   }
   get label() {
-    return getAttribute(this, 'label');
+    return getAttribute(this, "label");
   }
   set optionalText(value) {
-    updateAttribute(this, 'optionaltext', value);
+    updateAttribute(this, "optionaltext", value);
   }
   get optionalText() {
-    return getAttribute(this, 'optionaltext');
+    return getAttribute(this, "optionaltext");
   }
   set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
+    updateAttribute(this, "additionaltext", value);
   }
   get additionalText() {
-    return getAttribute(this, 'additionaltext');
+    return getAttribute(this, "additionaltext");
   }
   set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
+    updateAttribute(this, "invalidtext", value);
   }
   get invalidText() {
-    return getAttribute(this, 'invalidtext');
+    return getAttribute(this, "invalidtext");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   #onLabelClick = () => {
     getFirstSlotElement(this.#$inputSlot)?.focus?.();
   };
   #onTooltipSlotChange = () => {
-    setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
+    setClass(this.#$tooltipWrapper, "empty", this.#$tooltipSlot.assignedElements().length === 0);
   };
 }
-defineCustomElement('sinch-field', Field);
+defineCustomElement("sinch-field", Field);
+export {
+  Field
+};

package/field/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchFieldProps = {
     /** Label that shows in UI */
     label?: string;
@@ -30,3 +30,23 @@ export type TSinchField = {
 };
 export type TSinchFieldElement = NectaryComponentVanillaByType<TSinchField>;
 export type TSinchFieldReact = NectaryComponentReactByType<TSinchField>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-field': TSinchField;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-field': NectaryComponentVanilla<'sinch-field'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-field': NectaryComponentReact<'sinch-field'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-field': NectaryComponentReact<'sinch-field'>;
+        }
+    }
+}

package/field/types.js

@@ -1 +1 @@
-export {};
+

package/file-drop/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/file-drop/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-file-drop");

package/file-drop/index.d.ts

@@ -1,8 +1,7 @@
 import '../text';
 import '../file-picker';
 import { NectaryElement } from '../utils';
-import type { TSinchFileDrop } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class FileDrop extends NectaryElement {
     #private;
     constructor();
@@ -25,23 +24,3 @@ export declare class FileDrop extends NectaryElement {
     set invalid(isInvalid: boolean);
     get invalid(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-file-drop': TSinchFileDrop;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-file-drop': NectaryComponentVanilla<'sinch-file-drop'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
-        }
-    }
-}

package/file-drop/index.js

@@ -1,11 +1,13 @@
-import '../text';
-import '../file-picker';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}#wrapper.drop.invalid{background-color:var(--sinch-comp-file-drop-color-invalid-background-active)}#wrapper.drop.invalid::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-active);border-width:2px}#wrapper.drop.invalid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-invalid-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
-import { areFilesAccepted, areItemsAccepted, doFilesSatisfySize } from './utils';
-const template = document.createElement('template');
+import "../text/index.js";
+import "../file-picker/index.js";
+import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getBooleanAttribute, getAttribute, getIntegerAttribute, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { areItemsAccepted, areFilesAccepted, doFilesSatisfySize } from "./utils.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class FileDrop extends NectaryElement {
+class FileDrop extends NectaryElement {
   #$filePicker;
   #$dropArea;
   #$placeholder;
@@ -14,130 +16,126 @@ export class FileDrop extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$dropArea = shadowRoot.querySelector('#wrapper');
-    this.#$placeholder = shadowRoot.querySelector('#placeholder');
-    this.#$filePicker = shadowRoot.querySelector('#file-picker');
+    this.#$dropArea = shadowRoot.querySelector("#wrapper");
+    this.#$placeholder = shadowRoot.querySelector("#placeholder");
+    this.#$filePicker = shadowRoot.querySelector("#file-picker");
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
-    this.addEventListener('dragenter', this.#onDragEnter, options);
-    this.addEventListener('dragleave', this.#onDragLeave, options);
-    this.addEventListener('dragover', this.#onDragOver, options);
-    this.addEventListener('drop', this.#onDrop, options);
-    this.#$filePicker.addEventListener('-change', this.#onFilePickerChange, options);
-    this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid, options);
+    const { signal } = this.#controller;
+    const options = { signal };
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-invalid", this.#onInvalidReactHandler, options);
+    this.addEventListener("dragenter", this.#onDragEnter, options);
+    this.addEventListener("dragleave", this.#onDragLeave, options);
+    this.addEventListener("dragover", this.#onDragOver, options);
+    this.addEventListener("drop", this.#onDrop, options);
+    this.#$filePicker.addEventListener("-change", this.#onFilePickerChange, options);
+    this.#$filePicker.addEventListener("-invalid", this.#onFilePickerInvalid, options);
   }
   disconnectedCallback() {
     this.#controller.abort();
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
+    return [
+      "accept",
+      "multiple",
+      "placeholder",
+      "disabled",
+      "invalid",
+      "size"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'multiple':
-        {
-          updateAttribute(this.#$filePicker, 'multiple', newVal);
-          break;
-        }
-      case 'accept':
-        {
-          updateAttribute(this.#$filePicker, 'accept', newVal);
-          break;
-        }
-      case 'placeholder':
-        {
-          this.#$placeholder.textContent = newVal;
-          break;
-        }
-      case 'disabled':
-        {
-          this.#setDragEffect(false);
-          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
-          break;
-        }
-      case 'invalid':
-        {
-          updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
-          break;
-        }
-      case 'size':
-        {
-          updateAttribute(this.#$filePicker, 'size', newVal);
-          break;
-        }
+      case "multiple": {
+        updateAttribute(this.#$filePicker, "multiple", newVal);
+        break;
+      }
+      case "accept": {
+        updateAttribute(this.#$filePicker, "accept", newVal);
+        break;
+      }
+      case "placeholder": {
+        this.#$placeholder.textContent = newVal;
+        break;
+      }
+      case "disabled": {
+        this.#setDragEffect(false);
+        updateBooleanAttribute(this, "disabled", isAttrTrue(newVal));
+        break;
+      }
+      case "invalid": {
+        updateBooleanAttribute(this, "invalid", isAttrTrue(newVal));
+        break;
+      }
+      case "size": {
+        updateAttribute(this.#$filePicker, "size", newVal);
+        break;
+      }
     }
   }
   set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
+    updateBooleanAttribute(this, "multiple", isMultiple);
   }
   get multiple() {
-    return getBooleanAttribute(this, 'multiple');
+    return getBooleanAttribute(this, "multiple");
   }
   set accept(value) {
-    updateAttribute(this, 'accept', value);
+    updateAttribute(this, "accept", value);
   }
   get accept() {
-    return getAttribute(this, 'accept');
+    return getAttribute(this, "accept");
   }
   get size() {
-    return getIntegerAttribute(this, 'size', null);
+    return getIntegerAttribute(this, "size", null);
   }
   set size(value) {
-    updateAttribute(this, 'size', value);
+    updateAttribute(this, "size", value);
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set placeholder(value) {
-    updateAttribute(this, 'placeholder', value);
+    updateAttribute(this, "placeholder", value);
   }
   get placeholder() {
-    return getAttribute(this, 'placeholder', '');
+    return getAttribute(this, "placeholder", "");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set invalid(isInvalid) {
-    updateBooleanAttribute(this, 'invalid', isInvalid);
+    updateBooleanAttribute(this, "invalid", isInvalid);
   }
   get invalid() {
-    return getBooleanAttribute(this, 'invalid');
+    return getBooleanAttribute(this, "invalid");
   }
-  #setDragEffect(shouldEnable) {
-    let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  #setDragEffect(shouldEnable, isValid = false) {
     const isElementEnabled = !this.disabled;
     if (shouldEnable) {
       if (isElementEnabled) {
-        setClass(this.#$dropArea, 'drop', true);
-        setClass(this.#$dropArea, 'valid', isValid);
-        setClass(this.#$dropArea, 'invalid', !isValid);
+        setClass(this.#$dropArea, "drop", true);
+        setClass(this.#$dropArea, "valid", isValid);
+        setClass(this.#$dropArea, "invalid", !isValid);
       }
     } else {
-      setClass(this.#$dropArea, 'drop', false);
-      setClass(this.#$dropArea, 'valid', false);
-      setClass(this.#$dropArea, 'invalid', false);
+      setClass(this.#$dropArea, "drop", false);
+      setClass(this.#$dropArea, "valid", false);
+      setClass(this.#$dropArea, "invalid", false);
     }
   }
-  #onDragEnter = e => {
+  #onDragEnter = (e) => {
     e.stopPropagation();
     e.preventDefault();
     const items = e.dataTransfer?.items;
@@ -148,16 +146,16 @@ export class FileDrop extends NectaryElement {
     }
     this.#setDragEffect(true, isValidItems);
   };
-  #onDragLeave = e => {
+  #onDragLeave = (e) => {
     e.stopPropagation();
     e.preventDefault();
     this.#setDragEffect(false);
   };
-  #onDragOver = e => {
+  #onDragOver = (e) => {
     e.stopPropagation();
     e.preventDefault();
   };
-  #onDrop = e => {
+  #onDrop = (e) => {
     e.stopPropagation();
     e.preventDefault();
     this.#setDragEffect(false);
@@ -172,41 +170,48 @@ export class FileDrop extends NectaryElement {
       return;
     }
     if (!this.multiple && dt.files.length > 1) {
-      this.#dispatchInvalidEvent('multiple');
+      this.#dispatchInvalidEvent("multiple");
       return;
     }
     const files = Array.from(dt.files);
     if (!areFilesAccepted(files, this.accept)) {
-      this.#dispatchInvalidEvent('accept');
+      this.#dispatchInvalidEvent("accept");
       return;
     }
     if (!doFilesSatisfySize(files, this.size)) {
-      this.#dispatchInvalidEvent('size');
+      this.#dispatchInvalidEvent("size");
       return;
     }
     this.#dispatchChangeEvent(files);
   };
-  #onFilePickerChange = e => {
+  #onFilePickerChange = (e) => {
     this.#dispatchChangeEvent(e.detail);
   };
-  #onFilePickerInvalid = e => {
+  #onFilePickerInvalid = (e) => {
     this.#dispatchInvalidEvent(e.detail);
   };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
-  #onInvalidReactHandler = e => {
-    getReactEventHandler(this, 'on-invalid')?.(e);
+  #onInvalidReactHandler = (e) => {
+    getReactEventHandler(this, "on-invalid")?.(e);
   };
   #dispatchChangeEvent(files) {
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: files
-    }));
+    this.dispatchEvent(
+      new CustomEvent("-change", {
+        detail: files
+      })
+    );
   }
   #dispatchInvalidEvent(type) {
-    this.dispatchEvent(new CustomEvent('-invalid', {
-      detail: type
-    }));
+    this.dispatchEvent(
+      new CustomEvent("-invalid", {
+        detail: type
+      })
+    );
   }
 }
-defineCustomElement('sinch-file-drop', FileDrop);
+defineCustomElement("sinch-file-drop", FileDrop);
+export {
+  FileDrop
+};