@nectary/components 3.3.1 → 3.3.2

package/lib/cjs/field/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/lib/cjs/flag/utils.js

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

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

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