@nectary/components 2.12.0 → 2.12.2

package/lib/cjs/field/index.js

@@ -0,0 +1,122 @@
+"use strict";
+
+var _utils = require('../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;
+(0, _utils.defineCustomElement)('sinch-field', class extends _utils.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 = (0, _utils.getAttribute)(this, 'label');
+    const optionaltext = (0, _utils.getAttribute)(this, 'optionaltext');
+    (0, _utils.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+            break;
+          }
+          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+    }
+    this.shouldShowTopSection();
+  }
+  set label(value) {
+    (0, _utils.updateAttribute)(this, 'label', value);
+  }
+  get label() {
+    return (0, _utils.getAttribute)(this, 'label');
+  }
+  set optionalText(value) {
+    (0, _utils.updateAttribute)(this, 'optionaltext', value);
+  }
+  get optionalText() {
+    return (0, _utils.getAttribute)(this, 'optionaltext');
+  }
+  set additionalText(value) {
+    (0, _utils.updateAttribute)(this, 'additionaltext', value);
+  }
+  get additionalText() {
+    return (0, _utils.getAttribute)(this, 'additionaltext');
+  }
+  set invalidText(value) {
+    (0, _utils.updateAttribute)(this, 'invalidtext', value);
+  }
+  get invalidText() {
+    return (0, _utils.getAttribute)(this, 'invalidtext');
+  }
+  set disabled(isDisabled) {
+    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return (0, _utils.getBooleanAttribute)(this, 'disabled');
+  }
+  #onLabelClick = () => {
+    (0, _utils.getFirstSlotElement)(this.#$inputSlot)?.focus?.();
+  };
+  #onTooltipSlotChange = () => {
+    (0, _utils.setClass)(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
+  };
+});

package/lib/cjs/field/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/file-drop/index.js

@@ -0,0 +1,207 @@
+"use strict";
+
+require('../text');
+require('../file-picker');
+var _utils = require('../utils');
+var _utils2 = require('./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>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-file-drop', class extends _utils.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'multiple':
+        {
+          (0, _utils.updateAttribute)(this.#$filePicker, 'multiple', newVal);
+          break;
+        }
+      case 'accept':
+        {
+          (0, _utils.updateAttribute)(this.#$filePicker, 'accept', newVal);
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$placeholder.textContent = newVal;
+          break;
+        }
+      case 'disabled':
+        {
+          this.#setDragEffect(false);
+          (0, _utils.updateBooleanAttribute)(this, 'disabled', (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'invalid':
+        {
+          (0, _utils.updateBooleanAttribute)(this, 'invalid', (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'size':
+        {
+          (0, _utils.updateAttribute)(this.#$filePicker, 'size', newVal);
+          break;
+        }
+    }
+  }
+  set multiple(isMultiple) {
+    (0, _utils.updateBooleanAttribute)(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return (0, _utils.getBooleanAttribute)(this, 'multiple');
+  }
+  set accept(value) {
+    (0, _utils.updateAttribute)(this, 'accept', value);
+  }
+  get accept() {
+    return (0, _utils.getAttribute)(this, 'accept');
+  }
+  get size() {
+    return (0, _utils.getIntegerAttribute)(this, 'size', null);
+  }
+  set size(value) {
+    (0, _utils.updateAttribute)(this, 'size', value);
+  }
+  set text(value) {
+    (0, _utils.updateAttribute)(this, 'text', value);
+  }
+  get text() {
+    return (0, _utils.getAttribute)(this, 'text', '');
+  }
+  set placeholder(value) {
+    (0, _utils.updateAttribute)(this, 'placeholder', value);
+  }
+  get placeholder() {
+    return (0, _utils.getAttribute)(this, 'placeholder', '');
+  }
+  set disabled(isDisabled) {
+    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
+  }
+  get disabled() {
+    return (0, _utils.getBooleanAttribute)(this, 'disabled');
+  }
+  set invalid(isInvalid) {
+    (0, _utils.updateBooleanAttribute)(this, 'invalid', isInvalid);
+  }
+  get invalid() {
+    return (0, _utils.getBooleanAttribute)(this, 'invalid');
+  }
+  #setDragEffect(shouldEnable) {
+    let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    const isElementEnabled = !this.disabled;
+    if (shouldEnable) {
+      if (isElementEnabled) {
+        (0, _utils.setClass)(this.#$dropArea, 'drop', true);
+        (0, _utils.setClass)(this.#$dropArea, 'valid', isValid);
+      }
+    } else {
+      (0, _utils.setClass)(this.#$dropArea, 'drop', false);
+      (0, _utils.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 (!(0, _utils2.areFilesAccepted)(files, this.accept)) {
+      this.#dispatchInvalidEvent('accept');
+      return;
+    }
+    if (!(0, _utils2.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 => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+  #onInvalidReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-invalid')?.(e);
+  };
+  #dispatchChangeEvent(files) {
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: files
+    }));
+  }
+  #dispatchInvalidEvent(type) {
+    this.dispatchEvent(new CustomEvent('-invalid', {
+      detail: type
+    }));
+  }
+});

package/lib/cjs/file-drop/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/file-drop/utils.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.doFilesSatisfySize = exports.areFilesAccepted = void 0;
+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;
+    });
+  });
+};
+exports.areFilesAccepted = areFilesAccepted;
+const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+  return files.every(file => {
+    return file.size <= size;
+  });
+};
+exports.doFilesSatisfySize = doFilesSatisfySize;

package/lib/cjs/file-picker/index.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _utils = require('../utils');
+var _utils2 = require('./utils');
+const templateHTML = '<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-file-picker', class extends _utils.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 ((0, _utils.isAttrEqual)(oldVal, newVal)) {
+            return;
+          }
+          (0, _utils.updateBooleanAttribute)(this.#$input, 'multiple', (0, _utils.isAttrTrue)(newVal));
+          break;
+        }
+      case 'accept':
+        {
+          (0, _utils.updateAttribute)(this.#$input, 'accept', newVal);
+          break;
+        }
+    }
+  }
+  set multiple(isMultiple) {
+    (0, _utils.updateBooleanAttribute)(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return (0, _utils.getBooleanAttribute)(this, 'multiple');
+  }
+  set accept(value) {
+    (0, _utils.updateAttribute)(this, 'accept', value);
+  }
+  get accept() {
+    return (0, _utils.getAttribute)(this, 'accept');
+  }
+  get size() {
+    return (0, _utils.getIntegerAttribute)(this, 'size', null);
+  }
+  set size(value) {
+    (0, _utils.updateAttribute)(this, 'size', value);
+  }
+  #onTargetSlotChange = () => {
+    this.#$target?.removeEventListener('-click', this.#onTargetClick);
+    this.#$target = (0, _utils.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 (!(0, _utils2.doFilesSatisfySize)(files, this.size)) {
+      this.dispatchEvent(new CustomEvent('-invalid', {
+        detail: 'size'
+      }));
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: files
+    }));
+  };
+  #onChangeReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
+  };
+  #onInvalidReactHandler = e => {
+    (0, _utils.getReactEventHandler)(this, 'on-invalid')?.(e);
+  };
+});

package/lib/cjs/file-picker/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/file-picker/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.doFilesSatisfySize = void 0;
+const doFilesSatisfySize = (files, size) => {
+  if (size === null || size <= 0) {
+    return true;
+  }
+  return files.every(file => {
+    return file.size <= size;
+  });
+};
+exports.doFilesSatisfySize = doFilesSatisfySize;

package/lib/cjs/file-status/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+require('../spinner');
+require('../icon');
+require('../text');
+var _utils = require('../utils');
+var _utils2 = require('./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>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-file-status', class extends _utils.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 (0, _utils.getLiteralAttribute)(this, _utils2.typeValues, 'type');
+  }
+  set type(value) {
+    (0, _utils.updateLiteralAttribute)(this, _utils2.typeValues, 'type', value);
+  }
+  get filename() {
+    return (0, _utils.getAttribute)(this, 'filename', '');
+  }
+  set filename(value) {
+    (0, _utils.updateAttribute)(this, 'filename', value);
+  }
+  static get observedAttributes() {
+    return ['filename'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'filename':
+        {
+          this.#$filename.textContent = newVal;
+          break;
+        }
+    }
+  }
+  #onContentSlotChange = () => {
+    (0, _utils.updateBooleanAttribute)(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
+  };
+});

package/lib/cjs/file-status/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/file-status/utils.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.typeValues = void 0;
+const typeValues = exports.typeValues = ['pending', 'loading', 'progress', 'success', 'error'];

package/lib/cjs/flag/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _utils = require('../utils');
+var _utils2 = require('./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"/>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-flag', class extends _utils.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) {
+    (0, _utils.updateAttribute)(this, 'code', value);
+  }
+  get code() {
+    return (0, _utils.getAttribute)(this, 'code', '');
+  }
+  #updateCode() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    this.#$img.src = (0, _utils2.getFlagUrl)(this, this.code);
+  }
+});

package/lib/cjs/flag/types.js

@@ -0,0 +1 @@
+"use strict";

package/lib/cjs/flag/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFlagUrl = void 0;
+var _utils = require('../utils');
+let flagUrl = null;
+const getFlagUrl = (root, code) => {
+  if (code === null || code.length === 0) {
+    return '';
+  }
+  if (flagUrl === null) {
+    flagUrl = (0, _utils.getCssVar)(root, '--sinch-flag-src-url');
+    if (flagUrl !== null) {
+      flagUrl = flagUrl.replaceAll('"', '').trim();
+    }
+  }
+  if (flagUrl === null) {
+    return '';
+  }
+  return flagUrl.replace('%s', code);
+};
+exports.getFlagUrl = getFlagUrl;

package/lib/cjs/grid/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _utils = require('../utils');
+const templateHTML = '<style>:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:32px;--sinch-comp-grid-num-columns:12;display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-num-columns),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter);grid-row-gap:var(--sinch-comp-grid-gutter);padding:var(--sinch-comp-grid-margin)}@media only screen and (max-width:1439px){:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:24px;--sinch-comp-grid-num-columns:12}}@media only screen and (max-width:1023px){:host{--sinch-comp-grid-gutter:24px;--sinch-comp-grid-margin:24px;--sinch-comp-grid-num-columns:8}}@media only screen and (max-width:767px){:host{--sinch-comp-grid-gutter:16px;--sinch-comp-grid-margin:16px;--sinch-comp-grid-num-columns:4}}</style><slot name="item"></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+(0, _utils.defineCustomElement)('sinch-grid', class extends _utils.NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+});

package/lib/cjs/grid/types.js

@@ -0,0 +1 @@
+"use strict";