@nectary/components 0.37.0 → 0.39.0

package/file-drop/types.d.ts

@@ -0,0 +1,50 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
+export declare 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 declare 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/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,37 @@
+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,12 @@
+import '../dropdown';
+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,170 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$input, _$targetSlot, _$target, _onTargetSlotChange, _onTargetClick, _onInputChange, _onChangeReactHandler, _onInvalidReactHandler;
+
+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 '../dropdown';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, getIntegerAttribute, getReactEventHandler, 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', (_$input = new WeakMap(), _$targetSlot = new WeakMap(), _$target = new WeakMap(), _onTargetSlotChange = new WeakMap(), _onTargetClick = new WeakMap(), _onInputChange = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onInvalidReactHandler = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$input, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$targetSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$target, {
+      writable: true,
+      value: null
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetSlotChange, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+
+        _classPrivateFieldSet(this, _$target, getFirstSlotElement(_classPrivateFieldGet(this, _$targetSlot)));
+
+        _classPrivateFieldGet(this, _$target)?.addEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onTargetClick, {
+      writable: true,
+      value: () => {
+        _classPrivateFieldGet(this, _$input).click();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onInputChange, {
+      writable: true,
+      value: () => {
+        if (_classPrivateFieldGet(this, _$input).files === null) {
+          return;
+        }
+
+        const files = Array.from(_classPrivateFieldGet(this, _$input).files);
+
+        if (!doFilesSatisfySize(files, this.size)) {
+          this.dispatchEvent(new CustomEvent('-invalid', {
+            detail: 'size'
+          }));
+          return;
+        }
+
+        this.dispatchEvent(new CustomEvent('-change', {
+          detail: files
+        }));
+      }
+    });
+
+    _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, _$input, document.createElement('input'));
+
+    _classPrivateFieldGet(this, _$input).type = 'file';
+
+    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$targetSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+
+    _classPrivateFieldGet(this, _$input).addEventListener('change', _classPrivateFieldGet(this, _onInputChange));
+
+    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.addEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+
+    _classPrivateFieldGet(this, _onTargetSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$targetSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onTargetSlotChange));
+
+    _classPrivateFieldGet(this, _$input).removeEventListener('change', _classPrivateFieldGet(this, _onInputChange));
+
+    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.removeEventListener('-invalid', _classPrivateFieldGet(this, _onInvalidReactHandler));
+    _classPrivateFieldGet(this, _$target)?.removeEventListener('-click', _classPrivateFieldGet(this, _onTargetClick));
+
+    _classPrivateFieldSet(this, _$target, null);
+  }
+
+  static get observedAttributes() {
+    return ['accept', 'multiple'];
+  }
+
+  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);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (newVal === oldVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'multiple':
+        {
+          updateBooleanAttribute(_classPrivateFieldGet(this, _$input), 'multiple', isAttrTrue(newVal));
+          break;
+        }
+
+      case 'accept':
+        {
+          updateAttribute(_classPrivateFieldGet(this, _$input), 'accept', newVal);
+          break;
+        }
+    }
+  }
+
+}));

package/file-picker/types.d.ts

@@ -0,0 +1,32 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFilePickerInvalidType = 'size';
+export declare 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 declare 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/utils.d.ts

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

package/file-picker/utils.js

@@ -0,0 +1,9 @@
+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,17 @@
+import '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+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,100 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$filename, _$contentSlot, _onContentSlotChange;
+
+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 '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+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;background-color:var(--sinch-color-background-grey);border-radius:var(--sinch-shape-radius-m)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;margin-left:16px;color:var(--sinch-color-stormy-500)}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#action{height:24px}#action ::slotted(*){position:relative;top:50%;transform:translateY(-50%)}: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;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([type=success]) #icon-success{--sinch-color-icon:var(--sinch-color-success-500)}:host([type=error]) #icon-error{--sinch-color-icon:var(--sinch-color-error-500)}</style><div id="wrapper"><sinch-spinner id="icon-loading" type="medium"></sinch-spinner><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-icon-pending-actions id="icon-pending"></sinch-icon-pending-actions><sinch-icon-text-snippet id="icon-progress"></sinch-icon-text-snippet><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 { assertType, typeValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-file-status', (_$filename = new WeakMap(), _$contentSlot = new WeakMap(), _onContentSlotChange = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$filename, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$contentSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onContentSlotChange, {
+      writable: true,
+      value: () => {
+        updateBooleanAttribute(_classPrivateFieldGet(this, _$filename), 'emphasized', _classPrivateFieldGet(this, _$contentSlot).assignedElements().length > 0);
+      }
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$filename, shadowRoot.querySelector('#filename'));
+
+    _classPrivateFieldSet(this, _$contentSlot, shadowRoot.querySelector('slot[name="content"]'));
+  }
+
+  connectedCallback() {
+    _classPrivateFieldGet(this, _$contentSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
+
+    _classPrivateFieldGet(this, _onContentSlotChange).call(this);
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$contentSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onContentSlotChange));
+  }
+
+  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', 'type'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'filename':
+        {
+          _classPrivateFieldGet(this, _$filename).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+}));

package/file-status/types.d.ts

@@ -0,0 +1,18 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
+export declare 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 declare type TSinchFileStatusReact = TSinchElementReact<TSinchFileStatusElement> & {
+    /** File status type */
+    type: TSinchFileStatusType;
+    /** File name */
+    filename: string;
+};

package/file-status/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchFileStatusType } from './types';
+export declare const typeValues: readonly TSinchFileStatusType[];
+declare type TAssertType = (value: string | null) => asserts value is TSinchFileStatusType;
+export declare const assertType: TAssertType;
+export {};

package/file-status/utils.js

@@ -0,0 +1,6 @@
+export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-file-status: invalid type attribute: ${value}`);
+  }
+};

package/icons-branded/easytouse/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchIconBrandedElement, TSinchIconBrandedReact } from '../types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-icon-branded-easytouse': TSinchIconBrandedReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-icon-branded-easytouse': TSinchIconBrandedElement;
+    }
+}

package/icons-branded/easytouse/index.js

@@ -0,0 +1,4 @@
+import { defineCustomElement } from '../../utils';
+import { createIconClass } from '../create-icon-class';
+const templateHTML = '<svg viewBox="0 0 48 48" aria-hidden="true"><path d="M25.99 18.104c.517-.276 1.178-.112 1.477.366l5.41 8.66c.299.479.122 1.09-.396 1.366-.517.276-1.18.113-1.478-.366l-5.41-8.66c-.299-.478-.121-1.09.396-1.366Zm0 7.396c-.3-.478-.961-.642-1.479-.366-.517.276-.695.888-.396 1.366l2.705 4.33c.299.478.96.642 1.478.366s.695-.888.396-1.366L25.99 25.5Zm4.176 7.383c-.299-.479-.96-.643-1.478-.366-.517.276-.695.887-.396 1.366l1.082 1.732c.299.478.96.642 1.478.366.517-.276.695-.888.396-1.366l-1.082-1.732ZM19.04 24.088c-.299-.478-.96-.642-1.478-.366-.518.277-.695.888-.396 1.366l3.246 5.197c.299.478.96.642 1.478.366.517-.276.695-.888.396-1.366l-3.246-5.197Zm13.83 13.125c.3.478.122 1.09-.395 1.366-.518.276-1.18.112-1.478-.366-.299-.479-.122-1.09.396-1.366.517-.276 1.18-.113 1.478.366Zm1.234-6.119c.517-.276.695-.887.396-1.366-.299-.478-.96-.642-1.478-.366s-.695.888-.396 1.366c.299.479.96.642 1.478.366Z"/><path class="accent" d="M15.405 9.527a1 1 0 0 0-1.413.914l.035 10.526a1 1 0 0 0 1.544.835l2.964-1.922 2.876 4.45L25.017 22l-2.88-4.455 2.97-1.925a1 1 0 0 0-.131-1.75l-9.571-4.343Z"/></svg>';
+defineCustomElement('sinch-icon-branded-easytouse', createIconClass(templateHTML));

package/inline-alert/index.js

@@ -14,7 +14,7 @@ import '../icons/info';
 import '../title';
 import '../text';
 import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-alert-info-background);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500)}#text{color:var(--sinch-color-stormy-500);margin-top:4px}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}: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=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}: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)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s"></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:16px;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;width:100%}#body-wrapper{display:flex;flex-direction:column;align-items:flex-start;margin-left:8px;min-width:0;flex:1}#caption{color:var(--sinch-color-stormy-500);align-self:stretch}#text{color:var(--sinch-color-stormy-500);margin-top:4px;align-self:stretch}#text:empty{display:none}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}: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=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}: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)}#action{display:flex;margin-top:16px;min-width:0}#action.empty{display:none}#close{margin-left:16px}#close.empty{display:none}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><div id="body-wrapper"><sinch-title id="caption" level="3" type="s" ellipsis></sinch-title><sinch-text id="text" type="m"></sinch-text><div id="action"><slot name="action"></slot></div></div><div id="close"><slot name="close"></slot></div></div>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/inline-alert/types.d.ts

@@ -2,7 +2,7 @@ import type { TSinchElementReact } from '../types';
 export declare type TSinchInlineAlertType = 'info' | 'success' | 'warn' | 'error';
 export declare type TSinchInlineAlertElement = HTMLElement & {
     type: TSinchInlineAlertType;
-    text: string;
+    text: string | null;
     caption: string;
     setAttribute(name: 'type', value: TSinchInlineAlertType): void;
     setAttribute(name: 'text', value: string): void;
@@ -10,6 +10,6 @@ export declare type TSinchInlineAlertElement = HTMLElement & {
 };
 export declare type TSinchInlineAlertReact = TSinchElementReact<TSinchInlineAlertElement> & {
     type: TSinchInlineAlertType;
-    text: string;
+    text?: string;
     caption: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.37.0",
+  "version": "0.39.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/pagination/types.d.ts

@@ -14,6 +14,7 @@ export declare type TSinchPaginationElement = HTMLElement & {
 export declare type TSinchPaginationReact = TSinchElementReact<TSinchPaginationElement> & {
     value: number;
     max: number;
+    /** @deprecated */
     onChange?: (event: SyntheticEvent<TSinchPaginationElement, CustomEvent<number>>) => void;
     'on-change': (e: CustomEvent<number>) => void;
 };

package/progress/index.d.ts

@@ -0,0 +1,17 @@
+import '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import type { TSinchProgressElement, TSinchProgressReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-progress': TSinchProgressReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-progress': TSinchProgressElement;
+    }
+}

package/progress/index.js

@@ -0,0 +1,87 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$bar, _$text;
+
+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 '../spinner';
+import '../icons/check-circle';
+import '../icons/report';
+import '../icons/pending-actions';
+import '../icons/text-snippet';
+import '../text';
+import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttribute, getIntegerAttribute, getBooleanAttribute, attrValueToInteger } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$bar, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$text, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$bar, shadowRoot.querySelector('#bar'));
+
+    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'progressbar');
+  }
+
+  get value() {
+    return getIntegerAttribute(this, 'value', 0);
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get detailed() {
+    return getBooleanAttribute(this, 'detailed');
+  }
+
+  set detailed(isDetailed) {
+    updateBooleanAttribute(this, 'detailed', isDetailed);
+  }
+
+  static get observedAttributes() {
+    return ['value'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'value':
+        {
+          const int = attrValueToInteger(newVal, {
+            min: 0,
+            max: 100
+          });
+          const intCss = int === null ? '0%' : `${int}%`;
+          _classPrivateFieldGet(this, _$bar).style.width = intCss;
+          _classPrivateFieldGet(this, _$text).textContent = intCss;
+          this.setAttribute('valuenow', int !== null ? String(int) : '0');
+          break;
+        }
+    }
+  }
+
+}));