@nectary/components 2.4.0

package/file-drop/index.js

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

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

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

package/file-drop/utils.d.ts

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

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

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

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

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

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

package/file-picker/utils.d.ts

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

package/file-picker/utils.js

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

package/file-status/index.d.ts

@@ -0,0 +1,14 @@
+import '../spinner';
+import '../icon';
+import '../text';
+import type { TSinchFileStatusElement, TSinchFileStatusReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-status': TSinchFileStatusReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-status': TSinchFileStatusElement;
+    }
+}

package/file-status/index.js

@@ -0,0 +1,61 @@
+import '../spinner';
+import '../icon';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon id="icon-pending" name="pending_actions"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-progress" name="text_snippet"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+import { typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-status', class extends NectaryElement {
+  #$filename;
+  #$contentSlot;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$filename = shadowRoot.querySelector('#filename');
+    this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const options = {
+      signal: this.#controller.signal
+    };
+    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange, options);
+    this.#onContentSlotChange();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  get type() {
+    return getLiteralAttribute(this, typeValues, 'type');
+  }
+  set type(value) {
+    updateLiteralAttribute(this, typeValues, 'type', value);
+  }
+  get filename() {
+    return getAttribute(this, 'filename', '');
+  }
+  set filename(value) {
+    updateAttribute(this, 'filename', value);
+  }
+  static get observedAttributes() {
+    return ['filename'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'filename':
+        {
+          this.#$filename.textContent = newVal;
+          break;
+        }
+    }
+  }
+  #onContentSlotChange = () => {
+    updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
+  };
+});

package/file-status/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
+export type TSinchFileStatusElement = HTMLElement & {
+    /** File status type */
+    type: TSinchFileStatusType;
+    /** File name */
+    filename: string;
+    /** File status type */
+    setAttribute(name: 'type', value: TSinchFileStatusType): void;
+    /** File name */
+    setAttribute(name: 'filename', value: string): void;
+};
+export type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
+    /** File status type */
+    type: TSinchFileStatusType;
+    /** File name */
+    filename: string;
+};

package/file-status/types.js

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

package/file-status/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchFileStatusType } from './types';
+export declare const typeValues: readonly TSinchFileStatusType[];

package/file-status/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];

package/flag/index.d.ts

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

package/flag/index.js

@@ -0,0 +1,46 @@
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy"/>';
+import { getFlagUrl } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-flag', class extends NectaryElement {
+  #$img;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$img = shadowRoot.querySelector('#image');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#updateCode();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  static get observedAttributes() {
+    return ['code'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'code':
+        {
+          this.#$img.alt = newVal ?? '';
+          this.#updateCode();
+          break;
+        }
+    }
+  }
+  set code(value) {
+    updateAttribute(this, 'code', value);
+  }
+  get code() {
+    return getAttribute(this, 'code', '');
+  }
+  #updateCode() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    this.#$img.src = getFlagUrl(this, this.code);
+  }
+});

package/flag/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchFlagElement = HTMLElement & {
+    /** Flag country code */
+    code: string;
+    /** Flag country code */
+    setAttribute(code: 'name', value: string): void;
+};
+export type TSinchFlagReact = TSinchElementReact<TSinchFlagElement> & {
+    /** Flag country code */
+    code: string;
+};

package/flag/types.js

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

package/flag/utils.d.ts

@@ -0,0 +1 @@
+export declare const getFlagUrl: (root: Element, code: string | null) => string;

package/flag/utils.js

@@ -0,0 +1,17 @@
+import { getCssVar } from '../utils';
+let flagUrl = null;
+export const getFlagUrl = (root, code) => {
+  if (code === null || code.length === 0) {
+    return '';
+  }
+  if (flagUrl === null) {
+    flagUrl = getCssVar(root, '--sinch-flag-src-url');
+    if (flagUrl !== null) {
+      flagUrl = flagUrl.replaceAll('"', '').trim();
+    }
+  }
+  if (flagUrl === null) {
+    return '';
+  }
+  return flagUrl.replace('%s', code);
+};