@nectary/components 4.12.1 → 5.0.0

package/file-drop/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchFileDropInvalidType = 'accept' | 'multiple' | 'size';
 export type TSinchFileDropProps = {
     /** Allows to choose multiple files */
@@ -47,3 +47,23 @@ 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,51 +1,56 @@
-export const areFilesAccepted = (files, accept) => {
+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;
     });
   });
 };
-export const areItemsAccepted = (item, accept) => {
+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;
     });
   });
 };
-export const doFilesSatisfySize = (files, size) => {
+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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/file-picker/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-file-picker");

package/file-picker/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchFilePicker } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class FilePicker extends NectaryElement {
     #private;
     constructor();
@@ -15,23 +14,3 @@ 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,9 +1,11 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class FilePicker extends NectaryElement {
+class FilePicker extends NectaryElement {
   #$input;
   #$targetSlot;
   #controller = null;
@@ -11,19 +13,17 @@ export 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,46 +31,44 @@ export 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;
-          }
-          updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
-          break;
-        }
-      case 'accept':
-        {
-          updateAttribute(this.#$input, 'accept', newVal);
-          break;
+      case "multiple": {
+        if (isAttrEqual(oldVal, newVal)) {
+          return;
         }
+        updateBooleanAttribute(this.#$input, "multiple", isAttrTrue(newVal));
+        break;
+      }
+      case "accept": {
+        updateAttribute(this.#$input, "accept", newVal);
+        break;
+      }
     }
   }
   set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
+    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();
@@ -80,22 +78,29 @@ export 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);
+defineCustomElement("sinch-file-picker", FilePicker);
+export {
+  FilePicker
+};

package/file-picker/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchFilePickerInvalidType = 'size';
 export type TSinchFilePickerProps = {
     /** Allows to choose multiple files */
@@ -20,3 +20,23 @@ 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,8 +1,11 @@
-export const doFilesSatisfySize = (files, size) => {
+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/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/file-status/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-file-status");

package/file-status/index.d.ts

@@ -2,8 +2,8 @@ import '../spinner';
 import '../icon';
 import '../text';
 import { NectaryElement } from '../utils';
-import type { TSinchFileStatusType, TSinchFileStatus } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+import type { TSinchFileStatusType } from './types';
+export * from './types';
 export declare class FileStatus extends NectaryElement {
     #private;
     constructor();
@@ -16,23 +16,3 @@ 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,12 +1,13 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class FileStatus extends NectaryElement {
+class FileStatus extends NectaryElement {
   #$filename;
   #$contentSlot;
   #controller = null;
@@ -14,7 +15,7 @@ export 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() {
@@ -23,7 +24,11 @@ export 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() {
@@ -32,31 +37,37 @@ export 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);
+defineCustomElement("sinch-file-status", FileStatus);
+export {
+  FileStatus
+};

package/file-status/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchFileStatusType = 'pending' | 'loading' | 'progress' | 'success' | 'error';
 export type TSinchFileStatusProps = {
     /** File status type */
@@ -32,3 +32,23 @@ 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 +1,4 @@
-export const typeValues = ['pending', 'loading', 'progress', 'success', 'error'];
+const typeValues = ["pending", "loading", "progress", "success", "error"];
+export {
+  typeValues
+};

package/flag/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/flag/global/index.js

@@ -0,0 +1,2 @@
+import { defineCustomElement } from "../../utils/element.js";
+defineCustomElement("sinch-flag");

package/flag/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchFlag } from './types';
-import type { NectaryComponentVanilla, NectaryComponentReact } from '../types';
+export * from './types';
 export declare class Flag extends NectaryElement {
     #private;
     constructor();
@@ -11,23 +10,3 @@ 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,15 +1,16 @@
-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');
+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");
 template.innerHTML = templateHTML;
-export class Flag extends NectaryElement {
+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();
@@ -19,23 +20,22 @@ export 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,4 +44,7 @@ export class Flag extends NectaryElement {
     this.#$img.src = getFlagUrl(this, this.code);
   }
 }
-defineCustomElement('sinch-flag', Flag);
+defineCustomElement("sinch-flag", Flag);
+export {
+  Flag
+};