@nectary/components 4.12.0 → 4.12.1

package/file-drop/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
 export type TSinchFileDropProps = {
     /** Allows to choose multiple files */
@@ -47,23 +47,3 @@ export type TSinchFileDrop = {
 };
 export type TSinchFileDropElement = NectaryComponentVanillaByType<TSinchFileDrop>;
 export type TSinchFileDropReact = NectaryComponentReactByType<TSinchFileDrop>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-file-drop': TSinchFileDrop;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-file-drop': NectaryComponentVanilla<'sinch-file-drop'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-file-drop': NectaryComponentReact<'sinch-file-drop'>;
-        }
-    }
-}

package/file-drop/types.js

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

package/file-drop/utils.js

@@ -1,56 +1,51 @@
-const areFilesAccepted = (files, accept) => {
+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 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 === 'image/*') {
+        return file.type.startsWith('image/');
       }
-      if (acceptValue === "video/*") {
-        return file.type.startsWith("video/");
+      if (acceptValue === 'video/*') {
+        return file.type.startsWith('video/');
       }
-      if (acceptValue === "audio/*") {
-        return file.type.startsWith("audio/");
+      if (acceptValue === 'audio/*') {
+        return file.type.startsWith('audio/');
       }
       return acceptValue === file.type;
     });
   });
 };
-const areItemsAccepted = (item, accept) => {
+export const areItemsAccepted = (item, accept) => {
   if (accept === null) {
     return true;
   }
   const acceptValues = accept.split(/\s*,\s*/);
-  return item.every((file) => {
-    return acceptValues.some((acceptValue) => {
-      if (acceptValue === "image/*") {
-        return file.type.startsWith("image/");
+  return item.every(file => {
+    return acceptValues.some(acceptValue => {
+      if (acceptValue === 'image/*') {
+        return file.type.startsWith('image/');
       }
-      if (acceptValue === "video/*") {
-        return file.type.startsWith("video/");
+      if (acceptValue === 'video/*') {
+        return file.type.startsWith('video/');
       }
-      if (acceptValue === "audio/*") {
-        return file.type.startsWith("audio/");
+      if (acceptValue === 'audio/*') {
+        return file.type.startsWith('audio/');
       }
       return acceptValue === file.type;
     });
   });
 };
-const doFilesSatisfySize = (files, size) => {
+export const doFilesSatisfySize = (files, size) => {
   if (size === null || size <= 0) {
     return true;
   }
-  return files.every((file) => {
+  return files.every(file => {
     return file.size <= size;
   });
-};
-export {
-  areFilesAccepted,
-  areItemsAccepted,
-  doFilesSatisfySize
-};
+};

package/file-picker/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchFilePicker } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class FilePicker extends NectaryElement {
     #private;
     constructor();
@@ -14,3 +15,23 @@ export declare class FilePicker extends NectaryElement {
     get size(): number | null;
     set size(value: number | null);
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-file-picker': TSinchFilePicker;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-picker': NectaryComponentVanilla<'sinch-file-picker'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
+        }
+    }
+}

package/file-picker/index.js

@@ -1,11 +1,9 @@
-import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, getBooleanAttribute, getAttribute, getIntegerAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-import { doFilesSatisfySize } from "./utils.js";
-const templateHTML = "<style>\n:host {\n  display: inline-block;\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<slot></slot>\n";
-const template = document.createElement("template");
+import { defineCustomElement, getAttribute, getBooleanAttribute, 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;
-class FilePicker extends NectaryElement {
+export class FilePicker extends NectaryElement {
   #$input;
   #$targetSlot;
   #controller = null;
@@ -13,17 +11,19 @@ class FilePicker extends NectaryElement {
     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");
+    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);
+    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() {
@@ -31,44 +31,46 @@ class FilePicker extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ["accept", "multiple"];
+    return ['accept', 'multiple'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "multiple": {
-        if (isAttrEqual(oldVal, newVal)) {
-          return;
+      case 'multiple':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            return;
+          }
+          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
+          break;
+        }
+      case 'accept':
+        {
+          updateAttribute(this.#$input, 'accept', newVal);
+          break;
         }
-        updateBooleanAttribute(this.#$input, "multiple", isAttrTrue(newVal));
-        break;
-      }
-      case "accept": {
-        updateAttribute(this.#$input, "accept", newVal);
-        break;
-      }
     }
   }
   set multiple(isMultiple) {
-    updateBooleanAttribute(this, "multiple", isMultiple);
+    updateBooleanAttribute(this, 'multiple', isMultiple);
   }
   get multiple() {
-    return getBooleanAttribute(this, "multiple");
+    return getBooleanAttribute(this, 'multiple');
   }
   set accept(value) {
-    updateAttribute(this, "accept", value);
+    updateAttribute(this, 'accept', value);
   }
   get accept() {
-    return getAttribute(this, "accept");
+    return getAttribute(this, 'accept');
   }
   get size() {
-    return getIntegerAttribute(this, "size", null);
+    return getIntegerAttribute(this, 'size', null);
   }
   set size(value) {
-    updateAttribute(this, "size", value);
+    updateAttribute(this, 'size', value);
   }
   #onTargetSlotChange = () => {
-    this.#$targetSlot.removeEventListener("click", this.#onTargetClick);
-    this.#$targetSlot.addEventListener("click", this.#onTargetClick);
+    this.#$targetSlot.removeEventListener('click', this.#onTargetClick);
+    this.#$targetSlot.addEventListener('click', this.#onTargetClick);
   };
   #onTargetClick = () => {
     this.#$input.click();
@@ -78,29 +80,22 @@ class FilePicker extends NectaryElement {
       return;
     }
     const files = Array.from(this.#$input.files);
-    this.#$input.value = "";
+    this.#$input.value = '';
     if (!doFilesSatisfySize(files, this.size)) {
-      this.dispatchEvent(
-        new CustomEvent("-invalid", {
-          detail: "size"
-        })
-      );
+      this.dispatchEvent(new CustomEvent('-invalid', {
+        detail: 'size'
+      }));
       return;
     }
-    this.dispatchEvent(
-      new CustomEvent("-change", {
-        detail: files
-      })
-    );
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: files
+    }));
   };
-  #onChangeReactHandler = (e) => {
-    getReactEventHandler(this, "on-change")?.(e);
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
   };
-  #onInvalidReactHandler = (e) => {
-    getReactEventHandler(this, "on-invalid")?.(e);
+  #onInvalidReactHandler = e => {
+    getReactEventHandler(this, 'on-invalid')?.(e);
   };
 }
-defineCustomElement("sinch-file-picker", FilePicker);
-export {
-  FilePicker
-};
+defineCustomElement('sinch-file-picker', FilePicker);

package/file-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFilePickerInvalidType = 'size';
 export type TSinchFilePickerProps = {
     /** Allows to choose multiple files */
@@ -20,23 +20,3 @@ export type TSinchFilePicker = {
 };
 export type TSinchFilePickerElement = NectaryComponentVanillaByType<TSinchFilePicker>;
 export type TSinchFilePickerReact = NectaryComponentReactByType<TSinchFilePicker>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-file-picker': TSinchFilePicker;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-file-picker': NectaryComponentVanilla<'sinch-file-picker'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-file-picker': NectaryComponentReact<'sinch-file-picker'>;
-        }
-    }
-}

package/file-picker/types.js

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

package/file-picker/utils.js

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

package/file-status/index.d.ts

@@ -2,8 +2,8 @@ import '../spinner';
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchFileStatusType } from './types';
-export * from './types';
+import type { TSinchFileStatusType, TSinchFileStatus } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class FileStatus extends NectaryElement {
     #private;
     constructor();
@@ -16,3 +16,23 @@ export declare class FileStatus extends NectaryElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-file-status': TSinchFileStatus;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-file-status': NectaryComponentVanilla<'sinch-file-status'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
+        }
+    }
+}

package/file-status/index.js

@@ -1,13 +1,12 @@
-import "../spinner/index.js";
-import "../icon/index.js";
-import "../text/index.js";
-import { getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, updateBooleanAttribute } from "../utils/dom.js";
-import { defineCustomElement, NectaryElement } from "../utils/element.js";
-import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 12px 16px;\n    box-sizing: border-box;\n    min-height: 48px;\n    min-width: 148px;\n    border-radius: var(--sinch-comp-file-status-shape-radius);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-error-background);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-success-background);\n  }\n\n  :host([type="pending"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-pending-background);\n  }\n\n  :host([type="progress"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-progress-background);\n  }\n\n  :host([type="loading"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-loading-background);\n  }\n\n  #content-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    min-height: 24px;\n    margin-left: 16px;\n  }\n\n  :host([type="error"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-error-text);\n  }\n\n  :host([type="success"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-success-text);\n  }\n\n  :host([type="pending"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-pending-text);\n  }\n\n  :host([type="progress"]) #filename {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-file-status-color-progress-text\n      );\n  }\n\n  :host([type="loading"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-loading-text);\n  }\n\n  #action {\n    display: flex;\n    gap: 4px;\n    height: 32px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n  }\n\n  #icon-pending,\n  #icon-progress,\n  #icon-success,\n  #icon-error,\n  #icon-loading {\n    display: none;\n  }\n\n  #icon-pending {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-pending-icon);\n  }\n\n  #icon-success {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-success-icon);\n  }\n\n  #icon-progress {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-file-status-color-progress-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-error-icon);\n  }\n\n  #icon-loading {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-loading-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="progress"]) #icon-progress,\n  :host([type="error"]) #icon-error,\n  :host([type="pending"]) #icon-pending,\n  :host([type="loading"]) #icon-loading {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-spinner id="icon-loading" size="m"></sinch-spinner>\n  <sinch-icon icons-version="2" name="fa-clipboard-question"\n    id="icon-pending"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="content-wrapper">\n    <sinch-text id="filename" type="m" ellipsis></sinch-text>\n    <slot name="content"></slot>\n  </div>\n  <div id="action">\n    <slot name="action"></slot>\n  </div>\n</div>\n';
-const template = document.createElement("template");
+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 icons-version="2" name="fa-clipboard-question" id="icon-pending"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></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;
-class FileStatus extends NectaryElement {
+export class FileStatus extends NectaryElement {
   #$filename;
   #$contentSlot;
   #controller = null;
@@ -15,7 +14,7 @@ class FileStatus extends NectaryElement {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$filename = shadowRoot.querySelector("#filename");
+    this.#$filename = shadowRoot.querySelector('#filename');
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
   connectedCallback() {
@@ -24,11 +23,7 @@ class FileStatus extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.#$contentSlot.addEventListener(
-      "slotchange",
-      this.#onContentSlotChange,
-      options
-    );
+    this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange, options);
     this.#onContentSlotChange();
   }
   disconnectedCallback() {
@@ -37,37 +32,31 @@ class FileStatus extends NectaryElement {
     this.#controller = null;
   }
   get type() {
-    return getLiteralAttribute(this, typeValues, "type");
+    return getLiteralAttribute(this, typeValues, 'type');
   }
   set type(value) {
-    updateLiteralAttribute(this, typeValues, "type", value);
+    updateLiteralAttribute(this, typeValues, 'type', value);
   }
   get filename() {
-    return getAttribute(this, "filename", "");
+    return getAttribute(this, 'filename', '');
   }
   set filename(value) {
-    updateAttribute(this, "filename", value);
+    updateAttribute(this, 'filename', value);
   }
   static get observedAttributes() {
-    return ["filename"];
+    return ['filename'];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case "filename": {
-        this.#$filename.textContent = newVal;
-        break;
-      }
+      case 'filename':
+        {
+          this.#$filename.textContent = newVal;
+          break;
+        }
     }
   }
   #onContentSlotChange = () => {
-    updateBooleanAttribute(
-      this.#$filename,
-      "emphasized",
-      this.#$contentSlot.assignedElements().length > 0
-    );
+    updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
   };
 }
-defineCustomElement("sinch-file-status", FileStatus);
-export {
-  FileStatus
-};
+defineCustomElement('sinch-file-status', FileStatus);

package/file-status/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
 export type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
 export type TSinchFileStatusProps = {
     /** File status type */
@@ -32,23 +32,3 @@ export type TSinchFileStatus = {
 };
 export type TSinchFileStatusElement = NectaryComponentVanillaByType<TSinchFileStatus>;
 export type TSinchFileStatusReact = NectaryComponentReactByType<TSinchFileStatus>;
-declare global {
-    interface NectaryComponentMap {
-        'sinch-file-status': TSinchFileStatus;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-file-status': NectaryComponentVanilla<'sinch-file-status'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-file-status': NectaryComponentReact<'sinch-file-status'>;
-        }
-    }
-}

package/file-status/types.js

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

package/file-status/utils.js

@@ -1,4 +1 @@
-const typeValues = ["pending", "loading", "progress", "success", "error"];
-export {
-  typeValues
-};
+export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];

package/flag/index.d.ts

@@ -1,5 +1,6 @@
 import { NectaryElement } from '../utils';
-export * from './types';
+import type { TSinchFlag } from './types';
+import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
 export declare class Flag extends NectaryElement {
     #private;
     constructor();
@@ -10,3 +11,23 @@ export declare class Flag extends NectaryElement {
     set code(value: string);
     get code(): string;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-flag': TSinchFlag;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-flag': NectaryComponentVanilla<'sinch-flag'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-flag': NectaryComponentReact<'sinch-flag'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-flag': NectaryComponentReact<'sinch-flag'>;
+        }
+    }
+}

package/flag/index.js

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