@nectary/components 2.8.7 → 2.9.0

package/emoji-picker/types.d.ts

@@ -1,26 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TEmoji = {
-    emoji: string;
-    code: string;
-    label: string;
-    skins?: TEmoji[];
-    tone: number | number[];
-};
-export type TEmojiGroup = {
-    name: string;
-    emojis: TEmoji[];
-};
-export type TSinchEmojiPickerElement = HTMLElement & {
-    readonly skinToneButtonRect: TRect;
-    readonly searchInputRect: TRect;
-    readonly searchClearButtonRect: TRect;
-    nthSkinToneRect(index: number): TRect | null;
-    nthTabRect(index: number): TRect | null;
-    nthEmojiRect(index: number): TRect | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-};
-export type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
-    /** Change value handler */
-    'on-change': (e: CustomEvent<string>) => void;
-};

package/emoji-picker/types.js

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

package/field/index.d.ts

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

package/field/index.js

@@ -1,120 +0,0 @@
-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');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-field', class extends NectaryElement {
-  #$label;
-  #$optionalText;
-  #$additionalText;
-  #$invalidText;
-  #$inputSlot;
-  #$tooltipWrapper;
-  #$tooltipSlot;
-  #controller = null;
-  constructor() {
-    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.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
-    this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
-    this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
-  }
-  connectedCallback() {
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
-    this.shouldShowTopSection();
-    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'];
-  }
-  shouldShowTopSection() {
-    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));
-          break;
-        }
-    }
-    this.shouldShowTopSection();
-  }
-  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');
-  }
-  set additionalText(value) {
-    updateAttribute(this, 'additionaltext', value);
-  }
-  get additionalText() {
-    return getAttribute(this, 'additionaltext');
-  }
-  set invalidText(value) {
-    updateAttribute(this, 'invalidtext', value);
-  }
-  get invalidText() {
-    return getAttribute(this, 'invalidtext');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  #onLabelClick = () => {
-    getFirstSlotElement(this.#$inputSlot)?.focus?.();
-  };
-  #onTooltipSlotChange = () => {
-    setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
-  };
-});

package/field/types.d.ts

@@ -1,35 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchFieldElement = HTMLElement & {
-    /** Label */
-    label: string | null;
-    /** 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 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

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

package/file-drop/index.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1,205 +0,0 @@
-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)}: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, doFilesSatisfySize } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-file-drop', class extends NectaryElement {
-  #$filePicker;
-  #$dropArea;
-  #$placeholder;
-  #controller = null;
-  constructor() {
-    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');
-  }
-  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);
-  }
-  disconnectedCallback() {
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    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;
-        }
-    }
-  }
-  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');
-  }
-  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');
-  }
-  #setDragEffect(shouldEnable) {
-    let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    const isElementEnabled = !this.disabled;
-    if (shouldEnable) {
-      if (isElementEnabled) {
-        setClass(this.#$dropArea, 'drop', true);
-        setClass(this.#$dropArea, 'valid', isValid);
-      }
-    } else {
-      setClass(this.#$dropArea, 'drop', false);
-      setClass(this.#$dropArea, 'valid', false);
-    }
-  }
-  #onDragEnter = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    const hasTypes = e.dataTransfer?.types?.includes('Files') === true;
-    const hasItems = e.dataTransfer?.items != null && e.dataTransfer.items.length > 0;
-    this.#setDragEffect(true, hasTypes || hasItems);
-  };
-  #onDragLeave = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    this.#setDragEffect(false);
-  };
-  #onDragOver = e => {
-    e.stopPropagation();
-    e.preventDefault();
-  };
-  #onDrop = e => {
-    e.stopPropagation();
-    e.preventDefault();
-    this.#setDragEffect(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) {
-      this.#dispatchInvalidEvent('multiple');
-      return;
-    }
-    const files = Array.from(dt.files);
-    if (!areFilesAccepted(files, this.accept)) {
-      this.#dispatchInvalidEvent('accept');
-      return;
-    }
-    if (!doFilesSatisfySize(files, this.size)) {
-      this.#dispatchInvalidEvent('size');
-      return;
-    }
-    this.#dispatchChangeEvent(files);
-  };
-  #onFilePickerChange = e => {
-    this.#dispatchChangeEvent(e.detail);
-  };
-  #onFilePickerInvalid = e => {
-    this.#dispatchInvalidEvent(e.detail);
-  };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
-  };
-  #onInvalidReactHandler = e => {
-    getReactEventHandler(this, 'on-invalid')?.(e);
-  };
-  #dispatchChangeEvent(files) {
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: files
-    }));
-  }
-  #dispatchInvalidEvent(type) {
-    this.dispatchEvent(new CustomEvent('-invalid', {
-      detail: type
-    }));
-  }
-});

package/file-drop/types.d.ts

@@ -1,50 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
-export type TSinchFileDropElement = HTMLElement & {
-    /** Allows to choose multiple files */
-    multiple: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept: string | null;
-    /** Max file size in bytes */
-    size: number | null;
-    /** Disabled state */
-    disabled: boolean;
-    /** Invalid state */
-    invalid: boolean;
-    /** Placeholder */
-    placeholder: string;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
-    /** Invalid event */
-    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFileDropInvalidType>) => void): void;
-    /** Allows to choose multiple files */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    setAttribute(name: 'accept', value: string): void;
-    /** Max file size in bytes */
-    setAttribute(name: 'size', value: string): void;
-    /** Placeholder */
-    setAttribute(name: 'placeholder', value: string): void;
-    /** Invalid state */
-    setAttribute(name: 'invalid', value: ''): void;
-    /** Disabled state */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchFileDropReact = TSinchElementReact<TSinchFileDropElement> & {
-    /** Allows to choose multiple files */
-    multiple?: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept?: string;
-    /** Max file size in bytes */
-    size?: number;
-    /** Disabled state */
-    disabled?: boolean;
-    /** Invalid state */
-    invalid?: boolean;
-    /** Placeholder */
-    placeholder: string;
-    /** Change value handler */
-    'on-change': (e: CustomEvent<File[]>) => void;
-    /** Invalid handler */
-    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
-};

package/file-drop/types.js

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

package/file-drop/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const areFilesAccepted: (files: File[], accept: string | null) => boolean;
-export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-drop/utils.js

@@ -1,31 +0,0 @@
-export const areFilesAccepted = (files, accept) => {
-  if (accept === null) {
-    return true;
-  }
-  const acceptValues = accept.split(/\s*,\s*/);
-  return files.every(file => {
-    return acceptValues.some(acceptValue => {
-      if (acceptValue.startsWith('.')) {
-        return file.name.endsWith(acceptValue);
-      }
-      if (acceptValue === 'image/*') {
-        return file.type.startsWith('image/');
-      }
-      if (acceptValue === 'video/*') {
-        return file.type.startsWith('video/');
-      }
-      if (acceptValue === 'audio/*') {
-        return file.type.startsWith('audio/');
-      }
-      return acceptValue === file.type;
-    });
-  });
-};
-export const doFilesSatisfySize = (files, size) => {
-  if (size === null || size <= 0) {
-    return true;
-  }
-  return files.every(file => {
-    return file.size <= size;
-  });
-};

package/file-picker/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchFilePickerElement, TSinchFilePickerReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-file-picker': TSinchFilePickerReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-file-picker': TSinchFilePickerElement;
-    }
-}

package/file-picker/index.js

@@ -1,103 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
-import { doFilesSatisfySize } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-file-picker', class extends NectaryElement {
-  #$input;
-  #$targetSlot;
-  #$target = null;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$input = document.createElement('input');
-    this.#$input.type = 'file';
-    this.#$targetSlot = shadowRoot.querySelector('slot');
-  }
-  connectedCallback() {
-    this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange, options);
-    this.#$input.addEventListener('change', this.#onInputChange, options);
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.addEventListener('-invalid', this.#onInvalidReactHandler, options);
-    this.#onTargetSlotChange();
-  }
-  disconnectedCallback() {
-    this.#controller.abort();
-    this.#controller = null;
-    this.#$target = null;
-  }
-  static get observedAttributes() {
-    return ['accept', 'multiple'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'multiple':
-        {
-          if (isAttrEqual(oldVal, newVal)) {
-            return;
-          }
-          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
-          break;
-        }
-      case 'accept':
-        {
-          updateAttribute(this.#$input, 'accept', 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');
-  }
-  get size() {
-    return getIntegerAttribute(this, 'size', null);
-  }
-  set size(value) {
-    updateAttribute(this, 'size', value);
-  }
-  #onTargetSlotChange = () => {
-    this.#$target?.removeEventListener('-click', this.#onTargetClick);
-    this.#$target = getFirstSlotElement(this.#$targetSlot, true);
-    this.#$target?.addEventListener('-click', this.#onTargetClick);
-  };
-  #onTargetClick = () => {
-    this.#$input.click();
-  };
-  #onInputChange = () => {
-    if (this.#$input.files === null) {
-      return;
-    }
-    const files = Array.from(this.#$input.files);
-    this.#$input.value = '';
-    if (!doFilesSatisfySize(files, this.size)) {
-      this.dispatchEvent(new CustomEvent('-invalid', {
-        detail: 'size'
-      }));
-      return;
-    }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: files
-    }));
-  };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
-  };
-  #onInvalidReactHandler = e => {
-    getReactEventHandler(this, 'on-invalid')?.(e);
-  };
-});

package/file-picker/types.d.ts

@@ -1,32 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchFilePickerInvalidType = 'size';
-export type TSinchFilePickerElement = HTMLElement & {
-    /** Allows to choose multiple files */
-    multiple: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept: string | null;
-    /** Max file size in bytes */
-    size: number | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<File[]>) => void): void;
-    /** Invalid event */
-    addEventListener(type: '-invalid', listener: (e: CustomEvent<TSinchFilePickerInvalidType>) => void): void;
-    /** Allows to choose multiple files */
-    setAttribute(name: 'multiple', value: ''): void;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    setAttribute(name: 'accept', value: string): void;
-    /** Max file size in bytes */
-    setAttribute(name: 'size', value: string): void;
-};
-export type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerElement> & {
-    /** Allows to choose multiple files */
-    multiple?: boolean;
-    /** [A unique file type specifier](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers) */
-    accept?: string;
-    /** Max file size in bytes */
-    size?: number;
-    /** Change value handler */
-    'on-change': (e: CustomEvent<File[]>) => void;
-    /** Invalid handler */
-    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
-};

package/file-picker/types.js

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

package/file-picker/utils.d.ts

@@ -1 +0,0 @@
-export declare const doFilesSatisfySize: (files: File[], size: number | null) => boolean;

package/file-picker/utils.js

@@ -1,8 +0,0 @@
-export const doFilesSatisfySize = (files, size) => {
-  if (size === null || size <= 0) {
-    return true;
-  }
-  return files.every(file => {
-    return file.size <= size;
-  });
-};