@nectary/components 0.36.1 → 0.38.0

package/alert/index.js

@@ -12,7 +12,7 @@ import '../icons/report';
 import '../icons/info';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:0 16px;box-sizing:border-box;width:100%;height:48px}#text{color:var(--sinch-color-stormy-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}#text{color:var(--sinch-color-stormy-500);flex:1;min-width:0}#icon-error,#icon-info,#icon-warn{display:none}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/avatar-badge/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 
 import { defineCustomElement, getAttribute, NectaryElement, setClass, updateAttribute } from '../utils';
-const templateHTML = '<style>#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#text{width:var(--sinch-avatar-badge-size);height:var(--sinch-avatar-badge-size);border:1px solid var(--sinch-color-snow-100);border-radius:calc(var(--sinch-avatar-badge-size)/ 2);text-align:center;box-sizing:border-box;color:var(--sinch-color-snow-100);font:var(--sinch-avatar-badge-font);background-color:var(--sinch-color-raspberry-500)}#text.long{width:fit-content;padding:0 calc(var(--sinch-avatar-badge-size)/ 4)}</style><div id="text"></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-avatar-badge', (_$text = new WeakMap(), class extends NectaryElement {

package/avatar-status/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#circle{width:10px;height:10px;border:1px solid var(--sinch-color-snow-100);border-radius:50%;box-sizing:border-box}:host([color=grey]) #circle{background-color:var(--sinch-color-snow-600)}:host([color=yellow]) #circle{background-color:var(--sinch-color-honey-500)}:host([color=red]) #circle{background-color:var(--sinch-color-raspberry-500)}:host([color=green]) #circle{background-color:var(--sinch-color-grass-400)}</style><div id="circle"></div>';
 import { assertColor, colorValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/button/types.d.ts

@@ -9,8 +9,11 @@ export declare type TSinchButtonElement = HTMLElement & {
     disabled: boolean;
     /** Small */
     small: boolean;
+    /** Click event */
     addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
     addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
     addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
     /** Type */
     setAttribute(attr: 'type', value: TSinchButtonType): void;
@@ -32,7 +35,10 @@ export declare type TSinchButtonReact = TSinchElementReact<TSinchButtonElement>
     disabled?: boolean;
     /** Small */
     small?: boolean;
+    /** Click event handler */
     'on-click'?: (e: CustomEvent<void>) => void;
+    /** Focus event handler */
     'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur event handler */
     'on-blur'?: (e: CustomEvent<void>) => void;
 };

package/chat-avatar/index.js

@@ -9,7 +9,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../avatar';
 import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}sinch-avatar{display:block}</style><sinch-avatar background="blue" size="l"></sinch-avatar>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-chat-avatar', (_$avatar = new WeakMap(), class extends NectaryElement {

package/dialog/index.js

@@ -16,7 +16,7 @@ import '../icon-button';
 import '../icons/close';
 import '../stop-events';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{font:var(--sinch-font-title-m);color:var(--sinch-color-text-default);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><span id="caption"></span><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {

package/dropdown-text-option/index.js

@@ -7,7 +7,7 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 import '../icons/check';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 

package/field/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchFieldElement, TSinchFieldReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-field': TSinchFieldReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-field': TSinchFieldElement;
+    }
+}

package/field/index.js

@@ -0,0 +1,144 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$label, _$optionalText, _$additionalText, _$invalidText, _$inputSlot, _onLabelClick;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><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');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$inputSlot = new WeakMap(), _onLabelClick = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$optionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$additionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$invalidText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$inputSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onLabelClick, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$inputSlot).assignedElements()[0]?.focus?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
+
+    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
+
+    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+
+    _classPrivateFieldSet(this, _$inputSlot, shadowRoot.querySelector('slot[name="input"]'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+  }
+
+  static get observedAttributes() {
+    return ['label', 'optionaltext', 'additionaltext', 'invalidtext'];
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+
+  get optionalText() {
+    return getAttribute(this, 'optionaltext', null);
+  }
+
+  set additionalText(value) {
+    updateAttribute(this, 'additionaltext', value);
+  }
+
+  get additionalText() {
+    return getAttribute(this, 'additionaltext', null);
+  }
+
+  set invalidText(value) {
+    updateAttribute(this, 'invalidtext', value);
+  }
+
+  get invalidText() {
+    return getAttribute(this, 'invalidtext', null);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          break;
+        }
+
+      case 'optionaltext':
+        {
+          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          break;
+        }
+
+      case 'additionaltext':
+        {
+          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
+          break;
+        }
+
+      case 'invalidtext':
+        {
+          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+}));

package/field/types.d.ts

@@ -0,0 +1,35 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFieldElement = HTMLElement & {
+    /** Label */
+    label: string;
+    /** Optional text */
+    optionalText: string | null;
+    /** Additional text */
+    additionalText: string | null;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText: string | null;
+    /** Disabled */
+    disabled: boolean;
+    /** Label */
+    setAttribute(name: 'label', value: string): void;
+    /** Optional text */
+    setAttribute(name: 'optionaltext', value: string): void;
+    /** Additional text */
+    setAttribute(name: 'additionaltext', value: string): void;
+    /** Invalid text, controls the overall invalid state of the text field */
+    setAttribute(name: 'invalidtext', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export declare type TSinchFieldReact = TSinchElementReact<TSinchFieldElement> & {
+    /** Label that shows in UI */
+    label: string;
+    /** Optional text */
+    optionalText?: string;
+    /** Additional text */
+    additionalText?: string;
+    /** Invalid text, controls the overall invalid state of the text field */
+    invalidText?: string;
+    /** Disabled */
+    disabled?: boolean;
+};

package/field/types.js

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

package/file-drop/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../file-picker';
+import type { TSinchFileDropElement, TSinchFileDropReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-drop': TSinchFileDropReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-drop': TSinchFileDropElement;
+    }
+}

package/file-drop/index.js

@@ -0,0 +1,320 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$filePicker, _$dropArea, _$placeholder, _setDragEffect, _onDragEnter, _onDragLeave, _onDragOver, _onDrop, _onFilePickerChange, _onFilePickerInvalid, _onChangeReactHandler, _onInvalidReactHandler, _dispatchChangeEvent, _dispatchInvalidEvent;
+
+function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
+import '../text';
+import '../file-picker';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, 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-shape-radius-m);background-color:var(--sinch-color-background-grey)}#wrapper.drop.valid{background-color:var(--sinch-color-background-blue)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-color-stormy-100);border-radius:var(--sinch-shape-radius-m);pointer-events:none}#placeholder{align-self:center;text-align:center}:host([invalid]) #wrapper::after{border-color:var(--sinch-color-text-invalid);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid::after{border-color:var(--sinch-color-aqua-400);border-width:2px}#wrapper.drop #placeholder{color:var(--sinch-color-text-muted)}:host([disabled]) #wrapper #placeholder{color:var(--sinch-color-stormy-100)}:host([disabled]) #wrapper{background-color:var(--sinch-color-snow-100)}:host([disabled]) #wrapper::after{border-color:var(--sinch-color-stormy-100);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, doFilesSatisfySize } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-drop', (_$filePicker = new WeakMap(), _$dropArea = new WeakMap(), _$placeholder = new WeakMap(), _setDragEffect = new WeakSet(), _onDragEnter = new WeakMap(), _onDragLeave = new WeakMap(), _onDragOver = new WeakMap(), _onDrop = new WeakMap(), _onFilePickerChange = new WeakMap(), _onFilePickerInvalid = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), _dispatchChangeEvent = new WeakSet(), _dispatchInvalidEvent = new WeakSet(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchInvalidEvent);
+
+    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
+
+    _classPrivateMethodInitSpec(this, _setDragEffect);
+
+    _classPrivateFieldInitSpec(this, _$filePicker, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$dropArea, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$placeholder, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragEnter, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+        const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
+        const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, true, hasTypes || hasItems);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragLeave, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDragOver, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onDrop, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+        if (this.disabled) {
+          return;
+        }
+
+        const dt = e.dataTransfer;
+
+        if (dt === null) {
+          return;
+        }
+
+        if (dt.files.length === 0) {
+          return;
+        }
+
+        if (!this.multiple && dt.files.length > 1) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'multiple');
+
+          return;
+        }
+
+        const files = Array.from(dt.files);
+
+        if (!areFilesAccepted(files, this.accept)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'accept');
+
+          return;
+        }
+
+        if (!doFilesSatisfySize(files, this.size)) {
+          _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, 'size');
+
+          return;
+        }
+
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, files);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerChange, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onFilePickerInvalid, {
+      writable: true,
+      value: e => {
+        _classPrivateMethodGet(this, _dispatchInvalidEvent, _dispatchInvalidEvent2).call(this, e.detail);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-change')?.(e);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInvalidReactHandler, {
+      writable: true,
+      value: e => {
+        getReactEventHandler(this, 'on-invalid')?.(e);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$dropArea, shadowRoot.querySelector('#wrapper'));
+
+    _classPrivateFieldSet(this, _$placeholder, shadowRoot.querySelector('#placeholder'));
+
+    _classPrivateFieldSet(this, _$filePicker, shadowRoot.querySelector('#file-picker'));
+  }
+
+  connectedCallback() {
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.addEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.addEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.addEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.addEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).addEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    this.removeEventListener('dragenter', _classPrivateFieldGet(this, _onDragEnter));
+    this.removeEventListener('dragleave', _classPrivateFieldGet(this, _onDragLeave));
+    this.removeEventListener('dragover', _classPrivateFieldGet(this, _onDragOver));
+    this.removeEventListener('drop', _classPrivateFieldGet(this, _onDrop));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-change', _classPrivateFieldGet(this, _onFilePickerChange));
+
+    _classPrivateFieldGet(this, _$filePicker).removeEventListener('-invalid', _classPrivateFieldGet(this, _onFilePickerInvalid));
+  }
+
+  static get observedAttributes() {
+    return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'multiple', newVal);
+          break;
+        }
+
+      case 'accept':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'accept', newVal);
+          break;
+        }
+
+      case 'placeholder':
+        {
+          _classPrivateFieldGet(this, _$placeholder).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+
+          _classPrivateMethodGet(this, _setDragEffect, _setDragEffect2).call(this, false);
+
+          break;
+        }
+
+      case 'invalid':
+        {
+          updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'size':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$filePicker), 'size', newVal);
+          break;
+        }
+    }
+  }
+
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+
+  set accept(value) {
+    updateAttribute(this, 'accept', value);
+  }
+
+  get accept() {
+    return getAttribute(this, 'accept', null);
+  }
+
+  get size() {
+    return getIntegerAttribute(this, 'size', null);
+  }
+
+  set size(value) {
+    updateAttribute(this, 'size', value);
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set invalid(isInvalid) {
+    updateBooleanAttribute(this, 'invalid', isInvalid);
+  }
+
+  get invalid() {
+    return getBooleanAttribute(this, 'invalid');
+  }
+
+}));
+
+function _setDragEffect2(shouldEnable) {
+  let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const isElementEnabled = !this.disabled;
+
+  if (shouldEnable) {
+    if (isElementEnabled) {
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', true);
+      setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', isValid);
+    }
+  } else {
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'drop', false);
+    setClass(_classPrivateFieldGet(this, _$dropArea), 'valid', false);
+  }
+}
+
+function _dispatchChangeEvent2(files) {
+  this.dispatchEvent(new CustomEvent('-change', {
+    detail: files
+  }));
+}
+
+function _dispatchInvalidEvent2(type) {
+  this.dispatchEvent(new CustomEvent('-invalid', {
+    detail: type
+  }));
+}